把最近学习的前端框架jQuery整理一下。你可能听说过jQuery，因为他是JavaScript世界中使用最广泛的一个库。
江湖传言，全世界大约有80~90%的网站直接或间接地使用了jQuery。鉴于它如此流行，又如此好用，所以每一个入门JavaScript的前端工程师都应该了解和学习它。
1.jquery是由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
2.jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
3.它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
4.jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
5.jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的。如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html() //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错 //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$所以，$variable = jQuery对象，variable = DOM对象（variable指的是变量）。通过$variable[0]，可以将jQuery对象转为DOM对象，比如：$("#test").html()和$("#test")[0].innerHTML
就是一个意思。
jQuery的基础语法：$(selector).action()
前端操作元素的两个步骤，就是找到这个元素，然后操作他，首先看一下jQuery是怎么寻找元素的：
选择器实例选取根据上面的选择器，做了一个简单的左侧菜单练习，大概的功能就是点击菜单选项，下面的子选项就显示，其他菜单选项的子选项就隐藏：
首先，我们把基本的标签都写好，设置好初始状态：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back{ height: 600px; width: 100%; } .menu{ float: left; width: 30%; height: 600px; background-color: blue; } .content{ float: left; width: 70%; height: 600px; background-color: #84a42b; } .m{ line-height: 40px; background-color: mediumaquamarine; } .hide{ display: none; } </style> </head> <body> <div class="back"> <div class="menu"> <div class="item"> <div class="m" >菜单一</div> <div class="con"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="m" >菜单二</div> <div class="con hide"> <div>222</div> <div>222</div> <div>222</div> </div> </div> <div class="item"> <div class="m" >菜单三</div> <div class="con hide"> <div>333</div> <div>333</div> <div>333</div> </div> </div> </div> <div class="content"> </div> </div> </body> </html> View Code现在的状态是这样：
但是这只是静态的，点击菜单二没有任何反应。下一步，我们应该要给三个菜单标签绑定点击事件了，就是点击他之后，其他两个下面的子标签要隐藏：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back{ height: 600px; width: 100%; } .menu{ float: left; width: 30%; height: 600px; background-color: blue; } .content{ float: left; width: 70%; height: 600px; background-color: #84a42b; } .m{ line-height: 40px; background-color: mediumaquamarine; } .hide{ display: none; } </style> </head> <body> <div class="back"> <div class="menu"> <div class="item"> <div class="m" οnclick="show(this)">菜单一</div> <div class="con"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="m" οnclick="show(this)">菜单二</div> <div class="con hide"> <div>222</div> <div>222</div> <div>222</div> </div> </div> <div class="item"> <div class="m" οnclick="show(this)">菜单三</div> <div class="con hide"> <div>333</div> <div>333</div> <div>333</div> </div> </div> </div> <div class="content"> </div> </div> <script src="jquery-3.4.0.js"></script> <script> function show(ele) { //首先我们要把点击的菜单下面并列的div标签找到，通过.next(), //然后移除hide属性 $(ele).next().removeClass('hide'); //第二步就是把其他的菜单下面并列的div标签加上这个hide属性 //我的思路是先找到父级，然后找父级的兄弟级，然后是兄弟级下面子级中有class=con的 //注意con前面要加上那个点 $(ele).parent().siblings().children('.con').addClass('hide'); } </script> </body> </html> View Code下面是一个切换table的练习，可以试着做一下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; padding: 0px; } .tab_outer{ width: 60%; margin: auto; } .menu{ background-color: #5689ff; line-height: 40px; } .content{ background-color: yellowgreen; height: 300px; } .menu li{ display: inline-block; color: #f9f9f9; } .current{ background-color: dimgrey; color: orangered; } .hide{ display: none; } </style> </head> <body> <div class="tab_outer"> <ul class="menu"> <li xxx="c1" class="current" οnclick="tab(this);">菜单一</li> <li xxx="c2" οnclick="tab(this);">菜单二</li> <li xxx="c3" οnclick="tab(this);">菜单三</li> </ul> <div class="content"> <div id="c1">内容一</div> <div id="c2" class="hide">内容二</div> <div id="c3" class="hide">内容三</div> </div> </div> </div> <script src="jquery-3.4.0.js"></script> <script> function tab(ele) { var index = $(ele).attr('xxx'); $('#'+index).removeClass('hide').siblings().addClass('hide'); $(ele).addClass('current').siblings().removeClass('current'); } </script> </body> </html> View Code在上面两个练习中，还是出现了没有讲到的筛选器，下面说一下筛选器：
3.2.1 过滤筛选器
下面这几个是常用的基本筛选器，在上面的表中也可以找到，所以上面表格中的内容背都要背下来。
$("li").eq(2) 也可以写为$("li:eq(2)"),就是所有li标签的第3个，index从0开始
$("li").first() 也可以写为$("li:first"),就是所有li标签中的第一个
$("ul li").hasclass("test") 列表中，有class="test"的li标签
3.2.2 查找筛选器
$("div").children(".test")
.children()返回匹配元素集合中每个元素的所有子元素（仅儿子辈）。参数可选，添加参数表示通过选择器进行过滤，对元素进行筛选
$("div").find(".test")
.find()方法是返回匹配元素集合中每个元素的后代。参数是必选的，可以为选择器、jquery对象可元素来对元素进行筛选。
<div class="outer">outer <div class="inner"> inner <p>inner p</p> </div> <p>alex</p> </div> <script src="jquery-3.4.0.js"></script> <script> $(".outer").children("p").css("color","red"); // $(".outer").find("p").css("color","red"); </script> .children()和.find()最后结果：
.siblings(expr) ---查找所有兄弟（包括哥哥和弟弟）
.next(expr) ---查找紧挨着的弟弟
.nextAll(expr) ---查找所有的弟弟
.nextUntil(expr) ---查找所有弟弟，直到碰到符合expr条件，不包含符合expr条件的那个元素
.prev(expr) ---查找紧挨着的哥哥
.prevAll(expr) ---查找所有哥哥
.prevUntil(expr) ---查找所有哥哥，直到碰到符合expr条件，不包含符合expr条件的那个元素
注：expr是指可选的参数，包含用于匹配元素的选择器表达式。
<ul class="test"> <li class="begin">1111</li> <li>2222</li> <li>3333</li> <li>4444</li> <ul> <li>aaaaaaaaaaaaaa</li> </ul> <h2>hahaha</h2> <li>4444</li> <li id="end">5555</li> <li>6666</li> </ul> 测试代码 $("li:eq(1)").siblings().css("color","red") //让第二个li的所有兄弟改变颜色，如果不加eq(1),所有的都变红 $("li").eq(2).next().css("color","red"); //让第三个li后面的弟弟变色 $("li").eq(2).nextAll().css("color","red"); //让第三个li后面所有的弟弟变色 $("li").eq(2).nextUntil("#end").css("color","red"); //让第三个li后面所有的弟弟变色，直到出现一个id是end的弟弟为止，这个弟弟不变色.prev的用法也是一样的，就是换成了前面的哥哥。
$(".test").parent() 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）
$(".test").parents() 获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）
$(".test").parentUntil() 获得当前匹配元素集合中每个元素的祖先元素，直到（但不包括）被选择器、DOM 节点或 jQuery 对象匹配的元素
经过了前面的学了，这三个大概都能猜到怎么用了：
<div class="outer">outer <div class="inner"> inner <p>inner p</p> </div> <p>pengfy</p> </div> 测试代码 console.log($(".outer .inner p").parent().html()) //p标签打印父元素中的内容 $(".outer .inner p").parents().css("color","red"); //p标签祖先元素都变色这里如果也打印的话，你会发现找到的祖先元素已经到了html标签了
$(".outer .inner p").parentsUntil("body").css("color","red");这里暂时看不出差别，试着打印一下内容就清楚了，这里只到了outer类这一层。
下一篇会介绍操作元素，操作属性等内容。
转载于:https://www.cnblogs.com/pengfy/p/11130305.html
