jQuery基礎(chǔ)

jQuery實質(zhì)就是對js的封裝，封裝的目的是為了更方便的使用js。
js的代碼寫在哪兒，jq代碼就可以寫在哪兒,但是使用jq之前必須導入jQuery
導入jQuery
a.導入本地的jquery

<script type="text/javascript" src="js/jquery.min.js"></script>

b.導入CDN服務(wù)器上的遠程的jQuery

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

導入jQuery后，就可以在后面使用jQuery語法
$ -> 代表jQuery對象
1.onload(js)和ready(jQuery)
onload - 網(wǎng)頁加載完成對應(yīng)的事件(包括標簽加載完成和網(wǎng)絡(luò)請求完成)

window.onload = function(){
    pNode = document.getElementById('p1')
    pNode.innerText = 'hello jQuery！'
}

ready
$(document).ready(函數(shù)) - 網(wǎng)頁中標簽加載完成后會自動調(diào)用對應(yīng)的函數(shù)
$(匿名函數(shù)) - 網(wǎng)頁中標簽加載完成后會自動調(diào)用對應(yīng)的匿名函數(shù)

            $(document).ready(function(){
                pNode2 = document.getElementById('p2')
                pNode2.innerText = '你好 jQuery'
            })

            //相當于上面的寫法
            $(function(){
                pNode2 = document.getElementById('p2')
                pNode2.innerText = '你好 jQuery'
            })          

2.節(jié)點操作
1)獲取節(jié)點
語法: $('選擇器') - 返回的是jQuery的節(jié)點對象
選擇器 - 這兒的選擇器和CSS的選擇器一模一樣

            console.log($('#img1'))
            console.log($('.c1'))
            console.log($('p'))
            console.log($('div p'))
            console.log($('#p1,a'))
            
            console.log($('p+a'))  //選中所有緊跟著p標簽的a標簽
            console.log($('#p3~*'))   //選中和id值是p3的標簽后面同級的所有標簽
            console.log($('#p3~a'))   //選中和id值是p3的標簽后面同級的所有的a標簽
            console.log($('p:first'))  //選中當前頁面中的第一個p標簽
            console.log($('div p:first'))   //選中所有div標簽中的第一個p標簽
            console.log($('p:last'))        //選中當前頁面中的最后一個p標簽
            console.log($('div *:first-child'))   //選中div標簽中的第一個子標簽

2)創(chuàng)建節(jié)點
$('html標簽語法')

imageNode = $("<img src='img/thumb-1.jpg'/ title='圖標'>")   //創(chuàng)建一個img標簽

3)添加節(jié)點

$('body').append(imageNode)             //在body的最后添加一個子標簽
$('body').prepend($('<input placeholder="請輸入賬號"/>'))    //在body的最前面插入一個子標簽
$('#img1').before($('<button>before</button>'))   //在id是img1的標簽的前面添加一個按鈕標簽
$('#img1').after($('<button>after</button>'))   //在id是img1的標簽的后面添加一個按鈕標簽  

4)刪除節(jié)點

$('#img1').remove()     //標簽.remove()  - 刪除指定標簽
$('div').empty()        //標簽.empty()   - 清除指定標簽中的內(nèi)容

5)克隆和替換
clone([Even[,deepEven]])
3.屬性操作
1.獲取普通屬性
標簽.attr(屬性名) - 這兒的屬性名不包括innerHTML,innerText，value

console.log($('#img2').attr('title'))
console.log($('#img2').attr('src'))

2.修改/增加普通屬性
標簽.attr(屬性名,值)

$('#img2').attr('src', 'img/thumb-3.jpg')

3.特殊屬性
1)innerHTML（標簽內(nèi)容屬性） - html()

console.log($('#div').html())
$('#div').html('我是新的div')

2)innerText (標簽文本內(nèi)容) - text()

console.log($('#div').text())
$('#div').text('我是新的div2')  

3)value (單標簽內(nèi)容) - val()

console.log($('#user').val())
$('#user').val('李四')  

4)class
標簽.addClass(類名) - 給標簽添加class值

$('p').addClass('color')

標簽.removeClass(類名) - 移除指定的class值

$('p').removeClass('color')

4.樣式屬性
標簽.css(樣式屬性名) - 獲取樣式屬性值
標簽.css(樣式屬性名, 值) - 設(shè)置樣式
標簽.css({屬性名:屬性值, 屬性名:屬性值 ...}) - 同時設(shè)置多種樣式屬性

//$('p').css('color', 'slateblue')
//$('p').css('font-size', '20px')
$('p').css({
    'color':'red',
    'font-size':'30px'
})  

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

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

事件冒泡
子標簽上產(chǎn)生的事件，會傳遞給父標簽
事件捕獲：讓事件不再傳遞給父標簽
事件.stopPropagation()

divNode1 = document.getElementById('div1')
divNode2 = document.getElementById('div2')
divNode3 = document.getElementById('div3')
divNode1.addEventListener('click',function(){
    alert('div1被點擊')
})
divNode2.addEventListener('click',function(){
    alert('div2被點擊')
})
divNode3.addEventListener('click',function(evt){
    alert('div3被點擊')
    //讓evt事件對象不傳遞給當前標簽的父標簽
    evt.stopPropagation()
})