jQuery-筛选器方法、操作标签、事件

  • jQuery-筛选器方法、操作标签、事件已关闭评论
  • 27 次浏览
  • A+
所属分类:Web前端
摘要

执行链式操作
链式操作在python中的本质.offset()方法允许我们检索一个元素相对于文档(document)的当前位置。和 .position()的差别在于: .position()是相对于相对于父级元素的位移。
实际操纵练习

JQuery筛选器方法

1.下一个元素

$("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2") 

2.上一个元素

$("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2") 

3.父亲元素

$("#id").parent() $("#id").parents()  // 查找当前元素的所有的父辈元素 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。 

4.儿子和兄弟元素

$("#id").children();// 儿子们 $("#id").siblings();// 兄弟们 

5.练习展示

Html
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>筛选器方法</title>     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> </head> <body> <p>111</p> <p>222</p> <div id="d2">div     <span>444</span>     <p>div>p         <span id="d1">div>p>span</span>     </p>     <span>333</span> </div> <p>555</p> <p>666</p> </body> </html> 
1.查找下面的同级标签第一个 $divEle.next() jQuery.fn.init [p, prevObject: jQuery.fn.init(1)] 2.查找下面同级标签以下所有标签 $divEle.nextAll() jQuery.fn.init(2) [p, p, prevObject: jQuery.fn.init(1)] 3.查找下面同级别标签第一个直到.p2为止(不包含最后一个) $divEle.nextUntil('.p2') jQuery.fn.init [p, prevObject: jQuery.fn.init(1)]  ... 

jQuery-筛选器方法、操作标签、事件
jQuery-筛选器方法、操作标签、事件

JQuery操作标签

1.操作类js与jq的对比

js原生版本														 classList.add()										 classList.remove()								 classList.contains()							 classList.toggle()								   jQuery版本 addClass()			: 添加元素 removeClass()		: 移出某个类属性	 hasClass()			: 验证是否包含某个类属性 toggleClass()		: 有则删除无则添加  

2.操作标签样式(链式操作)

.css('样式名','样式值')		style.样式名 = '样式值' 

执行链式操作

$('p').first().css('color','green').next().css('color','blue')  '原理解析:' 1.jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签 2.jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法 

jQuery-筛选器方法、操作标签、事件
链式操作在python中的本质

1.python代码实现链式操作本质  class MyClass(object):     def func1(self):         print('func1')         // 必须要返回对象         return self      def func2(self):         print('func2')         return self obj = MyClass() obj.func1().func2()  2.jQuery链式操作的本质 对象在调用一个方法之后,对象还会返回回来,然后在调用其他方法,以此循环 jQuery本质。 

3.位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 position()// 获取匹配元素相对父元素的偏移 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移 

.offset()方法允许我们检索一个元素相对于文档(document)的当前位置。和 .position()的差别在于: .position()是相对于相对于父级元素的位移。
实际操纵练习

右侧滚动条距离顶部的长度 $(window).scrollTop() 7142.22216796875  $(window).scrollTop() 9920  $(window).scrollTop() 11475.5556640625  加了参数就是设置(回到顶部) $(window).scrollTop(0)   n.fn.init [Window]  $(window).scrollTop(500) n.fn.init [Window] 

jQuery-筛选器方法、操作标签、事件

4.尺寸操作

height() width() innerHeight() innerWidth() outerHeight() outerWidth() 

操作目标

p { /*上 右 下 左*/ margin: 1px 2px 3px 4px; padding: 4px 3px 2px 1px; } 

尺寸操作练习

1.文本高度 $('p').height()  21  2.文本宽度 $('p').width()   697  3.文本+padding 内高 $('p').innerHeight()   27  4.文本+padding 内宽 $('p').innerWidth()    702  5.文本+padding+border 边框(未设值) $('p').outerHeight()   27  6.文本+padding+border 边框(未设值) $('p').outerWidth()    702 

jQuery-筛选器方法、操作标签、事件

5.文本操作

1.操作标签内部文本

js版本										 innerText	 : 操作文本											 innerHTML	 : 操作文件与标签   jQuery版本 text()		: 括号内不加参数就是获取加了就是设置(只能操作文本内容) html()		: 括号内不加参数就是获取加了就是设置(能操作文本与标签) val()		:取得第一个匹配元素的当前值 val(val)	:设置所有匹配元素的值 val([val1, val2]):设置多选的checkbox、多选select的值 

JQuery获取标签

$('div').text() '要有所期待n    444n    div>pn        div>p>spann    n    333n'  $('div').html() '要有所期待n    <span>444</span>n    <p>div&gt;pn        <span id="d1">div&gt;p&gt;span</span>n    </p>n    <span>333</span>n' 

jQuery-筛选器方法、操作标签、事件

text设置文本

$('div').text('我们都是Jason的大宝贝') jQuery.fn.init [div#d2, prevObject: jQuery.fn.init(1)] 

jQuery-筛选器方法、操作标签、事件
HTML设置文本

$('div').html('今天最开心的时刻就是转头的那一刻') w.fn.init [div, prevObject: w.fn.init(1)]  $('div').text('<h1>你们都是我的大宝贝</h1>') w.fn.init [div, prevObject: w.fn.init(1)]  $('div').html('<h1>我一天天的比你们都紧张</h1>') w.fn.init [div, prevObject: w.fn.init(1)]  注意:jQuery与js文本规律相同 

jQuery-筛选器方法、操作标签、事件

jQuery-筛选器方法、操作标签、事件

6.属性操作

js版本	 setAttribute() getAttribute()											 removeAttribute()										  jQuery版本	 attr(name,value)	 : 设置属性(两个参数设置) attr(name)			: 获取属性(一个参数获取) removeAttr(name)	 : 移出属性 

实操练习

使用变量接收p标签 let $pELe = $('p') undefined  获取id属性值 $pELe.attr('id') 'd1'  获取class属性值为空(标签内没有calss属性) $pELe.attr('class') undefined  创建名为class的类属性值为c1 $pELe.attr('class','c1') jQuery.fn.init(2) [p#d1.c1, p#d2.c1, prevObject: jQuery.fn.init(1)]0: p#d1.c11: p#d2.c1length: 2prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)  修改id属性 $pELe.attr('id','newd1') jQuery.fn.init(2) [p#newd1.c1, p#newd1.c1, prevObject: jQuery.fn.init(1)]0: p#newd1.c11: p#newd1.c1length: 2prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)  移出属性 $pELe.removeAttr('password') jQuery.fn.init(2) [p#newd1.c1, p#newd1.c1, prevObject: jQuery.fn.init(1)]  获取p标签数据  $('p')[0] 

checkbox使用attr查询用户选择情况
针对选择按钮,checkbox radio option这些需要用户选择的,你在操作它的属性的时候,就不要使用attr。

1.查询id为d3的checked的选择情况            $('#d3').attr('checked')  # 无效 "checked" 2.查询id为d2的checked的选择情况            $('#d2').attr('checked')  # 无效 undefined $('#d2').attr('checked')  # 无效 undefined $('#d4').attr('checked')  # 无效 undefined $('#d3').attr('checked')  # 无效 "checked" 3.给id为d3的checked并设置选择 $('#d3').attr('checked','checked')  # 无效 w.fn.init [input#d3] 
对于标签上有的能够看到的属性和自定义属性用attr 对于返回布尔值比如checkbox radio option是否被选中用prop  专门针对选择按钮的参数解决以上无效问题 prop独有作用:         用户选择	 :  True         用户未选择    :  False 

解决checkbox使用attr查询用户选择时(无效问题)

在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug,在3.x版本的jQuery中则没有这个问题。为了兼容性,我们在处理checkbox和radio的时候尽量使用特定的prop(),不要使用attr("checked", "checked") 
checkbox使用prop Html代码
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>checkbox使用prop</title>     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> </head> <body> <input type="checkbox" value="111" name="hobby" id="d2">d2 <input type="checkbox" value="222" name="hobby" checked id="d3">d3 <input type="checkbox" value="333" name="hobby" id="d4">d4 </body> </html> 
1.查询id为d2的选项是否选择 $('#d2').prop('checked') false  2.查询id为d3查询的选项是否选择 $('#d3').prop('checked') true  3.查询id为d4查询的选项是否选择 $('#d4').prop('checked') false  4.prop设置值 $('#d3').prop('checked',true) k.fn.init [input#d3]  5.prop取消值 $('#d4').prop('checked',false) k.fn.init [input#d4] 

jQuery-筛选器方法、操作标签、事件

prop和attr的属性

attr全称attribute(属性) prop全称property(属性)  虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的。  总结一句话就是说,attr只能判断一些固定的死的,不能去判断动态的东西,像checked就属于动态的它不能够判断。prop就是专门的去做一些动态的判断例如:checked、redio、option。 

7.文档处理

添加到指定元素内部的后面

$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B 

添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B 

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面 

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面 

移除和清空元素

remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点。 

克隆,了解知识(clone())

事件

JQuery绑定事件

JS绑定事件 	标签对象.on事件名 = function(){事件代码}    		btnEle.onclick = function(){alert(123)} jQuery绑定事件 	方式1         jQuery对象.事件名(function(){事件代码})             $btnEle.click(function(){alter(123)}) 	方式2     	  jQuery对象.on('事件名',function(){事件代码})         	  $btnEle.on('click',function(){alter(123)})  	"""  	有时候使用jQuery的方式1绑定事件如果无法触发 可以切换为方式2  	""" 

常用事件

click(function(){...}) hover(function(){...}) blur(function(){...}) focus(function(){...}) change(function(){...}) keyup(function(){...}) 

克隆事件

默认情况下只会克隆它的标签,不会克隆它的点击事件,所以只能第一个点击进行克隆,而后面克隆出来的不能进行点击克隆。但是如果想要更完美的克隆就是原封不动的全部克隆出来,就在clone()的括号里设置true 
克隆事件代码
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>     <style>         .c1{             border: 3px solid greenyellow;             background-color: khaki;         }     </style> </head> <body> <button id="d1" class="c1">哇咔咔!</button> <script>     let $btnEle = $('#d1');     // 克隆事件     $btnEle.click(function (){         // this指代的是当前被操作的标签对象,不能直接点jquery方法的,需要转换为jQuery对象         $('body').append($(this).clone(true))  // $(this)是当前按钮的jquery对象,然后把自己克隆一份,然后把克隆的这一份添加到body中去     }) </script> </body> </html> 

jQuery-筛选器方法、操作标签、事件
keydown和keyup事件组合

点击查看代码
<!DOCTYPE html> <html lang="zh-CN"> <head>     <meta http-equiv="content-Type" charset="UTF-8">     <meta http-equiv="x-ua-compatible" content="IE=edge">     <title>Title</title> </head> <body>   <table border="1">   <thead>   <tr>     <th>#</th>     <th>姓名</th>     <th>操作</th>   </tr>   </thead>   <tbody>   <tr>     <td><input type="checkbox"></td>     <td>Egon</td>     <td>       <select>         <option value="1">上线</option>         <option value="2">下线</option>         <option value="3">停职</option>       </select>     </td>   </tr>   <tr>     <td><input type="checkbox"></td>     <td>Alex</td>     <td>       <select>         <option value="1">上线</option>         <option value="2">下线</option>         <option value="3">停职</option>       </select>     </td>   </tr>   <tr>     <td><input type="checkbox"></td>     <td>Yuan</td>     <td>       <select>         <option value="1">上线</option>         <option value="2">下线</option>         <option value="3">停职</option>       </select>     </td>   </tr>   <tr>     <td><input type="checkbox"></td>     <td>EvaJ</td>     <td>       <select>         <option value="1">上线</option>         <option value="2">下线</option>         <option value="3">停职</option>       </select>     </td>   </tr>   <tr>     <td><input type="checkbox"></td>     <td>Gold</td>     <td>       <select>         <option value="1">上线</option>         <option value="2">下线</option>         <option value="3">停职</option>       </select>     </td>   </tr>   </tbody> </table>  <input type="button" id="b1" value="全选"> <input type="button" id="b2" value="取消"> <input type="button" id="b3" value="反选">   <script src="jquery-3.3.1.js"></script> <script>      var flag = false;     // shift按键被按下的时候     $(window).keydown(function (event) {         console.log(event.keyCode);         if (event.keyCode === 16){             flag = true;         }     });     // shift按键被抬起的时候     $(window).keyup(function (event) {         console.log(event.keyCode);         if (event.keyCode === 16){             flag = false;         }     });     // select标签的值发生变化的时候     $("select").change(function (event) {         // 如果shift按键被按下,就进入批量编辑模式         // shift按键对应的code是16         // 判断当前select这一行是否被选中         console.log($(this).parent().siblings().first().find(":checkbox"));         var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked");         console.log(isChecked);         if (flag && isChecked) {             // 进入批量编辑模式             // 1. 取到当前select选中的值             var value = $(this).val();             // 2. 给其他被选中行的select设置成和我一样的值             // 2.1 找到那些被选中行的select             var $select = $("input:checked").parent().parent().find("select")             // 2.2 给选中的select赋值             $select.val(value);         }     }); </script> </body> </html>  

jQuery-筛选器方法、操作标签、事件

hover事件

点击查看代码
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>     <style>         .c1{             border: 3px solid greenyellow;             background-color: khaki;         }     </style> </head> <body> <button id="d1" class="c1">哇咔咔!</button> <p>压在我头上是吧</p> <script>     let $btnEle = $('#d1');     // 克隆事件     $btnEle.click(function (){         // this指代的是当前被操作的标签对象,不能直接点jquery方法的,需要转换为jQuery对象         $('body').append($(this).clone(true))  // $(this)是当前按钮的jquery对象,然后把自己克隆一份,然后把克隆的这一份添加到body中去     })     $('p').hover(function (){         alert('你只能在下面呆着')     },     function (){         alert('那好吧,,那我走了')     }) </script> </body> </html> 

jQuery-筛选器方法、操作标签、事件
监听事件

点击查看代码
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>     <style>         .c1 {             border: 3px solid greenyellow;             background-color: khaki;         }     </style> </head> <body> <input type="text" id="d1">  <script>     $('#d1').on('input', function () {         console.log(this.value)     }) </script> </body> </html> 

jQuery-筛选器方法、操作标签、事件

阻止后续事件执行

能够触发form表单提交数据动作的标签有两个 	 <input type="submit">   	 <button></button> 给已经有事件的标签绑定事件 会先执行绑定的 再去执行默认的 	我们也可以让标签之前的事件不执行     	return false  $(':submit').click(function (e){             alert('一定要细心 千万不要慌!!!')             // return false  方式1             e.preventDefault()方式2         }) 
点击查看代码
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>     <style>         .c1 {             border: 3px solid greenyellow;             background-color: khaki;         }     </style> </head> <body> <p>     username: <input type="text" name="username"> </p> <input type="submit" value="提交"><button id="b1">点我</button>   <script>     $(":submit").click(function (e) {         alert(123);         //return false;         e.preventDefault();     }); </script> </body> </html> 

jQuery-筛选器方法、操作标签、事件

jQuery-筛选器方法、操作标签、事件
冒泡事件
涉及到标签嵌套并且有相同事件的时候 那么会逐级往上反馈并执行
jQuery-筛选器方法、操作标签、事件

点击查看代码
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>     <style>         .c1 {             border: 3px solid greenyellow;             background-color: khaki;         }     </style> </head> <body> <div>div     <p>div>p         <span>div>p>span</span>     </p> </div>  <script>     $('div').click(function (){         alert('div')     })     $('p').click(function (){         alert('p')     })     $('span').click(function (e){         alert('span')         // return false  // 方式一         e.stopPropagation()  // 方式二     }) </script> </body> </html> 

事件委托

""" 创建标签的两种方式 	JS 		document.createElement() 	jQuery 		$('<标签名>') """ 事件绑定默认情况下是不会对动态创建的标签生效的 如果想生效需要事件委托 $('div').on('click','button',function () {             alert('委托事件啦')         })  将div标签里的所有点击事件都委托给button标签执行  上述方式就可以解决动态标签事件的执行问题(注意委托指得是标签内部的标签) 

jQuery-筛选器方法、操作标签、事件