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

        $("ul li:eq(1)").css("background","green"); 　　 　　//选取ul下索引为1的li，即第二个

        $("ul li").eq(1).css("background","yellow"); 　　　　//上面这行也可以这样写，选取ul下索引为1的li,即第二个

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

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

        $("ul li:lt(2)").css("height","50px");             　　 　　 //选取ul下的索引编号小于2的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>