锋利的jQuery：第二章 jQuery选择器

 

 

 

 

 

 

 

jQuery选择器的优势

//如果网页中没有id为tt的元素，浏览器将会报错
document.getElementById("tt");
//jQuery选择器获取不会报错
$('#tt');

$("#xx")获取的永远是对象

//检查元素是否在页面上存在不能这么写
if($(‘#tt’)){}
//通过获取元素长度判断
if($('#tt').lenght>0){}
//或者转DOM对象
if($('tt')[0]){}

 

基本选择器：通过元素id，class和标签名等查找dom元素

#id：根据id匹配一个元素，返回单个元素

#("#test")//选取id为test的元素

.class：根据给定的类名匹配元素，返回集合元素

$(.test);//选取所有class为test的元素

element：根据给定的元素名匹配元素，返回集合元素

$("p");//选取所有<p>元素

*：匹配所有元素，返回集合元素

$("*")

selector1,selector2,selector3...：将每一个选择器匹配到的元素合并后返回

选取所有<div>,<span>和拥有class为myClass的<p>标签

$("div,span,p.myClass");

 

层次选择器：通过DOM中的层次关系，如后代元素、子元素、相邻元素和同辈元素等

 选取<div>里的所有<span>

$("div span")

选组<div>元素下元素名是<span>

$("div > span")

 选取class为one的下一<div>同辈元素

$(".one + div")

 选取id为two的元素后面所有的<div>同辈元素

$("#two ~ div")

 

基本过滤器：

 选取所有<div>元素中第一<div>元素

$("div:first")

  选取所有<div>元素中最后一个<div>元素

$("div:last")

 选取class不是myClass的<input>元素

$("input:not(.myClass)")

 

内容选择器：

选取含有文本“我”的<div>元素

$("div:contains('我')")

选取不包含子元素的<div>

$("div:empty")

 选取含有<p>元素的<div>元素

$("div:has(p)")

选取拥有子元素的<div>

$("div:parent")