jquery选择器

Posted 2020-07-10 zhoudingzhao

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");