# jQuery
- `jQuery` 是一个前端库，也是一个方法库
- 他里面封装着一些列的方法供我们使用
- 我们常用的一些方法它里面都有，我们可以直接拿来使用就行了
- jQuery之所以好用，很多人愿意使用，是因为他的几个优点太强大了
1. 优质的选择器和筛选器
2. 好用的隐式迭代（之前给元素设置属性或者其他的东西，需要把数组或者集合进行遍历，jquery会默认给咱们遍历，迭代就是遍历）
3. 强大的链式编程
- 因为这些东西的出现，很多时候我们要做的事情被 “一行代码解决”
- 接下来我们就来认识一下 `jQuery`
## jQuery 的使用
- [jQuery官网](https://jquery.com/)
- 官网是全英文的
- 也没啥可看的，不过没事的时候可以看看了解一下
- [jQuery方法大全中文网](http://jquery.cuishifeng.cn/)
- 这个网站可以多看看
- 里面是 `jQuery` 的方法大全，而且是中文的
- 我们要使用 `jQuery` 首先要下载一个
- 可以去官网下载，也可以直接百度搜索下载，都可以
- 然后就是再页面里面引入 `jQuery.js` 就行了
<!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>
//onload 当页面内容加载完毕后再执行代码
$(document).ready(function(){
// 开始写 jQuery 代码...
});
$(function(){
// 开始写 jQuery 代码...
});
然后就可以开始使用了
`jQuery` 向全局暴露的接口就是 `jQuery` 或者 `$`都行
## 选择器和筛选器
- 选择器和筛选器就是用来帮我们获取 DOM 元素的
### 选择器
- `jQuery` 有着相当强大的选择器
// 按照 id 获取页面中的元素
const ele = jQuery('#box')
const ele = $('#box')
- - 上面两个都可以按照 id 来获取元素
```js
// 按照类名来选择
const eles = jQuery('.a')
const eles = $('.a')
- 上面就是按照类名来选择元素，可以获取到一组元素
const lis = jQuery('li')
const lis = $('li')
- 上面就是按照标签名来获取元素，可以获取到一组元素
const eles = jQuery('ul > li')
const eles = $('ul > li')
- 上面就是按照选择器来获取元素，可以获取到一组元素
特殊选择器
-
直接找到第一个
$('li:first') // 找到所有 li 中的第一个 -
直接找到最后一个
$('li:last') // 找到所有 li 中的最后一个 -
直接找到第几个
$('li:eq(3)') // 找到所有 li 中索引为 3 的那个 -
找到所有奇数个
$('li:odd') // 找到所有 li 中索引为 奇数 的 -
找到所有偶数
$('li:even') // 找到所有 li 中索引为 偶数 的
筛选器
- 对元素进行筛选，也可以对准确的某一个元素进行判断和获取
1. 找到所有元素中的第一个
```js
$('li').first()
```
2. 找到所有元素中的最后一个
```js
$('li').last()
```
3. 找到某一个元素的下一个兄弟元素
```js
$('li:eq(3)').next()
```
4. 找到某一个元素的上一个兄弟元素
```js
$('li:eq(3)').prev()
```
5. 找到某一个元素的后面的所有兄弟元素
```js
$('li:eq(3)').nextAll()
```
6. 找到某一个元素的前面的所有兄弟元素
```js
$('li:eq(3)').prevAll()
```
7. 找到某一个元素的父元素
```js
$('li:eq(3)').parent()
```
8. 找到某一个元素的所有结构父级，一直到 html
```js
$('li:eq(3)').parents()
```
9. 找到一组元素中的某一个
```js
// 在 li 的所有父级里面找到所有 body 标签
$('li').parents().find('body')
// 找到 div 标签下所有后代元素中所有类名为 box 的元素
$('div').find('.box')
```
## 属性操作
- 给一个元素添加某个属性
```js
// 给 div 元素添加一个 id 属性，值是 box
$('div').prop('id', 'box')
// 获取 div 的 id 属性
console.log($('div').prop('id'))
-
prop 这个方法只能添加元素自己本身就有的属性
-
如果是添加的自定义属性，不会显示在标签上，但是可以使用
-
给一个元素添加某个自定义属性
// 给 div 添加一个 index 属性，值是 1 $('div').attr('index', 1) // 获取 div 的 index 属性 console.log($('div').attr('index')) -
移除元素的某一个属性
// 移除元素自己本身的属性 $('div').removeProp('id') // 移除元素的自定义属性 $('div').removeAttr('index') -
操作元素的类名
// 判断某一个元素有没有某一个 class $('div').hasClass('box') // true 表示该元素有 box 类名，false 表示该元素没有 box 类名 // 给元素添加一个类名 $('div').addClass('box2') // 给 div 元素添加一个 box2 类名 // 移除元素的类名 $('div').removeClass('box') // 移除 div 的 box 类名 // 切换元素类名 $('div').toggleClass('box3') // 如果元素本身有这个类名就移除，本身没有就添加 -
操作元素的内容
// 给元素的 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()
操作样式
-
jQuery 操作元素的样式就是一个方法
css// 给元素设置一个 css 样式 $('div').css('width', '100px') // 获取元素的某一个样式 $('div').css('width') // 给元素设置一组样式 $('div').css({ width: '100px', height: '200px' })
元素操作
-
创建一个元素
var div = $('<div></div>') -
内部插入元素
// 向 div 元素中插入一个 p 元素，放在最后 $('div').append($('<p></p>')) // 向 div 元素中插入一个 p 元素，放在最前 $('div').prepend($('<p></p>')) // 把 p 元素插入到 div 中去，放在最后 $('<p>hello</p>').appendTo($('div')) // 把 p 元素插入到 div 中去，放在最前 $('<p>hello</p>').prependTo($('div')) -
外部插入元素
//在某个元素后面或者前面添加一个创建的元素 // 在 div 的后面插入一个元素 p $('div').after($('<p></p>')) // 在 div 的前面插入一个元素 p $('div').before($('<p></p>')) //把创建的元素添加到某个元素的前面的或者后面 // 把 p 元素插入到 div 元素的后面 $('div').insertAfter($('<p></p>')) // 把 p 元素插入到 div 元素的前面 $('div').insertBefore($('<p></p>')) -
替换元素
// 把 div 元素替换成 p 元素 $('div').replaceWith($('<p></p>')) // 用 p 元素替换掉 div 元素 $('<p></p>').replaceAll($('div')) -
删除元素
// 删除元素下的所有子节点 $('div').empty() // 把自己从页面中移除 $('div').remove() -
克隆元素
// 克隆一个 li 元素 // 接受两个参数 // 参数1： 自己身上的事件要不要复制，默认是 false // 参数2： 所有子节点身上的事件要不要复制，默认是 true $('li').clone()
元素尺寸
-
操作元素的宽和高
// 获取 div 元素内容位置的高，不包含 padding 和 border $('div').height() // 设置 div 内容位置的高为 200px $('div').height(200) // 获取 div 元素内容位置的宽，不包含 padding 和 border $('div').width() // 设置 div 内容位置的宽为 200px $('div').width(200) -
获取元素的内置宽和高
// 获取 div 元素内容位置的高，包含 padding 不包含 border $('div').innerHeight() // 获取 div 元素内容位置的宽，包含 padding 不包含 border $('div').innerWidth() -
获取元素的外置宽和高
// 获取 div 元素内容位置的高，包含 padding 和 border $('div').outerHeight() // 获取 div 元素内容位置的高，包含 padding 和 border 和 margin $('div').outerHeight(true) // 获取 div 元素内容位置的宽，包含 padding 和 border $('div').outerWidth() // 获取 div 元素内容位置的高，包含 padding 和 border 和 margin $('div').outerWidth(true)
元素位置
-
元素相对页面的位置
// 获取 div 相对页面的位置 $('div').offset() // 得到的是以一个对象 { left: 值, top: 值 } // 给 div 设置相对页面的位置 $('div').offset({ left: 100, top: 100 }) // 获取定位到一个距离页面左上角 100 100 的位置 -
元素相对于父元素的偏移量
// 获取 div 相对于父元素的偏移量（定位的值） $('div').position() -
获取页面卷去的高度和宽度
window.onscroll = function () { // 获取浏览器卷去的高度 console.log($(window).scrollTop()) } window.onscroll = function () { // 获取浏览器卷去的宽度 console.log($(window).scrollLeft()) }
元素事件
-
绑定事件的方法
// 给 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) }) -
移除事件
// 给 button 按钮绑定一个 点击事件，执行 handler 函数 $('button').on('click', handler) // 移除事件使用 off $('button').off('click', handler) -
只能执行一次的事件
// 这个事件绑定在 button 按钮身上 // 当执行过一次以后就不会再执行了 $('button').one('click', handler) -
直接触发事件
// 当代码执行到这里的时候，会自动触发一下 button 的 click 事件 $('button').trigger('click')
可以直接使用的常见事件
-
可以直接使用的事件就是可以不利用
on来绑定，直接就可以使用的事件方法 -
click// 直接给 div 绑定一个点击事件 $('div').click(function () { console.log('我被点击了') }) // 给 div 绑定一个点击事件并传递参数 $('div').click({ name: 'Jack' }, function (e) { console.log(e.data) }) -
dblclick// 直接给 div 绑定一个双击事件 $('div').dblclick(function () { console.log('我被点击了') }) // 给 div 绑定一个双击事件并传递参数 $('div').dblclick({ name: 'Jack' }, function (e) { console.log(e.data) }) -
scroll// 直接给 div 绑定一个滚动事件 $('div').scroll(function () { console.log('我被点击了') }) // 给 div 绑定一个滚动事件并传递参数 $('div').scroll({ name: 'Jack' }, function (e) { console.log(e.data) }) -
hover// 这个事件要包含两个事件处理函数 // 一个是移入的时候，一个是移出的时候触发 $('div').hover(function () { console.log('我会再移入的时候触发') }, function () { console.log('我会在移出的时候触发') })
动画
-
show// 给 div 绑定一个显示的动画 $('div').show() // 如果元素本身是 display none 的状态可以显示出来 // 给 div 绑定一个显示的动画 // 接受三个参数 // $('div').show('毫秒', '速度', '回调函数') $('div').show(1000, 'linear', function () { console.log('我显示完毕') }) -
hide// 给 div 绑定一个隐藏的动画 $('div').hide() // 如果元素本身是 display block 的状态可以隐藏起来 // 给 div 绑定一个显示的动画 // 接受三个参数 // $('div').show('毫秒', '速度', '回调函数') $('div').hide(1000, 'linear', function () { console.log('我隐藏完毕') }) -
toggle// 给 div 绑定一个切换的动画 $('div').hide() // 元素本身是显示，那么就隐藏，本身是隐藏那么就显示 // 给 div 绑定一个显示的动画 // 接受三个参数 // $('div').show('毫秒', '速度', '回调函数') $('div').toggle(1000, 'linear', function () { console.log('动画执行完毕') }) -
animate// 定义一个自定义动画 $('.show').click(function () { $('div').animate({ width: 500, height: 300 }, 1000, 'linear', function () { console.log('动画运动完毕') }) }) -
stop// 立刻定制动画 $('div').stop() // 就停止再当前状态 -
finish -
// 立刻结束动画
$(‘div’).finish() // 停止在动画结束状态 -
``
1948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
