一、基础选择器
选择器允许用户对 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");