【jQuery】选择器（一）

一、基础选择器

选择器允许用户对 DOM 元素组或单个 DOM 节点进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

id选择器：$(’#id’)

通过id选择器得到的是特殊的对象集合（包装集），使用length得到获得元素的个数
如果元素不存在则得到null。

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

标签选择器：$(‘target’)

如果页面有多个div，调用这个方法会对所有div执行这个操作（隐式迭代）。

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

类选择器：$(’.className’)

选择应用了对应类的任何元素

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

组合选择器

同时选择多个符合条件的JQuery包装集用,号分隔条件

$('#id,target,.className')

选择所有DOM元素

var all_query=$("*");

二、层次选择器

什么是层次？层次就是父子关系、兄弟关系的节点。所以，层次选择器就是用来获取指定元素的父子节点、兄弟节点。

后代选择器

后代选择器可以选择作为某元素后代的元素。

例如，从所有tr标签中获取其下面的所有id值为text的元素

var text11_query=$("tr #text");

子代选择器

与后代选择器相比，子代选择器（Child selectors）只能选择作为某元素子元素的元素。

例如，获取所有td标签下的所有直接input子元素

var input_query=$("td>input");

相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

例如，获取id为text11元素后面的class为button11元素，只获取一个符合条件的元素。

var button11_query=$("#text11+.button11");

后面兄弟选择器

例如，获取id为text11元素后面的所有class为button11的元素。

var button11_query=$("#text11~.button11");

三、表单选择器

选取表单元素的过滤选择器。

1.选取所有、、和元素，“:input”。

var input_query=$(":input");

2.查找所有文本框元素，“:text”。

var text_query=$(":text");

3.查找所有密码框元素，":password"。

var password_query=$(":password");

4.查找所有复选框，":checkbox"。

var checkbox_query=$(":checkbox");

5.查找所有提交按钮元素，":submit"。

var submit_query=$(":submit");

6.查找所有图像域元素，":image"。

var image_query=$(":image");

7.查找所有重置按钮元素，":reset"。

var reset_query=$(":reset");

8.查找所有按钮元素，":button"。

var button_query=$(":button");

9.查找所有文件域元素，":file"。

var file_query=$(":file");