jQuery选择器种类

由于经常使用jQuery，但是其中的很多选择器又不太能够熟练记牢使用，所以趁着上周有人分享，我再仔细的把jQuery的选择器过一遍，争取一次拿下，以后做到运用自如。jQuery选择器主要来分可以分为三种：（1）基本选择器（2）层次选择器（3）过滤选择器(4) 表单选择器

1、基本选择器

基本选择器主要就是比较常见和常用的集中，是必须要掌握的。

#ID id选择器返回一个对象$("#div")

.class类选择器返回集合$(".content")

Element 标签选择器返回集合$("input")

* 匹配所有元素返回集合$("*")

selector1,selector2,selector3,....合并每个选择器匹配的元素，返回集合$("#div,.class,input")

2、层次选择器（主要是选择层次下面的元素）

$("E F") 选择E元素中的所有F后代元素(注意：是子孙元素) 返回集合

$("P>C") 选择P元素下的C子元素（注意：是子元素）返回集合

$("P+N") 选择P元素后的相邻元素（即下一个兄弟元素），和$("P").next("N")方法执行效果相同

$("P~S") 选择P元素之后的所有S兄弟元素，和$("P").nextAll("S")方法执行效果相同，另pre()方法和next()方法相对。preAll()和nextAll()相对。

注意siblings()方法和nextAll()方法的区别：siblings()是所有前后的兄弟元素，nextAll()是所有后面的兄弟元素

第三和第四个选择器常常用后面的写法代替

3、过滤选择器（主要是按照后面的过滤条件取出前面的元素）

通过特定的过滤规则筛选DOM元素

格式::过滤规则(以冒号作为过滤条件)

分类：基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象过滤器

(1)基本过滤器

:first 选取第一个元素，$("div:first")

:last 选择最后一个元素，$("div:last")

:not(selector) 除了和选择器匹配元素之外的所有元素，$("input:not(.mytext)")

:even 索引是偶数的所有元素，$("tr:even")

:odd 索引是奇数的所有元素，$("tr:odd")

:eq(index),:gt(index),lt(index) 分别选择索引等于，大于和小于index的元素

:header 选择所有的标题元素，$(":header")如h1,h2,h3...

:animated 选择当前执行动画的元素，$("div:animated")

(2)内容选择器

:contains(text) 文本内容为text的元素，$("div:contains('Hello')")

:empty 不包含子元素和文本内容的空元素

:has(selector) 包含有匹配选择器的元素为子元素的元素，$("div:has(p)")

:parent 选择包含的子元素或者文本内容的元素

(3)可见性过滤器

:hidden 选择不可见的元素，$("div:hidden")

:visible 选择可见的元素，$("input:visible")

在可见性选择器中，需要注意选择器:hidden，它不仅包括样式属性display为"none"的元素，也包括文本隐藏域()和visibility:hidden之类的元素。

.show(3000) .hide(1000

(4)属性过滤器

通过元素的属性或者属性值选择元素

[attri] 选择拥有此属性的元素，$("div[id]")

[attri=value] 选择属性的值等于value的元素

[attri！=value] 属性的值不等于value的元素

[attri^=value] 属性的值以value开头的元素

[attri$=value] 属性的值以value结尾的元素

[attri*=value] 属性的值中含有value的元素

[selector1][selector2]…合并多个属性过滤器的结果

(5)子元素过滤器(是选择子类元素的)

:first-child 选择每个父元素的第一个子元素，$("ul li:first-child")

:last-child 选择每个父元素的最后一个子元素

:only-child 选择是父元素的唯一子元素

:nth-child(even) 选择每个父元素中索引是偶数的子元素

:nth-child(odd) 选择每个父元素中索引是奇数的子元素

:nth-child(index) 选择每个父元素中索引等于index的子元素，index有倍数形式，如3n,表示所有3的倍数，n=0,1,2…

(6)表单对象属性过滤选择器

:enabled 选择所有可用的表单元素，$("#form1 :enabled")

:disabled

:checked 选择所有被选中的单选按钮和复选框元素

:selected 选择所有下拉列表中被选中的选项元素

4、表单选择器

:input 选择所有表单元素，包括<select><button>等元素</p><p>:text 选择所有文本框,$("#form1:text")</p><p>:password 选择所有密码文本框</p><p>:radio 选择所有单选按钮</p><p>:checkbox 选择所有复选框</p><p>:submit :reset :button</p><p>:image :file :hidden</p><p>需要特别注意的是后迭代选择器和过滤选择器的不同：</p><p>例如：</p><p><div class="test"></p><p><div style="display:none;">aa</div></p><p><div style="display:none;">bb</div></p><p><div style="display:none;">cc</div></p><p><div class="test" style="display:none;">dd</div></p><p></div></p><p><div class="test" style="display:none;">ee</div></p><p><div class="test" style="display:none;">ff</div></p><p>使用如下的jQuery选择器分别获取他们。</p><p>var $t_a = $('.test :hidden'); //带空格的JQuery选择器（后迭代选择器，选取的是class为"test"的元素里面的隐藏元素）</p><p>var $t_b = $('.test:hidden'); //不带空格的jQuery选择器（过滤选择器，选取隐藏的class为"test"的元素）</p><p>var len_a = $t_a.length;</p><p>var len_b = $t_b.length;</p><p>alert("$('.test :hidden') = " + len_a); //输出4</p><p>alert("$('.test:hidden') = " + len_b); //输出3</p><p>几个常用的jQuery的方法如下：</p><p>show()：显示隐藏的匹配元素。</p><p>css(name,value)：给元素设置样式。</p><p>text(string)：设置所有匹配元素的文本内容。</p><p>filter(expr)：筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。addClass(class),removeClass(class)：为匹配的元素添加指定的类名。</p><p>toggle()：交替执行方法。</p><p>下面是一个比较经典的例子：</p><p><html></p><p><head></p><p><title>jQuery test</title></p><p><script type="text/javascript" src="js/jquery-1.6.2.min.js"></script></p><p><script type="text/javascript"></p><p>$(function(){</p><p>//alert("shit it");</p><p>var $category = $('ul li:gt(5):not(:last)');</p><p>$category.hide();</p><p>var $toggleBtn = $('div.showmore > a');</p><p>/*</p><p>$toggleBtn.click(function(){</p><p>if($category.is(":visible")){</p><p>$category.hide(); //隐藏</p><p>$('.showmore a span').css("background","url(img/down.jpg) no-repeat 0 0").text("显示全部品牌");</p><p>$('ul li a').removeClass("promoted");</p><p>}else{</p><p>$category.show(); //显示全部品牌</p><p>$('.showmore a span').css("background","url(img/up1.jpg) no-repeat 0 0").text("精简显示品牌");</p><p>$('ul li a').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass("promoted");</p><p>}</p><p>return false; //超链接不跳转</p><p>});</p><p>*/</p><p>$toggleBtn.toggle(function(){</p><p>$category.show(); //显示全部品牌</p><p>$('.showmore a span').css("background","url(img/up1.jpg) no-repeat 0 0").text("精简显示品牌");</p><p>$('ul li a').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass("promoted");</p><p>return false; //超链接不跳转</p><p>},function(){</p><p>$category.hide(); //隐藏</p><p>$('.showmore a span').css("background","url(img/down.jpg) no-repeat 0 0").text("显示全部品牌");</p><p>$('ul li a').removeClass("promoted");</p><p>return false; //超链接不跳转</p><p>});</p><p>});</p><p></script></p><p><style type="text/css"></p><p>.promoted {</p><p>font-family: "Courier New", Courier, monospace;</p><p>color:#F00;</p><p>font-size: 20px;</p><p>white-space: pre;</p><p>}</p><p></style></p><p></head></p><p><body></p><p><div class="SubCategoryBox"></p><p><ul></p><p><li><a href="#">佳能</a><i>(27113)</i></li></p><p><li><a href="#">索尼</a><i>(1256)</i></li></p><p><li><a href="#">三星</a><i>(33556)</i></li></p><p><li><a href="#">苹果</a><i>(1024581)</i></li></p><p><li><a href="#">柯达</a><i>(1250)</i></li></p><p><li><a href="#">卡西欧</a><i>(5456)</i></li></p><p><li><a href="#">富士</a><i>(2458)</i></li></p><p><li><a href="#">宾得</a><i>(8754)</i></li></p><p><li><a href="#">理光</a><i>(2424)</i></li></p><p><li><a href="#">奥林巴斯</a><i>(87855)</i></li></p><p><li><a href="#">明基</a><i>(4424)</i></li></p><p><li><a href="#">爱国者</a><i>(57857)</i></li></p><p><li><a href="#">尼康</a><i>(2454)</i></li></p><p><li><a href="#">松下</a><i>(5784)</i></li></p><p><li><a href="#">其他品牌相机</a><i>(74548)</i></li></p><p></ul></p><p><div class="showmore"></p><p><a href="https://www.360docs.net/doc/4814528602.html," target="_blank"><span>show all brands</span></a></p><p></div></p><p></div></p><p></body></p><p></html></p><h2>jQuery选择器</h2><p>$的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名"),如$(".test")是选取了所有class为test的标签节点上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt 等等. 2.组选择器: 下面还是现做一个约定:把"标签名或#id名或.class名"记作mix,则mix表示一个标签名,或一个#id或一个.class. $("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3") 3.后代选择器: $("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix mix ...")这种写法作用不大.例子:$("div .test"):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test 的标签) 可以见DEMO。 4.子选择器: $("mix>mix"),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层嵌套.例子: $("div>.test") <div><p class="test"> </div>对这里的p段落标签有效.但对 <div><p class="test"> </div>对这里的p段落标签无效,这里要用 $("div .test) 5.临近选择器: $("mix+mix"),选取下一个兄弟节点.如:$("div +#test"),id为test的的节点必须是div的下一个兄弟节点. <div></div><p id="test"> 在$("div + #test")中能取到p段落节点 <div></div> <p id="test"> 则不能取到 6.属性选择器: 把属性选择器不放在css选择器里面是因为jQuery中写法是不一样的.至于css中写法可以参考我之前写的一篇css的选择器一文.jQuery中是和xPath类似的写法: $("mix[@attr]"):选取所有该mix且具有attr属性的节点 $("mix[@attr=a_value"]):选取所有该mix且具有attr属性并满足属性值为a_value的节点 $("mix[@attr^=a_value_head"]):attr属性的属性值是以a_value_head开头的 $("mix[@attr$=a_value_end"]):attr属性的属性值是以a_value_end结尾的 $("mix[@attr*=a_value"]):attr属性的属性值中包含a_value 7.进一步选择器:</p><h2>jQuery常用功能大全</h2><p>jQuery常用功能大全 1、关于页面元素的引用通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery 对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。普通的dom对象一般可以通过$()转换成jquery对象。如：$(document.getElementByIdx_x("msg"))则为jquery对象，可以使用jquery的方法。由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。以下几种写法都是正确的： $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML; 3、如何获取jQuery集合的某一项对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery 对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个<div>元素的内容。有如下两种方法： $("div").eq(2).html(); //调用jquery对象的方法$("div").get(2).innerHTML; //调用dom的方法属性</p><h2>Jquery练习题2</h2><p>单选： 1、下面哪一种不属于Jquery的选择器。（D） A：基本选择器B：层次选择器 C：表单选择器D：节点选择器 2、使用jquery检查<input type="hidden" id="id" name="id" />元素在网页上是否存在。（B） A：if($("#id")) { //do someing... } B: if($("#id").length > 0) { //do someing... } C: if($("#id").length() > 0) { //do someing... } D: if($("#id").size > 0) { //do someing... } 3、<a href="xxx.jpg" title="温家宝出席学校...">新闻</a>,获取<a>元素title的属性值。（C） A：$("a").attr("title").val(); B：$("#a").attr("title"); C：$("a").attr("title"); D：$("a").attr("title").value; 4、执行下面语句 $(document).ready(function(){ $("#click").click(function(){ alert("click one time"); }); $("#click").click(function(){ alert("click two time"); });</p><p>}); 单击按钮<input type="button" id="click" value="点击我"/>，这个会有什么效果。（C） A：弹出一次对话框，显示click one time 。 B：弹出一次对话框，显示click two time 。 C：弹出两次对话框，依次显示click one time，click two time。D：js编译错误。 5、页面中有三个元素，如下：<div>div标签</div><span>span标签</span>p标签，如果这三个标签要触发同一个事件，那么正确的写法是（A）。 A：$("div,span,p").click(function(){ //…}); B：$("div || span || p").click(function(){ //…}); C：$("div + span + p").click(function(){ //…}); D：$("div ~ span ~ p").click(function(){ //…}); 6、页面中有一个select标签，代码如下： <select id="sel"> <option value="0">请选择</option> <option value="1">选项一</option> <option value="2">选项二</option> <option value="3">选项三</option> <option value="4">选项四</option> </select>，要使“选项四”选中的正确写法。（B）</p><h2>jquery选择器之获取父级元素、同级元素、子元素</h2><p>jquery选择器之获取父级元素、同级元素、子元素 1、父级元素 1.1 parent() 方法返回被选元素的直接父元素。如：$("span").parent(); 1.2 parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素(<html>)。如：$("span").parents();</p><p>也可以使用可选参数来过滤对祖先元素的搜索。如：$("span").parents("ul"); 1.3 parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。如：$("span").parentsUntil("div");</p><p>2、同胞 2.1 siblings() 方法返回被选元素的所有同胞元素。如：$("h2").siblings(); 返回属于<h2>的同胞元素的所有元素： $("h2").siblings("p");</p><p>2.2 next() 方法返回被选元素的下一个同胞元素。如：$("h2").next(); 2.3 nextAll() 方法返回被选元素的所有跟随的同胞元素。如：$("h2").nextAll();</p><p>2.4 nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。如：$("h2").nextUntil("h6");</p><p>2.5 prev(), prevAll() 以及prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素。 3、子元素 3.1 children() 方法返回被选元素的所有直接子元素。如：$("div").children(); 返回类名为"1" 的所有元素，并且它们是<div>的直接子元素。$("div").children("p.1");</p><h2>jQuery获取Select选择的Text和 Value</h2><p>一、jQuery获取Select选择的Text和Value:语法解释： 1.$("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2.varcheckText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3.varcheckValue=$("#select_id").val(); //获取Select选择的Value 4.varcheckIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 5.varmaxIndex=$("#select_idoption:last").attr("index"); //获取Select最大的索引值二、jQuery设置Select选择的Text和Value:语法解释： 1.$("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 2.$("#select_id ").val(4); // 设置Select的Value值为4的项选中 3.$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中三、jQuery添加/删除Select的Option项：语法解释： 1.$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项) 2.$("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置) 3.$("#select_idoption:last").remove(); //删除Select中索引值最大Option(最后一个) 4.$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 5.$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 6.$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option 四、获取值 1.jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val(); 2.获取select被选中项的文本:var item = $("select[@name=items] option[@selected]").text(); 3.select下拉框的第二个元素为当前选中值:$('#select_id')[0].selectedIndex = 1; 4.radio单选组的第二个元素为当前选中值:$('input[@name=items]').get(1).checked = true; 5.文本框，文本区域：$("#txt").attr("value")； 6.多选框checkbox：$("#checkbox_id").attr("value")； 7.单选组radio：$("input[@type=radio][@checked]").val(); 8.下拉框select：$('#sel').val(); 五、控制表单元素： 1.文本框，文本区域：$("#txt").attr("value",'');//清空内容 2.$("#txt").attr("value",'11');//填充内容 3.多选框checkbox：$("#chk1").attr("checked",'');//不打勾 4.$("#chk2").attr("checked",true);//打勾 5.if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 6.单选组radio：$("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 7.下拉框select：$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 8.$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option 9.$("#sel").empty()；//清空下拉框 10.//遍历option和添加、移除option functionchangeShipMethod(shipping){ varlen = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){ $("select[@name=ISHIPTYPE] option").each(function(){ if($(this).val() == 111){ $(this).remove(); } }); }else{ $("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]")); } } //取得下拉選單的選取值 $(#testSelectoption:selected').text(); 或$("#testSelect").find('option:selected').text(); 或$("#testSelect").val(); 六、下拉框: 1.var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格) 2.var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值 3.var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值 4.$("#select").empty();//清空下拉框//$("#select").html(''); 5.$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option 稍微解释: 1.select[@name='country'] option[@selected] 表示具有name 属性，并且该属性值为'country' 的select元素里面的具有selected 属性的option 元素；可以看出有@开头的就表示后面跟的是属性。 2.单选框:</p><h2>jQuery选择器的工作原理和优化</h2><p>jQuery选择器的工作原理和优化至于有那些选择器，在帮助手册中都有，自己去看，这篇主要是分析他的工作原理，而优化我们写的选择器，尤其在页面内容很多的情况下，更应该需要优化。下边就言归正传。每次申明一个jQuery对象的时候，返回的是 jQuery.prototype.init 对象，很多人就会不明白，init明明是jQuery.fn的方法啊，实际上这里不是方法，而是init的构造函数，因为js的prototype对象可以实现继承，加上js的对象只是引用不会是拷贝，new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的，只是有没有执行到init的不同，这里就不讲原因了，等下一篇再讲为什么会是这样。当我们使用选择器的时候$(selector,content)，就会执行 init(selectot,content)，我们看看inti中是怎样执行的： if ( typeof selector == "string" ) { //正则匹配，看是不是HTML代码或者是#id var match = quickExpr.exec( selector );</p><p>//没有作为待查找的 DOM 元素集、文档或 jQuery 对象。 //selector是#id的形式 if ( match && (match[1] || !context) ) { // HANDLE: $(html) -> $(array) //HTML代码,调用clean补全HTML 代码 if ( match[1] ){ selector = jQuery.clean( [ match[1] ], context ); } // 是: $("#id") else {</p><h2>JQuery基础、选择器</h2><p>jQuery入门什么是jQuery jQuery是一个JavaScript库，通过封装原生的JavaScript函数得到一整套定义好的方法。它是JohnResig于2006年创建的一个开源项目，随着越来越多开发者的加入，jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。以最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。主旨：以更少的代码、实现更多的功能（write less ,do more!）官网：https://www.360docs.net/doc/4814528602.html,/ jQuery的功能和优势 jQuery作为JavaScript封装的库，它的目的就是为了简化开发者使用JavaScript。主要功能有以下几点：像CSS那样访问和操作DOM；修改CSS控制页面外观；简化JavaScript代码操作；事件处理更加容易；各种动画效果使用方便；让Ajax技术更加完美；基于jQuery大量插件；自行扩展功能插件。 jQuery最大的优势，就是特别的方便。比如模仿CSS获取DOM，比原生的JavaScript</p><p>要方便太多。并且在多个CSS设置上的集中处理非常舒服，而最常用的CSS功能又封装到单独的方法。最重要的是jQuery的代码兼容性非常好，你不需要总是头疼着考虑不同浏览器的兼容问题。其他JavaScript库目前除了jQuery，还有5个JS库较为流行，他们分别是YUI、Prototype、Mootools、Dojo和ExtJS。 YUI，是雅虎公司开发的一套完备的、扩展性良好的富交互网页工具集。 Prototype，是最早成型的JavaScript库之一，对JavaScript内置对象做了大量的扩展。 Dojo，Dojo强大之处在于提供了其他库没有的功能。离线存储、图标组件等等。 Mootools，轻量、简洁、模块化和面向对象的JavaScript框架。 ExtJS，简称Ext，原本是对YUI的一个扩展，主要创建前端用户界面。(付费的) jQuery代码的编写配置jQuery环境 1、获取jQuery最新版本从官网下载：https://www.360docs.net/doc/4814528602.html,/ 3、jQuery环境配置 jQuery不需要安装，把下载的jQuery.js放到网站上的一个公共位置，想要在某个页面上使用jQuery时，只需在该HTML文档中引入该库文件即可。 4、在页面中引入jQuery 由于jQuery是JavaScript的一个库文件，也就是jQuery本质是一个.js文件，所以使用<script type=”text/javascript” src=”jQuery存放的路径”></script>引入。简单的jQuery示例</p><h2>jquery常用的选择器整理</h2><p>jquery: 基本的选择器： $('#id').css('color','blue');//根据id属性为id，设置css样式颜色设置成蓝色 $('h2').css('background-color','pink'); $('input').css('width','500px'); $('.apple').css('background-color','lightgreen');//class属性值查找 $('*').css('background-color','gray');//通配符 $('h2,#usertel,#userqq').css('color','lightblue');//联合选择器层次选择器： $('div span');//在div内部获得span节点，不考虑层次,只获得div内第一个span节点，，注意不考虑层次 $('div > span')//在div内部获得子元素span节点 $('div+span')//在div后边获得紧紧挨着的第一个兄弟关系的span节点，获得的是span节点 $('div~span')//在div后边后边获得全部兄弟关系的span节点并且选择器： $('li').css('color','red'); $('li:first');//:first第一个 :last 最后一个 $('li:eq(3)').css('color','red')//eq(下标索引号码) 获得节点的下标索引值与给定索引值相等 gt(索引号) great than 节点索引值，大于某个范围 lt(索引值) less than 节点索引值，小于某个范围 $('li:gt(5)').css('background-color','pink'); $('li:lt(5)').css('background-color','orange'); :even 匹配到下标索引值为偶数的节点 :odd 匹配到下标索引值为奇数的节点</p><h2>jQuery选择器种类</h2><p>jQuery选择器种类由于经常使用jQuery，但是其中的很多选择器又不太能够熟练记牢使用，所以趁着上周有人分享，我再仔细的把jQuery的选择器过一遍，争取一次拿下，以后做到运用自如。jQuery选择器主要来分可以分为三种：（1）基本选择器（2）层次选择器（3）过滤选择器(4) 表单选择器 1、基本选择器基本选择器主要就是比较常见和常用的集中，是必须要掌握的。 #ID id选择器返回一个对象$("#div") .class类选择器返回集合$(".content") Element 标签选择器返回集合$("input") * 匹配所有元素返回集合$("*") selector1,selector2,selector3,....合并每个选择器匹配的元素，返回集合$("#div,.class,input") 2、层次选择器（主要是选择层次下面的元素） $("E F") 选择E元素中的所有F后代元素(注意：是子孙元素) 返回集合 $("P>C") 选择P元素下的C子元素（注意：是子元素）返回集合 $("P+N") 选择P元素后的相邻元素（即下一个兄弟元素），和$("P").next("N")方法执行效果相同 $("P~S") 选择P元素之后的所有S兄弟元素，和$("P").nextAll("S")方法执行效果相同，<SPAN style="COLOR: #ff0000">另pre()方法和next()方法相对。</SPAN>preAll()和nextAll()相对。注意siblings()方法和nextAll()方法的区别：siblings()是所有前后的兄弟元素，nextAll()是所有后面的兄弟元素第三和第四个选择器常常用后面的写法代替</p><h2>Jquery选择器分类应用(最全最新)</h2><p>现在我们开始Jquery 的选择器之旅哈哈。下面的选择器分类中，带有“过滤器”的分类表示是“过滤”选择器，否则就是“选择”功能的选择器。 jQuery 选择器分为如下几类：［说明］ 1.点击“名称”会跳转到此方法的jQuery 官方说明文档。 2.可以在下节中的jQuery 选择器实验室测试各种选择器 1. 基础选择器 Basics 名称说明举例 #id 根据元素Id 选择 $("divId") 选择ID 为divId 的元素 element 根据元素的名称选择, $("a") 选择所有<a>元素 .class 根据元素的css 类选择 $(".bgRed") 选择所用CSS 类为bgRed 的元素 * 选择所有元素 $("*")选择页面所有元素 selector1, selector2, selectorN 可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容. $("#divId, a, .bgRed") ［学习建议］：大家暂时记住基础选择器即可，可以直接跳到下一节“jQuery 选择器实验室”进行动手练习，以后再回来慢慢学习全部的选择器，或者用到的时候再回来查询。 2.层次选择器 Hierarchy</p><p>child必须包含在parent中并且父类是 parent元素.选择CSS类为myList元素中的直接子节点<li>对象. prev + next prev和next是两个同级别的元素. 选中在prev元素后面的next元素. $("#hibiscus+im g")选在id为hibiscus元素后面的img对象. prev ~ sibling s 选择prev后面的根据siblings 过滤的元素注:siblings是过滤器 $("#someDiv~[ti tle]")选择id为someDiv 的对象后面所有带有title 属性的元素 3.基本过滤器Basic Filters 名称说明举例 :first匹配找到的第一个元素查找表格的第一行:$("tr:first") :last匹配找到的最后一个元素查找表格的最后一行:$("tr:last") :not(selector)去除所有与给定选择器匹配的元素查找所有未选中的 input 元素: $("input:not(:checked )") :even匹配所有索引值为偶数的元素，从 0 开始计数查找表格的1、3、5...行:$("tr:even") :odd匹配所有索引值为奇数的元素，从 0 开始计数查找表格的2、4、6行:$("tr:odd") :eq(index)匹配一个给定索引值的元素注:index从0 开始计数查找第二行:$("tr:eq(1)") :gt(index)匹配所有大于给定索引值的元素注:index从0 开始计数查找第二第三行，即索引值是1和2，也就是比0大:$("tr:gt(0)") :lt(index)选择结果集中索引小于N 的 elements 注:index从0 开始计数查找第一第二行，即索引值是0和1，也就是比2小:$("tr:lt(2)") :header选择所有h1,h2,h3一类的 header标签. 给页面内所有标题加上背景色: $(":header").css("bac kground", "#EEE"); :animated匹配所有正在执行动画效果的元只有对不在执行动</p><h2>完整版(JQuery语法)</h2><p>jQuery 语法您可以选取（查询，query）HTML 元素，并对它们执行“操作”（actions）。 jQuery 语法实例 $(this).hide() 演示jQuery hide() 函数，隐藏当前的HTML 的元素。 $("#test").hide() 演示jQuery hide() 函数，隐藏id="test" 的元素。 $("p").hide() 演示jQuery hide() 函数，隐藏所有元素。 $(".test").hide() 演示jQuery hide() 函数，隐藏所有class="test" 的元素。 jQuery 语法 jQuery 语法是为HTML 元素的选取编制，可以对元素执行某些操作。基础语法是：$(selector).action() ?美元符号定义jQuery ?选择符（selector）“查询”和“查找” HTML 元素 ?jQuery action() 执行对元素的操作实例 $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() - 隐藏所有class="test" 的段落 $("#test").hide() - 隐藏所有id="test" 的元素提示：jQuery 使用的语法是XPath 与CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。文档就绪函数您也许已经注意到在我们的实例中的所有jQuery 函数位于一个document ready 函数中：</p><p>这是为了防止文档在完全加载（就绪）之前运行jQuery 代码。 jQuery 选择器选择器允许您对元素组或单个元素进行操作。 jQuery 选择器在前面的章节中，我们展示了一些有关如何选取HTML 元素的实例。关键点是学习jQuery 选择器是如何准确地选取您希望应用效果的元素。 jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML 元素进行选择。选择器允许您对HTML 元素组或单个元素进行操作。在HTML DOM 术语中：选择器允许您对DOM 元素组或单个DOM 节点进行操作。 jQuery 元素选择器 jQuery 使用CSS 选择器来选取HTML 元素。 $("p") 选取元素。 $("p.intro") 选取所有class="intro" 的元素。 $("p#demo") 选取id="demo" 的第一个元素。 jQuery 属性选择器 jQuery 使用XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有href 属性的元素。 $("[href='#']") 选取所有带有href 值等于"#" 的元素。</p><h2>Jquery和JS获取ul中li标签</h2><p>js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签或 var div=document.getElementById('a'); var ul=div.childNodes.item(0); var lis=ul.childNodes; for(var i=0;i<lis.length;i++){ alert("Item "+i+": "+lis.item(i).innerHTML); } 如何用jquery获得每个ul下最后一个li $(function(){ $("ul").each(function(){ var y = $(this).children().last(); alert(y.text()); }); }); jquery 获取<ul> 点击的是那个<li> <ul class="anserdh" id="topmenu"> <li class="qhbg"><a href="" >积分榜</a></li> <li><a href="">回答榜 </a></li> <li><a href="" >提问榜</a></li> <li><a href="" >满意榜</a></li> </ul> 点击那个就把在那个<li>的追加class="qhbg"样式比如：点击了回答榜变成 <ul class="anserdh" id="topmenu"> <li ><a href="" >积分榜</a></li> <li class="qhbg"><a href="">回答榜 </a></li> <li><a href="" >提问榜</a></li> <li><a href="" >满意榜</a></li> </ul> $(function(){ $('.anserdh li a').click(function(){ $('.anserdh li').removeClass('qhbg'); $(this).parent().addClass('qhbg'); })</p><h2>JQUERY选择器按照功能主要分为</h2><p>jQuery选择器按照功能主要分为"选择"和"过滤".并且是配合使用的.可以同时使用组合成一个选择器字符串.主要的区别是"过滤"作用的选择器是指定条件从前面匹配的内容中筛选,"过滤"选择器也可以单独使用,表示从全部"*"中筛选.比如: $(":[title]") 等同于: $("*:[title]") 而"选择"功能的选择器则不会有默认的范围,因为作用是"选择"而不是"过滤". 下面的选择器分类中,带有"过滤器"的分类表示是"过滤"选择器,否则就是"选择"功能的选择器. jQuery选择器分为如下几类: [说明] 1.点击"名称"会跳转到此方法的jQuery官方说明文档. 2.可以在下节中的jQuery选择器实验室测试各种选择器 1.基础选择器Basics 名称说明举例 #id根据元素Id选择$("divId")选择ID为divId的元素element根据元素的名称选择,$("a")选择所有<a>元素 .class根据元素的css类选择$(".bgRed")选择所用CSS类为 bgRed的元素 *选择所有元素$("*")选择页面所有元素 selector1, selector2, selectorN 可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容. $("#divId,a,.bgRed") [学习建议]:大家暂时记住基础选择器即可,可以直接跳到下一节"jQuery选择器实验室"进行动手练习,以后再回来慢慢学习全部的选择器,或者用到的时候再回来查询. 2.层次选择器Hierarchy 名称说明举例 ancestor descendant 使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input. $(".bgRed div")选择CSS类为 bgRed的元素中的所有<div>元素.</p><h2>JQuery深刻理解</h2><p>JQuery深刻理解一：导言有些WEB开发者，会引用一个JQuery类库，然后在网页上写一写$("#")，$(".")，写了几年就对别人说非常熟悉JQuery。我曾经也是这样的人，直到有一次公司里的技术交流，我才改变了自己对自己的看法。二：普及JQuery知识知识1：用JQuery写插件时，最核心的方法有如下两个： $.extend(object) 可以理解为JQuery 添加一个静态方法。 $.fn.extend(object) 可以理解为JQuery实例添加一个方法。基本的定义与调用： /* $.extend 定义与调用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.extend({ fun1: function () { alert("执行方法一"); } }); $.fun1(); /* $.fn.extend 定义与调用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.fn.extend({ fun2: function () { alert("执行方法2"); } }); $(this).fun2(); //等同于 $.fn.fun3 = function () { alert("执行方法三"); } $(this).fun3(); 知识2:jQuery(function () { }); 与(function ($) { })(jQuery);的区别： jQuery(function () { }); //相当于 $(document).ready(function () { }); /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ (function ($) { })(jQuery); //相当于 var fn = function ($) { }; fn(jQuery);</p><h2>jquery获取对象大全</h2><p>jquery 获取对象大全 JQuery 的核心的一些方法 $("Element").length; ' 元素的个数，是个属性 $("Element").size(); '也是元素的个数，不过带括号是个方法 $("Element").get(); ' 某个元素在页面中的集合，以数组的形式存储 $("Element").get(index); '功能和上面的相同， index 表示第几个元素，数组的下标 $("Element").get().reverse(); ' 把得到的数组方向 $("Element1").index($("Element2")); '元素 2 在元素 1 中的索引值是。。。、基本对象获取 (注意这里获取的都是 Jquery 对象而不是 Dom 对象哦，但是 $(".abc")'获得样式class 的名字是.abc 的元素对象常用 $("div") ' 标签选择器选择所有的 div 元素常用 $("#a,.b,span") '表示获得 ID 是 a 的元素和使用了类样式 b 的元素以及所有的 span 元素他俩是可以转换滴 ) $("*") '表示获取所有对象 $("#XXX") '获得 id=XXX id 或 CSS 样式 id ) 常用 $("input[name='username'] ") name='userName'的元素但是我至今没这样用过的元素对象( id 可以是标签的获得 input 标签中常用</p><p>$("#a .b p") 'ID号是a的并且使用了b样式的所有的p元素、层级元素获取$("Element1 Element2 Element3 ") '前面父级后面是子集 $("div > p") ' 获取div 下面的所有的p 元素 $("div + p") 'div 元素后面的第一个p 元素 $("div?p") 'div后面的所有的p元素、简单对象获取$("Element:first") 'HTML 页面中某类元素的第一个元素$("Element:last") 'HTML 页面中某类元素的最后一个元素$("Element:not(selector)") ' 去除所有与给定选择器匹配的元素,如：$("input:not(:checked)") 表示选择所有没有选中的复选框 $("Element:even") ' 获得偶数行 $("Element:odd “) '获得奇数行 $("Element:eq(index)") '取得一个给定的索引值$("Element:gt(index)") '取得给定索引值的元素之后的所有元素 $("Element:lt(index)") '取得给定索引值的元素之前的所有元素、内容对象的获取和对象可见性 $("Element:contains(text)") ' 元素中是否包含text 文本内容$('Element:empty") ' 获得元素不包含子元素或文本的$("Element:partnt") ' 获得元素包含子元素或文本的$("Element:has(selector)") ' 是否包含某个元素，如：</p><h2>jQuery选择器大全(48个代码片段+21幅图演示)</h2><p>文档不收费，希望下载一、基本选择器 1. id选择器（指定id元素）将id="one"的元素背景色设置为黑色。（id选择器返单个元素） $(document).ready(function () { $('#one').css('background', '#000'); }); 2. class选择器（遍历css类元素）将class="cube"的元素背景色设为黑色 $(document).ready(function () { $('.cube').css('background', '#000'); }); 3. element选择器（遍历html元素）将p元素的文字大小设置为12px $(document).ready(function () { $('p').css('font-size', '12px'); }); 4. * 选择器（遍历所有元素） $(document).ready(function () { // 遍历form下的所有元素，将字体颜色设置为红色 $('form *').css('color', '#FF0000'); });</p><p>5. 并列选择器 $(document).ready(function () { // 将p元素和div元素的margin设为0 $('p, div').css('margin', '0'); }); 二、层次选择器 1. parent > child（直系子元素） $(document).ready(function () { // 选取div下的第一代span元素，将字体颜色设为红色 $('div > span').css('color', '#FF0000'); }); 下面的代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。 <div> <span>123</span> <span>456</span> </div> 2. prev + next（下一个兄弟元素，等同于next()方法） $(document).ready(function () { // 选取class为item的下一个div兄弟元素 $('.item + div').css('color', '#FF0000'); // 等价代码 //$('.item').next('div').css('color', '#FF0000'); }); 下面的代码，只有123和789会变色 <p class="item"> <div>123</div></p></div> <div class="rtopicdocs"> <div class="coltitle">相关主题</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="18397129"><a href="/topic/18397129/" target="_blank">jquery选择器</a></li> <li id="13838712"><a href="/topic/13838712/" target="_blank">jquery选择器大全</a></li> </ul> </div> </div> </div> </div> <div id="rightcol" class="viewcol"> <div class="coltitle">相关文档</div> <ul class="lista"> <li><a href="/doc/5011931211.html" target="_blank">Jquery</a></li> <li><a href="/doc/8f9559593.html" target="_blank">JQUERY选择器按照功能主要分为</a></li> <li><a href="/doc/e04363918.html" target="_blank">jQuery选择器总结(全)</a></li> <li><a href="/doc/2718646593.html" target="_blank">Jquery练习题2</a></li> <li><a href="/doc/4a5871695.html" target="_blank">JQuery基础、选择器</a></li> <li><a href="/doc/676509807.html" target="_blank">JQUERY选择题</a></li> <li><a href="/doc/aa4676753.html" target="_blank">04课堂练习-BTC-Jquery-01-Jquery过滤选择器案例</a></li> <li><a href="/doc/f88645114.html" target="_blank">实验一 jQuery选择器</a></li> <li><a href="/doc/338795216.html" target="_blank">jQuery精品教程资料：1-jQuery基础</a></li> <li><a href="/doc/57884855.html" target="_blank">Jquery和JS获取ul中li标签</a></li> <li><a href="/doc/7811236954.html" target="_blank">第2讲、Jquery基本选择器</a></li> <li><a href="/doc/b118832444.html" target="_blank">JQuery语法</a></li> <li><a href="/doc/2410049935.html" target="_blank">jQuery选择器</a></li> <li><a href="/doc/4c2552457.html" target="_blank">jQuery选择器的工作原理和优化</a></li> <li><a href="/doc/6c3971151.html" target="_blank">Jquery(很好的PPT教程,技术较为全面,分享给大家)</a></li> <li><a href="/doc/9a18497290.html" target="_blank">实验一 jQuery选择器</a></li> <li><a href="/doc/f7922045.html" target="_blank">1、jquery选择器实现表格隔行换色效果。</a></li> <li><a href="/doc/306671570.html" target="_blank">html标签的jquery选择器</a></li> <li><a href="/doc/4814528602.html" target="_blank">jQuery选择器种类</a></li> <li><a href="/doc/6d7037901.html" target="_blank">JQuery实例--选择器</a></li> </ul> <div class="coltitle">最新文档</div> <ul class="lista"> <li><a href="/doc/0f19509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li> <li><a href="/doc/0119509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li> <li><a href="/doc/9b19184372.html" target="_blank">自然教育课件</a></li> <li><a href="/doc/3019258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li> <li><a href="/doc/d819211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li> <li><a href="/doc/a419240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li> <li><a href="/doc/9d19184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li> <li><a href="/doc/8a19195909.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/8519195910.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/7f19336998.html" target="_blank">高中语文基础知识点总结大全</a></li> <li><a href="/doc/7119336999.html" target="_blank">超详细的高中语文知识点归纳</a></li> <li><a href="/doc/6619035160.html" target="_blank">高考语文知识点总结高中</a></li> <li><a href="/doc/6719035161.html" target="_blank">高中语文知识点总结归纳</a></li> <li><a href="/doc/4a19232289.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/3b19258758.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/2619396978.html" target="_blank">高中语文知识点归纳(大全)</a></li> <li><a href="/doc/2b19396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li> <li><a href="/doc/1419338136.html" target="_blank">高中语文基础知识点整理</a></li> <li><a href="/doc/ed19066069.html" target="_blank">化工厂应急预案</a></li> <li><a href="/doc/bd19159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li> </ul> </div> </div> <script> var sdocid = "4c119d8d6529647d27285224"; </script> <div class="clearfloat"></div> <div id="footer"> <div class="ft_info"> <a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a> <a href="/tousu.html" target="_blank">侵权投诉</a> ©2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a><br /> 本站资源均为网友上传分享，本站仅负责收集和整理，有任何问题请在对应网页下方投诉通道反馈 </div> <script type="text/javascript">foot()</script> </div> </body> </html>