一、jQuery1、介绍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官网：/2.jQuery中文文档：/4、jQuery版本1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (5月20日)2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (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的所有的弟弟y3、属性选择器[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>
has和not
例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>
HTML代码
详解：// 找到ul标签下的所有子标签li$("ul li");// 找到ul标签下的第一个子标签li$("ul li:first");// 找到ul标签下的最后一个子标签li$("ul li:last");// 找到ul标签下的索引为1的子标签li$("ul li:eq(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").siblings();// 查找id的所有兄弟(弟弟哥哥都是兄弟)
somenode.parentElement 父节点标签元素somenode.children 所有子标签somenode.firstElementChild 第一个子标签元素somenode.lastElementChild 最后一个子标签元素somenode.nextElementSibling 下一个兄弟标签元素somenode.previousElementSibling 上一个兄弟标签元素
对比JS
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="/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="/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().removeClass('hide');// 2. 把其他的title标签下面的有body样式类的那个标签加上hide 类 $(this).parent().siblings().find('.body').addClass('hide')}}</script></html>
左侧菜单
