十七.什么是jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
//1.等待加載完成
// window.onload = function(){
//
// }
//等待頁(yè)面中所有的標(biāo)簽添加成功，就會(huì)觸發(fā)
// (function(){
console.log(document.getElementsByTagName('p')[0])
//2.獲取節(jié)點(diǎn)操作(選擇器)
//a.選擇器直接選中相應(yīng)的標(biāo)簽
//('標(biāo)簽選擇器') - 選擇網(wǎng)頁(yè)中所有的指定標(biāo)簽，返回的是jQuery對(duì)象，不是數(shù)組
//注意：如果選擇器同時(shí)選中了多個(gè)，返回值和選中一個(gè)的時(shí)候的類(lèi)型是一樣的。
// 可以通過(guò)結(jié)果直接對(duì)選中的所有標(biāo)簽一起操作
var divNodes = $('div')
console.log('==========',divNodes)
divNodes.css('color','red')
var div11Node = $('#div11')
console.log(div11Node)
console.log($('.cdiv1'))
console.log($('a,p'))
console.log($('#div2 a'))
//父子選擇器
console.log($('#div2>a')) //和后代選擇器效果一樣
console.log($('p+a')) //獲取緊跟著p標(biāo)簽的a標(biāo)簽
console.log($('#p1~*')) //獲取和id是p1的標(biāo)簽的后面的所有同級(jí)的標(biāo)簽
console.log($('div:first')) //第一個(gè)div標(biāo)簽
console.log($('p:last')) //最后一個(gè)p標(biāo)簽
console.log($('div *:first-child')) //找到所有div標(biāo)簽中的第一個(gè)子標(biāo)簽
//3.創(chuàng)建標(biāo)簽
//$('HTML標(biāo)簽語(yǔ)法')，例如：$('<div style="color:red">我是div</div>')
var imgNode = $('<img src="img/01.jpg"/>')
var divNode = $('<div style="background-color: yellow;width: 100px;height: 200px;"></div>')
//4.添加標(biāo)簽
/*
* 父標(biāo)簽.append(子標(biāo)簽) - 在父標(biāo)簽的最后添加子標(biāo)簽
* 父標(biāo)簽.prepend(子標(biāo)簽) - 在父標(biāo)簽的最前添加子標(biāo)簽
*/
$('body').append(imgNode)
$('body').prepend(divNode)
$('h1').before($('<h1 style="color: pink;">我是標(biāo)題0</h1>'))
$('h1').after($('<h2 style="color: blue;">我是標(biāo)題2</h2>'))
//5.刪除標(biāo)簽
//標(biāo)簽.empty() - 清空指定標(biāo)簽
//標(biāo)簽.remove() - 刪除指定標(biāo)簽
$('#div2').empty()
$('h1').remove()
//6.拷貝和替換(見(jiàn)手冊(cè))
})
</script>
</head>
<body>
<div id="">
你好
</div>
<p id="p0">我是段落0</p>
<a href="">百度0</a>
<div id="div1" class="cdiv1">
<p id="p1">我是段落</p>
<a href="">百度1</a>
<div id="div11">
我是div11
</div>
<h1>我是標(biāo)題1</h1>
<a href="">百度11</a>
</div>
<div id="div2">
<a href="">百度2</a>
我是div2
<p id="p2">我是段落2</p>
</div>
</body>
</html>
十八.jQuery屬性操作和樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
('img:gt(1)').attr('src') //獲取屬性的值的時(shí)候只獲取被選中標(biāo)簽中的第一個(gè)
console.log(text1)
console.log(('img').attr('title','圖片1')//修改和添加會(huì)針對(duì)所有選中的標(biāo)簽
//2.標(biāo)簽內(nèi)容屬性
//雙標(biāo)簽.html()
//雙標(biāo)簽.text()
//單標(biāo)簽.val()
//注意:上面的函數(shù)不傳參就是獲取值，傳參就是修改值
console.log($('p').html()) //全完整代碼
console.log($('p').text()) //只取文字
console.log($('input').val()) //單標(biāo)簽中的val值
$('p').html('我是新的段落')
$('input').val('請(qǐng)輸入賬號(hào)')
//3.class屬性 - HTML中一個(gè)標(biāo)簽可以有多個(gè)class值，多個(gè)值用空格隔開(kāi)
//標(biāo)簽.addClas(class值) - 給目標(biāo)簽添加class值
//標(biāo)簽.removeClass(class值) - 移出標(biāo)簽中指定的class值
$('div').addClass('w')
$('#div1').removeClass('c')
//4.樣式屬性
//a.獲取屬性值
//標(biāo)簽.css(樣式屬性名)-獲取樣式屬性值
var height = $('p').css('height')
console.log(height)
//b.修改和添加
//標(biāo)簽.css(樣式屬性名,值) - 修改屬性值
$('p').css('background-color','red')
//標(biāo)簽.css({屬性名:值,屬性名2:值2...}) - 同時(shí)設(shè)置多個(gè)屬性
$('p').css({
"color":"yellow",
"font-size":"30px"
})
// var pNode = document.getElementsByTagName('p')[0]
// pNode.style.height = '500px'
// console.log('高度:',pNode.style.height)
// console.log('寬度:',pNode.style.width)
//5.事件
//標(biāo)簽.on(事件名,回調(diào)函數(shù)) - 給標(biāo)簽綁定指定的事件(和js中的addEventLinsenner一樣)
//事件名不需要on
var ddf = true
$('button:first').on('mouseover',function(){
console.log(this)
//注意：this - js對(duì)象,可以直接只有js的屬性和方法
//$(this) - jQuery對(duì)象，可以使用jQuery對(duì)象的屬性和方法
//$(js對(duì)象) - 將js對(duì)象轉(zhuǎn)換成jQuery對(duì)象
//this.innerText = '進(jìn)入!'
if(ddf){
$(this).text('進(jìn)入~')
ddf = false
}
else{
$(this).text('修改')
ddf = true
}
})
//b.父標(biāo)簽.on(事件名,選擇器,回調(diào)函數(shù)) - 在父標(biāo)簽上添加事件，傳遞給選擇器對(duì)應(yīng)的子標(biāo)簽
//選擇器 - 前面標(biāo)簽的后代標(biāo)簽(子標(biāo)簽/子標(biāo)簽的子標(biāo)簽)
//事件是由子標(biāo)簽影響的 前面父標(biāo)簽點(diǎn)不了
$('#v01').on('click','.v011 .v0111',function(){
console.log(this)
})
})
</script>
<style type="text/css">
.b{
background-color: green;
}
.c{
color: red;
}
.h{
height: 100px;
}
.w{
width: 200px;
/*background-color: skyblue;*/
}
p{
height: 50px;
}
#v01,#v02{
width: 800px;
height: 200px;
background-color: orange;
}
#v02{
background-color: gold;
}
.v011{
width: 100px;
height: 100px;
background-color: saddlebrown;
margin-right: 10px;
float: left;
}
</style>
</head>
<body>
<div id="v01" class="">
<div id="v011" class="v011">
div1
<div class="v0111" style="width: 50px;height: 50px;background-color: grey;">
</div>
</div>
<div id="v012" class="v011">
div2
</div>
<div id="v013" class="v011">
div3
</div>
</div>
<div id="v02"></div>
<button>修改</button>
<div id="div1" class="b c">
div1
</div>
<div id="" class="c h">
div2
</div>
<div id="" class="b h">
div3
</div>
<p style="width: 300px;">我是段落<a href="">哈哈</a></p>
<a >我是超鏈接</a>
<img src="img/02.jpg"/ id="img1">
<input type="text" id="" value="請(qǐng)輸入..." />
<img src="img/03.jpg"/>
<img src="img/04.jpg"/>
<input type="text" id="" value="" />
</body>
</html>
十九.jQuery的動(dòng)態(tài)添加和刪除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
.fruit{
width: 150px;
height: 50px;
background-color: violet;
margin-bottom: 10px;
text-align: center;
line-height: 50px;
position: relative;
}
.fruit font{
position: absolute;
right: 10px;
color: white;
}
</style>
</head>
<body>
<div id="top">
</div>
<!--添加默認(rèn)顯示的結(jié)果-->
<script type="text/javascript">
var fruitArray = ['蘋(píng)果','菠蘿','西瓜','火龍果']
for(var x in fruitArray){
//去水果名
var fruitName = fruitArray[x]
//創(chuàng)建標(biāo)檢對(duì)象
var fruitNode = $("<div class='ruit'>"+fruitName+"</div>")
fruitNode.append($('<font>x</font>'))
$('#top').append(fruitNode)
}
</script>
<div id="bottom">
<input type="text" placeholder="水果"/>
<button>添加</button>
</div>
<!--添加新水果-->
<script type="text/javascript">
$('#bottom button').on('click',function(){
//獲取輸入框中的內(nèi)容
var newName = $('#bottom input').val()
//創(chuàng)建新標(biāo)簽
var newNode = $('<div class="fruit"></div>').text(newName)
newNode.append($('<font>x</font>'))
//添加
$('#top').prepend(newNode)
})
//刪除水果
$('#top').on('click','font',function(){
$(this).parent().remove()
})
//下面刪除的是默認(rèn)的 新添加的刪不了
// (this).parent().remove()
// })
</script>
</body>
</html>
20.Ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<button>刷新</button><br />
<script type="text/javascript">
//1.請(qǐng)求數(shù)據(jù)
function getData(){
var url = 'https://www.apiopen.top/satinApi'
$.get(url,{'type':'1','page':'1'},function(re){
//re就是請(qǐng)求結(jié)果
console.log(re)
var allData = re.data
for(var x in allData){
var data = allData[x]
// console.log(data)
var bimageuri = data.profile_image
var imgNode = ('body').append(imgNode)
}
})
}
//2.刷新
$('button').on('click',getData)
</script>
</body>
</html>
作者：2ez4ddf
鏈接：http://www.itdecent.cn/p/9887a086c38e
來(lái)源：簡(jiǎn)書(shū)
簡(jiǎn)書(shū)著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。
