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

jquery第五期：神奇的选择器(基本选择器)

2013-09-20 12:44 295 查看
前面几期中都有选择器的身影，他可以很方便的取到我们想要取到的节点，下面来来说一说当节点更复杂我们都可以用什么方法来取到。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function()
{
//取li中的所有a
$("li a").css("color","red");
});
</script>
</head>
<body>
<ul class="myList">
<li>
<a href="http://blog.csdn.net/niujiabinbin">maybe</a>
<ul>
<li><a href="css1">css1</a></li>
<li><a href="css2">css2</a></li>
<li><a href="css3">css3</a></li>
<li>gossipgo</li>
</ul>
</li>
</ul>

</body>
</html>

运行结果：



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function()
{
//取第一个ul下的a
$(".myList>li>a").css("color","red");
});
</script>
</head>
<body>
<ul class="myList">
<li>
<a href="http://blog.csdn.net/niujiabinbin">maybe</a>
<ul>
<li><a href="css1">css1</a></li>
<li><a href="css2">css2</a></li>
<li><a href="css3">css3</a></li>
<li>gossipgo</li>
</ul>
</li>
</ul>

</body>
</html>


运行结果:



<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function()
{
//取a 节点中以http开头
$("a[href^='http://']").css("color","green");
});
</script>
</head>
<body>
<ul class="myList">
<li>
<a href="http://blog.csdn.net/niujiabinbin">maybe</a>
<ul>
<li><a href="css1">css1</a></li>
<li><a href="css2">css2</a></li>
<li><a href="css3">css3</a></li>
<li>gossipgo</li>
</ul>
</li>
</ul>
</body>
</html>


运行结果：



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function()
{
//取.myList的ul包含a的li
$(".myList ul li:has('a')").css("background","red");
});
</script>
</head>
<body>
<ul class="myList">
<li>
<a href="http://blog.csdn.net/niujiabinbin">maybe</a>
<ul>
<li><a href="css1">css1</a></li>
<li><a href="css2">css2</a></li>
<li><a href="css3">css3</a></li>
<li>gossipgo</li>
</ul>
</li>
</ul>
</body>
</html>


运行结果：



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function()
{
//取.myList的ul包含a的li
$("a[href$='pdf']").css("color","red");
});
</script>
</head>
<body>
<ul class="myList">
<li>
<a href="http://blog.csdn.net/niujiabinbin">maybe</a>
<ul>
<li><a href="css1.html">css1</a></li>
<li><a href="css2.pdf">css2</a></li>
<li><a href="css3.js">css3</a></li>
<li>gossipgo</li>
</ul>
</li>
</ul>
</body>
</html>


运行结果：



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function()
{
//取id为maybe下面的包括li的节点，仅取一个相邻的节点，如果不相邻，则什么都取不到
$("#maybe+li").css("background","yellow");

});
</script>
</head>
<body>
<ul class="myList">
<li>
<a href="http://blog.csdn.net/niujiabinbin">maybe</a>
<ul>
<li><a href="css1.html">css1</a></li>
<li id="maybe"><a href="css2.pdf">css2</a></li>
<li><a href="css3.js">css3</a></li>
<li>gossipgo</li>
</ul>
</li>
</ul>
</body>
</html>

运行结果：



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function()
{
//取id为maybe下面的所有包括li的节点
$("#maybe~li").css("background","yellow");

});
</script>
</head>
<body>
<ul class="myList">
<li>
<a href="http://blog.csdn.net/niujiabinbin">maybe</a>
<ul>
<li><a href="css1.html">css1</a></li>
<li id="maybe"><a href="css2.pdf">css2</a></li>
<li><a href="css3.js">css3</a></li>
<li>gossipgo</li>
</ul>
</li>
</ul>
</body>
</html>


结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航