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>

你可能感兴趣的:(jquey学习篇 第一篇)