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之后，用冒号来过滤，哪些是你需要的。

下面写些代码进行测试

    $("div:first").css("background","blue");    $("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");

注意，都是修改的子元素，而不是像基本过滤选择器那样修改的父级元素。