常规选择器
jquery最核心的组成部分就是:选择器引擎。他继承了css的语法。可以对DOM元素的标签名，属性名，状态等进行快速选择，并且不用担心浏览器兼容性。
一、简单选择器
在使用jQuery选择器的时候，我们首先必须使用"$()"函数来包装规则。
#box{color:red;}
$("#box").css('color','red');
那么除了ID选择器之外还有2种基本的选择器分别是元素标签名和类(class)
- 元素名 div{} $("div") 获取所有的DIV元素的DOM对象
- ID #box{} $("#box") 获取一个ID为BOX元素的对象
- 类(class) .box{} $(".box") 获取所有class为box的所有DOM对象
$('div').css('color','red'); //元素选择器，返回多个元素
$('#box').css('color','blue'); // ID选择器返回单个元素
$('.box').css('color','red'); //类class选择器返回多个元素
为了证明ID返回的是单个元素，而元素名和类(class)返回是多个我们可以采用jQuery自带的属性length 或者size()来查看返回元素的个数.
alert($("div").size()); //返回标签的个数
alert($("#box").length); //返回ID是box 的个数
这里特别注意的就是ID只能在页面上出现一次
$("#box").css('background','red');
jquery选择器的写法与css选择器类似，只不过他们的功能不同，css找到元素后添加的是单一的样式。而jquery添加的是动作行为，最重要的一点是:css在添加样式的时候，高级选择器会对部分浏览器不兼容，而jquery选择器在添加css样式的时候不必烦恼
#box >p{
color:red;
}
$("#box>p").css('color','red'); //jquery子选择器
那么对于确实不存在的元素我们使用jquery调用的话，怎么判断是否存在。因为本身返回的就是jQuery对象，可能导致不存在元素存在与否，都会返回true
if($("div").length>0)
{
$("div").css("color","red");
}
除了这种方式之外。还可以用转换 DOM对象的方式来判断。
if($("#box").get(0)){} //通过数组下标来获取DOM对象
if($("box")[0]){}
进阶选择器
群组选择器
span,em,.box{color:red;} //多种选择器添加红色字体
$("span,em,.box").css('color','red'); //jquery方式
后代选择器
ul li a{color:red;} //层层追溯到的元素添加红色字体
$("ul li a").css('color','red'); //群组jQuery方式
通配符选择器
*{color:red;} // 页面上所有元素都添加红色字体
$("*").css('color','red'); //通配符选择器
高级选择器
- 后代选择器
$("#box p").css("color","red"); //全兼容
$("#box").find("p").css("color","red") //和后代选择器等价
- 子选择器,孙子后失明
#box>p{"color":"red"}
$("#box>p").css("color","red");
$("#box").children("p").css("color","red");
- next选择器(下一个同级节点)
#box+p{color:red;}
$("#box+p").css('color','red');
jQuery为next提供了一个新的方法next()
$("#box").next("p").css("color","red");
- nextAll选择器(后面所有同级节点)
#box~p{color:red;}
$("#box").nextAll("p").css("color","red");
在find(),next(),nextAll()和children()如果不传递参数相当于传递了"*"即任何节点。不建议这样做。影响性能。
- prev上一个元素
$("#box").prev("p").css("color","red"); //同级上一个节点
$("#box").prevAll("p").css("color","red");//同级所有上面的元素
- siblings()其他兄弟节点
$("#box").siblings("p").css("color","red");
属性选择器
a[title=num] $("a[title=num]")
基本过滤器
过滤器主要是通过特定的规则筛选出所需的DOM元素,和CSS中的伪类的语法类似用冒号(:)开头
过滤器名
:first $("li:first") 选取第一个元素 单个元素
:last $("li:last") 选取最后一个元素 单个元素
:not(selector) $("li:not(.red)") 选取class不是 red的li 集合元素
:even $("li:even") 选取索引(0开始)是偶数的所有元素 集合元素
:odd $("li:odd") 选取索引(0开始)是奇数的所有元素 集合元素
:eq(index) $("li").eq(2) 选取索引(0开始)等于index的元素 单个元素
:gt(index) $("li:gt(2)") 选取索引(0开始)大于index的元素 集合元素
:lt(index) $("li:lt(2)")选取索引(0开始)小于index的元素 集合元素
:animated $(":animated") 选择正在执行动画的元素 集合元素
:focus $(":focus") 选择当前被焦点的元素 集合元素
$("li:first").css("background","#ccc"); //第一个元素
$("li:last").css("background","#ccc"); //最后一个元素
$("li:not(.red)").css("background","#ccc"); //非class为red的元素
$("li:even").css("background","#ccc"); //选择索引是偶数的元素
$("li:odd").css("background","#ccc"); //选择索引是奇数的元素
$("li:eq(2)").css("background","#ccc"); //指定索引值的元素
$("li:gt(2)").css('"background","#ccc") // 大于索引值的元素
$("li:lt(2)").css("background","#ccc"); //小于索引值的元素
$("li:animated").css("background","#ccc"); //选择运动的li
注意:focus过滤器必须是网页初始状态已经被激活焦点的元素才能实现元素获取。而不是鼠标点击或者TAB键盘敲击激活的。
$("input").get(0).focus(); //先初始化激活一个元素焦点
$(":focus").css("background","red"); //被焦点的元素
jquery为最常用的过滤器提供了专用的方法，已达到性能和效率的作用
$("li").eq(2).css("background","red"); // 元素li的第三个元素
$("li").first().css("background","red"); //元素li的第一个元素
$("li").last().css("background","#ccc"); //元素li的最后一个元素
$("li").not(".red").css("background","#ccc"); //元素li不含class为red的元素
内容过滤器
内容过滤器 主要是包含的子元素或者文本内容上
过滤器名 :contains(text)
$(":contains("text")") 选取含有text文本的元素 元素集合:empty
$(":empty") 选取不包含子元素或者空文本的元素 元素集合:has(selector)
$(":has(.red)") 选取含有class是red的元素。元素集合:parent
$(":parent")选取含有子元素活文本的元素 元素集合
$("div:contains("text1")").css("background","red");
$("div:empty").css("background","red");
$("ul:has(.red)").css("background","red"); //选取子元素含有class是red的元素
$(":parent").css("bakcground","#ccc"); //选择非空元素
jquery提供了一个has()方法
$("ul").has(".red").css("background","#ccc"); //选择子元素含有class是red的UL
1
2
3
4
5
这样div1整个全体变红色
jquery提供了一个名称和parent相似的方法。而是获取当前元素的父元素.
$("li").parent().css("background","#ccc");
//选择当前元素的父元素
$("li").parents().css("background","#ccc");
//选择当前元素的父元素以及祖先元素
可见性过滤器
可见性过滤器根据元素的可见性和不可见性来选择相应的元素
$("p:hidden").size() //元素P隐藏的元素
$("p:visible").length //选取所有可见的元素
这里特别注意：hidden过滤器一般是指的是display:none;input[type=hidden]和visibility:hidden的元素
子元素过滤器
子元素过滤器的过滤规则就是通过父元素和子元素来获取到相应的元素
$("li:first-child").css("background","red"); //每个父元素第一个li元素
$("p:nth-of-type(1)").css("background","blue"); //找到第一个P元素的背景色
其他方法
- hasClass(class) 一般用来判断
$("li").eq(2).hasClass("red") 后面不能接css不能连缀 - slice(start,end)
$("li").slice(0,2)选择从 start到end的位置元素,如果是负数cong后面开始 .slice包前不包后
slice(0,-2) 从倒数第三个位置，向前选定所有。
slice(2,-2) 前两个和末尾两个选定 - end()
$("div").find("p").end()获取当前元素上一次状态 - contents()
$("div").contents() 获取某元素下面所有的元素节点，包括文本节点。如果是iframe则可以查找文本内容
选择器结束