一、基本
- #id:
html:<div id="demo1">demo1</div> jQuery:$("#demo1").css("background","red");
- element:
html:<div>demo2</div> jQuery:$("div").css("background","blue");
- .class:
html:<div class="demo3">demo3</div> jQuery:$(".demo3").css("background","yellow");
- *
jQuery:$("*").css("background","green");
- selector1,selector2,selectorN
html:<div class="demo3">demo3</div> <div id="demo4">demo4</div> jQuery:$(".demo3,#demo4").css("background","orange");
二.层级: - ancestor descendant
html:<div><span>demo5</span></div> jQuery:$("div span").css("background","aqua");
-
parent > child
html:<div><p>demo6</p></div> jQuery:$("div>p").css("background","purple");
-
prev + next
html:<div><p>demo6</p></div> <p>demo7</p> iQuery:$("div+p").css("background","chartreuse");
-
prev ~ siblings
html:<p>demo7</p> <div>demo8</div> <div>demo8</div> jQuery:$("p~div").css("background","skyblue");
3.基本筛选器: - :first
html: <ul> <li>demo9</li> <li>demo9</li> <li>demo9</li> <li>demo9</li> <li>demo9</li> </ul> Jquery:$("li:first").css("background","crimson");
-
:not
jQuery:$("li:not(:first)").css("background","cadetblue");
-
:even
jQuery:$("li:even").css("background","fuchsia");
-
:odd
jQuery:$("li:odd").css("background","greenyellow");
-
:eq(index)
jQuery:$("li:eq(2)").css("background","gold");
-
:gt(index)
jQuery:$("li:gt(2)").css("background","blueviolet");
-
:lang
html: <ul> <li>demo9</li> <li>demo9</li> <li lang="en">demo9</li> <li>demo9</li> <li>demo9</li> </ul> jQuery: $("li:lang(en)").css("background","salmon");
-
:last:
jQuery:$("li:last").css("background","slateblue");
- :lt(index)
jQuery:$("li:lt(2)").css("background","teal");
- :header
html:<h1>demo10</h1> <h2>demo10</h2> jQuery:$(":header").css("background","darkred");
- :animated:
html:<div id="demo11">demo11</div> jQuery:$("#demo11").click(function(){
$("#demo11:not(:animated)").animate({
"+=20px"
},1000);
}); - :focus
html:<input type="text" id="demo12" value="demo12" autofocus="autofocus"/> jQuery:$("input:focus").css("background","darkkhaki");
- :root
jQuery:$(":root").css("background","seagreen");
-
:target
不会使用
三、内容 - :contains(text)
html:<div>demo13</div> jQuery:$("div:contains('demo13')").css("background","turquoise");
- :empty
html:<input type="text" id="demo14" placeholder="demo14" /> jQuery:$("input:empty").css("background","gray");
- :has(selector)
html:<div><p>demo15</p></div> jQuery:$("div:has(p)").css("background","darkgreen");
- :parent
html:<div><p>demo16</p></div> jQuery:$("p:parent").css("background","hotpink");
四、可见性 - :hidden
html:<div id="demo17" style="display: none;"></div> jQuery:console.log($("div:hidden"));
- :visible
html:<p>demo18</p> jQuery:$("p:visible").css("background","lightseagreen");
五、属性 - [attribute]
html: <p id="demo18">demo19</p> <p id="demo19">demo19</p> <p id="test19">demo19</p> <p>demo19</p>
jQuery:$("p[id]").css("background","olive");
- [attribute=value]
jQuery:$("p[id='demo18']").css("background","lightcoral");
- [attribute!=value]
jQuery:$("p[id!='demo18']").css("background","darkslategray");
- [attribute^=value]
jQuery:$("p[id^='demo']").css("border","1px solid red");
- [attribute$=value]
jQuery:$("p[id$='19']").css("border","1px solid blue");
- [attribute*=value]
jQuery:$("p[id*='1']").css("border","1px solid green");
- [attrSel1][attrSel2][attrSelN]
html:<div id="demo20" class="demo20">demo20</div> jQuery:$("div[id][class = 'demo20']").css("border","1px solid black");
六、子元素
html: <ul> <li>demo21</li> <li>demo21</li> <li>demo21</li> <li>demo21</li> <li>demo21</li> </ul>
- :first-child
$("ul li:first-child").css("border","1px solid blueviolet")
- :first-of-type
$("li:first-of-type").css("border","1px solid green");
- :last-child
$("ul li:last-child").css("border","1px solid lightcoral");
- :last-of-type
$("ul li:last-of-type").css("border","1px solid turquoise");
- :nth-child()
$("ul li:nth-child(2)").css("border","1px solid firebrick");
- :nth-last-child()
$("ul li:nth-last-child(2)").css("border","1px solid blueviolet");
- :nth-last-of-type()
$("ul li:nth-last-of-type(2)").css("border","1px solid fuchsia");
- :nth-of-type()
$("ul li:nth-of-type(2)").css("border","1px solid crimson");
- :only-child
$("ul li:only-child").css("border","1px solid teal");
- :only-of-type
$("ul li:only-of-type").css("border","1px solid orange");
七、表单html:<form > <input type="text" value="demo22" disabled="disabled"/><br /> <input type="password" /><br /> <input type="radio" name="radio" checked="checked"/><label>radio1</label> <input type="radio" name="radio"/><label>radio2</label><br /> <input type="checkbox" /><label>checkbox1</label> <input type="checkbox" checked="checked"/><label>checkbox2</label> <input type="checkbox" /><label>checkbox3</label><br /> <input type="file"disabled="disabled"/><br /> <input type="hidden" /> <select name="selector"> <option value="1">selector1</option> <option value="2">selector2</option> <option value="3" selected="selected">selector3</option> </select><br /> <input type="submit" value="提交" /><br /> <input type="image" value="images" /><br /> <input type="reset" value="重置"/><br /> <input type="button" value="btn1"/> <button>btn2</button> </form>
- :input
$(":input").css("border","1px solid darkblue");
- :text
$(":text").css("color","goldenrod");
- :password
$(":password").css("background","fuchsia");
- :radio
- :checkbox
console.log($(":radio")); console.log($(":checkbox"));
- :submit
$(":submit").css("border","1px solid red");
- :image
$(":image").css("border","1px solid blue");
- :reset
$(":reset").css("background","green");
- :button
$(":button").css("background","blue");
- :file
$(":file").css("border","1px solid orange");
- :hidden
console.log($("input:hidden"));
九、表单属性 - :enabled
$("input:enabled").css("color","red");
- :disabled
$("input:disabled").css("color","blue");
- :checked
console.log($("input:checked"));
- :selected
console.log($("select option:selected").html());
- #id: