:first // 第一个:last // 最后一个:eq(index)// 索引等于index的那个元素:even // 匹配所有索引值为偶数的元素，从 0 开始计数:odd // 匹配所有索引值为奇数的元素，从 0 开始计数:gt(index)// 匹配所有大于给定索引值的元素:lt(index)// 匹配所有小于给定索引值的元素:not(元素选择器)// 移除所有满足not条件的标签:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
属性选择器：<input type="text"><input type="password"><input type="checkbox">$("input[type=‘checkbox‘]");// 取到checkbox类型的input标签$("input[type!=‘text‘]");// 取到类型不是text的input标签表单对象属性查找<form> ?<input name="email" disabled="disabled" /> ?<input name="id" /></form>$("input:enabled") ?// 找到可用的input标签addClass();// 添加指定的CSS类名。removeClass();// 移除指定的CSS类名。hasClass();// 判断样式存不存在toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
重点记忆---JQuery链式调用
当一个参数需要同时调用多个方法时，正常的做法是obj = Obj(); ?obj.init(); ?obj.setFlag()；但是如果你在每个方法里面加上return this，返回当前对象function obj(){...return this;}function init(){...return this;}function setFlag(){...return this;}，那你就可以这么写Obj().init().setFlag();这个写法就是链式调用使得代码更优雅，美观，节省代码量，更加效率。但是并不是在哪种情况下都适用的：因为返回的都是对象本身，也就是说没有返回值，所以这种方法不一定在任何环境下都适合。jQuery练习--左侧菜单
?1 <!DOCTYPE html> ?2 <html lang="en"> ?3 <head> ?4 ????<meta charset="UTF-8"> ?5 ????<title>左侧菜单作业</title> ?6 ????<style> ?7 ????????body { ?8 ????????????margin: 0 auto; ?9 ????????????background-color: white; 10 ????????} 11 ?12 ????????ul { 13 ????????????list-style-type: none; 14 ????????????margin: 0; 15 ????????????padding: 0; 16 ????????} 17 ?18 ????????.hide { 19 ????????????display: none; 20 ????????} 21 ?22 ????????/*左侧菜单样式*/ 23 ?24 ????????.left { 25 ????????????width: 200px; 26 ????????????height: 100%; 27 ????????????position: fixed; 28 ????????????top: 0; 29 ????????????left: 0; 30 ????????????background-color: gray; 31 ????????} 32 ?33 ????????.c1 { 34 ????????????width: 190px; 35 ????????????margin: 0; 36 ????????????padding-top: 20px; 37 ????????????padding-left: 10px; 38 ????????} 39 ?40 ????????.c1:hover { 41 ????????????background-color: blue; 42 ????????} 43 ?44 ????????.content { 45 ????????????margin-left: 20px; 46 ????????} 47 ?48 ????????.content li { 49 ????????????margin-left: -20px; 50 ????????????margin-bottom: 5px; 51 ????????????padding-left: 30px; 52 ????????} 53 ?54 ????????.content li:hover { 55 ????????????background-color: red; 56 ????????} 57 ????</style> 58 </head> 59 <body> 60 <div class="left"> 61 ????<div id="d1" class="c1">菜单一</div> 62 ????<div class="content hide"> 63 ????????<ul> 64 ????????????<li>内容一</li> 65 ????????????<li>内容二</li> 66 ????????????<li>内容三</li> 67 ????????????<li>内容四</li> 68 ????????</ul> 69 ????</div> 70 ?71 ????<div id="d2" class="c1">菜单二</div> 72 ????<div class="content hide"> 73 ????????<ul> 74 ????????????<li>内容一</li> 75 ????????????<li>内容二</li> 76 ????????????<li>内容三</li> 77 ????????????<li>内容四</li> 78 ????????</ul> 79 ????</div> 80 ?81 ????<div id="d3" class="c1">菜单三</div> 82 ????<div class="content hide"> 83 ????????<ul> 84 ????????????<li>内容一</li> 85 ????????????<li>内容二</li> 86 ????????????<li>内容三</li> 87 ????????????<li>内容四</li> 88 ????????</ul> 89 ????</div> 90 </div> 91 ?92 <!--导入jquery--> 93 <script src="jquery-3.3.1.min.js"></script> 94 ?95 <script> 96 ????$(‘.c1‘).click(function () { 97 ????????$(‘.content‘).addClass(‘hide‘); 98 ????????$(this).next().removeClass(‘hide‘) 99 ????});100 </script>101 </body>102 </html>jQuery常用知识
原文地址：https://www.cnblogs.com/dingyutao/p/9135206.html