jQuery實(shí)質(zhì)就是js的封裝择镇，封裝的目的是為了更方便的使用js
js代碼寫在哪，jq代碼就可以寫在哪，但是使用jQuery之前必須導(dǎo)入它

1.導(dǎo)入jQuery
導(dǎo)入本地jQuery
<script type="text/javascript" src="jquery.min (1).js"></script>

導(dǎo)入CSDN服務(wù)器上的遠(yuǎn)程的jQuery
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js "></script>

導(dǎo)入jQuery之后才可以使用jQuery語法

$() -> 代表jQuery對(duì)象

1.onload和ready（jQuery）
onload - 網(wǎng)頁加載完成對(duì)應(yīng)的事件（包括標(biāo)簽加載完成和網(wǎng)絡(luò)請(qǐng)求完成）
ready：$(document.ready(函數(shù))) - 網(wǎng)頁中標(biāo)簽加載完成后自動(dòng)調(diào)用對(duì)應(yīng)的函數(shù)
$(匿名函數(shù)) - 網(wǎng)頁中標(biāo)簽加載完成后會(huì)自動(dòng)調(diào)用對(duì)應(yīng)的匿名函數(shù)

==============================2.節(jié)點(diǎn)操作================
1）獲取節(jié)點(diǎn)
語法：$('選擇器') - 返回的是jQuery的節(jié)點(diǎn)對(duì)象
選擇器 - 這的選擇器和css選擇器一模一樣
    console.log($('#img1').src)
    $('#p1')
    $('.p2')
    $('p')
    $('div p')

選擇器1+選擇器2  - 選中緊跟著選擇器1的選擇器2對(duì)應(yīng)的標(biāo)簽
    console.log($('#p1+a')) //選中所有的緊跟這p1的a標(biāo)簽
    console.log($('#p1~*')) //選中和id值是p1的標(biāo)簽后面同級(jí)的所有的標(biāo)簽
    console.log($('#p1~a')) //選中和id值是p1的標(biāo)簽后面同級(jí)的所有的a標(biāo)簽
    console.log($('p:first')) // 選中當(dāng)前頁面中的第一個(gè)p標(biāo)簽
    console.log($('div p:first')) //選中所有div標(biāo)簽中的第一個(gè)p標(biāo)簽
    console.log($('p:last'))  //選中當(dāng)前頁面中的最后一個(gè)p標(biāo)簽
    console.log($('div *:first-child')) //選中div標(biāo)簽中的第一個(gè)子標(biāo)簽
    
2）創(chuàng)建節(jié)點(diǎn)
$('html標(biāo)簽語法')
imageNode = $("<img src='img/u=1241915477,1722842591&fm=11&gp=0.jpg' / title='圖標(biāo)'>")    //創(chuàng)建一個(gè)img標(biāo)簽

3）添加節(jié)點(diǎn)
    $('body').append(imageNode)      //在body的最后添加一個(gè)子標(biāo)簽
    $('body').prepend($('<input placeholder="請(qǐng)輸入賬號(hào)" />')) //在body的最前面添加一個(gè)子標(biāo)簽
    $('#img1').before($('<button>before</button>'))  //在id是img1的標(biāo)簽的前面添加一個(gè)按鈕標(biāo)簽
    $('#img1').after($('<button>after</button>'))  //在id是img1的標(biāo)簽的后面添加一個(gè)按鈕標(biāo)簽

4）刪除節(jié)點(diǎn)
    $('#img1').remove()  //標(biāo)簽.remove() - 刪除指定標(biāo)簽
    $('div').empty()     //標(biāo)簽.empty() - 清空指定標(biāo)簽中的內(nèi)容
    
5）克隆和替換（自己查詢）

==============================3.屬性操作=============================
1.獲取屬性
標(biāo)簽.attr(屬性名) - 這的屬性名不包括innerHTML擎颖，innerText玛荞，value
console.log($('#img2')).attr('title')
console.log($('#img2')).attr('src')

2.修改/增加普通屬性
標(biāo)簽.attr（屬性名契讲，值）
$('#img2').attr('src','img/thumb-2.jpg')

3.特殊屬性
1）innerHTML（標(biāo)簽內(nèi)容屬性） - html（）
    console.log($('#div').html())
    $('#div').html('我是新的div')

2）inneText（標(biāo)簽文本內(nèi)容） -  text（）
        console.log($('#div').text())
        $('#div').text('我是新的div21') 

3）value（單標(biāo)簽內(nèi)容）- val（）
        console.log($('#user').val())
        $('#user').val('李四')

4）class
標(biāo)簽.addClass(類名) - 給標(biāo)簽添加class
$('p').addClass('color')
標(biāo)簽.removeClass(類名) - 移除指定的class值
$('p').addClass('color')

4.樣式屬性
標(biāo)簽.css(樣式屬性名)  - 獲取樣式屬性值

標(biāo)簽.css(樣式屬性名带膀，值) - 設(shè)置樣式

標(biāo)簽.css({屬性名：屬性值撩银，屬性名：屬性值.....}) - 同時(shí)設(shè)置多種樣式屬性
（硬敲）
$('p').css({
            'color':'red',
            'font-size':'30px'
        })  

===============================4.事件綁定=======================
標(biāo)簽.on(事件名，函數(shù)) - 和js中的addEventListener是一樣的

$('#btn1').on('click', function(evt){
            alert('點(diǎn)擊按鈕')
            console.log(this, evt.offsetX, evt.offsetY)
        })