jquey學習篇 第一篇

時間  2019-11-11
標籤 jquey 學習 一篇 简体版
原文   原文鏈接

query  選擇器大集合,直接上代碼:javascript

1  類選擇器css

 <!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進行選擇,鏈式結構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="../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">java

  <ul>
   <li>aaaaaaa</li>
   <li>bbbbbbb</li>
   <li class="abc">ccccccc</li>
   <li>ddddddd</li>
  </ul>
 </div>
</body>
</html>jquery

3 選擇到某個對象 鼠標移動上去  移動離開 狀態變換ui

<!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">this

  <ul>
   <li>aaaaaaa</li>
   <li>bbbbbbb</li>
   <li class="abc">ccccccc</li>
   <li>ddddddd</li>
  </ul>
 </div>
</body>
</html>code

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程