jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)
一、jQuery 1、介绍 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。 jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。 它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 2、优势 1.一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 2.丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，
再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。 3.链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 4.事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 5.Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。 6.跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。 7.插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件， 并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。 3、内容 1.选择器 2.筛选器 3.样式操作 4.文本操作 5.属性操作 6.文档处理 7.事件 8.动画效果 9.插件 10.each、data、Ajax 小提示： 1.jQuery官网：https://jquery.com/ 2.jQuery中文文档：http://jquery.cuishifeng.cn/ 4、jQuery版本 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日) 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日) 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。 维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代， 如果没有特殊要求的话，一般都会选择放弃对678的支持。 5、jQuery对象 1.概述 jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法。 例如： $("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。 相当于： document.getElementById("i1").innerHTML; 虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。 2.约定 一般情况下我们在声明一个jQuery对象变量的时候在变量名前面加上$： var $variable = jQuery对像 var variable = DOM对象 3.jquery对象和dom对象转换 3-1、jQuery对象转成DOM对象：jQuery对象可以通过[index]方法获得相应的DOM对象。 var $divEle = $("#d1"); //得到jQuery对象 var divEle = $divEle[0]; //转换成DOM对象 var divEle = $("#d1")[0]; //转换成DOM对象 jQuery还可以通过.get(index)方法得到相应的DOM对象 var divEle = $divEle.get(0); //转换成DOM对象 3-2、DOM对象转成jQuery对象：用$()将DOM对象包装起来，就能获得jQuery对象了 var divEle = document.getElementById("d"); //得到DOM对象 var $divEle = $(divEle); //转成jQuery对象 二、jQuery之查找标签 基础写法：$(selector).action() 1、基本选择器 id选择器：$("#id") class选择器：$(".className") 标签选择器：$("tagName") 配合使用：$("div.c1") // 找到有c1 class类的div标签 所有元素选择器：$("*") 组合选择器：$("#id, .className, tagName") 2、层级选择器 x和y可以为任意选择器 $("x y"); // x的所有后代y（子子孙孙） $("x > y"); // x的所有儿子y（儿子） $("x + y") // 找到在x后面的第一个y(毗邻) $("x ~ y") // 找到x的所有的弟弟y 3、属性选择器 [attribute] [attribute=value] // 属性等于 [attribute!=value] // 属性不等于 例子： <input type="text"> <input type="password"> <input type="checkbox"> $("input[type]") // 找到有type属性的input标签 $("input[type='checkbox']"); // 找到type属性等于checkbox的input标签 $("input[type!='text']"); // 找到type属性不是text的input标签 4、基本筛选器 :first // 第一个 :last // 最后一个 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) :not(元素选择器) // 移除所有满足not条件的标签 例1： $("div:has(h1)") // 找到所有后代中有h1标签的div标签 $("div:has(.c1)") // 找到所有后代中有c1样式类的div标签 $("li:not(.c1)") // 找到所有不包含c1样式类的li标签(即没有c1样式的li标签) $("li:not(:has(a))") // 找到所有后代中不含a标签的li标签 区别：
$("div:has(h1)")：先找到所有div标签，然后看div标签的子子孙孙(后代)中是否有h1标签，有则符合条件，选择到的是div标签 比如： <div> <h1>符合条件</h1> </div> <div> 不符合条件 </div> $("div:not(.c1)")：先找到所有div标签，然后看div标签的class属性，没有class="c1"的div标签才符合条件，选择到的是div标签 比如： <div> 符合条件 </div> <div class="c1"> 不符合条件 </div>
例2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> </head> <body> <ul> <li>1</li> <li>2</li> <li id="l3">3</li> <li>4</li> <li>5</li> </ul> <hr> <div><p>div>p</p></div> <div class="c1"><span>div>span</span></div> <div class="c1"> <p> <span>div>p>span</span> </p> </div> </body> </html>
详解：
// 找到ul标签下的所有子标签li
$("ul li");
// 找到ul标签下的第一个子标签li
$("ul li:first");
// 找到ul标签下的最后一个子标签li
$("ul li:last");
// 找到ul标签下的索引为1的子标签li
$("ul li:eq(1)");
ul li:nth-child(1)
// 找到第一个li标签 $("li:first"); // 找到最后一个li标签 $("li:last"); // 找到索引大于1的li标签 $("li:gt(1)"); // 找到索引小于1的li标签 $("li:lt(1)"); // 找到索引等于1的li标签 $("li:eq(1)"); // 找到索引为偶数的li标签 $("li:even"); // 找到索引为奇数的li标签 $("li:odd"); 5、表单筛选器(仅用于筛选表单) 1.表单type类型 :text :password :file :radio :checkbox :submit :reset :button 例如：找到所有的checkbox 用属性选择器：$("input[type='checkbox']") 用表单筛选器：$(":checkbox") 2.表单对象属性: :enabled :disabled :checked :selected 例如： <!--HTML代码--> <form action=""> <input type="checkbox" value="a"> <input type="checkbox" value="b"> <input type="radio" value="c"> <select id=""> <option value="1">1</option> <option value="2">2</option> </select> </form> 找到被选中的复选框 $(":checked"); 注意： 当表单中只有一种选择按钮的时候，上面这样写是可以的， 但是表单中同时有复选按钮(checkbox)、单选按钮(radio)和下拉框(select)的时候， 上面这样写$(":checked");会把所有选中的标签都找到，即不分是单选还是复选还是下拉框。 因此一般要找到被选中的那个标签，可以指定$("input:checked");是input标签中选中的按钮。 或者$("option:selected");是option标签中选中的下拉框。 二、筛选器方法 1.下一个元素(弟弟)： $("#id").next() // 查找id的下一个元素(是同级的元素，不是子孙) $("#id").nextAll() // 查找id下面的所有元素 $("#id").nextUntil("#i2") // 查找id下面的元素一直找到i2就停止(不包括i2的元素) 2.上一个元素(哥哥)： $("#id").prev() // 查找id的上一个元素 $("#id").prevAll() // 查找id上面的所有元素 $("#id").prevUntil("#i2") // 查找id上面的元素一直找到i2就停止(不包括i2的元素) 3.父亲元素： $("#id").parent() // 查找当前元素的第一个父元素 $("#id").parents() // 查找当前元素的所有的父辈元素 $("#id").parentsUntil("body") // 查找当前元素的所有的父辈元素，一直找到body就停止(不包括body) 4.儿子和兄弟元素： $("#id").children();// 查找id的所有儿子
$("#id").children("selector");// 查找某个儿子
$("#id").children("#i1");// 查找id为i1的儿子 $("#id").siblings();// 查找id的所有兄弟(弟弟哥哥都是兄弟)
somenode.parentElement 父节点标签元素
somenode.children 所有子标签
somenode.firstElementChild 第一个子标签元素
somenode.lastElementChild 最后一个子标签元素
somenode.nextElementSibling 下一个兄弟标签元素
somenode.previousElementSibling 上一个兄弟标签元素
5.查找(子孙)
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p") // find是在子子孙孙中找，找到的是p标签
等价于$("div p")
6.筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1") // filter是从结果中过滤出有c1样式类的
等价于 $("div.c1")
7.补充(跟筛选器一样的，不过改写成了方法而已)
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
例如：
$("li:first"); //找到第一个li标签
等价于
$("li").first(); //找到第一个li标签
三、综合例子
例1：自定义模态框，使用jQuery实现弹出和隐藏功能。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>JQ模态框示例</title> <style type="text/css"> .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 199; } .model { width: 400px; height: 300px; background-color: white; position: fixed; top: 50%; left: 50%; margin-top:-150px; margin-left:-200px; z-index:1999; } .hide { display:none; } .close { position: absolute; right:15px; top:15px; cursor:pointer; } </style> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <div> <p>渡远荆门外，来从楚国游。</p> <p>山随平野尽，江入大荒流。</p> <p>月下飞天镜，云生结海楼。</p> <p>仍怜故乡水，万里送行舟。</p> </div> <button type="button" id="login">登录</button> <!--盖板--> <div class="cover hide"></div> <!--点击登录后弹出的页面--> <div class="model hide"> <form action=""> <p> <label>用户名： <input type="text" name="username"> </label> </p> <p> <label>密码： <input type="password" name="password"> </label> </p> </form> <!--关闭键--> <div class="close">x</div> </div> <script type="text/javascript"> $("#login")[0].onclick=function () { // 去掉cover和modal的hide样式类 $(".cover,.model").removeClass("hide"); } $(".close")[0].onclick=function () { // 添加cover和modal的hide样式类 $(".cover,.model").addClass('hide'); } </script> </body> </html>
例2、左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu { width: 234px; } .item { border-bottom: 1px solid white; } .title { background-color: #2b99ff; height: 50px; line-height: 50px; color: white; text-align: center; } .hide { display: none; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="title">菜单一</div> <div class="body hide"> <div>内容一</div> <div>内容二</div> <div>内容三</div> </div> </div> <div class="item"> <div class="title">菜单二</div> <div class="body hide"> <div>内容一</div> <div>内容二</div> <div>内容三</div> </div> </div> <div class="item"> <div class="title">菜单三</div> <div class="body hide"> <div>内容一</div> <div>内容二</div> <div>内容三</div> </div> </div> </div> </body> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> // 1. 找到所有有title样式的标签，给他们绑定点击事件 var $titleEles = $(".title"); for (var i=0;i<$titleEles.length;i++){ $titleEles[i].onclick=function () { // 如果被点击要做的事儿 // 1. 把我这个标签下面的有body样式类的标签 移除hide类 console.log(this); // this指的是：触发事件的当前标签; // 注意this是一个DOM对象，点击出现，再点击隐藏 $(this).next().toggleClass('hide'); } } </script> </html>
