1.什么是jQuery
- jQuery本質就是js，它是為了能夠更方便的使用js而封裝的一個庫
- js可以將任何內容轉換js對象，例如:document、節點、事件對象；jQuery提供的方法只支持jQuery對象
- 在jQuery中 $ 代表jQuery
-
$ ( )：創建jQuery對象的語法，例如：document（ js對象）； $(document)（ jQuery對象）
-
注意：如果想要使用jQuery必須先在head中導入jQuery的js文件
// 導入方法1：導入本地jQuery文件
<script type="text/javascript" src="js/jquery.min.js"></script>
// 導入方法2：導入文件地址（企業開發時常用）
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1
/jquery.min.js"></script>
2.ready方法
- 等待網頁中內容加載完成，和onload功能一樣
- 語法：
$(document).ready(function(){
頁面加載完成后才會執行的代碼
})
簡寫: //常用
$(function(){
頁面加載完成后才會執行的代碼
})
$(document).ready(function(){
pNode = document.getElementById('p1')
console.log(pNode)
})
簡寫：
$(function(){
pNode = document.getElementById('p1')
console.log(pNode)
})
3.節點操作
1）獲取節點
- 語法: $(選擇器)
- 說明: 選擇器 - 和CSS中的選擇器一樣
- 注意加引號的問題
1.1）普通選擇器:
- 和css一樣的
-
注意：遍歷jQ數組取出來的是js對象（JQuery對象可以理解為由1個或多個Js對象組成的數組）
var pNode = $('#p1')
console.log(pNode)
pNode.text('新的段落1')
pNodes = $('.cp1')
console.log(pNodes)
pNodes.text('新的段落2')
for(x=0;x<pNodes.length;x++){
const p = pNodes[x] // 遍歷取出來的是js對象
$(p).text(x)
}
pNode = $('div p')
console.log('===:',pNode)
1.2）其他特殊情況：
-
選擇器1>選擇器2：選中選擇器1中的選擇器2對應的直系子標簽
-
選擇器1+選擇器2：選中緊跟著選擇器1的選擇器2（選擇器1和選擇器2對應的標簽必須是兄弟關系）
-
選擇器1~選擇器2：選中離選擇器1最近的選擇器2（選擇器1和選擇器2對應的標簽必須是兄弟關系）
-
選擇器:first：第一個選擇器
-
選擇器:last：最后一個選擇器
-
選擇器 *:first-child：選中選擇器中第一個子標簽
pNode = $('div>p')
console.log('===:',pNode)
pNode = $('#p1 + div')
console.log('===:',pNode)
pNode = $('#p1~p')
console.log('===:',pNode)
pNode = $('p:first')
console.log('===:',pNode)
pNode = $('#div2>p:first')
console.log('===:',pNode)
pNode = $('#div2>p:last')
console.log('===:',pNode)
var xNode = $('#div2>*:first-child')
console.log('===:',xNode)
2）創建節點(標簽)
-
$(HTML代碼)：返回標簽對應的jQuery對象
$("<p id='p1'>我是一個段落</p>")
aNode = $("<a )
3）添加節點
-
jq節點1.append(jq節點2)：在節點1中的最后添加節點2
-
節點1.prepend(節點2)：在節點1的最前面插入節點2
-
節點1.before(節點2)：在節點1的前面插入節點2
-
節點1.after(節點2)：在節點1的后面插入節點2
//1)jq節點1.append(jq節點2) - 在節點1中的最后添加節點2
$('#box1').append(aNode)
$('#box1').append($('<img src="img/luffy.jpg"/>'))
//2)節點1.prepend(節點2) - 在節點1的最前面插入節點2
$('#box1').prepend($('<h1>我是標題1</h1>'))
//3)節點1.before(節點2) - 在節點1的前面插入節點2
$('#p1').before($('<p>我是段落0</p>'))
//4)節點1.after(節點2) - 在節點1的后面插入節點2
$('#p1').after($('<p>我是段落2</p>'))
4）刪除節點
-
jq對象.remove()：刪除指定節點
-
jq對象.empty()：清空指定節點
//1)jq對象.remove() - 刪除指定節點
$('#box1 p').remove()
//2)jq對象.empty() - 清空指定節點
$('#box1').empty()
//$('#box1 *').remove() # '#box1 *' 選中id是box1中所有的后代
4.屬性操作
1）標簽內容屬性
- innerHTML、innerText、value
-
雙標簽.html() - (相當于innerHTML)：節點.html() - 獲取節點內容； 節點.html(值) - 給節點內容賦值
-
雙標簽.text() - (相當于innerText)
-
單標簽.val() - (相當于value)
-
注意：上面的函數不傳參就是獲取值，傳參就是修改值
console.log($('#box2 #div1').html()) // 獲取
$('#box2 #div1').html('<a >我是超鏈接
</a>') // 添加
$('#box2 input').val('小明') // 添加
2）普通屬性
-
節點.attr（屬性名）：獲取指定節點指定屬性的值
-
節點.attr（屬性名，值）：修改指定節點指定屬性的值
console.log($('#box2 input').attr('type'))
$('#box2 input').attr('type', 'password')
3）class屬性
-
節點.addClass（值）：添加class屬性值
-
節點.removeClass（值）：移除指定的class值
$('#h1').addClass('c2')
$('#h1').removeClass('c1')
4）樣式屬性
- 獲取樣式屬性的值：節點.css（樣式屬性名）
- 修改樣式屬性的值：
修改單個：節點.css（樣式屬性名，值）
修改多個：節點.css（對象）= 節點.css（{屬性名1:值1, 屬性名2:值2，...}）
//1)獲取樣式屬性的值
//節點.css(樣式屬性名)
console.log($('#h1').css('color'))
//2)修改樣式屬性的值
//節點.css(樣式屬性名,值)
$('#h1').css('color', 'deeppink')
$('#h1').css('font-size', '30px')
//節點.css(對象) - 同時設置多種樣式
$('#h1').css({
'width':'300px',
'color':'blue',
'text-decoration': 'underline'
})
console.log($('#h1'))
5.事件綁定
1）直接綁定
-
節點.on（事件名，函數）：給節點綁定指定的事件，事件名不需要on，和js中的addEventLinsenner功能一樣
-
注意：函數中this是js對象，evt是jQuery對象
$('button').on('click', function(evt){
console.log(this)
console.log(evt)
//1）this是js對象
//====js代碼
if(this.innerText == '暫停'){
this.innerText = '播放'
}else{
this.innerText = '暫停'
}
//====jQuery代碼
if($(this).text() == '暫停'){
$(this).text('播放')
}else{
$(this).text('暫停')
}
// 2) evt是事件對象不是節點對象，所以獲取屬性的時候以對象獲取屬性的方式來獲取
console.log(evt.clientX, evt.clientY)
})
2）間接傳遞
-
父節點.on（事件名，選擇器，函數）：給指定節點綁定指定事件，并且讓節點中選擇器對應的子標簽對事件做出反應（即把事件綁定在父標簽上，但是是由子標簽做出反應）
- 在父標簽上添加事件，傳遞給選擇器對應的子標簽；選擇器：前面標簽（父節點）的后代標簽
- 函數中this是js對象，指向的是選擇器對應的子標簽
//錯誤示范:如果使用直接綁定的方式，新添加的標簽就不能綁定上對應的事件
/*
$('#box3 input').on('click', function(){
console.log(this)
alert(this.value+'被點擊')
})
$('#box3').append($('<input type="button" value="按鈕3"/>'))
*/
//選擇器input是#box3下的子標簽
$('#box3').on('click','input', function(){
console.log(this)
alert(this.value+'被點擊')
})
$('#box3').append($('<input type="button" value="按鈕3"/>'))
