目录
- jQuery选择器
- jQuery属性和操作方法
- 对象的过滤与查找
- 事件和动画
正文
对象的过滤与查找
筛选、查找孩子-父母-兄弟标签
属性 | 说明 |
---|---|
children() | 子标签中找 |
find() | 后代标签中找 |
parent() | 父标签 |
prevAll() | 前面所有的兄弟标签 |
nextAll() | 后面所有的兄弟标签 |
siblings() | 前后所有的兄弟标签 |
案例
<div> <ul> <span>span文本1</span> <li>AAAAA</li> <li title="hello" class="box2">BBBBB</li> <li class="box" id='cc'>CCCCC</li> <li title="hello">DDDDDD</li> <li title="two"><span>span文本2</span></li> <span>span文本3</span> </ul> <span>span文本444</span><br> <li>eeeee</li> <li>EEEEE</li> <br> </div>
//1. ul标签的第2个span子标签 $ul.children('span:eq(1)').css('background', 'red')
//2. ul标签的第2个span后代标签 $ul.find('span:eq(1)').css('background', 'red')
//3. ul标签的父标签 $ul.parent().css('background', 'red')
//4. id为cc的li标签的前面的所有li标签 var $li = $('#cc') $li.prevAll('li').css('background', 'red')
//5. id为cc的li标签的所有兄弟li标签 $li.siblings('li').css('background', 'red')
文档增删改
属性 | 说明 |
---|---|
append(content) | 向当前匹配的所有元素内部的最后插入指定内容 |
prepend(content) | 向当前匹配的所有元素内部的最前面插入指定内容 |
before(content) | 将指定内容插入到当前所有匹配元素的前面 |
after(content) | 将指定内容插入到当前所有匹配元素的后面替换节点 |
replaceWith(content) | 用指定内容替换所有匹配的标签删除节点 |
empty() | 删除所有匹配元素的子元素 |
remove() | 删除所有匹配的元素 |
案例
<ul id="ul1"> <li>AAAAA</li> <li title="hello">BBBBB</li> <li class="box">CCCCC</li> <li title="hello">DDDDDD</li> <li title="two">EEEEE</li> <li>FFFFF</li> </ul> <br> <br> <ul id="ul2"> <li>aaa</li> <li title="hello">bbb</li> <li class="box">ccc</li> <li title="hello">ddd</li> <li title="two">eee</li> </ul>
//1. 向id为ul1的ul下添加一个span(最后) var $ul1 = $('#ul1') $ul1.append('<span>append()添加的span</span>')
//2. 向id为ul1的ul下添加一个span(最前) $ul1.prepend('<span>prepend()添加的span</span>')
//3. 在id为ul1的ul下的li(title为hello)的前面添加span $ul1.children('li[title=hello]').before('<span>before()添加的span</span>')
//4. 在id为ul1的ul下的li(title为hello)的后面添加span $ul1.children('li[title=hello]').after('<span>after()添加的span</span>')
//5. 将在id为ul2的ul下的li(title为hello)全部替换为p $('#ul2>li[title=hello]').replaceWith('<p>replaceAll()替换的p</p>')
//6. 移除id为ul2的ul下的所有li $('#ul2').empty() // <p>也会删除
事件和动画
事件绑定与解绑
- 事件绑定(2种):
- eventName(function(){})
绑定对应事件名的监听, 例如:$('#div').click(function(){}); - on(eventName, funcion(){})
通用的绑定事件监听, 例如:$('#div').on('click', function(){}) - 优缺点:
eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
on: 编码不方便, 可以添加多个监听, 且更通用
- eventName(function(){})
- 事件解绑:
- off(eventName)
- 事件的坐标
- event.clientX, event.clientY 相对于视口的左上角
- event.pageX, event.pageY 相对于页面的左上角
- event.offsetX, event.offsetY 相对于事件元素左上角
- 事件相关处理
- 停止事件冒泡 : event.stopPropagation()
- 阻止事件默认行为 : event.preventDefault()
案例
<div class="out"> 外部DIV <div class="inner">内部div</div> </div> <div class='divBtn'> <button id="btn1">取消绑定所有事件</button> <button id="btn2">取消绑定mouseover事件</button> <button id="btn3">测试事件坐标</button> <a href="http://www.baidu.com" id="test4">百度一下</a> </div>
//1. 给.out绑定点击监听(用两种方法绑定) /*$('.out').click(function () { console.log('click out') })*/ $('.out').on('click', function () { console.log('on click out') })
//2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定) /* $('.inner') .mouseenter(function () { // 进入 console.log('进入') }) .mouseleave(function () { // 离开 console.log('离开') }) */ $('.inner') .on('mouseenter', function () { console.log('进入2') }) .on('mouseleave', function () { console.log('离开2') })
//3. 点击btn1解除.inner上的所有事件监听 $('#btn1').click(function () { $('.inner').off() })
//4. 点击btn2解除.inner上的mouseenter事件 $('#btn2').click(function () { $('.inner').off('mouseenter') })
//5. 点击btn3得到事件坐标 $('#btn3').click(function (event) { // event事件对象 console.log(event.offsetX, event.offsetY) // 原点为事件元素的左上角 console.log(event.clientX, event.clientY) // 原点为窗口的左上角 console.log(event.pageX, event.pageY) // 原点为页面的左上角 })
//6. 点击.inner区域, 外部点击监听不响应 $('.inner').click(function (event) { console.log('click inner') //停止事件冒泡 event.stopPropagation() })
//7. 点击链接, 如果当前时间是偶数不跳转 $('#test4').click(function (event) { if(Date.now()%2===0) { event.preventDefault() } })
事件切换
区别mouseover与mouseenter?
- mouseover: 在移入子元素时也会触发, 对应mouseout
- mouseenter: 只在移入当前元素时才触发, 对应mouseleave
- hover()使用的就是mouseenter()和mouseleave()
区别on('eventName', fun)与eventName(fun)
- on('eventName', fun): 通用, 但编码麻烦
- eventName(fun): 编码简单, 但有的事件没有对应的方法
事件委派
案例1
<ul> <li>11111</li> <li>1111111</li> <li>11***11</li> <li>11***11</li> </ul> <li>22222</li> <br> <button id="btn">添加新的li</button> <br>
- 点击 li 背景就会变为红色
- 点击 btn 就添加一个 li
需求1 $('ul>li').click(function () { this.style.background = 'red' }) 需求2 $('#btn').click(function () { $('ul').append('<li>新增的li....</li>') })
案例2
- 事件委托(委派/代理):
- 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
- 监听回调是加在了父辈元素上
- 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
- 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
- 事件委托的2方:
- 委托方: 业主 li
- 被委托方: 中介 ul
- 使用事件委托的好处
- 添加新的子元素, 自动有事件响应处理
- 减少事件监听的数量: n==>1
- jQuery的事件委托API
- 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
- 移除事件委托: $(parentSelector).undelegate(eventName)
<ul> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> </ul> <li>22222</li> <br> <button id="btn1">添加新的li</button> <button id="btn2">删除ul上的事件委托的监听器</button>
// 设置事件委托 $('ul').delegate('li', 'click', function () { // console.log(this) this.style.background = 'red' }) $('#btn1').click(function () { $('ul').append('<li>新增的li....</li>') }) $('#btn2').click(function () { // 移除事件委托 $('ul').undelegate('click') })
淡入淡出
效果 | 说明 |
---|---|
fadeIn() | 带动画的显示 |
fadeOut() | 带动画隐藏 |
fadeToggle() | 带动画切换显示/隐藏 |
案例
html代码 <button id="btn1">慢慢淡出</button> <button id="btn2">慢慢淡入</button> <button id="btn3">淡出/淡入切换</button> <div class="div1"></div>
JavaScript 代码 /* 需求: 1. 点击btn1, 慢慢淡出 * 无参 * 有参 * 字符串参数 * 数字参数 2. 点击btn3, 慢慢淡入 3. 点击btn3, 淡出/淡入切换,动画结束时提示“动画结束了” */ var $div1 = $('.div1') $('#btn1').click(function () { // $div1.fadeOut() // $div1.fadeOut('slow') $div1.fadeOut(1000, function () { alert('动画完成了!!!') }) }) $('#btn2').click(function () { $div1.fadeIn() }) $('#btn3').click(function () { $div1.fadeToggle() })
滑动
效果 | 说明 |
---|---|
slideDown() | 带动画的展开 |
slideUp() | 带动画的收缩 |
slideToggle() | 带动画的切换展开/收缩 |
案例
<button id="btn1">慢慢收缩</button> <button id="btn2">慢慢展开</button> <button id="btn3">收缩/展开切换</button> <div class="div1"></div>
/* 需求: 1. 点击btn1, 向上滑动 2. 点击btn2, 向下滑动 3. 点击btn3, 向上/向下切换 */ var $div1 = $('.div1') // 1. 点击btn1, 向上滑动 $('#btn1').click(function () { $div1.slideUp(3000) }) // 2. 点击btn2, 向下滑动 $('#btn2').click(function () { $div1.slideDown() }) // 3. 点击btn3, 向上/向下切换 $('#btn3').click(function () { $div1.slideToggle() })
显示与隐藏
效果 | 说明 |
---|---|
show() | (不)带动画的显示 |
hide() | (不)带动画的隐藏 |
toggle() | (不)带动画的切换显示/隐藏 |
案例
<button id="btn1">瞬间显示</button> <button id="btn2">慢慢显示</button> <button id="btn3">慢慢隐藏</button> <button id="btn4">显示隐藏切换</button> <div class="div1"></div>
/* 需求: 1. 点击btn1, 立即显示 2. 点击btn2, 慢慢显示 3. 点击btn3, 慢慢隐藏 4. 点击btn4, 切换显示/隐藏 */ var $div1 = $('.div1') //1. 点击btn1, 立即显示 $('#btn1').click(function () { $div1.show() }) //2. 点击btn2, 慢慢显示 $('#btn2').click(function () { $div1.show(1000) }) //3. 点击btn3, 慢慢隐藏 $('#btn3').click(function () { $div1.hide(1000) }) //4. 点击btn4, 切换显示/隐藏 $('#btn4').click(function () { $div1.toggle(1000) })
自定义动画
jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
- animate(): 自定义动画效果的动画
- stop(): 停止动画
案例
<button id="btn1">逐渐扩大</button> <button id="btn2">移动到指定位置</button> <button id="btn3">移动指定距离</button> <button id="btn4">停止动画</button> <div class="div1"></div>
/* 需求: 1. 逐渐扩大 1). 宽/高都扩为200px 2). 宽先扩为200px, 高后扩为200px 2. 移动到指定位置 1).移动到(500, 100)处 2).移动到(100, 20)处 3.移动指定的距离 1). 移动距离为(100, 50) 2). 移动距离为(-100, -20) 4. 停止动画 */ var $div1 = $('.div1') /* 1. 逐渐扩大 1). 宽/高都扩为200px 2). 宽先扩为200px, 高后扩为200px */ $('#btn1').click(function () { /* $div1.animate({ width: 200, height: 200 }, 1000) */ $div1 .animate({ width: 200 }, 1000) .animate({ height: 200 }, 1000) }) /* 2. 移动到指定位置 1).移动到(500, 100)处 2).移动到(100, 20)处 */ $('#btn2').click(function () { // 1).移动到(500, 100)处 /* $div1.animate({ // 向右下移动 left: 500, top: 100 }, 1000) */ // 2).移动到(100, 20)处 $div1.animate({ // 向左上移动 left: 100, // 300 top: 20 // 50 }, 1000) }) /* 3.移动指定的距离 1). 移动距离为(100, 50) 2). 移动距离为(-100, -20) */ $('#btn3').click(function () { // 1). 移动距离为(100, 50) $div1.animate({ left: '+=100', top: '+=50' }, 1000) // 2). 移动距离为(-100, -20) $div1.animate({ left: '-=100', top: '-=20' }, 3000) }) $('#btn4').click(function () { $div1.stop() })
结语
- jQuery常见知识点更新完毕,需要详细了解jQuery可以查询官方文档,想学习该部分知识点可以到某站学习。
推荐文章
前端篇:朋友面试之Vue框架,回去等通知吧(一)
前端篇:朋友面试之Vue框架,故事未止(二)
网络篇:和面试官扯皮OSI七层协议(收藏吃灰系列)
全部评论
(3) 回帖