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的使用
jquery 选择器、筛选器、事件绑定与事件委派的更多相关文章
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- jquery选择器筛选器
jQuery对象 Query 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里 ...
- JQuery 选择器 筛选器
什么是jQuery对象 参考:http://jquery.cuishifeng.cn/css.html jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQue ...
- jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
- JS 事件绑定、事件监听、事件委托详细介绍
原:http://www.jb51.net/article/93752.htm 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代 ...
- JS 中的事件绑定、事件监听、事件委托是什么？
在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等.这些名词是什么意思呢,有什么作用呢? 事件绑定 要想让 JavaScri ...
- JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE
转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段: 事件捕获 --> 事件目标 --> ...
- 理解Javascript中的事件绑定与事件委托
最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定 ...
- 事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE
● 事件分为三个阶段: 事件捕获 --> 事件目标 --> 事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover……)首先发生在document上,然后依次传 ...
随机推荐
- 看懂Azure ML、Windows ML和ML.NET
最新2018微软中国人工智能大会刚刚落下帷幕,对于.NET开发者,可能早已被眼花缭乱的微软家AI体系弄晕了.我特意整理了几张图,以示区别. Azure ML提供了大量认知API服务,外加一个机器学习的 ...
- Python爬虫入门教程 39-100 天津市科技计划项目成果库数据抓取 scrapy
爬前叨叨 缘由 今天本来没有打算抓取这个网站的,无意中看到某个微信群有人问了一嘴这个网站,想看一下有什么特别复杂的地方,一顿操作下来,发现这个网站除了卡慢,经常自己宕机以外,好像还真没有什么特殊的.. ...
- C#版 - Leetcode 633. 平方数之和 - 题解
版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...
- 基础才是重中之重~delegate里的Invoke和BeginInvoke
回到目录 Invoke和BeginInvoke都是调用委托实体的方法,前者是同步调用,即它运行在主线程上,当Invode处理时间长时,会出现阻塞的情况,而BeginInvod是异步操作,它会从新开启一 ...
- Unity资源打包学习笔记（一）、详解AssetBundle的流程
转载请标明出处:http://www.cnblogs.com/zblade/ 本文参照unity官网上对于assetBundle的一系列讲解,主要针对assetbundle的知识点做一个梳理笔记,也为 ...
- 新的一年，来看看大数据与AI的未来展望
本文由云+社区发表 作者:堵俊平 在数据爆炸与智能革命的新时代,新的平台与应用层出不穷,开源项目推动了前沿技术和业界生态快速发展.本次分享将以技术和生态两大视角来看大数据和人工智能技术的发展,通过分析 ...
- 适配器模式 adapter 结构型 设计模式(九)
现实世界中的适配器模型 先来看下来几个图片,截图自淘宝 上图为港版的插头与港版的插座 上图为插座适配器卖家的描述图 上图为适配后的结果 现实世界中适配器模式 角色分类 这就是适配器模式在电 ...
- python 中 *args 和 **kwargs 的区别
在 python 中,*args 和 **kwargs 都代表 1个 或 多个 参数的意思.*args 传入tuple 类型的无名参数,而 **kwargs 传入的参数是 dict 类型.下文举例说明 ...
- python基础1--安装、package、数据类型
1.下载python 下载地址https://www.python.org/downloads/ 2.Package以及数据类型 自带package和外部package 自带package举例: os ...
- javascript基础修炼(11)——DOM-DIFF的实现
目录 一. 再谈从Virtual-Dom生成真实DOM 二. DOM-Diff的目的 三. DOM-Diff的基本算法描述 四. DOM-Diff的简单实现 4.1 期望效果 4.2 DOM-Diff ...