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")