jQuery
jQuery选择器
<script src="https://code.jquery.com/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<body>
<ul>
<li>1</li>
<li class="a">2</li>
<li>3</li>
<li class="b">4</li>
<li>5</li>
<li class="c">6</li>
<li>7</li>
<li id="box">8</li>
<li>9</li>
<li>10</li>
</ul>
<script type="text/javascript">
console.log($('#box'))
//注意：不管使用任何选择器，获取到的元素都是一个元素集合。
console.log($('.a'))
console.log($('li'))
console.log($('li:nth-child(odd)'))
console.log($('li:nth-child(even)'))
</script>
</body>
image-20211124162915805
jQuery元素筛选器
/*
jQuery 的筛选器
+ 对 jQuery 的元素集合进行二次筛选
+ 注意: 只有 jQuery 的元素集合才可以使用, 原生 DOM 对象不能使用
1. first()
=> 元素集合里面的第一个
2. last()
=> 元素集合里面的最后一个
3. eq(索引)
=> 元素集合里面指定索引的那一个
4. next()
=> 当前元素的下一个元素
5. nextAll()
=> 语法
1. 元素集合.nextAll() 获取到当前元素后面的所有兄弟元素
2. 元素集合.nextAll(选择器) 获取到当前元素后面所有元素中指定选择器的那一个
6. nextUntil()
=> 语法
1. 元素集合.nextUntil() 获取到当前元素后面所有的兄弟元素
2. 元素结合.nextUntil(选择器) 获取到当前元素后面所有兄弟元素, 直到选择器元素为止(不包含选择器元素)
7. prev()
=> 当前元素的上一个元素
8. prevAll()
=> 语法
1. 元素集合.prevAll() 获取到当前元素上面的所有兄弟元素
2. 元素集合.prevAll(选择器) 获取到当前元素上面的所有兄弟元素中指定选择器的那一个
9. prevUntil()
=> 语法
1. 元素结合.prevUntil() 获取到当前元素上面所有的兄弟元素
2. 元素结合.prevUntil(选择器) 获取到当前元素上面所有兄弟元素, 直到选择器元素为止(不包含选择器元素)
10. parent()
=> 获取到当前元素的父元素
11. parents()
=> 语法
1. 元素集合.parents() 拿到结构父级的所有父元素
2. 元素集合.parents(选择器) 拿到结构父级里面所有父元素中符合选择器的那一个元素
12. children()
=> 语法
1. 元素集合.children() 拿到该元素的所有子元素
2. 元素集合.children(选择器) 拿到该元素的所有子元素中符合选择器的那一个元素
13. sinblings()
=> 拿到该元素的所有兄弟元素, 自己除外
14. find()
=> 找到该元素中所有后代元素里面符合选择器条件的元素
15. index()
=> 获取到的就是该元素在其父元素里面的索引位置
*/// 1. first
// console.log($('li').first())
// 2. last
// console.log($('li').last())
// 3. eq(索引)
// console.log($('li').eq(2))
// 4. next()
// console.log($('span').next())()
// 5. nextAll()
// console.log($('span').nextAll())
// console.log($('span').nextAll('.box'))
// 6. nextUntil()
// console.log($('span').nextUntil())
// console.log($('span').nextUntil('.box'))
// 7. prev()
// console.log($('span').prev())
// 8. prevAll()
// console.log($('span').prevAll())
// console.log($('span').prevAll('.box'))
// 9. prevUntil()
// console.log($('span').prevUntil())
// console.log($('span').prevUntil('.box'))
// 10. parent()
// console.log($('span').parent())
// 11. parents()
// console.log($('span').parents())
// console.log($('span').parents('body'))
// 12. chidlren()
// console.log($('ul').children())
// console.log($('ul').children('.box'))
// 13. siblings()
// console.log($('span').siblings())
// 14. find()
// console.log($('body').find('span'))
// 15. index()
console.log($('span').index())
console.log($('.a'))
console.log($('.a').first().index())
console.log($('.a').last().index())jQuery操作文本内容
html()
=>语法：
- 元素集合.html()
- 获取该元素的超文本内容， 以字符串的形式返回
- 获取的时候为了保证 html 结构只能获取第一个的元素的超文本内容
- 元素集合.html(‘内容’)
- 设置元素集合内元素的超文本内容
- 完全覆盖式的写入
- 隐式迭代：元素集合内多少元素，就写入多少元素
text()
=>语法：
元素集合.text()
- 获取该元素的文本内容，以字符串的形式返回
- 因为是文本内容, 不涉及 html 结构, 所以拿到的是所有元素的文本内容
- 以一个字符串的形式返回
元素集合.text(‘内容’)
- 设置元素集合内元素的文本内容
- 完全覆盖式的写入4
- 隐式迭代: 元素集合内有多少元素, 就写入多少元素
val()
=> 语法:
- 元素集合.val()
- 获取元素集合内元素的 value 值
- 元素集合.val(‘内容’)
- 设置元素集合内元素的 value 值
- 完全覆盖式的写入
- 隐式迭代: 元素集合内有多少元素, 就写入多少元素
// 1. html()
// 获取
// console.log($('div').html())
// 设置
// $('div').html('<span>我是新来的</span>')
// 2. text()
// 获取
// console.log($('div').text())
// 设置
// $('div').text('<span>我是新来的 span 标签</span>')
// 3. val()
// 获取
// console.log($('input').val())
// 设置
// $('input').val('hello world')jQuery操作类名
1. css()
1-1. 语法: 元素集合.css('width')
=> 获取元素的某一个样式的值, 不管是行内还是非行内都能获取到
1-2. 语法: 元素集合.css('样式名', '样式值')
=> 设置元素的行内样式
=> 隐式迭代: 元素集合内有多少元素设置多少元素
=> 设置的时候, 如果你需要设置的单位是 px 可以不写
1-3. 语法: 元素集合.css({ 样式名1: 样式值1, 样式名2: 样式值2, ... })
=> 批量给元素设置行内样式
=> 隐式迭代: 元素集合内有多少元素设置多少元素
=> 设置的时候, 如果你需要设置的单位是 px 可以不写
*/
// 1. 获取某一个样式
// console.log($('div').css('width'))
// console.log($('div').css('height'))
// console.log($('div').css('font-size'))
// 2. 设置某一个样式
// $('div').css('margin', 50).css('opacity', 0.5)
$('div').css('width',600).css('font-size',50).css('background-color','skyblue')
// 3. 批量设置元素样式
// $('div').css({
// margin: 50,
// width: 700
// })jQuery操作属性
<script src="./jquery/jquery.min.js"></script>
<script>
/*
jQuery 获取元素尺寸
+ 获取元素尺寸有三套方法四种使用方式
+ 不管在页面是不是占位, 这些方法都是获取元素的尺寸
1. width() 和 height()
=> 语法: 元素集合.width() 或者 元素集合.height()
=> 获取的是元素内容位置的尺寸
2. innerWidth() 和 innerHeight()
=> 语法: 元素集合.innerWidth() 或者 元素集合.innerHeight()
=> 获取的是元素 内容 + padding 区域的尺寸
3. outerWidth() 和 outerHeight()
=> 语法: 元素集合.outerWidth() 或者 元素集合.outerHeight()
=> 获取的是元素 内容 + padding + border 区域的尺寸
4. outerWidth(true) 和 outerHeight(true)
=> 语法: 元素集合.outerWidth(true) 或者 元素集合.outerHeight(true)
=> 获取的是元素 内容 + padding + border + margin 区域的尺寸
*/
console.log('width: ', $('div').width())
console.log('height: ', $('div').height())
console.log('innerWidth: ', $('div').innerWidth())
console.log('innerHeight: ', $('div').innerHeight())
console.log('outerWidth: ', $('div').outerWidth())
console.log('outerHeight: ', $('div').outerHeight())
console.log('outerWidth(true): ', $('div').outerWidth(true))
console.log('outerHeight(true): ', $('div').outerHeight(true))
</script>
image-20211125090843479
获取元素偏移量
<script src="./jquery/jquery.min.js"></script>
<script>
/*
jQuery 的事件绑定
1. on()
+ 事件绑定, 根据传递不同的参数做不同的事情
1-1. on(事件类型, 事件处理函数)
=> 直接绑定事件, 有隐式迭代
1-2. 元素结合.on(事件类型, 选择器, 事件处理函数)
=> 事件委托的绑定
=> 把选择器元素委托给元素集合里面的元素
=> 注意: 选择器元素要是 元素集合 内元素的后代元素
1-3. 元素集合.on(事件类型, 复杂数据类型, 事件处理函数)
=> 给元素集合内的所有元素绑定事件
=> 这个复杂数据类型是事件触发的时候, 传递给事件里面的参数
=> 在事件对象里面有一个叫做 data 的成员, 就是你传递进来的参数
1-4. 元素集合.on(事件类型, 选择器, 数据, 事件处理函数)
=> 事件委托的形式, 带上传递参数
=> 把选择器所属的事件, 委托给了元素集合内的事件
=> 数据位置, 就是在事件触发的时候传递给事件处理函数的参数
1-5. 元素集合.on({ 事件类型1: 事件处理函数, 事件类型2: 事件处理函数, ... })
=> 一次性给元素绑定多种事件
=> 没法传递参数和事件委托了
2. one()
+ 用来绑定事件的方法
+ 和 on() 方法的参数和使用形式一模一样
+ 只不过绑定的事件只能执行一次
3. off()
+ 用来解除事件绑定的
+ 语法:
1. 元素集合.off(事件类型)
=> 解除元素身上该事件类型的所有事件处理函数
2. 元素集合.off(事件类型, 事件处理函数)
=> 解除元素身上该事件类型的某一个事件处理函数
4. trigger()
+ 用 JS 代码的方式来触发事件
+ 语法: 元素集合.trigger(事件类型)s
*/
// 1-1. on(事件类型, 处理函数)
// $('ul > li').on('click', function () {
// console.log(this)
// })
// 1-2. on(事件类型, 选择器, 处理函数)
// 给 li 做了一个事件委托, 委托给 ul 来做
// $('ul').on('click', 'li', function () {
// console.log('我执行了')
// // this 就是你点击的那一个元素
// console.log(this)
// })
// document.querySelector('ul').onclick = function (e) {
// if (e.target.nodeName === 'LI') {
// console.log('我执行了')
// // 原生 JS 里面, this 指向事件源
// // 这个事件的事件源是谁 ? ul
// console.log(this)
// }
// }
// 1-3. on(事件类型, 复杂数据类型, 事件处理函数)
// $('li').on('click', { name: 'Jack' }, function (e) {
// console.log('我执行了')
// console.log(e)
// })
// 1-4. on(事件类型, 选择器, 数据, 事件处理函数)
// $('ul').on('click', 'li', 'hello world', function (e) {
// console.log('我执行了')
// console.log(e)
// })
// 1-5. on({ 多个事件 })
// $('li').on({
// click: function () { console.log('点击事件') },
// mouseover: function () { console.log('移入事件') }
// })
// 2. one()
// $('li').one('click', function () { console.log('我被点击了') })
// $('ul').one('click', 'li', function () {
// console.log('我被点击了')
// })
// $('li').one('click', { name: 'Jack' }, function (e) {
// console.log(e)
// })
// $('ul').one('click', 'li', 'hello world', function (e) {
// console.log(e.data)
// })
// $('li').one({
// click: function () { console.log('点击事件') },
// mouseover: function () { console.log('移入事件') }
// })
function handlerA() { console.log('handlerA') }
function handlerB() { console.log('handlerB') }
$('li').on('click', handlerA)
$('li').on('click', handlerB)
// 3. off()
// 3-1. off(事件类型)
// 把 click 事件的所有事件处理函数全部解除
// $('li').off('click')
// 3-2. off(事件类型, 事件处理函数)
// 把 click 事件的 handlerA 事件处理函数解除
// $('li').off('click', handlerA)
// 4. trigger()
// $('li:first').trigger('click')
</script>jQuery基本动画
<button class="show">显示</button>
<button class="hide">隐藏</button>
<button class="toggle">切换</button>
<div class="outer">
<div class="inner"></div>
</div>
<script src="./jquery/jquery.min.js"></script>
<script>
/*
jQuery 的折叠动画
+ jQuery 提供了三种折叠动画
1. slideDown()
+ 下拉显示
2. slideUp()
+ 上拉隐藏
3. slideToggle()
+ 切换显示和隐藏
三个方法都是一样的参数
=> 方法名(时间, 运动曲线, 回调函数)
*/
$('.show').click(() => {
$('.inner').slideDown(1000, 'linear', () => console.log('显示结束'))
})
$('.hide').click(() => {
$('.inner').slideUp(1000, 'linear', () => console.log('隐藏结束'))
})
$('.toggle').click(() => {
$('.inner').slideToggle(1000, 'linear', () => console.log('切换结束'))
})
</script>
GIF 2021-11-26 12-14-12
渐隐渐显动画
<button>开始</button>
<div></div>
<script src="./jquery/jquery.min.js"></script>
<script>
/*
jQuery 的综合动画
+ 可以按照你的设定去进行运动
1. animate()
=> 语法: animate({}, 时间, 运动曲线, 回调函数)
=> {}: 书写你要运动的属性
=> 注意:
-> 颜色相关的属性, 运动不了
-> CSS3 的 2d 和 3d 动画效果运动不了
*/
$('button').click(() => {
$('div').animate({
width: 300,
height: '400px',
borderRadius: '50%',
left: 150,
top: 200,
backgroundColor: 'red'
}, 1000, 'linear', () => console.log('运动结束'))
})
</script>
GIF 2021-11-26 12-30-21
运动结束函数
<button class="start">开始</button>
<button class="stop">停止</button>
<button class="finish">完成</button>
<div></div>
<script src="./jquery/jquery.min.js"></script>
<script>
/*
jQuery 的停止动画
+ 因为当你给一个元素设置动画以后
+ 如果快速触发, 会停不下来, 直到你所有的触发都执行完毕为止
+ jquery 给我们提供两个临时停下动画的方法
1. stop()
+ 语法: 元素集合.stop()
+ 当代码执行到这句的时候, 不管运动到什么程度, 立刻停下来
+ 运动到什么位置就停止在什么位置,再次点击，返回到运动最初始的位置
2. finish()
+ 语法: 元素集合.finish()
+ 当代码执行到这句的时候, 不管运动到什么程度, 直接去到运动结束位置
+ 直接完成本次动画
*/
$('button.start').click(() => {
// 让 div 之前的动画停止在原地, 按照最新的动画进行执行
$('div').stop().slideToggle(1000, 'linear')
})
$('.stop').click(() => {
$('div').stop()
})
$('.finish').click(() => {
$('div').finish()
})
</script>stop()
GIF 2021-11-26 12-49-28
finish()
GIF 2021-11-26 12-50-44
jQuery.ajax()
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-11-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录