选择器 · PHP笔记

[TOC] ## 获取自身和子元素 ``` var new_html=$(".developing_course").prop("outerHTML"); ``` ``` //获取子元素 var new_html=$(".developing_course").html(); //获取文本 var text=$(".developing_course").text(); //获取属性 var pro=$(".developing_course").attr("class"); ``` ## 获取匹配多个对象中的某一个 ``` console.log($(".developing_course").get(0))//返回的是元素 console.log($(".developing_course").eq(0))//返回的是元素对象 ``` ## **删除子文本，不删除子节点** ``` $("button[name='search']").contents().filter(function () { return this.nodeType === 3; }).remove(); ``` ## 筛选 ``` 1、获取指定条件一致的元素(.filter("条件")) 如：jQuery(function($){ $("ul li").filter("li\[id!=cc\]").css("color","red"); }) 获取li中id不等于cc的元素 2、获取指定范围的元素(.slice(startindex,endindex)) $("ul li").slice(1,3).css("color","red"); 3、获取与条件表达式一致的元素(is("条件表达式")) $("li").is(".cc").css("color","red"); 4、获取上一个元素(.next("")) $("ul li:eq(2)").next().css("color","red"); 5、获取上一个元素(.prev()) $("ul li:eq(2)").prev().css("color","red"); 6、获取元素的父元素 $("ul li:eq(2)").parent().css("color","red"); 7、获取元素的子元素 $("ul").children().css("color","red"); ``` ## 删除 ``` $(".class").empty();//删除class类元素里的所有子元素和 text文本 $(".class").remove();//删除匹配到的所有元素(这里是删除含有class类的元素) $("p").remove(".hello");//删除含有.hello类的p标签 $("p").detach(".hello");//用法和remove一样，但是他会保留所有绑定的事件、附加的数据等 ``` ## **form的表单元素获取：** ``` 查找所有选中的select option元素 $("select option:selected") //查找所有选中的复选框元素 $("input:checked") //查找所有拥有disabled="disabled"的不可用的input元素 $("input:disabled") //匹配所有可用元素 $("input:enabled")//查找所有没有disabled属性的表单元素 //匹配所有 input, textarea, select 和 button 元素 $(:input) //匹配所有 type属性为text的 input文本框 $(":text") //匹配所有 type属性为password的 input :password //匹配所有 type属性为radio的 input :radio //匹配所有 type属性为checkbox的 input :checkbox //匹配 type="submit" 的input或者button :submit //匹配所有 type属性为image的 input :image //匹配所有 type属性为reset的 input 重置按钮 :rese //匹配所有 type属性为button的 input按钮或者button 如：<button></button><input type="button" /> :button //匹配所有 type属性为file的 input :file ``` ## **通用** ``` //基本 #id:$("#name") element:$("div") .class:$(".content") *:$("*") selector1,selector2,selectorN:$("div,span,#name,.content") 多选 //层级祖先元素后代元素$("p span") 父元素 > 子元素 prev + next ：$("label + input")匹配label 后面的第一个同辈input 元素指定元素 ~ 同辈元素 : 匹配指定元素的所有同辈元素 //基本筛选器 :first：$('li:first')匹配指定li的第一个li :last：获取匹配总舵元素中的最后那个元素 :not(selector)：$("input:not(:checked)")匹配未选中的input 即匹配所有没有checked属性的input :even 偶数 :odd 奇数 :eq(index)：$("tr:eq(1)") 匹配众多tr中的第2个元素（索引从0开始） :gt(index)：匹配所有大于给定索引值的元素 :lt(index)：匹配所有小于于给定索引值的元素 $("tr:lt(2)") 查找第一第二行，即索引值是0和1，也就是比2小 :focus ：匹配当前获取焦点的元素 :header：匹配如 h1, h2, h3之类的标题元素 :lang1.9+ :animated ：匹配所有正在执行动画效果的元素 :root 1.9+ ：匹配<html>元素 :target 1.9+ //内容 :contains(text) : $("div:contains('John')") 匹配包含John字符串的所有元素 :empty ：查找所有不包含子元素或者文本的空元素 $("td:empty") 查找所有不包含子元素或者文本的空元 :has(selector) ：$("div:has(p)") 包含 p 元素的 div :parent ：$("td:parent") 查找所有含有子元素或者文本的 td 元素 //可见性 :hidden :visible //属性 [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] //子元素 :first-child:$("ul li:first-child") 选取有父元素的li且li在父元素的第一个位置 :first-of-type:$("span:first-of-type")等价于:nth-of-type(1)//1.9+ 匹配E的父元素的第一个E类型的孩子示例区别： <div> <p>第一个子元素</p> <h1>第二个子元素</h1> <span>第三个子元素</span> </div> p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素； h1:first-child 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个； span:first-child 匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素； p:first-of-type 匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个； h1:first-of-type 匹配到的是h1元素，因为h1是div的所有类型为h1的子元素中的第一个； span:first-of-type 匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是它们中的第一个。 :last-child :last-of-type//1.9+ :nth-child :nth-last-child()//1.9+ :nth-last-of-type()//1.9+ :nth-of-type()//1.9+ :only-child :only-of-type//1.9+ ``` 上面的内容可能适用于特定示例,当您在内容中没有其他内容时,除了您要查找的类型的子元素.但是你会遇到更复杂的标记问题: ~~~ <ul id="ul-id" class="f-dropdown tiny" data-dropdown-content=""> <li> <div id="warningGradientOuterBarG" class="barberpole"> <div id="warningGradientFrontBarG" class="warningGradientAnimationG"> <div class="warningGradientBarLineG"></div> </div> </div> </li> <li>foo</li> <li>bar</li> </ul> var $ul = $('#ul-id') $ul.not(':first') //returns nothing $ul.find(':first') // returns first <li> $ul.find(':not(:first)') //returns the inner divs as well as the last two li's $('#ul-id li:not(first-child)') // this returns all li's $('#ul-id li:not(:first)') // this works: returns last two li's $ul.find('li').slice(1) // this also works and returns the last two li's $ul.find('li').slice(1).remove() // and this will remove them ~~~ ## **复合属性选择器** ``` //复合属性选择器，需要同时满足多个条件时使用 [attrSel1][attrSel2][attrSelN]:$("input[id][name$='man']") 匹配有id和name属性且name属性的值以man结尾的input <body> <div> <div id="i1" class="con1" data-a="a" disabled=true>1111111</div> <div id="i2" class="con1" data-a="a" disabled=true>2222</div> <div id="i3" class="con1 con2" data-a="a" disabled=true>3333</div> </div> <script type="text/javascript"> $(function($) { console.log($("div[class=con1][data-a=a]"));//div#i1,div#i2 console.log($("div.con2[data-a=a]"));//div#i3 console.log($("div.con1[data-a=a]"));//div#i1,div#i2,div#i3 console.log($("div[class=con1][disabled=true]"));//div#i1,div#i2 console.log($("div.con2[disabled=true]"));//div#i3 console.log($("div.con1[disabled=true]"));//div#i1,div#i2,div#i3 console.log($(".con1.con2[disabled=true]"));//div#i3 }) </script> </body> ``` ## 获取input不为disabled的对象 ``` $("input[id^='input_001']:not(:disabled)").each(function(){ console.log(this); }); ```