JQuery的行为规则都必须在获取元素后才能生效。JQuery选择器完全继承了CSS的风格。CSS选择器是找到元素后添加样式,而JQuery选择器是找到元素后添加行为。JQuery中设计操作CSS样式的部分比单纯的CSS功能更加强大,并且拥有跨浏览器的兼容性。
$("#ID"):用ID来获取元素。
$("tagName"):通过标签名获取HTML元素。
JQuery选择器支持CSS1、CSS2的全部和部分CSS3的部分选择器,也有少量独有的选择器。从1.1.3.1版以后,JQuery废弃了不常使用的XPath选择器,但在引用相关插件后,依然可以支持XPath选择器。
即使用JQuery获取网页中不存在的元素也不会报错。$("#tt")获取的是对象,即使网页上面没有此元素,也要用JQuery检查某个元素在网页上是否存在,根据获取到元素的长度来判断或者转化成DOM对象来判断。
---------------------------------------------------------------------------------------------------
JQuery选择器分为:
基本选择器
$("#test"):选取id为test的元素
$(".test"):选取所有class为test的元素
$("p."):选取所有的<p>元素
$("*"):选取所有的元素
$("div,span,p.myClass"):选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素。
层次选择器
可以通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和同辈元素等。
$("div span"):选取<div>里面的所有<span>元素
$("div>span"):选取<div>元素下名是<span>的子元素
$(".one+div"):选取class为one的下一个<div>同辈元素,也可以用$(".one").next("div")来代替。
$("#two~div"):选取id为two的元素后面的所有<div>同辈元素,也可以用$("#prev").nextAll("div")来代替。
siblings()方法与前后位置无关,只要是同辈节点就能匹配了。
$("#prex").siblings("div").css("background","#bbffaa");//选取#prex所有的同辈div元素,无论前后位置。
过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
1 基本过滤:
$("div:first"):选取所有<div>元素中第1个<div>元素
$("div:last"):选取所有<div>元素中最后一个<div>元素
$("input:not(.myClass)"):选取class不是myClass的<input>元素
$("input:event"):选取索引是偶数的<input>元素
$("input:odd"):选取索引是奇数的<input>元素
$("input:eq(1)"):选取索引等于1的<input>元素
$("input:gt(1)"):选取索引大于1的<input>元素(注:大于1,而不包括1)
$("input:lt(1)"):选取索引小于1的<input>元素(注:小于1,而不包括1)
$(":header"):选取网页中所有的<h1>,<h2>,<h3>......
$("div:animated"):选取正在执行动画的<div>元素
$(':focus'):选取当前获取焦点的元素
2 内容过滤选择器
$("div:contains('我')"):选取含有文本“我”的<div>元素
$("div:empty"):选取不包含子元素(包括文本元素)的<div>元素
$("div:has(p)"):选取含有<p>元素的<div>元素
$("div:parent"):选取拥有子元素(包括文本元素)的<div>元素
3 可见性过滤选择器
$(":hidden"):选取所有不可见的元素。包括<input type="hidden"/>,<div style="display:none;">和<div-style="visibility:hidden;">等元素。如果指向选取<input>元素,可以使用$("input:hidden")
$("div:visible"):选取所有可见的<div>元素
在可见性选择器中,需要注意选择器:hidden,它不仅包括样式属性display为"none"的元素,也包括文本隐藏域(<input type="hidden"/>)和visibility:hidden之类的元素。
4 属性过滤选择器
属性过滤器的过滤规则是通过元素的属性来获取相应的元素。
$("div[id]"):选取拥有属性id的元素
$("div[title=test]"):选取属性title为"test"的<div>元素
$("div[title!=test]"):选取属性title不等于"test"的<div>元素(注意:没有属性title的<div>元素也会被选取)
$("div[title^=test]"):选取属性title以"test"开始的<div>元素
$("div[title$=test]"):选取属性title以"test"结束的<div>元素
$("div[title*=test]"):选取属性title以"test"的<div>元素
$('div[title|="en"]'):选取属性title等于en或以en为前缀(该字符串后跟一个连字符'-')的元素。
$('div[title~="uk"]'):选取属性title用空格分割的值中包含字符uk的元素
$("div[id][title$='test']"):选取拥有属性id,并且属性title以"test"结果的<div>元素
5 子元素过滤选择器
:nth-child(event):选取每个父元素下的索引值是偶数的元素。
:nth-child(odd):选取每个父元素下的索引值是奇数的元素。
:nth-child(2):选取每个父元素下的索引值等于2的元素。
:nth-child(3n):选取每个父元素下的索引值是3的倍数的元素,(n从1开始)
:nth-child(3n+1):选取每个父元素下的索引值是(3n+1)的元素,(n从1开始)
:first-child 选取每个父元素的第1个子元素
:last-child 选取每个父元素的最后一个子元素
:only-child 如果某个元素是它父元素中唯一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配。
6 表单对象属性过滤选择器
:enabled 选取所有可用元素。$("#form1:enabled"),
:disabled 选取所有不可用元素。
:checked 选取所有被选中的元素(单选框,复选框)。
:selected 选取所有被选中的选项元素(下拉列表)。
(4)表单选择器
:input 选取所有的<input>、<textarea>、<select>和<button>元素
:text 选取所有的单行文本框
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 选取所有的图像按钮
:reset 选取所有的重置按钮
:button 选取所有的按钮
:file 选取所有的上传域
:hidden 选取所有不可见元素