jQuery簡(jiǎn)介

發(fā)布時(shí)間：2020-04-11 04:20:44 來(lái)源：網(wǎng)絡(luò) 閱讀：285 作者：lsieun 欄目：web開(kāi)發(fā)

1、什么是jQuery

jQuery就是一個(gè)Javascript函數(shù)庫(kù)，沒(méi)什么特別的

2、常見(jiàn)的Javascript框架庫(kù)

2.1、什么是Javascript框架庫(kù)

普通Javascript的缺點(diǎn)：每種控件的操作方式不統(tǒng)一，不同瀏覽器下有區(qū)別，要編寫(xiě)跨瀏覽器的程序非常麻煩。因此，出現(xiàn)了很多對(duì)Javascript的封裝庫(kù)。

2.2、常見(jiàn)的Javascript框架庫(kù)

Prototype、YUI、Dojo、ExtJS、jQuery等，這些庫(kù)對(duì)Javascript進(jìn)行了封裝，簡(jiǎn)化了開(kāi)發(fā)。這些庫(kù)是對(duì)Javascript的封裝，內(nèi)部都是用Javascript實(shí)現(xiàn)的。

2.3、jQuery與Javascript的關(guān)系

jQuery就是Javascript語(yǔ)法寫(xiě)的一些函數(shù)類，內(nèi)部仍然是調(diào)用Javascript實(shí)現(xiàn)的，所以并不是代替Javascript。使用jQuery的代碼、編寫(xiě)jQuery的擴(kuò)展插件等仍然需要Javascript的技術(shù)，jQuery本身就是一堆Javascript函數(shù)。jQuery是最火的Javascript庫(kù)，jQuery的擴(kuò)展插件也是非常多。

3、jQuery的特點(diǎn)

（1）很好的解決了不同瀏覽器的兼容問(wèn)題

（2）對(duì)于不同控件具有統(tǒng)一的操作方式

（3）體積小（幾十KB）、使用方便（Write Less, Do More）

（4）鏈?zhǔn)骄幊?('#div1').draggble().show().hide().fly();

（5）隱式迭代

（6）插件豐富、開(kāi)源、免費(fèi)

4、jQuery中的頂級(jí)對(duì)象$

jQuery中最常用的對(duì)象即$對(duì)象，要想使用jQuery的方法必須通過(guò)$對(duì)象。只有將普通DOM對(duì)象封裝成jQuery對(duì)象，然后才能調(diào)用jQuery中的各種方法。

$是jQuery的簡(jiǎn)寫(xiě)，在代碼中可以使用jQuery代替$，但一般為了方便，大家都直接使用$。

4.1、$(fn) or $(document).ready(fn)

$();相當(dāng)于js的window，簡(jiǎn)單（由于字符少）省流量，快

jQuery();寫(xiě)法不同，但是意義一樣

document，直接寫(xiě)表示的是document對(duì)象，只能點(diǎn)出doc的屬性和方法

$(document)表示的是jQuery對(duì)象，只能點(diǎn)出jQuery的屬性和方法

通過(guò)Javascript的window.onload實(shí)現(xiàn)彈框alert，也可以通過(guò)jQuery的方式實(shí)現(xiàn)

$(document).ready(fn);

另外，$(fn); 等價(jià)于$(document).ready(fn);

4.2、window.onload與$(document).read(fn);的區(qū)別

（1）觸發(fā)時(shí)機(jī)

window.onload需要等待頁(yè)面完全加載完畢才會(huì)觸發(fā)，即所有DOM元素創(chuàng)建完畢、圖片、CSS等都加載完畢后被觸發(fā)。

$(document).ready()只要DOM元素加載完畢即觸發(fā)，這樣可以提高響應(yīng)速度。

（2）多次注冊(cè)事件

$(document).ready();可以多次注冊(cè)事件處理程序，并且最終都會(huì)執(zhí)行。

window.onload每次注冊(cè)新的事件處理程序時(shí)都會(huì)將前面的覆蓋掉。

（3）對(duì)應(yīng)關(guān)系

Javascript中的window.onload等價(jià)于jQuery中的$(window).load(fn);

jQuery中注冊(cè)事件是load(fn)，而不是onload(fn)，與DOM不一樣

4.3、頁(yè)面加載完成示例

（1）通過(guò)js的onload

<!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>jQuery測(cè)試</title>
    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
        onload=function(){
            alert("頁(yè)面加載完成了");
        };
    </script>
</head>
<body>

</body>
</html>

（2）通過(guò)jQuery的$(document).reay()

<!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>jQuery測(cè)試</title>
    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            alert("頁(yè)面加載完成了");
        });
    </script>
</head>
<body>

</body>
</html>

（3）通過(guò)jQuery的$(window).load()

<!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>jQuery測(cè)試</title>
    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
        $(window).load(function () {
            alert("頁(yè)面加載完成了");
        });
    </script>
</head>
<body>

</body>
</html>

（4）通過(guò)jQuery的$(function(){});

<!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>jQuery測(cè)試</title>
    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
        $(function () {
            alert("頁(yè)面加載完成了");
        });
    </script>
</head>
<body>

</body>
</html>

參考

書(shū)籍

鋒利的jQuery

網(wǎng)址

jQuery官網(wǎng)

http://jquery.com

jQuery在線API

http://api.jquery.com

jQuery UI

http://jqueryui.com

向AI問(wèn)一下細(xì)節(jié)

jQuery簡(jiǎn)介

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽