一、jQuery介紹
1.什么是jQuery
jQuery本質(zhì)就是js，它是為了能夠更方便的使用js而封裝的一個庫
如果想要使用jQuery必須先導(dǎo)入jQuery的js文件
js可以將任何內(nèi)容轉(zhuǎn)換js對象，例如:document、節(jié)點(diǎn)、事件對象
jQuery提供的方法只支持jQuery對象
在jQuery中() -> 創(chuàng)建jQuery對象的語法
document -> js對象； $(document) -> jQuery對象
2.ready方法 - 等待網(wǎng)頁中內(nèi)容加載完成（ 和onload功能一樣）
頁面加載完成后才會執(zhí)行的代碼
})
簡寫:
$(function(){
頁面加載完成后才會執(zhí)行的代碼
})
3.DOM操作
1)獲取節(jié)點(diǎn)
語法: $(選擇器)
說明: 選擇器 - 和CSS中的選擇器一樣
( a).普通選擇器: 和css一樣的
b.其他特殊情況
選擇器1>選擇器2 - 選中選擇器中的選擇器2對應(yīng)的直系子標(biāo)簽
選擇器1+選擇器2 - 選中緊跟著選擇器1的選擇器2(選擇器1和選擇器2對應(yīng)的標(biāo)簽必須是兄弟關(guān)系)
選擇器~選擇器2 - 選中離選擇器1最近的選擇器2(選擇器1和選擇器2對應(yīng)的標(biāo)簽必須是兄弟關(guān)系)
選擇器:first - 第一個選擇器
選擇器:last - 最后一個選擇器
選擇器 *:first-child - 選中選擇器中第一個子標(biāo)簽
二、相關(guān)操作
1、創(chuàng)建節(jié)點(diǎn)（標(biāo)簽）
(1)語法：
$(HTML代碼)
例如：$('<p id="p1"><我是一個段落/p>')
//例如：
aNode = $('<a )
2、添加節(jié)點(diǎn)
(1）節(jié)點(diǎn)1.append（jq節(jié)點(diǎn)2） -- 在節(jié)點(diǎn)1中的最后添加節(jié)點(diǎn)2
（2）節(jié)點(diǎn)1.prepend（節(jié)點(diǎn)2） -- 在節(jié)點(diǎn)1的最前面插入節(jié)點(diǎn)2
（3)節(jié)點(diǎn)1.before -- 在節(jié)點(diǎn)1前面添加節(jié)點(diǎn)2
(4)節(jié)點(diǎn)1.after ---在節(jié)點(diǎn)1后面添加節(jié)點(diǎn)2
例如：
//1)jq節(jié)點(diǎn)1.append（jq節(jié)點(diǎn)2） -- 在節(jié)點(diǎn)1中的最后添加節(jié)點(diǎn)2
$('#box1').append(aNode)
$('#box1').append($('<img src="day6-原生js操作/day6-原生js操作/img/luffy.jpg" />'))
//2)節(jié)點(diǎn)1.prepend（節(jié)點(diǎn)2） -- 在節(jié)點(diǎn)1的最前面插入節(jié)點(diǎn)2
$('#box1').prepend($('<h1>我是標(biāo)題一</h1>'))
//3)節(jié)點(diǎn)1.before -- 在節(jié)點(diǎn)1前面添加節(jié)點(diǎn)2
$('p').before($('<p>我是段落0</p>'))
//4)節(jié)點(diǎn)1.after ---在節(jié)點(diǎn)1后面添加節(jié)點(diǎn)2
$('#p1').after($('<p>我是段落2</p>'))
3、刪除標(biāo)簽
//1)jq對象.remove() --全部一起刪除
$('#box1 p').remove()
//只刪除一個，通過選擇器只選擇一個
//2)jq對象.empty() 清空指定節(jié)點(diǎn)
$('#box1').empty()
$('#box1 *').remove() // '#box1'選中id是box1中的所有后代
4、屬性操作
1）特殊屬性（標(biāo)簽內(nèi)容屬性）：innrtext，innrhtml，value
//a.html方法（相當(dāng)于inneHTML）
節(jié)點(diǎn).html（） -- 獲取節(jié)點(diǎn)內(nèi)容
節(jié)點(diǎn).html（值） -- 給節(jié)點(diǎn)的內(nèi)容賦值
//b.text（）方法（相當(dāng)于innrText）
a = $('#box2>div').html()
console.log(a)
//c.val()方法（相當(dāng)于value）
$('#box2 input').val('小米')
2）普通屬性
節(jié)點(diǎn).atter(屬性名) -- 獲取指定屬性的值
節(jié)點(diǎn).atter(屬性名，值) -- 修改指定節(jié)點(diǎn)指定屬性的值
$('#box2 input').attr('type')
3）class屬性操作
節(jié)點(diǎn).addClass(值) -- 添加class屬性值
$('#h1').addClass('c1')
節(jié)點(diǎn).removeClass(值) -- 移除指定的class值
$('#h1').removeClass('c2')
5、樣式屬性
//1）獲取樣式屬性的值
//節(jié)點(diǎn).css(樣式屬性名)
$('#h1').css('color')
//2）修改樣式屬性的值
//節(jié)點(diǎn).css(樣式屬性名，值)
$('#h1').css('color','lawngreen')
//節(jié)點(diǎn).css(對象) -- 同時修改多個樣式的值/同時添加多個樣式
$('#h1').css({
'width':'200px',
'background-color':'red'
})
6、事件綁定
方法一：直接綁定
節(jié)點(diǎn).on(事件名，事件驅(qū)動程序) -- 和js中的addEventLinsenner功能一樣
注意：this是js對象，evt是jQuery對象
console.log(this)
console.log(evt)
方法二：節(jié)點(diǎn).on(事件名，選擇器，函數(shù)) -- 給指定的節(jié)點(diǎn)添加事件，并且將事件自動傳遞給選擇器對應(yīng)的子標(biāo)簽
$('#box3').on('click','input',function(){
console.log(this)
alert(this.value+'被點(diǎn)擊')
})
