jquery 选择器、筛选器、事件绑定与事件委派
一、jQuery简介
1、可用的jQuery服务器网站:https://www.bootcdn.cn/
jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。
jQuery的引入
<script src='jquery 3.3.1.js'></script>//引入jQuery代码(模块)<script type="text/javascript">//写自己的js或者jquery代码</script>
二、jQuery与dom对象的关系
(1)jQuery是dom对象的集合; (2)jQuery和dom对象的方法和属性是隔离的,不能瞎用;(3)$ <==>jQuery;等价的
两者之间的转换关系 $('选择器')[索引] ----> dom对象 $('dom对象') ----> jquery对象
三、选择器
1、基础选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
2、层级选择器(>:儿子选择器;+:毗邻选择器;~:弟弟选择器)
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
3、基本筛选器(even:偶数;odd:奇数;lg:小于)
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
4、属性选择器
基本语法:$("[属性1][属性2]...")
$('[id="div1"]') $('["alex="sb"][id]')
5、表单选择器
$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")
6、表单属性选择器
:enabled:disabled:checked:selected
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jquery</title> </head> <body><div class="c1" id="i1">DIV</div><div class="c2"><p class="c4">111</p><a href="">click</a></div><div class="p1"><p class="c3" id="i3">222</p><p class="c3">333</p><p class="c3" id="i2">444</p><div><p>孙子</p></div><p class="c3">555</p><p class="c3 c8">666</p><p class="c3">777</p><p class="c3">888</p></div><div alex="123" peiqi="678">alex和配齐</div><div alex="123">alex</div><div alex="234">egon</div><div peiqi="678">8888</div><div class="c5"><input type="checkbox" name='in' value='456'>111<input type="checkbox" name='in' checked="checked">222<input type="checkbox" name='in'>333</div><select><option value="1">Flowers</option><option value="2" selected="selected">Gardens</option><option value="3" selected="selected">Trees</option></select><hr><div class="c6" yuan="123">123</div><div class="c7" yuan="234">234</div><div class="c9"><p>111</p><p>222</p><div class="c10"><p>333</p></div><a href="">click</a></div><script src='jquery 3.3.1.js'></script>//引入jQuery代码(模块)<script type="text/javascript">//写自己的js或者jquery代码// 基本选择器 // $('*').css('color','red');//通用选择器,选择所有// $('p').css('color','green');//元素选择器// $('#i1').css('color','red');//ID选择器// $('.c3').css('color','red');//类选择器//层级选择器// $('.p1 p').css('color','red');//子孙选择器// $('.p1>p').css('color','red');//儿子选择器// $('.c8+p').css('color','red');//毗邻选择器,只选择挨着的第一个指定标签// $('.c8~p').css('color','red');//弟弟选择器//基本筛选器// $('.p1 p:eq(3)').css('color','red');//选择索引为3的那个标签,返回值为dom对象// $('.p1 p:first').css('color','red');//第一个// $('.p1 p:last').css('color','red');//最后一个// $('.p1 p:even').css('color','red'); //偶数// $('.p1 p:lt(2)').css('color','red'); //小于// $('.p1 p:gt(2)').css('color','red'); //大于// 属性选择器// $('[alex]').css('color','red'); //属性名查找// $('[alex="123"]').css('color','red');//key=value查找// $("[alex='123'][peiqi='678']").css('color','red');//注意引号区分,多属性之间用[]区分,属性之间不能用空格//表单选择器// $(':checkbox');//获取到复选框的输入标签jquery对象// $('[type="checkbox"]');</script> </body> </html>
选择器演示示例代码
注意:jquery下载好,并加载好,再交给浏览器解析.
四、筛选器进阶
1、取文本方法
取值------------------------------------------------------------------ $('选择器')eq(2).html(); 获取第二个元素内部的html文本(包含标签); $('选择器')eq(2).text();只获取第二个元素中的文本内容; 赋值------------------------------------------------------------------ $('选择器')eq(2).html('值'); html文本形式替换标签中的内容; $('选择器')eq(2).text('值'); 字符串形式替换内容;
2、过滤筛选器
$("li").eq(2) //选择第二个元素 $("li").first() //获取到第一个元素 $("ul li").hasclass("test") //判断是否有class='test'属性,按照or判断,有就返回True
$(".c3:"+"eq("+index+")") ;1、结果是一个dom对象;2、需要做字符串的拼接;如:var index=3;$(".c3:"+"eq("+index+")").css("color","red"); $(".c3").eq(index)1、结果是一个$对象;2、不需要拼接,比较好用;如:var index=3;$(".c3").eq(index).css("color","red");
$(' :eq(index)')与$(' ').eq(indext)对比
3、查找选择器(导航选择器)
// 子--子孙// $('.c9').children('p').css('color','red');//找所有的儿子里面的p标签// $('.c9').find('p').css('color','red');//找子孙后代所有的p标签// $(".p1").children(":first").css("color","red");//$(".p1").children().first().css("color","red");//兄弟(next)// $('#i2').next().css('color','red');//找i2下一个兄弟标签 // $('#i2').nextAll().css('color','red');//找i2下面所有的兄弟标签// $('#i2').nextUntil('.c8').css('color','red');//选择直到.c8位置的兄弟标签,去头去尾取中间//兄弟(prev)// $('#i2').prev().css('color','red');//找i2先前的一个兄弟标签 // $('#i2').prevAll().css('color','red');//找i2先前所有的兄弟标签// $('#i2').prevUntil('#i3').css('color','red');//选择直到#i3位置的兄弟标签,去头去尾//父亲(parent) // $('#i2').parent().css('color','red');//找i2的父亲标签//$('#i2').parents('可以给定条件').css('color','red');//找i2的祖先标签
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jquery</title> </head> <body><div class="c1" id="i1">DIV</div><div class="c2"><p class="c4">111</p><a href="">click</a></div><div class="p1"><p class="c3" id="i3">222</p><p class="c3">333</p><p class="c3" id="i2">444</p><div><p>孙子</p></div><p class="c3">555</p><p class="c3 c8">666</p><p class="c3">777</p><p class="c3">888</p></div><div alex="123" peiqi="678">alex和配齐</div><div alex="123">alex</div><div alex="234">egon</div><div peiqi="678">8888</div><div class="c5"><input type="checkbox" name='in' value='456'>111<input type="checkbox" name='in' checked="checked">222<input type="checkbox" name='in'>333</div><select><option value="1">Flowers</option><option value="2" selected="selected">Gardens</option><option value="3" selected="selected">Trees</option></select><hr><div class="c6" yuan="123">123</div><div class="c7" yuan="234">234</div><div class="c9"><p>111</p><p>222</p><div class="c10"><p>333</p></div><a href="">click</a></div><script src='jquery 3.3.1.js'></script>//引入jQuery代码(模块)<script type="text/javascript">//写自己的js或者jquery代码// 基本选择器 // $('*').css('color','red');//通用选择器,选择所有// $('p').css('color','green');//元素选择器// $('#i1').css('color','red');//ID选择器// $('.c3').css('color','red');//类选择器//层级选择器// $('.p1 p').css('color','red');//子孙选择器// $('.p1>p').css('color','red');//儿子选择器// $('.c8+p').css('color','red');//毗邻选择器,只选择挨着的第一个指定标签// $('.c8~p').css('color','red');//弟弟选择器//基本筛选器// $('.p1 p:eq(3)').css('color','red');//选择索引为3的那个标签,返回值为dom对象// $('.p1 p:first').css('color','red');//第一个// $('.p1 p:last').css('color','red');//最后一个// $('.p1 p:even').css('color','red'); //偶数// $('.p1 p:lt(2)').css('color','red'); //小于// $('.p1 p:gt(2)').css('color','red'); //大于// 属性选择器// $('[alex]').css('color','red'); //属性名查找// $('[alex="123"]').css('color','red');//key=value查找// $("[alex='123'][peiqi='678']").css('color','red');//注意引号区分,多属性之间用[]区分,属性之间不能用空格//表单选择器// $(':checkbox');//获取到复选框的输入标签jquery对象// $('[type="checkbox"]');// 筛选器进阶// $(".p1 p").eq(1);//获取到的结果依旧是一个jquery对象// $(".p1 p").eq(1).text(); // $('.p1 p').ep(2).html();// 以下较为麻烦,需要做字符串的拼接// var index=3;// $(".c3:"+"eq("+index+")").css("color","red"); // $(".c3").eq(index).css("color","red");// console.log($('.c8').hasclass('t1'));//是否存在class='t1',如果存在返回True;// 导航查找// 子--子孙// $('.c9').children('p').css('color','red');//找所有的儿子里面的p标签// $('.c9').find('p').css('color','red');//找子孙后代所有的p标签// $(".p1").children(":first").css("color","red");//$(".p1").children().first().css("color","red");//兄弟(next)// $('#i2').next().css('color','red');//找i2下一个兄弟标签 // $('#i2').nextAll().css('color','red');//找i2下面所有的兄弟标签// $('#i2').nextUntil('.c8').css('color','red');//选择直到.c8位置的兄弟标签,去头去尾取中间//兄弟(prev)// $('#i2').prev().css('color','red');//找i2先前的一个兄弟标签 // $('#i2').prevAll().css('color','red');//找i2先前所有的兄弟标签// $('#i2').prevUntil('#i3').css('color','red');//选择直到#i3位置的兄弟标签,去头去尾//父亲(parent) // $('#i2').parent().css('color','red');//找i2的父亲标签//$('#i2').parents('可以给定条件').css('color','red');//找i2的祖先标签</script> </body> </html>
属性操作与选择器演示代码
五、事件绑定
绑定事件的语法: $('选择器 ').事件(function(){执行的代码; })注意:内部的this是dom对象;
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>添加一个元素</title> </head> <body><ul><li>111</li><li>222</li><li>333</li></ul><button >点击添加</button><script src='jquery 3.3.1.js'></script><script type="text/javascript">//给button添加点击事件 $('button').click(function (){$('ul').append('<li>444</li>');})//给li标签添加点击事件 $('li').click(function(){//内部的this是一个dom对象 alert($(this).text());})</script></body></html>
low版事件绑定示例
注意:我们这个绑定的示例,新增添的<li>444</li>标签没有点击事件,这不是我们想要的,所以我们需要学习高级一点的绑定事件,事件绑定+事件委派;
六、事件绑定与委派(推荐使用此方法绑定事件)
绑定事件+委派的语法: 父项$.on('事件','需要委派的标签',function() {执行的代码; }) 注意:内部的this是dom对象;
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>添加一个元素</title> </head> <body><ul><li>111</li><li>222</li><li>333</li></ul><button >点击添加</button><script src='jquery 3.3.1.js'></script><script type="text/javascript">//给button添加点击事件 $('button').click(function (){$('ul').append('<li>444</li>');})//通过父项绑定事件并委派事件 $('ul').on('click','li',function(){//内部的this是一个dom对象 alert($(this).text());})</script></body></html>
升级版事件绑定示例
七、属性操作(补充)
1 文本操作$("").html()$("").text()$("").html("参数")$("").text("参数")2 属性操作$().attr("")$().attr("","")$("p").attr("alex")$("p").attr("alex","dsb")$("p").removeAttr("class")3 class 操作$("p").addClass("c1")$("p").removeClass("c1")
八、实例补充
$(function(){jquery代码}) 代码先把文档所有的内容加载完; 再执行 $( ) 括号里面的代码
jquery的链式结构:表示的是当jquery调用方法时,代码的返回值还是当前的jquery对象;$(this).next().removeClass("hide"); 该代码返回值是$(this).next();
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>左侧栏</title><style type="text/css">body{margin:0;padding: 0;}ul{margin: 0;}aside{width: 20%;height: 800px;background-color: #BFA372FF;}button{display: inline-block;height: 50px;width:100%;line-height: 50px;background-color: #29C2D0FF;color:white;font-size: 20px;text-align: center;margin-top:2px;}.hide{display:none;}</style><script src='jquery 3.3.1.js'></script><script type="text/javascript">$( function(){$('button').on('click',function(){$(this).next().removeClass('hide');$(this).parent().siblings().children('aside .nav').addClass('hide');}) })</script> </head> <body><aside><div><button class='title'>第一章</button><ul class='nav hide'><li>111</li><li>111</li><li>111</li></ul></div><div><button class='title'>第二章</button><ul class='nav hide'><li>222</li><li>222</li><li>222</li></ul></div><div><button class='title'>第三章</button><ul class='nav hide'><li>333</li><li>333</li><li>333</li></ul></div></aside></body> </html>
左侧菜单栏jquery实例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>导航图</title><style type="text/css">div{margin-top: 15px;width:600px;height: 200px;line-height: 200px;background-color: #32A6CCFF;text-align:center;}ul{margin: 0;padding: 0;font-size: 0;}ul li{display: inline-block;line-height: 200px;font-size: 38px;text-align: center;width: 200px;}.c1{background-color: #A662D2FF;}.hide{display:none;}</style><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script type="text/javascript">$(function(){$('li').on('click',function(){$(this).css('color','white');$(this).css('background-color','#E95469FF');$(this).siblings().css('background-color',' #32A6CCFF');$(this).siblings().css('color','black');// alert($(this).val()); let value=$(this).val()let dis_arr=$(this).parents().parent().siblings();dis_arr.addClass('hide');dis_arr.eq(value).removeClass('hide');})})</script> </head> <body><div><ul><li class='nav' value="1">第一章</li><li class='nav' value="2">第二章</li><li class='nav' value='3'>第三章</li></ul></div><div class='hide c1'><h1>123</h1></div><div class='hide c1'><h1>456</h1></div><div class='hide c1'><h1>789</h1></div></body> </html>
tab表单切换jQuery实现
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title></head> <body><button>全选</button><button>取消</button><button>反选</button><hr><table border="1"><tr><td><input type="checkbox"></td><td>111</td><td>111</td><td>111</td><td>111</td></tr><tr><td><input type="checkbox"></td><td>222</td><td>222</td><td>222</td><td>222</td></tr><tr><td><input type="checkbox"></td><td>333</td><td>333</td><td>333</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>444</td><td>444</td><td>444</td><td>444</td></tr></table><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script>$('button').on('click',function(){switch($(this).text()){case '全选':$('[type="checkbox"]').prop('checked','checked');break;case '取消':$('[type="checkbox"]').prop('checked',false);break;case '反选':$("table :checkbox").each(function(){$(this).prop("checked",!$(this).prop("checked"));})break;default:console.log(123);break;}})// $("button").click(function(){// if($(this).text()=="全选"){ // $(this)代指当前点击标签// $("table :checkbox").prop("checked",true)// }// else if($(this).text()=="取消"){// $("table :checkbox").prop("checked",false)// }// else {// $("table :checkbox").each(function(){// $(this).prop("checked",!$(this).prop("checked"));// });// }// });</script> </body> </html>
table反选操作prop的使用
转载于:https://www.cnblogs.com/angle6-liu/p/10179473.html
jquery 选择器、筛选器、事件绑定与事件委派相关推荐
- HTML——jQuery之事件绑定、取消事件绑定及事件委托
事件绑定 事件绑定有两种方法:分别是:.click() 和.on() <!DOCTYPE html> <html lang="en"> <head&g ...
- addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...
这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在htm ...
- 事件绑定、事件监听、事件委托
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等 ...
- javascript的事件绑定与事件委托
昨天有位web前端爱好者问关于javascript事件绑定和事件委托的知识,小编今天就来跟大家交流一下这个知识点! 事件绑定:事件是用户或者浏览器自身进行的特定的行为,这些事件都有自己特定的名字,如: ...
- 简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序
JavaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序 这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 jav ...
- 你真的理解事件绑定、事件冒泡和事件委托吗?
一文了解Web API中的事件绑定.事件冒泡.事件委托 引言 正文 一.事件绑定 1.事件和事件绑定时什么? 2.事件是如何实现的? 二.事件冒泡 1.事件模型 2.事件模型解析 (1)捕获阶段 (2 ...
- 事件绑定,事件监听,事件委托
事件绑定,事件监听,事件委托 事件绑定 一个元素只能绑定一个事件 obj.on+事件名称=funciton(){} 事件监听 事件监听可以监听很多很多事件. this指向当前调用触发事件的主体对象. ...
- jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签 选择器: 基本选择器(同css) id选择器 $("#id")标签选择器 $('tagName')class选择器 $(".className")配合 ...
- jquery事件绑定与事件委托
//事件绑定简写形式$(".div2 button").click(function () {$(".div1").scrollTop(0)})//写全了方式$ ...
最新文章
- 学计算机专业需要买电脑么,上大学该买电脑吗?学长:买的时候以为是刚需,买了变成“鸡肋”...
- 分数线划定(洛谷-P1068)
- MySQL中concat以及group_concat的使用
- maven docker 插件集成的几个小坑
- SPH(光滑粒子流体动力学)流体模拟实现四:各向异性(Anisotropic)表面光滑(1)
- VS2017使用Qt教程
- TIT 计算机图形学 实验一 十二面体线框模型
- python 视频清晰度_python识别视频黑屏或者低清晰度
- 【bzoj4094】【洛谷3097】Optimal Milking
- nlp自然语言处理_nlp满足可持续投资
- HLS 开发学习(五) 稀疏矩阵向量乘法
- 2000-2020年上市公司常用指标数据集
- 滑环在机电行业的应用
- java 印章 方_用Java实现支持圆形带五角星 方形电子印章
- 递归皮质网络RCN简单理解
- Jmeter使用教学
- CES 2017媒体日:VR AR波澜不惊,无人驾驶和智能家居大放异彩
- 关于Mybatis 异常BindingException: Type interface XXXX is not known to the MapperRegistry.
- Go语言自学系列 | golang关键字continue
- matlab 2014 win7 64位,win764位系统电脑肿么安装matlab2014a
热门文章
- 关于深度学习框架Hamaa与Python API文档生成工具Sophon
- python及numpy,pandas易混淆的点
- 自动驾驶计算本车离期望轨迹距离的方法
- python把模块装到文件夹中_把模块有关联的放在一个文件夹中 在python2中调用文件夹名会直接失败 在python3中调用会成功,但是调用不能成功的解决方案...
- java 后台自动刷新请求_spring oauth2+JWT后端自动刷新access_token
- linux 免密安装
- YOLOv4论文笔记
- Web前端基础---CSS样式--盒子模型--浮动与定位
- pycharm默认注释与快捷键功能
- Navicat premium查看数据库表中文注释的两种方式