标签：
query 选择器大集合,直接上代码:
1 类选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../HelloJquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
$("li.abc").css("color","#f00")
})
</script>
</head>
<body>
<div id="hello">
<ul> <li>aaaaaaa</li> <li>bbbbbbb</li> <li class="abc">ccccccc</li> <li>ddddddd</li> </ul> </div> </body> </html>
2 根据Id进行选择,链式结构
<!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="../HelloJquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
// $("li.abc").css("color","#f00")
$("#hello ul li:even").css("background","#00f").css("color","#f00");
})
</script>
</head>
<body>
<div id="hello">
<ul>
<li>aaaaaaa</li>
<li>bbbbbbb</li>
<li class="abc">ccccccc</li>
<li>ddddddd</li>
</ul>
</div>
</body>
</html>
3 选择到某个对象 鼠标移动上去 移动离开 状态变换
<!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="../HelloJquery/jquery-1.8.3.js"></script>
<style type="text/css">
.bg {
cursor: pointer;
background: #fff;
color: #00f;
}
</style>
<script type="text/javascript">
$(function() {
// $("li.abc").css("color","#f00")
//$("#hello ul li:even").css("background","#00f").css("color","#f00");
//鼠标移动状态改变
$("li").mouseover(setcolor).mouseout(setcolor);
function setcolor() {
$(this).toggleClass("bg")
}
})
</script>
</head>
<body>
<div id="hello">
<ul>
<li>aaaaaaa</li>
<li>bbbbbbb</li>
<li class="abc">ccccccc</li>
<li>ddddddd</li>
</ul>
</div>
</body>
</html>
标签：
原文地址：http://my.oschina.net/u/2491968/blog/529809
