您的位置：首页 > 产品设计 > UI/UE

jquey学习篇 第一篇

2015-11-13 00:00 387 查看
摘要: jquey选择器

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