国产精品手机视频,国产精品久久免费,国产一区在线播放

導航首頁 ? 技術教程 ? jquery基礎知識第一講之認識jquery

全站頭部文字我要出現在這里

jquery基礎知識第一講之認識jquery 704 2024-03-09

jQuery是一個優秀的JavaScript庫，它憑借簡潔地語法和跨平臺的兼容性，極大地簡化了開發人員遍歷HTML文檔，操作DOM，處理事件，執行動畫和開發Ajax操作。

jQuery優勢：

1.輕量級

2.強大的選擇器

3.出色的DOM操作的封裝

4.可靠的事件處理機制

5.完善的Ajax

6.不污染頂級變量

7.出色的瀏覽器兼容性

8.鏈式操作方式

9.隱式迭代

10.行為層與結構層分離

11.豐富的插件支持

12.完善的文檔

13.開源

（1）編寫簡單的jQuery代碼:

注：$ 就是jQuery的簡寫形式。

 < 引入 jQuery -->
  <script src="http://www.gimoo.net/t/scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function () {   //等待DOM元素加載完畢.（可能DOM元素關聯的文件沒有加載完）
      alert("Hello World!");     //彈出一個框
    });

　　　　 $(document).ready(function () {   //可以同時編寫多個
      alert("Hello again!");
    });

    $(function () {           //簡寫形式
      alert("Hello jQuery!");
    });
  </script>

（2）jQuery的代碼風格

注：鏈式操作。

1、對同一個對象不超過3次操作的，可以寫成一行?！　　　?

2、對于同一個對象操作較多的，建議每行寫一個操作。

3、對于多個對象的少量操作，可以每個對象寫一行，如果涉及子元素，可以考慮適當的縮進。

4、對于多個對象的較多操作，可以結合2,3條。

添加必要的注釋。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-4-3</title>
<style type="text/css">
#menu { 
  width:300px; 
}
.has_children{
  background : #555;
  color :#fff;
  cursor:pointer;
}
.highlight{
  color : #fff;
  background : green;
}
div{
  padding:0;
}
div a{
  background : #888;
  display : none;
  float:left;
  width:300px;
}
</style>
< 引入 jQuery -->
<script src="http://www.gimoo.net/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加載完畢.
$(document).ready(function(){
  $(".has_children").click(function(){
    $(this).addClass("highlight")      //為當前元素增加highlight類
      .children("a").show().end()      //將子節點的a元素顯示出來并重新定位到上次操作的元素
    .siblings().removeClass("highlight")    //獲取元素的兄弟元素，并去掉他們的highlight類
      .children("a").hide();        //將兄弟元素下的a元素隱藏
  });
});
</script>
</head>
<body>
<div id="menu">
  <div class="has_children">
    <span>第1章-認識jQuery</span>
    <a>1.1-JavaScript和JavaScript庫</a>
    <a>1.2-加入jQuery</a>
    <a>1.3-編寫簡單jQuery代碼</a>
    <a>1.4-jQuery對象和DOM對象</a>
    <a>1.5-解決jQuery和其它庫的沖突</a>
    <a>1.6-jQuery開發工具和插件</a>
    <a>1.7-小結</a>
  </div>
  <div class="has_children">
    <span>第2章-jQuery選擇器</span>
    <a>2.1-jQuery選擇器是什么</a>
    <a>2.2-jQuery選擇器的優勢</a>
    <a>2.3-jQuery選擇器</a>
    <a>2.4-應用jQuery改寫示例</a>
    <a>2.5-選擇器中的一些注意事項</a>
    <a>2.6-案例研究——類似淘寶網品牌列表的效果</a>
    <a>2.7-還有其它選擇器么？</a>
    <a>2.8-小結</a>
  </div>
  <div class="has_children">
    <span>第3章-jQuery中的DOM操作</span>
    <a>3.1-DOM操作的分類</a>
    <a>3.2-jQuery中的DOM操作</a>
    <a>3.3-案例研究——某網站超鏈接和圖片提示效果</a>
    <a>3.4-小結</a>
  </div>
</div>
</body>
</html>

（3）DOM對象與jQuery對象

DOM(Document Object Model,文檔對象模型)，每一個DOM都可以表示成一棵樹。JavaScript中的getElementById或者getElementByTagName來獲取元素節點，這樣的DOM元素就是DOM對象。

jQuery對象是通過jQuery包裝DOM對象后產生的對象。jQuery對象是jQuery獨有的，可以使用jQuery中的方法，但不能使用DOM對象的方法。

注：jQuery對象都是通過$()函數制造出來的，$()函數就是一個jQuery對象的制造工廠。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>1-4</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  < 引入 jQuery -->
  <script src="http://www.gimoo.net/t/scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    //等待dom元素加載完畢.
    $(document).ready(function () {
      var domObj = document.getElementsByTagName("h3")[0];  // Dom對象
      var $jQueryObj = $(domObj);     //jQuery對象
      alert("DOM對象：" + domObj.innerHTML);  
      alert("jQuery對象：" + $jQueryObj.html());
    });
  </script>
</head>
<body>
  <h3>例子</h3>
  <p title="選擇你最喜歡的水果.">你最喜歡的水果是?</p>
  <ul>
    <li>蘋果</li>
    <li>橘子</li>
    <li>菠蘿</li>
  </ul>
</body>
</html>

DOM對象與jQuery對象可以相互轉換，案例如下：
1.DOM對象方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>1-6-2</title>
  < 引入 jQuery -->
  <script src="http://www.gimoo.net/scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    //等待dom元素加載完畢.
    $(document).ready(function () {
      var $cr = $("#cr");     //jQuery對象
      var cr = $cr.get(0);    //DOM對象獲取 2種方式 $cr[0] 或者 $cr.get(0)
      $cr.click(function () {
        if (cr.checked) {    //DOM方式判斷
          alert("感謝你的支持!你可以繼續操作!");
        }
      })
    });
  </script>
</head>
<body>
  <input type="checkbox" id="cr" />
  <label for="cr">我已經閱讀了上面制度.</label>
</body>
</html>

2.jQuery對象方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>1-6-1</title>
  < 引入 jQuery -->
  <script src="http://www.gimoo.net/scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    //等待dom元素加載完畢.
    $(document).ready(function () {
　　　　　　 var cr = document.getElementById("cr");   //DOM對象
      var $cr = $(cr);     //jQuery對象
      $cr.click(function () {
        if ($cr.is(":checked")) { //jQuery方式判斷
          alert("感謝你的支持!你可以繼續操作！");
        }
      })
    });
  </script>
</head>
<body>
  <input type="checkbox" id="cr" />
  <label for="cr">我已經閱讀了上面制度.</label>
</body>
</html>

以上就是關于jquery學習的第一課，希望大家繼續關注。

#免責聲明#

本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的；不得將上述內容用于商業或者非法用途，否則，一切后果請用戶自負。本站信息來自網絡收集整理，版權爭議與本站無關。您必須在下載后的24個小時之內，從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容，請支持正版，購買注冊，得到更好的正版服務。我們非常重視版權問題，如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解！

文章分類