網(wǎng)站前端_Jquery-基礎(chǔ)入門.0001.原生Js到后期封裝庫Jquery的過渡?

發(fā)布時(shí)間：2020-08-20 19:51:25 來源：網(wǎng)絡(luò) 閱讀：491 作者：運(yùn)維開發(fā) 欄目：web開發(fā)

原生缺點(diǎn):

1. JS的出現(xiàn)使得網(wǎng)頁與用戶之間實(shí)現(xiàn)了一種實(shí)時(shí)/動態(tài)/交互的關(guān)系,網(wǎng)頁可以包含更多活躍的元素和精彩的內(nèi)容

2. JS的弊端在于復(fù)雜的DOM對象,而JQuery封裝了很多預(yù)定義的對象和使用函數(shù)簡化了DOM操作,使得我們可以快速創(chuàng)建有高難度交互的富客戶端頁面,且兼容各大瀏覽器

簡單介紹:

1. JQuery是一個(gè)優(yōu)秀的JavaScript庫,擁有強(qiáng)大的選擇器,出色的DOM操作,可靠的事件處理,完善的兼容性和鏈?zhǔn)讲僮鞯裙δ?目前團(tuán)隊(duì)主要推核心庫(JQuery)/UI(JQuery UI)/移動端(JQuery Mobile)

小試牛刀:

說明: 官網(wǎng)下載最新版,.min.js結(jié)尾的表示壓縮版,自己開發(fā)學(xué)習(xí)可以使用未壓縮版,需要明確的是在JQuery庫環(huán)境下$就是JQuery簡寫形式,其實(shí)兩個(gè)是等價(jià)的,以后開發(fā)中更多用的當(dāng)然是$符號了~

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>前端開發(fā)</title>
    </head>
    <body>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            // 常規(guī)寫法
            $(document).ready(function () {
                alert('Hello Word!')
            })
            // 簡寫方式
            $(function () {
                alert('Hello Word!')
            })
        </script>
    </body>
</html>

說明: 如上代碼的$(document).ready(function(){})其實(shí)類似于傳統(tǒng)JS中的window.onload方法,但是不同點(diǎn)一是前者只要等待DOM結(jié)構(gòu)繪制完畢后執(zhí)行,可能DOM元素關(guān)聯(lián)的東西還沒有加載完,而后者是必須等待所有的東西加載完畢才能執(zhí)行,不同點(diǎn)二是前者支持同時(shí)編寫多個(gè),而后者編寫多個(gè)就無法正確執(zhí)行,不同點(diǎn)三是前者還支持簡化寫法$(function(){})

小小項(xiàng)目:

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>前端開發(fā)</title>
        <style type="text/css">
            #menu {
                width: 300px;
            }
            .sub_menu {
                color: #ffffff;
                cursor: pointer;
                background-color: #555555;
            }
            div {
                padding: 0;
                margin: 1px 0;
            }
            div a {
                background: #888888;
                display: none;
                float: left;
                width: 300px;
            }
            .highlight {
                color: #ffffff;
                background-color: green;
            }
        </style>
    </head>
        <div id="menu">
            <div class="sub_menu">
                <span>第1章 - 認(rèn)識JQuery</span>
                <a href="">1.1 - Javascript和Javascript庫</a>
                <a href="">1.2 - 加入JQuery</a>
                <a href="">1.3 - 編寫簡單JQuery代碼</a>
                <a href="">1.4 - JQuery對象和DOM對象</a>
                <a href="">1.5 - 解決JQuery和其它庫的沖突</a>
                <a href="">1.6 - JQuery開發(fā)工具和插件</a>
            </div>
            <div class="sub_menu">
                <span>第2章 - JQuery選擇器</span>
                <a href="">2.1 - JQuery選擇器是什么</a>
                <a href="">2.2 - JQuery選擇器的優(yōu)勢</a>
                <a href="">2.3 - JQuery選擇器</a>
                <a href="">2.4 - 應(yīng)用JQuery改寫示例</a>
                <a href="">2.5 - 選擇器中的一些注意事項(xiàng)</a>
                <a href="">2.6 - 類似淘寶品牌列表的效果</a>
                <a href="">2.7 - 還有其它選擇器嗎?</a>
            </div>
            <div class="sub_menu">
                <span>第3章 - JQuery中的DOM操作</span>
                <a href="">3.1 - DOM操作的分類</a>
                <a href="">3.2 - JQuery中的DOM操作</a>
                <a href="">3.3 - 某網(wǎng)站超鏈接和圖片提示效果</a>
            </div>
        </div>
    <body>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $('.sub_menu').click(function () {
                // 對點(diǎn)擊的對象添加highlight類
                $(this).addClass('highlight')
                        .children('a')
                        .show()
                        // 重新定位到上次操作的節(jié)點(diǎn)
                        .end()
                        .siblings()
                        .removeClass('highlight')
                        .children('a')
                        .hide()
            })
        </script>
    </body>
</html>

說明: 如上代碼簡單實(shí)現(xiàn)了一個(gè)手風(fēng)琴的效果, 通過$('.sub_menu')定位到class屬性包含.sub_menu的元素,并給其綁定一個(gè)click事件,回調(diào)函數(shù)內(nèi)部$(this)其實(shí)就是觸發(fā)回調(diào)函數(shù)的源對象,當(dāng)點(diǎn)擊時(shí)先通過.addClass('highlight').children('a').show()展開自己的子元素,然后通過.end()重新定位到上次操作的節(jié)點(diǎn)$(this),然后通過.siblings()..removeClass('highlight') .children('a').hide()讓其它兄弟元素不高亮且子元素隱藏.

兩種對象:

1. DOM對象是文檔原生對象模型,只能通過原生的方法對其添加/刪除/查詢/修改,不能使用JQuery對象下的任何方法

2. JQuery對象是基于DOM對象封裝的對象,可以通過JQuery特有的方法對齊添加/刪除/查詢/修改,不能使用DOM對象下的任何方法.

3. DOM對象變量聲明常定義為var xm = 10,JQuery對象變量聲明常定義為var $xm = 10,這個(gè)是約定俗稱的規(guī)定.

4. DOM對象可以通過$()轉(zhuǎn)換為JQuery對象,從此遍可以使用JQuery對象的方法,反之JQuery對象也可以通過[]或get()轉(zhuǎn)換為DOM原生對象,從此便可使用DOM對象的方法

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>前端開發(fā)</title>
    </head>
    <body>
        <div id="container">
            asdasdas
        </div>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            // 將JQuery對象轉(zhuǎn)換為DOM對象
            var $div = $('#container')
            var div = $div[0]
            console.log(div)
            var div = $div.get(0)
            // 將DOM對象轉(zhuǎn)換為JQuery對象
            var div = document.getElementById('container')
            var $div = $(div)
            console.log($div)
        </script>
    </body>
</html>

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

網(wǎng)站前端_Jquery-基礎(chǔ)入門.0001.原生Js到后期封裝庫Jquery的過渡?

猜你喜歡

最新資訊

相關(guān)推薦

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