千锋教育JavaScript全套视频教程（10天学会Js，前端javascrip
jQuery笔记
我们要使用 `jQuery` 首先要下载一个
- 可以去官网下载
- 然后就是再页面里面引入 `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` 有着相当强大的选择器
```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')
```
- 上面就是按照标签名来获取元素，可以获取到一组元素
```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 的那个
```
- 找到所有奇数个
```javascript
$('li:odd') // 找到所有 li 中索引为 奇数 的
```
- 找到所有偶数
```javascript
$('li:even') // 找到所有 li 中索引为 偶数 的
```
###### 2-3筛选器
- jQuery 的筛选器就是在选择器选择到一组元素以后
- 对元素进行筛选，也可以对准确的某一个元素进行判断和获取
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. 找到某一个元素的所有结构父级，一直到 html
```javascript
$('li:eq(3)').parents()
```
9. 找到一组元素中的某一个
```javascript
// 在 li 的所有父级里面找到所有 body 标签
$('li').parents().find('body')
// 找到 div 标签下所有后代元素中所有类名为 box 的元素
$('div').find('.box')
```
##### 3.属性操作
- 给一个元素添加某个属性
```javascript
// 给 div 元素添加一个 id 属性，值是 box
$('div').prop('id', 'box')
// 获取 div 的 id 属性
console.log($('div').prop('id'))
```
- prop 这个方法只能添加元素自己本身就有的属性
- 如果是添加的自定义属性，不会显示在标签上，但是可以使用
- 给一个元素添加某个自定义属性
```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. 操作元素的内容
```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
// 给元素设置一个 css 样式
$('div').css('width', '100px')
// 获取元素的某一个样式
$('div').css('width')
// 给元素设置一组样式
$('div').css({
width: '100px',
height: '200px'
})
```
##### 7. 元素尺寸
- 操作元素的宽和高
```javascript
// 获取 div 元素内容位置的高，不包含 padding 和 border
$('div').height()
// 设置 div 内容位置的高为 200px
$('div').height(200)
// 获取 div 元素内容位置的宽，不包含 padding 和 border
$('div').width()
// 设置 div 内容位置的宽为 200px
$('div').width(200)
```
- 获取元素的内置宽和高
```javascript
// 获取 div 元素内容位置的高，包含 padding 不包含 border
$('div').innerHeight()
// 获取 div 元素内容位置的宽，包含 padding 不包含 border
$('div').innerWidth()
```
- 获取元素的外置宽和高
```javascript
// 获取 div 元素内容位置的高，包含 padding 和 border
$('div').outerHeight()
// 获取 div 元素内容位置的高，包含 padding 和 border 和 margin
$('div').outerHeight(true)
// 获取 div 元素内容位置的宽，包含 padding 和 border
$('div').outerWidth()
// 获取 div 元素内容位置的高，包含 padding 和 border 和 margin
$('div').outerWidth(true)
```
##### 8. 元素位置
- 元素相对页面的位置
```javascript
// 获取 div 相对页面的位置
$('div').offset() // 得到的是以一个对象 { left: 值, top: 值 }
// 给 div 设置相对页面的位置
$('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 按钮绑定一个点击事件
$('button').on('click', function () {
console.log('我被点击了')
})
// 给 button 按钮绑定一个点击事件，并且携带参数
$('button').on('click', { name: 'Jack' }, function (e) {
console.log(e) // 所有的内容都再事件对象里面
console.log(e.data) // { name: 'Jack' }
})
// 事件委托的方式给 button 绑定点击事件
$('div').on('click', 'button', function () {
console.log(this) // button 按钮
})
// 事件委托的方式给 button 绑定点击事件并携带参数
$('div').on('click', 'button', { name: 'Jack' }, function (e) {
console.log(this) // button 按钮
console.log(e.data)
})
```
- 移除事件
```javascript
// 给 button 按钮绑定一个 点击事件，执行 handler 函数
$('button').on('click', handler)
// 移除事件使用 off
$('button').off('click', handler)
```
- 只能执行一次的事件
```javascript
// 这个事件绑定再 button 按钮身上
// 当执行过一次以后就不会再执行了
$('button').one('click', handler)
```
- 直接触发事件
```javascript
// 当代码执行到这里的时候，会自动触发一下 button 的 click 事件
$('button').trigger('click')
```
