Jquery选择器大全汇总

一.选择器

　1.三个基本选择器，$("#ID") 、$(".className")  、$("tagName")

　2.其他选择器

　//html页面

<div class="box">box1</div>

<h1>h1</h1>

<div class="box">box2</div>

<div class="box">box3</div>

<ul>

<li>li11111</li>

<li>li2</li>

<li>li3</li>

<li>li4</li>

　   <li></li>

　　<li><span>box2</span></li>

</ul>

　<div><li></li></div>

<h1>h1</h1>

<h2>h2</h2>

　 <input type="hidden" name="" class="box">

<input type="text" name="" class="box">

<div class="box">box</div>

<div class="box" style="display: none;">box</div>

　 <div title="one">1</div>

<div title="two" class="a">2</div>

<div title="three">3</div>

　　<div class="box">

　　　　<input type="text" name="">

　　　　<input type="password" name="">

　　　　<input type="radio" name="">

　　　　<input type="checkbox" name="">

　　　　<input type="submit" name="">

　　　　<input type="button" name="">

　　　　<input type="file" name="">

　　　　<input type="hidden" name="">

　　　　<textarea></textarea>

　　　　<select >

　　　　　　<option>1</option>

　　　　　　<option>2</option>

　　　　</select>

　　　　<button>btn</button>

　　 </div>

<script type="text/javascript">

　　//层级选择器

    $("ul li").css("font-size","50px");　　//选取ul下的li元素

      $("ul li").html("替换内容").css("font-size","50px");　

      $(".box+h1").css("color","red");  //类名为.box紧挨着的h1元素

      $("h1~.box").css("background","yellow"); //选取h1后面所有类名为.box的所有兄弟元素

　　//过滤选择器

　　 $("ul li:first").css("background","red"); 　　　　　　//选取ul下的第一个li

　　 $("ul li:first").css("background","red");   　　　　　//选取ul下的第一个li

的li，即第二个

的li,即第二个

        $("ul li:odd").css("font-size","100px"); 　　　　　　 //选取ul下的偶数项li

        $("ul li:not(.nob)").css("border","3px solid #000");   //选取ul下的li，除开类名为.nob的其他所有项

的li，即前2个

$(":header").css("color","pink");                 　　　　//选中标题标签，所有h标签都被选中

　　//内容过滤

$("li:contains(li1)").css("color","red");　　　　　　//选取li元素，同时文本内容包含li1的

$("li:empty").css({height:100,background:"red"});  //选取li元素，且文本内容为空的

$("li:has(span)").css("border","1px solid green"); //选取嵌套span标签的li元素

　 $("li:parent").css("background","yellow");    　　　 //选取父元素下面含有li标签的父元素

　　//可见性过滤

　　$(".box:hidden").css("width","200px");　　　　　　//注意$符号括号里面没有空格，表示要同时满足2个条件

　　$(".box:visible").css("background-color","pink");   //选中类名为box的标签，同时要满足是可见的

　　//属性过滤

　　$("div[title]").css("background-color","pink");　　//从所有div标签选取带属性title的标签

　　$("div[title=one]").css("color","yellow");　　　　   //从所有div标签选取带属性title且值为one的标签

　　$("div[title][class=a]").css("color","red");　　　　//从所有div标签选取带属性title和带class=a属性值的标签

　　　　

　　//子元素过滤

　　$("li:nth-child(2)").css("background-color","red");  //选取每个父元素下第2个li元素

　　$("li:nth-child(odd)").css("font-size","50px");    　　//选取每个父元素下奇数项li元素

　　$("li:first-child").css("color","blue");         　　　　 //选取每个父元素下第一个li元素

　　$("li:only-child").css("font-style","italic");          　　//选取每个父元素下只有一个li元素的li元素

　　//表单类型

　　$(".box :input").css("background-color","pink");　　//选取所有input、textarea、select、button元素

　　$(".box :text").css("font-size","10px");　　　　　　　//选选取所有的单行文本框

　　$(".box :password").css("font-size","20px");　　　　//选取所有的密码框

　　$(".box :radio").css("font-size","30px");　　　　　　//选取所有的单选框

　　$(".box :checkbox").css("font-size","40px");　　　　//选取所有的多选框

　　$(".box :submit").css("font-size","50px");　　　　　　//选取所有提交按钮

　　$(".box :button").css("font-size","60px");　　　　　　//选取所有的按钮

　　$(".box :file").css("font-size","70px");　　　　　　　　//选取所有的上传域

　　$(".box :hidden").css("font-size","80px");　　　　　　//选取所有不可见元素

</script>