千鋒教育JavaScript全套視頻教程（10天學(xué)會Js，前端javascrip
jQuery筆記
?我們要使用 `jQuery` 首先要下載一個
? - 可以去官網(wǎng)下載
- 然后就是再頁面里面引入 `jQuery.js` 就行了
? ```html
? <!DOCTYPE html>
? <html lang="en">
? <head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>Document</title>
? </head>
? <body>
? ? <script src="./jquery/jquery.js"></script>
? </body>
? </html>
? ```
- 然后就可以開始使用了
- `jQuery` 向全局暴露的接口就是 `jQuery` 或者 `$` 都行
##### 2.選擇器和篩選器
- 選擇器和篩選器就是用來幫我們獲取 DOM 元素的
###### 2-1選擇器
- `jQuery` 有著相當(dāng)強(qiáng)大的選擇器
? ```javascript
? // 按照 id 獲取頁面中的元素
? const ele = jQuery('#box')
? const ele = $('#box')
? ```
? - 上面兩個都可以按照 id 來獲取元素
? ```javascript
? // 按照類名來選擇
? const eles = jQuery('.a')
? const eles = $('.a')
? ```
? - 上面就是按照類名來選擇元素，可以獲取到一組元素
? ```javascript
? const lis = jQuery('li')
? const lis = $('li')
? ```
? - 上面就是按照標(biāo)簽名來獲取元素，可以獲取到一組元素
? ```javascript
? const eles = jQuery('ul > li')
? const eles = $('ul > li')
? ```
? - 上面就是按照選擇器來獲取元素，可以獲取到一組元素
###### 2-2特殊選擇器
- 直接找到第一個
? ```javascript
? $('li:first') // 找到所有 li 中的第一個
? ```
- 直接找到最后一個
? ```javascript
? $('li:last') // 找到所有 li 中的最后一個
? ```
- 直接找到第幾個
? ```javascript
? $('li:eq(3)') // 找到所有 li 中索引為 3 的那個
? ```
- 找到所有奇數(shù)個
? ```javascript
? $('li:odd') // 找到所有 li 中索引為 奇數(shù) 的
? ```
- 找到所有偶數(shù)
? ```javascript
? $('li:even') // 找到所有 li 中索引為 偶數(shù) 的
? ```
?
###### 2-3篩選器
- jQuery 的篩選器就是在選擇器選擇到一組元素以后
- 對元素進(jìn)行篩選，也可以對準(zhǔn)確的某一個元素進(jìn)行判斷和獲取
? 1. 找到所有元素中的第一個
? ? ?```javascript
? ? ?$('li').first()
? ? ?```
? 2. 找到所有元素中的最后一個
? ? ?```javascript
? ? ?$('li').last()
? ? ?```
? 3. 找到某一個元素的下一個兄弟元素
? ? ?```javascript
? ? ?$('li:eq(3)').next()
? ? ?```
? 4. 找到某一個元素的上一個兄弟元素
? ? ?```javascript
? ? ?$('li:eq(3)').prev()
? ? ?```
? 5. 找到某一個元素的后面的所有兄弟元素
? ? ?```javascript
? ? ?$('li:eq(3)').nextAll()
? ? ?```
? 6. 找到某一個元素的前面的所有兄弟元素
? ? ?```javascript
? ? ?$('li:eq(3)').prevAll()
? ? ?```
? 7. 找到某一個元素的父元素
? ? ?```javascript
? ? ?$('li:eq(3)').parent()
? ? ?```
? 8. 找到某一個元素的所有結(jié)構(gòu)父級，一直到 html
? ? ?```javascript
? ? ?$('li:eq(3)').parents()
? ? ?```
? 9. 找到一組元素中的某一個
? ? ?```javascript
? ? ?// 在 li 的所有父級里面找到所有 body 標(biāo)簽
? ? ?$('li').parents().find('body')
? ? ?
? ? ?// 找到 div 標(biāo)簽下所有后代元素中所有類名為 box 的元素
? ? ?$('div').find('.box')
? ? ?```
##### 3.屬性操作
- 給一個元素添加某個屬性
? ```javascript
? // 給 div 元素添加一個 id 屬性，值是 box
? $('div').prop('id', 'box')
? // 獲取 div 的 id 屬性
? console.log($('div').prop('id'))
? ```
? - prop 這個方法只能添加元素自己本身就有的屬性
? - 如果是添加的自定義屬性，不會顯示在標(biāo)簽上，但是可以使用
- 給一個元素添加某個自定義屬性
? ```javascript
? // 給 div 添加一個 index 屬性，值是 1
? $('div').attr('index', 1)
? // 獲取 div 的 index 屬性
? console.log($('div').attr('index'))
? ```
- 移除元素的某一個屬性
? ```javascript
? // 移除元素自己本身的屬性
? $('div').removeProp('id')
? // 移除元素的自定義屬性
? $('div').removeAttr('index')
? ```
##### 4.操作元素的類名
```js
// 判斷某一個元素有沒有某一個 class
$('div').hasClass('box') // true 表示該元素有 box 類名，false 表示該元素沒有 box 類名
// 給元素添加一個類名
$('div').addClass('box2') // 給 div 元素添加一個 box2 類名
// 移除元素的類名
$('div').removeClass('box') // 移除 div 的 box 類名
// 切換元素類名
$('div').toggleClass('box3') // 如果元素本身有這個類名就移除，本身沒有就添加
```
##### 5. 操作元素的內(nèi)容
```js
給元素的 innerHTML 賦值
$('div').html('<span>hello world</span>')
// 獲取元素的 innerHTML
$('div').html()
// 給元素的 innerText 賦值
$('div').text('hello world')
// 獲取元素的 innerText
$('div').text()
// 給元素的 value 賦值
$('input').val('admin')
// 獲取元素的 value 值
$('input').val()
```
##### 6. 操作樣式
- jQuery 操作元素的樣式就是一個方法 `css`
? ```javascript
? // 給元素設(shè)置一個 css 樣式
? $('div').css('width', '100px')
?
? // 獲取元素的某一個樣式
? $('div').css('width')
?
? // 給元素設(shè)置一組樣式
? $('div').css({
? ? ? width: '100px',
? ? ? height: '200px'
? })
? ```
?
##### 7. 元素尺寸
- 操作元素的寬和高
? ```javascript
? // 獲取 div 元素內(nèi)容位置的高，不包含 padding 和 border
? $('div').height()
? // 設(shè)置 div 內(nèi)容位置的高為 200px
? $('div').height(200)
?
? // 獲取 div 元素內(nèi)容位置的寬，不包含 padding 和 border
? $('div').width()
? // 設(shè)置 div 內(nèi)容位置的寬為 200px
? $('div').width(200)
? ```
- 獲取元素的內(nèi)置寬和高
? ```javascript
? // 獲取 div 元素內(nèi)容位置的高，包含 padding 不包含 border
? $('div').innerHeight()
?
? // 獲取 div 元素內(nèi)容位置的寬，包含 padding 不包含 border
? $('div').innerWidth()
? ```
- 獲取元素的外置寬和高
? ```javascript
? // 獲取 div 元素內(nèi)容位置的高，包含 padding 和 border
? $('div').outerHeight()
? // 獲取 div 元素內(nèi)容位置的高，包含 padding 和 border 和 margin
? $('div').outerHeight(true)
?
? // 獲取 div 元素內(nèi)容位置的寬，包含 padding 和 border
? $('div').outerWidth()
? // 獲取 div 元素內(nèi)容位置的高，包含 padding 和 border 和 margin
? $('div').outerWidth(true)
? ```
##### 8. 元素位置
- 元素相對頁面的位置
? ```javascript
? // 獲取 div 相對頁面的位置
? $('div').offset() // 得到的是以一個對象 { left: 值, top: 值 }
?
? // 給 div 設(shè)置相對頁面的位置
? $('div').offset({ left: 100, top: 100 })
? // 獲取定位到一個距離頁面左上角 100 100 的位置
? ```
- 元素相對于父元素的偏移量
? ```javascript
? // 獲取 div 相對于父元素的偏移量（定位的值）
? $('div').position()
? ```
- 獲取頁面卷去的高度和寬度
? ```javascript
? window.onscroll = function () {
? ? ? // 獲取瀏覽器卷去的高度
? ? ? console.log($(window).scrollTop())
? }
?
? window.onscroll = function () {
? ? ? // 獲取瀏覽器卷去的寬度
? ? ? console.log($(window).scrollLeft())
? }
? ```
##### 9. 元素事件
- 綁定事件的方法
? ```javascript
? // 給 button 按鈕綁定一個點(diǎn)擊事件
? $('button').on('click', function () {
? ? ? console.log('我被點(diǎn)擊了')
? })
?
? // 給 button 按鈕綁定一個點(diǎn)擊事件，并且攜帶參數(shù)
? $('button').on('click', { name: 'Jack' }, function (e) {
? ? ? console.log(e) // 所有的內(nèi)容都再事件對象里面
? ? ? console.log(e.data) // { name: 'Jack' }
? })
?
? // 事件委托的方式給 button 綁定點(diǎn)擊事件
? $('div').on('click', 'button', function () {
? ? ? console.log(this) // button 按鈕
? })
?
? // 事件委托的方式給 button 綁定點(diǎn)擊事件并攜帶參數(shù)
? $('div').on('click', 'button', { name: 'Jack' }, function (e) {
? ? ? console.log(this) // button 按鈕
? ? ? console.log(e.data)
? })
? ```
- 移除事件
? ```javascript
? // 給 button 按鈕綁定一個 點(diǎn)擊事件，執(zhí)行 handler 函數(shù)
? $('button').on('click', handler)
?
? // 移除事件使用 off
? $('button').off('click', handler)
? ```
- 只能執(zhí)行一次的事件
? ```javascript
? // 這個事件綁定再 button 按鈕身上
? // 當(dāng)執(zhí)行過一次以后就不會再執(zhí)行了
? $('button').one('click', handler)
? ```
- 直接觸發(fā)事件
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?```javascript
? // 當(dāng)代碼執(zhí)行到這里的時候，會自動觸發(fā)一下 button 的 click 事件
? $('button').trigger('click')
? ```
