jquery选择器

jquery的作用: 获取标签, 修改内容。$ 等于jquery 对象。 

一、选择器

1、<div id="n1">test</div>   找到该标签并修改:  $('#n1').text('123');     // #n1 相当于 id=n1

2、找到页面上所有的div 并修改: $('div').text('456');

 

3、<div id="n1"  class="c1">test</div>  找到样式 等于 c1 的所有标签:   $('.c1').text('789');   // .c1 相当于 class=c1

 

4、获取多个标签:

<div class='c2'>22</div>

<a>11</a>

<span id='n2'>this is span</span>

$('.c1, a, #n2').text('ok');    表示 把 class=c1,  a 标签,以及 id=n2 的所有标签 text值都改成 ok 。  用逗号分割,表示符合 每个条件的标签都修改。  

 

5、 

<div id='n3'>

  <div>

    <div class='c3'>

      <span>

        <a>test5</a>

      </span>

    </div>

  </div>

  <span>test6</span>

</div>

找到 a 标签并且修改:  $('#n3 div .c3 span a').text('qqq')   空格表示该标签下面的所有子元素。  上例也可以写成:  $('#n3 a').text('qqq');  

空格根据级别往下找。 此种方法比较低效,可以把  <a>test5</a> 改成 <a class='c4'>test5</a>   直接写  $('.c4').text('qqq');

 

综上所述: 基本的选择器有 id选择器, element 标签选择器, .class选择器,  selector1, selector2 组合选择器(逗号分隔),   ancestor descendant 层级选择器(空格分隔)。

 

6、一级子标签  $('parent > child') 

<form>

  <label>Name:</label>

  <input name="name"  value="default input" style="color: gainsboro; width: 20px " />           //只有此处的input 输入框中的值 将被修改 

             //此处将被修改

  <fieldset>

    <label>Newsletter:</label>

    <input name="newsletter" />

  </fieldset>

</form>

<input name="none" style="width: 100px;">

$('form > input').attr("value","modified input");        //此方法只找 页面中 form 的一级子标签是 input 的 值修改 。

 

7、 prev + next  紧跟着的下一个标签。

     $('label + input') 只找紧跟着 label 的input 标签。 + 找下一个相邻的标签。

      $("label + input").innerWidth("500px");  把紧跟着 label 的 input 标签宽度改成 500px 。

 

8、 prev ~ siblings   所有的兄弟标签。

    $("form ~ input").innerWidth("500px");    值修改了 最后一个 name="none" 的input 标签的宽度。

 

 

二、 筛选器

1、$('li:first')

<ul>

  <li>list item 1</li>

  <li>list item 2</li>

  <li>list item 3</li>

</ul>

 

$("li:first").text("the first item");       // 这个语句会把 list item 1 修改成 the first item 。

  

2、下面的语句会把页面 表中的奇数行 添加背景颜色: 

   <script>

      $(document).ready(function(){
        $("tr:even").css("background-color","#B2E0FF");
      });
   </script>

 

3、 自定义标签属性:

  

<div myattr="alex">I defined</div>

$("div[myattr='alex']").text("myattr");

第一行给div 自定义了一个属性 myattr  , 第二行根据自定义的属性 找到此标签,并修改div 的值。

 

4、 修改li 的第一个值:  $("li:first").text("the first item");

5、 找出  所有checkbox 已经被选择的项,改称未被选择:  $('input:checked').attr("checked",false);

6、 修改所有 input输入框中的值:    $(":input").attr("value","all input modified");

 




 

posted @ 2016-05-22 22:53  zhoudingzhao  阅读(165)  评论(0编辑  收藏  举报