jQuery實質(zhì)就是對js的封裝牺弹，封裝的目的是為了更方便的使用js。
js的代碼寫在哪兒时呀，jq代碼就可以寫在哪兒,但是使用jq之前必須導入jQuery
導入jQuery
- 導入本地的jquery
<script type="text/javascript" src="js/jquery.min.js"></script>
- 導入CDN服務(wù)器上的遠程的jQuery
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
- 導入jQuery后张漂，就可以在后面使用jQuery語法
jQuery的使用
$ -> 代表jQuery對象
- onload(js)和ready(jQuery)
- onload - 網(wǎng)頁加載完成對應的事件(包括標簽加載完成和網(wǎng)絡(luò)請求完成)
window.onload = function(){
pNode = document.getElementById('p1')
pNode.innerText = 'hello jQuery！'
}
ready
- $(document).ready(函數(shù)) - 網(wǎng)頁中標簽加載完成后會自動調(diào)用對應的函數(shù)
$(document).ready(function(){
pNode2 = document.getElementById('p2')
pNode2.innerText = '你好 jQuery'
})
- $(匿名函數(shù)) - 網(wǎng)頁中標簽加載完成后會自動調(diào)用對應的匿名函數(shù)
//相當于上面的寫法
$(function(){
pNode2 = document.getElementById('p2')
pNode2.innerText = '你好 jQuery'
})
- 節(jié)點操作
1)獲取節(jié)點
- 語法: $('選擇器') - 返回的是jQuery的節(jié)點對象
- 選擇器 - 這兒的選擇器和CSS的選擇器一模一樣
console.log($('#img1'))
console.log($('.c1'))
console.log($('p'))
console.log($('div p'))
console.log($('#p1,a'))
-
選中所有緊跟著p標簽的a標簽
console.log($('p+a')) -
選中和id值是p3的標簽后面同級的所有標簽
console.log($('#p3~*')) -
選中和id值是p3的標簽后面同級的所有的a標簽
console.log($('#p3~a')) -
選中當前頁面中的第一個p標簽
console.log($('p:first')) -
選中所有div標簽中的第一個p標簽
console.log($('div p:first')) -
選中當前頁面中的最后一個p標簽
console.log($('p:last')) -
選中div標簽中的第一個子標簽
console.log($('div *:first-child'))
2)創(chuàng)建節(jié)點
$('html標簽語法')
-
創(chuàng)建一個img標簽
imageNode = $("<img src='img/thumb-1.jpg'/ title='圖標'>")
3)添加節(jié)點
-
在body的最后添加一個子標簽
$('body').append(imageNode) -
在body的最前面插入一個子標簽
$('body').prepend($('<input placeholder="請輸入賬號"/>')) -
在id是img1的標簽的前面添加一個按鈕標簽
$('#img1').before($('<button>before</button>')) -
在id是img1的標簽的后面添加一個按鈕標簽
$('#img1').after($('<button>after</button>'))
4)刪除節(jié)點
-
標簽.remove() - 刪除指定標簽
$('#img1').remove() -
標簽.empty() - 清除指定標簽中的內(nèi)容
$('div').empty()
5)克隆和替換(查文檔)
- 屬性操作
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).特殊屬性
- innerHTML（標簽內(nèi)容屬性） - html()
console.log($('#div').html())
$('#div').html('我是新的div')
- innerText (標簽文本內(nèi)容) - text()
console.log($('#div').text())
$('#div').text('我是新的div2')
- value (單標簽內(nèi)容) - val()
console.log($('#user').val())
$('#user').val('李四')
- 標簽.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'
})
- 事件綁定==================
- 標簽.on(事件名, 函數(shù)) - 和js中的addEventListener是一樣的
$('#btn1').on('click', function(evt){
alert('點擊按鈕')
console.log(this, evt.offsetX, evt.offsetY)
})
