jquery选择器

浏览数：18 / 时间：2015年06月09日

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

div,span,p{

width: 140px;

height: 140px;

margin: 5px;

background: #aaa;

border: #000 1px solid;

float: left;

font-size: 17px;

font-family: Verdana;

}

div.mini{

width: 55px;

height: 55px;

background-color: #aaa;

font-size: 12px;

}

div.hide{

display: none;

}

</style>

</head>

<body>

id为one,class为one的div

<div class="mini">class为mini</div>

</div>

<div class="one" id="two" title="test">来

<div class="mini" title="other">class为mini title为other</div>

<div class="mini" title="test">class为mini title为test</div>

</div>

class为mini

</div>

class 为mini

</div>

class 为mini

</div>

</div>

<div class="mini">class 为mini</div>

<div class="mini" title="test">class 为mini,title为test</div>

</div>

<div style="display: none;" class="none">style的display为"none"的div

</div>

<div class="hide">class 为"hide"的div</div>

<div>

包含iput的type为"hide"的div<input type="hidden" size="8">

</div>

<span id="mover">正在执行动画的span元素.</span>

</body>

</html>

显示效果

技术分享

改变id为one的元素背景色

$("#one").css("background","#bbffaa")

技术分享

通过#+id名称的方式，可以获得html的jquery对象，然后操作该对象的相关属性；通过id获得的一般是对象；

技术分享

通过class改变class为mini的背景色

通过"."+class名称可以获得class 对应的html元素；通过该元素得到的一般为数组，如下图；

$(".mini")

技术分享

执行图片上的查看按钮，可以再html界面中查看到该元素

技术分享

点击有图的div.mini，通过右侧的属性信息，我们可以查看属性；

技术分享

通过标签来获得内容，在下方中展示的信息为div[id][class]如果没有配置id或class那么将不显示

$("div")

技术分享

通过*获得所有的元素
获得所有的<span>元素和id为two的元素

$("span,#two")

技术分享

查看元素得到页面对应的两个内容

层次选择器

选择器	描述	返回	示例	方法代替
$("ancestor descendant ")	选取ancestor元素里的所有descendant(后代)元素	集合元素	$("div span")选取 <div>里所有的<span>元素
$(" parent > child ")	选取parent元素下的child（子）元素，而$("ancestor descendant ")选取的是后代	集合元素	$("div > span")选取<div>元素下元素名是<span>的子元素
$("prev + next ")	选取紧接在prev元素后的next元素	集合元素	$(".one + div ")选取class为one	next();方法
$("prev~siblings")	选取prev元素只有的所有siblings元素	集合元素	$("#two~div")选取id为two的元素后面的所有<div>兄弟元素	nextAll()方法