jQuery 选择器 - 1

最近准备在用 jQuery做新页面，在这里做点笔记

jQuery的选择器符号

jquery使用  $  来作为选择器的符号

比如 $("p") 对应JS里面   getElementsByTagName("p")

        $("idname") 对应JS里面  getElementById("idname")

以及其他

jquery的基本选择器有以下几种

来写一个页面代码进行测试

  <div class="one" id="one" > id为one,class为one的div      <div class="mini">class为mini</div>  </div>    <div class="one"  id="two" title="test" >	 id为two,class为one,title为test的div.      <div class="mini"  title="other">class为mini,title为other</div>      <div class="mini"  title="test">class为mini,title为test</div>  </div>  <div class="one">      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>	  <div class="mini">class为mini</div>	  <div class="mini"></div>  </div>  <div class="one">      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>	  <div class="mini">class为mini</div>	  <div class="mini"  title="tesst">class为mini,title为tesst</div>  </div>  <div style="display:none;"  class="none">style的display为"none"的div</div>    <div class="hide">class为"hide"的div</div>   <div>  包含input的type为"hidden"的div<input type="hidden" size="8"/>  </div>    <span id="mover">正在执行动画的span元素.</span>
比如当你已经用选择器选择了当前页面上的内容之后，你可以直接用CSS属性来进行修改操作，比如下面
$("#one").css("background","red");这个就是提取id为"one"的对象，并把他的背景设置为红色
jQuery 层次选择器
    $("body div").css("background","red");    $("body>div").css("background","green");
像上面2个代码，如果是body div的话，那就是把body里面所有的div全部设置成红色
但是如果是body > div的话，只是把body的下一级的子div设置成绿色，不影响孙子div，如图
如果代码是
$(".one+div").css("background","yellow");
那他寻找的是class为one的对象的下一个同级div对象，一定注意是同级的下一个！！
他改变的不是子元素，而是平级的下一个,效果如下。
如果你的代码是
$("#two ~ div").css("background","blue");那他返回的是id为two之后，所有平级的div
不过，其实PRev + next 可以用 next()方法来替代使用
prev ~ siblings 可以用 nextAll()方法来替代使用
jQuery  过滤选择器
基本选择过滤器
选择过滤器就是在选择了element之后，用冒号来过滤，哪些是你需要的。
下面写些代码进行测试
%20%20%20%20$("div:first").css("background","blue");%20%20%20%20$("div:last").css("background","yellow");
上面的代码是制定了第一个或者最后一个
如果你想指定中间的元素，也可以用eq，gt，lt来指定
    $("div:eq(3)").css("background","blue");    $("div:gt(3)").css("background","yellow");    $("div:lt(3)").css("background","red");
他表示索引值为三的div变成蓝色，小于三的是红色，大于三的是黄色。
内容过滤选择器
    $("div:contains(di)").css("background","blue");   //有文本di的内容背景设置为蓝色    $("div:empty").css("background","red");           //没有子元素的内容，背景设置为红色    $("div:has(div)").css("background","green");      //内部有子元素div的元素，背景设置为绿色
可见性过滤选择器
$("div:visible").css("background","blue");
这样的代码，就可以让非隐藏类的元素，div变成蓝色
属性过滤选择器
    $("div[title]").css("background","yellow");    $("div[title=test]").css("background","green");
这样的代码，把含有title属性的div和title等于test的div，都进行了设置
子元素过滤器
测试代码如下
    $("div.one :nth-child(2)").css("background","yellow");    $("div.one :first-child").css("background","green");
效果如下
    $("div.one :first-child").css("background","purple");    $("div.one :last-child").css("background","pink");
注意，都是修改的子元素，而不是像基本过滤选择器那样修改的父级元素。