.net中在读取控件的class或ID不同方式的不同意义- jquery选择器

  1. $("parent > child") - 在(父亲)parent的儿子中找符合条件的儿子(child)等同于$("parent").children("child");
1 <div>
2   <span>123</span>
3   <p>
4     <span>456</span>
5   </p>
6   <span>789</span>
7 <div>
$('div > span').css('color', '#FF0000');

结果显示如下:
 123    

       456

       789

   这样理解:要求是寻找div(父亲)下边的span(儿子),虽然p(儿子)元素下也有span(p的儿子div的孙子),但是不符合条件。

       2. $("A B") - 在(父亲)A下找所有符合条件的(子孙)B 等同于$("A").find("B") 或  $("A" "B")。 注:中间有空格。

1 <div>
2   <span>123</span>
3   <p>
4     <span>456</span>
5   </p>
6   <span>789</span> 
  <span>
    <p>abc</p>
  </span>

<div>
$('div span').css('color', '#FF0000');  
$('div span p').css('color', '#FF0000');
 

结果显示如下:

1.  

123    

      456

      789

  abc

  这样理解:要求是寻找div下边的span(子孙),只要是div下边的span都是要查询的结果。

  2. 

123    

      456

      789

  abc

这样理解:要求是寻找div下边的span(子孙)的下得p,只要是div下边的span下边的p都是要查询的结果。

3.$("AB") 中间没有空格,表示““的关系,意思为有相同的控件存在然后通过空间的ID或class再判断到底是哪个控件//或者class存在多个名称

1 <div>
2   <span class="test">123</span>
3   <p>
4     <span class="test">456</span>
5   </p>
6   <span>789</span>
7   <div class="test">abc</div>
  <span class="test1 test2"> dce</div> 8 </div>


1.  $("span.test").css('color', '#FF0000');

2.  $("div.test").css('color', '#FF0000');

3.  $(".test1.test2").css('color', '#FF0000');

结果显示如下:

1.123 456 789 abc  cde //查找class为test的span控件,可以查找出两个

2.123 456 789 abc cde //查找class为test的div控件,只有一个

3.123 456 789 abc cde //查找class即为test1又为test1的元素,只有一个
     

4.$("A,B") 表示”“关系一个双引号中用逗号分隔不同的选择器,称之为并列选择器。切记和$('A','B')区分,他的意思是找在B(父亲)里边找A(儿子)

1  <div>123</div>
2  <div>
3      <span id="test">456</span>
4      <span class="test">789</span>
5      <p class="test">abc</p>
6  </div>
1. $("span,.test").css('color', '#FF0000');  });
2. $("span,#test").css('color', '#FF0000');  });
3. $(".test,#test").css('color', '#FF0000');  });

结果显示如下:

1. 123 456 789 abc   //所有span或class是test的

2. 123 456 789 abc  // 所有span或ID是test的

3. 123 456 789 abc  // 所有ID或class是test的


   

 

 

 

 

  

 

 

原文地址:https://www.cnblogs.com/brooks5006/p/4463456.html