您的位置：首页 > Web前端 > JQuery

jQuery 6 层次选择器

2013-05-25 14:51 323 查看

有以下几个实例点：

$("div li")：获取div下所有的li元素，直接或间接的都可以。

$("div > li"):获取div下直接的li元素，即第一层的。

$(".myclass+div"):获取样式名为myclass之后的第一个div元素。

$(".myclass~div"):获取样式名为myclass之后所有的div元素。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="JScript/jquery-1.9.1.min.js" type="text/javascript"></script>
<style type="text/css">
.myclass{background-color:Red; font-style:italic;}
</style>

<script type="text/javascript">
$(function () {
$.each($("div li"), function () {
$(this).html("<font color='green'>所有元素</font>");
});

$("div > textarea").css("background-color", "Red");

$(".myclass+div").css("background-color", "Yellow");

$(".myclass~div").css("background-color","Black");
});

</script>
</head>

<body>
<div class="myclass">
<input type="text"/>
<br />
<input type="button" value="button" />
</div>

<div>

<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>

<div>
<textarea id="area1" rows="15">
</textarea>
<p>
<textarea id="area2" rows="15">
</textarea>
</p>

</div>

</body>
</html>

有时我们在用jQuery时可能某个标签元素不存在，如何判断呢？

其实$(id或tag)返回的是一数组，要想知道它是否存在，只需用数组的length是否小于等于0即可。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.test{background-color:Red}
</style>
<script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".test").click(function () {alert($(this).text()); //给拥有test样式的标签注册事件
})
});

$(function () {
var ids = $("#aa");
if (ids.length <= 0) {
alert("没找到这个id");
return;
}
alert("找到这个id了");

});

$(function () {
var inputs = $("input");
if (inputs.length <= 0) {
alert("不存在input类型");
return;
};

alert("存在这个类型");
});
</script>

</head>
<body id="aa">
<p class="test">test1</p>
<p class="test">test2</p>
<p class="test">test3</p>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航