Jquery-初入門

weixin_33797791發表於2017-01-04
jQuery

1.說說庫和框架的區別

框架：

框架的含義是一個骨架，它封裝了某領域內處理流程的控制邏輯，所以我們經常說框架是一個半成品的應用。由於領域的種類是如此眾多，所以框架必須具有針對性，比如，專門用於解決底層通訊的框架，或專門用於醫療領域的框架。框架中也包含了很多元素，框架中的所有元素都為了實現一個共同的目標而相互協作

庫：

庫可以看作是一種方法的集合，他不會特定的去解決某些問題，他是將所有的方法整合在一個庫中，供使用者使用，Jquery可以看成一個庫，它提供了相當多的方法和函式。

2.jquery 能做什麼？

Jquery官網是這樣描述的jquery的功能：The Write Less, Do More（寫的更少，做的更多）
它提供了相當多的方法和函式來供使用者使用，而且都是封裝好的，所以相容性比較強，javaScript能做的事情，jquery都可以完成。而且jquery庫容易擴充套件而且不斷有新外掛面世增強它的功能，所以jquery可以說功能十分強大，而且程式碼量小，減輕了程式設計人員的負擔。

3.jquery 物件和 DOM 原生物件有什麼區別？如何轉化？

jquery物件就是用jquery的方法進行獲取的物件，而原生DOM物件就是用javaScript的方法進行獲取的物件。
jquery物件就只能使用jquery的方法，原生DOM物件只能使用原生DOM的方法

原生DOM物件：

根據W3C DOM規範，DOM是HTML與XML的應用介面（API）。通過 DOM，可以訪問所有的 HTML 元素，連同它們所包含的文字和屬性。可以對其中的內容進行修改和刪除，同時也可以建立新的元素。HTML DOM 獨立於平臺和程式語言。它可被任何程式語言諸如 Java、JavaScript 和 VBScript 使用。DOM物件，即是我們用傳統的方法(javascript)獲得的物件。

jquery物件：

jquery物件其實是一個javascript的陣列這個陣列物件包含125個方法和4個屬性
4個屬性分別是
jquery 當前的jquery框架版本號
length 指示該陣列物件的元素個數
context 一般情況下都是指向HtmlDocument物件
selector 傳遞進來的選擇器內容 如：#yourId或.yourClass等

轉化：

獲取jquery物件：$("#idname");
獲取DOM物件：document.getElementById("idname')
jquery轉原生DOM物件：$("#idname")[0]
DOM物件轉Jquery：$(DOM物件)

4.jquery中如何繫結事件？bind、unbind、delegate、live、on、off都有什麼作用？推薦使用哪種？使用on繫結事件使用事件代理的寫法？

.bind():bind() 方法為被選元素新增一個或多個事件處理程式，並規定事件發生時執行的函式。
unbind:unbind() 方法移除被選元素的事件處理程式。
該方法能夠移除所有的或被選的事件處理程式，或者當事件發生時終止指定函式的執行。unbind() 適用於任何通過 jQuery 附加的事件處理程式。
delegate:為指定的元素（屬於被選元素的子元素）新增一個或多個事件處理程式，並規定當這些事件發生時執行的函式。
live:為被選元素附加一個或多個事件處理程式，並規定當這些事件發生時執行的函式。
on:在被選元素及子元素上新增一個或多個事件處理程式。

on()方法是 bind()、live()和 delegate() 方法的新的替代品。該方法給 API 帶來很多便利，我們推薦使用該方法，它簡化了 jQuery 程式碼庫。

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <ul id="list">
            <li>100</li>
            <li>200</li>
            <li>300</li>
            <li>400</li>
            <li>500</li>
        </ul>
    </div>
    <script src='http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js'></script>
    <script>
        $('#list').on('click','li',function(e){
            console.log(e)
        })
    </script>
</body>
</html>

5.jquery 如何展示/隱藏元素？

jquery中可以使用hide()和show()的方法進行展示和隱藏元素

<body>
    <div>
        <button id="hide">隱藏</button>
        <button id="show">展示</button>
        <p>nihao</p>
    </div>
    <script src='http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js'></script>
    <script>
        $('#hide').on('click',function(){
            $("p").hide();//隱藏p元素
        })
        $('#show').on('click',function(e){
            $('p').show();//展示p元素
        })
    </script>
</body>

6.jquery 動畫如何使用？

Jquery使用animate()方法用於建立自定義動畫
必須的：params引數定義形成動畫的CSS屬性
可選的：1.speed引數規定效果的時長，他可以取以下值："slow","fast","normal"或毫秒數,預設是"normal"
2.callback引數是動畫完成後所執行的函式名稱

7.如何設定和獲取元素內部 HTML 內容？如何設定和獲取元素內部文字？

使用$().html()獲取html內容
$().text()獲取文字內容

$().html():html後邊的括號可以更改html內容
$.().text():text後邊的括號可以更改文字內容

8.如何設定和獲取表單使用者輸入或者選擇的內容？如何設定和獲取元素屬性？

$().val():獲取表單使用者輸入的值，val()中可以更改值
使用attr()可以設定元素的屬性，attr接受兩個值，第一個值為元素的屬性，第二個是屬性的值

相關文章