jQuery的介紹

來源:互聯網
上載者:User

標籤:lang   html   簡化   功能   one   doc   漢化   www.   odi   

什麼是jQuery

jQuery是js的一個庫,封裝了我們開發過程中常用的一些功能,方便我們調用,提高開發效率。

js庫是把我們常用的功能放到一個單獨的檔案中,我們在用的時候,直接引用到頁面裡即可。

關於jQuery的相關資料:


  • 官網:http://jquery.com/

  • 官方API文檔:http://api.jquery.com/

  • 漢化API文檔:http://www.css88.com/jqapi-1.9/

為什麼要使用jQuery

在用js寫代碼的時候,會遇到一些問題:


  • window.onload事件有事件覆蓋的問題,因此只能寫一個事件。

  • 代碼容錯性差

  • 瀏覽器安全色性問題

  • 書寫很繁瑣,代碼量多

  • 代碼混亂

  • 動畫效果很難實現


而jQuery的出現,可以解決以上問題。
jQuery的特點
jQuery有兩個特點

  • 鏈式編程:比如.show()和.html()可以連寫成.show().html()

  • 隱式迭代:隱士對應的是顯示。隱式迭代的意思是:在方法的內部進行迴圈遍曆,而不用我們自己再進行迴圈,簡化我們的操作,方便我們調用。


學習jQuery,主要是學什麼
在學習jQuery的初期,主要學習如何使用jQuery操作DOM,其實就是學習jQuery封裝好的那些API。

這些API的共同特點是:幾乎全部都是方法。所以,在使用jQuery的API時,都是方法調用,也就是說要加小括弧"()",小括弧裡面是對應的參數,參數不同,功能不同。

jQuery代碼和js代碼的比較

使用原生js來實現下面代碼效果:

<!DOCTYPE html><html><head>    <title>js Demo</title>    <style type="text/css">        div{            width: 100px;            height: 100px;            background-color: green;            margin-top: 20px;            display: none;        }    </style>    <script type="text/javascript">        window.onload = function(){            var oBtn = document.getElementsByTagName("button")[0];            var divArr = document.getElementsByTagName("div");            oBtn.onclick = function(){                for(var i = 0; i < divArr.length; i++){                    divArr[i].style.display = "block";                    divArr[i].innerHTML = "test";                };            }        }    </script></head><body>    <button>操作</button>    <div></div>    <div></div>    <div></div></body></html>

如果用jQuery來寫,保持html和css代碼不變,只修改script部分代碼:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jQuery Demo</title>    <style type="text/css">        div{            width: 100px;            height: 100px;            background-color: green;            margin-top: 20px;            display: none;        }    </style>    <script type="text/javascript" src="jquery.js"></script>    <script type="text/javascript">        $(function(){            // 擷取DOM元素            var oBtn = $("button"); //根據標籤名擷取元素            var oDiv = $("div");    //根據標籤名擷取元素            oBtn.click(function(event) {                oDiv.show(1000);    //顯示div                oDiv.html("test")   //設定內容            }); //事件是通過方法綁定的        })    </script></head><body>    <button>操作</button>    <div></div>    <div></div>    <div></div></body></html>

jQuery的介紹

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.