初学jQuery之jQuery选择器

今天我们就谈论一下jquery选择器,它们大致分成了四种选择器!!!!

1.基本选择器(标签,ID,类,并集,交集,全局)

1.0(模板)

<body>
<div id="o" class="myc">我是第一个div</div>
  <div><span>我是第二个div</span></div>
</body>

1.1(标签)

 //标签
$(function(){
$("div").css("background-color","red");
});

1.2(ID)

 

$(function(){
$("#o").css("background-color","green");
});

1.3(类)

  

 $(function(){
$(".myc").css("background-color","red");
});

1.4(并集)

 $(function(){
$("div,#o").css("background-color","red");
});

1.5(交集)

$(function(){
$("div#o").css("background-color","yellow");
});

1.6(全局)

$(function(){
$("*").css("background-color","blue");
});

2.层次选择器(后代,子,相邻,同辈,)

2.1(后代)

 $(function(){
$("div span").css("background-color","green");
});

2.2(子)

$(function(){
$("div>span").css("color","blue");
});

2.3(相邻)

$(function(){
$("div+div").css("color","green");
});

2.4(同辈)

 $(function(){
$("div~div").css("color","red");
});

3属性选择器

3.0(模板)

<body>
<a id="12" href="#123">第一个链接</a>
<a id="23" href="@">第二个链接</a>
<a id="34" href="#">第三个链接</a>
</body>

语法:

3.1

[attribute]    选取包含给定属性的元素

$(function(){
$("[href]").css("color","red");
});

3.2    [attribute=value]    选取等于给定属性是某个特定值的元素

$(function(){
$("[href=#]").css("color","red");
});

3.3[attribute!=value]    选取不等于给定属性是某个特定值的元素

$(function(){
    $("[href!=#]").css("color","red");
  });

3.4[attribute^=value]      选取给定属性是某个特定值开始的元素

$(function(){
$("[href^#).css("color","red");
});

3.5[attribute$=value]       选取特定值是以某些特定值结尾的元素

$(function(){
$("[href$=123]").css("color","red");
});

3.6[attribute*=value]      选取给定属性是包含某些值


$(function(){
$("[href*'2']").css("color","yellow");
});

3.7[selector][selectorN]   选取满足多个条件的复合属性的元素

$(function(){
$("a[href][id=12]").css("background-color","red");
});

4.过滤选择器(规律选择器两大类:基本过滤选择器,可见性过滤选择器)

4.0(模板)

<body>
 <h2>你的生命值</h2>
   <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li class="a">4</li>
   <li>5</li>
   <li>6</li>
   </ul>
  </body>

4.1

语法 :

:first  选取第一个元素

 $(function(){
$("li:first").css("background","red");
});

4.2

:last  选取最后一个元素

 $(function(){
$("li:last").css("background","blue");
});

4.3

:not(selector) 选取去除所有与定选择器匹配的元素

 $(function(){
$("li:not(.a)").css("background","blue");
});

4.4

:even   选取索引是偶数的所有元素(index从0开始)

$(function(){
$("li:even").css("background","blue");
});

4.5

:odd  选取索引是奇数的所有元素(index从0开始)

$(function(){
$("li:odd").css("background","blue");
});

4.6

:eq(index) 选取索引等于index的元素(index从0开始)

$(function(){
$("li:eq(1)").css("background","blue");
});

4.7

:gt(index)  选取索引大于index的元素(index从0开始)

 $(function(){
$("li:gt(1)").css("background","blue");
});

4.8

:lt(index)  选取索引小于index的元素(index从0开始)

 $(function(){
$("li:lt(1)").css("background","blue");
});

4.9

:header   选取所有标题元素,如h1~h6

$(function(){
$(":header").css("background","blue");
});

4.10

:focus    选取当前获取焦点的元素

$(function(){
$(":focus").css("background","red");
});

5.0(模板)

<body>
<p id="text_hide">点击按钮,我会被隐藏</p>
<p id="text_show">隐藏的我,被显示了,嘿嘿</p>
<input name="shwo" type="button" value="点击显示文字"/>
<input name="hide" type="button" value="点击显示文字"/>
</body>

语法:

5.1

hideen   选取所有隐藏的元素

 $(function(){
      $("p:hidden").show(100);
   });

5.2

visible   选取所有可见的元素

$(function(){
$("p:visible").hide(100);
});
上一篇:WPF控件TextBlock中文字自动换行


下一篇:Android 举例说明自己的定义Camera图片和预览,以及前后摄像头切换