前面几期中都有选择器的身影,他可以很方便的取到我们想要取到的节点,下面来来说一说当节点更复杂我们都可以用什么方法来取到。
[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()
{
//取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>
[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>
[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>
[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>
[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> &n
补充:web前端 , JavaScript ,