一、基础选择器
1、id 选择器 通过元素的id属性去查找一个元素
var $dom=$("#id属性值");
2、元素选择器 根据元素名称查找
var $dom=$("element");
3、类选择器 通过类(.class)属性查找
var $dom=$(".class");
4、* 选择器 匹配所有的元素
var $dom=$("*"); 匹配html页面中所有元素 包括<head>、<body>、<script>
var $dom=$("div *");匹配div元素下的所有子元素(包括孙子.... 元素); *号前一定要有空格
实践证明:由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也需要谨慎使用。
5、seleN选择器 精确的选择任意多个指定的元素
var $dom=$(".red,.green"); 选择了class='red'、class='green'的元素
6、层次性选择器 常常是多个元素嵌套在一起,形成复杂的层次关系,通过层次选择器,可以快速定位某一层次的一个或多个元素
var $dom=$("div span"); 获得div下的span元素(即使span元素是孙子... 元素)
7、child选择器 所选择的目标是子集元素,相当于一个家庭中的子辈们,但不包括孙辈
var $dom=$("div> span");获得div下的子元素span(不是所有的span)
8、prev + next选择器 查找与“prev”元素紧邻的下一个“next”元素
var $dom=$('div + p');获得div 紧邻的下一个p元素
9、prev ~ siblings选择器 后者则获取prev 元素后面全部相邻的元素
var $dom=$('div~span');获得div后面紧邻的所有span元素
二、过滤选择器
1、first过滤器 获得一组相同标签元素中的第1个元素
var $dom=$("li:first"); 获得第一个li元素
2、last过滤器 获得一组相同标签中最后一个元素
var $dom=$("li:last"); 获得最后一个li元素
3、eq(index)过滤选择器 从一组标签元素数组中,灵活选择任意的一个标签元素
var $dom=$("li:eq(3)"); 获得第四个li元素(下标从0开始)
4、contains(text)过滤选择器 按照文本内容来查找一个或多个元素
var $dom=$("li:contains('jQuery')");获得li元素集合内容中有jQuery文本的li元素
5、has(selector)过滤选择器 获取选择器中包含指定元素名称的全部元素
var $dom=$("li:has('label')"); 获取li中包含元素label(所有包括孙子...元素)的所有li元素
6、hidden过滤选择器 获取全部不可见的元素,这些不可见的元素中包括type属性值为hidden、style="display:none" 的元素
var $dom=$('input:hidden'); 获得type属性为hidden的input元素
var $dom=$('p:hidden'); 获得样式为 display=none 的p元素
7、visible过滤选择器 获取的是全部可见的元素,也就是说,只要不将元素的display属性值设置为“none”,那么,都可以通过该选择器获取。
var $dom=$("li:visible"); 获取display!=none 的所有li元素
8、[attribute=value]属性选择器 获取与属性名和属性值完全相同的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示属性值。
var $dom=$("li[title='蔬菜']"); 获取 属性title='蔬菜' 的所有 li 元素
9、[attribute!=value]属性选择器 获取不包含属性名,或者与属性名和属性值不相同的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示属性值。
var $dom=$("li[title!='蔬菜']"); 获取 属性title!='蔬菜' 的所有 li 元素
10、[attribute*=value]属性选择器 获取属性值中包含指定内容的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示对应的属性值。
var $dom=$("li[title*='果']"); 获取 属性title 值中有‘果’ 字 的所有 li 元素
11、:first-child子元素过滤选择器 获取每个父元素中返回的首个子元素,它是一个集合
var $dom= $("li:first-child"); 获得几组列表中 每组的 第一个 li元素
12、:last-child子元素过滤选择器 获取每个父元素中返回的最后一个子元素,它是一个集合
var $dom= $("li:last-child"); 获得几组列表中 每组的 最后一个 li元素
三、表单选择器
1、input表单选择器 获取表单内所有元素
var $dom=$("form:input"); 获取表单内所有元素 不仅包括所有<input>标记的表单元素,而且还包括<textarea>、<select> 和 <button>标记的表单元素
2、text表单文本选择器 获取表单中全部单行的文本输入框元素
var $dom=$("form :text");
3、password表单密码选择器 获取表单中全部的密码输入文本框元素
var $dom=$("form :password");
4、:radio单选按钮选择器 获取表单中的全部单选按钮元素
var $dom=$("form :radio");
5、checkbox复选框选择器 获取表单中的复选框元素
var $dom=$("form :checkbox");
6、submit提交按钮选择器 选择器可获取表单中的这个提交按钮元素
var $dom=$("form input:submit");
7、image图像域选择器 选择器可以快速获取表单中的img元素
var $dom=$("form :image");
8、button表单按钮选择器 获取且只能获取“type”属性值为“button”的<input>和<button>这两类普通按钮元素。
var $dom=$("form :button");
9、checked选中状态选择器 获取复选框、单选按钮元素,选中时“checked”属性值为“checked”
var $dom=$("form :checked");
10、:selected选中状态选择器 获取<select>下拉列表框中全部处于选中状态的<option>选项元素。
var $dom=$("#frmTest :selected");