JQery选择器（二）

JQuery选择器

筛选具有相似特诊的元素（标签）。

一、选择器基本语法：

1.事件绑定：

<input type="button" value="点击" id="btn">
<script>
	$("#btn").click(function(){
        alert("点击成功");
    });
</script>

2…入口函数：

如果

<script>
	$(function(){
	$("#btn").click(function(){
        alert("点击成功");
    });
});
</script>

windows.onload和$（function）区别

• windows.onload只能定义一次，如果定义多次，后边的将会把前面顶一顶额覆盖掉。
• $(function)可以定义多次。

3.样式控制：

<script>
	$("#div1").css("backgroud-color","red");
    //DOM写法
    $("#div1").css("backgroudColor","red");
</script>

二.常用选择器

1.基本选择器：

• id选择器：$("#one")

  改变id为one元素的背景色。$("#one").css("backgroudColor","pink");

• 标签选择器：$(“div”)

  改变元素名为

  的所有元素的背景色。 $("div").css("backgroudColor","pink");

• 类选择器：$(".mini")

  改变class为mini的元素的背景色。$(".mini").css("backgroudColor","pink");

• 并集选择器：$(“span,#two”)

  改变所有元素和id为two的元素背景色。$("span,#two").css("backgroudColor","pink");

2.层级选择器

• 后代选择器：$(“A B”) 所有管辖的都选择

  改变内部的所有div颜色。$(body div).css("backgroudColor","pink");

• 子选择器：$(“A>B”) 管辖的第一级才选择

  改变内部的子div颜色。$(body>div).css("backgroudColor","pink");

  <script>
  	$(function(){
  	$("#btn").click(function(){
          $(body>div).css("backgroudColor","pink");
      });
  });
  </script>
  

3.属性选择器

• 属性名称选择器：$(“A[属性名称]”)

  改变含有属性title的div元素的背景色。$("div[title]").css("backgroudColor","pink");

• 属性选择器：$(“A[属性名=‘值]”)

  改变含有属性title的值为test的div元素的背景色。$("div[title='test']").css("backgroudColor","pink");

  改变含有属性title值不等于test的div元素的背景色。$("div[title]").css("backgroudColor","pink");

• 复合属性选择器：$(“A[属性名^=‘te’]”)

  匹配以te开始的属性值的元素。$("div[title^='te']").css("backgroudColor","pink");

  匹配包含某些内容的元素。$("div[title *='es']").css("backgroudColor","pink");

  选取有属性id的div元素，然后再结果中选取属性含有es的元素，$("div[id][title *='es']").css("backgroudColor","pink");

4.过滤选择器

• 首选择器： ：first

  改变第一个div的背景色。$("div:first").css("backgroudColor","pink");

• 尾选择器： :last

  改变最后一个div的背景色。$("div:last").css("backgroudColor","pink");

• 非元素选择器： ：not()

  改变class不为one的div的背景色。$("div:not(.one)").css("backgroudColor","pink");

• 偶数选择器： ：even 从0开始

  改变索引为偶数的所有div的背景色。$("div:even").css("backgroudColor","pink");

• 奇数选择器： ：odd

  改变索引为奇数的所有div的背景色。$("div:odd").css("backgroudColor","pink");

• 等于索引选择器： ：eq()

  改变索引值等于3的div元素的背景色。$("div:eq(3)").css("backgroudColor","pink");

• 大于索引选择器： :gt()

  改变索引值大于3的div元素的背景色。$("div:gt(3)").css("backgroudColor","pink");

• 小于索引选择器： ：lt()

  改变索引值小于3的div元素的背景色。$("div:lt(3)").css("backgroudColor","pink");

• 标题选择器： :header

  改变所有标题元素的背景色。$(":header").css("backgroudColor","pink");

5.表单过滤选择器

• 可用元素选择器： ：enabled

  利用jq对象的val()方法改变表单中可用元素的值。$("input[type='text']:enabled").val("new text");

• 不可用元素选择器： :disabled

  利用jq对象的val()方法改变表单中不可用元素的值。$("input[type='text']:disabled").val("new text");

• 选中选择器： ：checked

  利用jq对象的length属性获取复选框选中的个数。$("input[type='checkbox']:checked").length);

• 选中选择器： :selected

  利用jq对象的length属性获取下拉框选中的个数。$("#job>option:selected").length);