1.jQuery 中， $(document).ready()是什么意思？

以下兩種寫(xiě)法等價(jià)，當(dāng)DOM準(zhǔn)備就緒時(shí)，指定一個(gè)函數(shù)來(lái)執(zhí)行

$(document).ready(handler)
$(handler)

2.$node.html()和$node.text()的區(qū)別?

.html獲取的是集合中第一個(gè)匹配元素的HTML內(nèi)容

<div class="demo-container">
    <div class="demo-box">Demonstration Box</div>
</div>

$('div.demo-container').html();

得到結(jié)果如下：

<div class="demo-box">Demonstration Box</div>

-.text得到匹配元素集合中每個(gè)元素的合并文本，包括他們的后代

<div class="demo-container">
      <div class="demo-box">Demonstration Box</div>
            <ul>
                <li>list item 1</li>
                <li>list <strong>item</strong> 2</li>
            </ul>
      </div>

$('div.demo-container').text()

得到結(jié)果：

Demonstration Box list item 1 list item 2

3.$.extend 的作用和用法?

jQuery.extend( [deep ], target, object1 [, objectN ] )
deep
類型:
[Boolean](https://www.jquery123.com/Types/#Boolean)
如果是true，合并成為遞歸（又叫做深拷貝）。

target
類型:
[Object](https://www.jquery123.com/Types/#Object)
對(duì)象擴(kuò)展。這將接收新的屬性。

object1
類型:
[Object](https://www.jquery123.com/Types/#Object)
一個(gè)對(duì)象，它包含額外的屬性合并到第一個(gè)參數(shù).

objectN
類型:
[Object](https://www.jquery123.com/Types/#Object)
包含額外的屬性合并到第一個(gè)參數(shù)

.extend的作用是將兩個(gè)或更多對(duì)象的內(nèi)容合并到第一個(gè)對(duì)象；
用法有以下：

合并兩個(gè)對(duì)象，并修改第一個(gè)對(duì)象
···
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};

$.extend(object1, object2);
結(jié)果：{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
···

遞歸方式合并兩個(gè)對(duì)象，并修改第一個(gè)對(duì)象

var object1 = {
  apple: 0,
  banana: {weight: 52, price: 100},
  cherry: 97
};
var object2 = {
  banana: {price: 200},
  durian: 100
};

$.extend(true, object1, object2);
結(jié)果：{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

合并到新的對(duì)象，不改變?cè)瓕?duì)象內(nèi)容

var obj1 = {
  apple: 0,
  banana: {weight: 52, price: 100},
  cherry: 97
};
var obj2 = {
  banana: {price: 200},
  durian: 100
};
var obj3 = {};

.extend(obj3, obj1,obj2)

obj1
{apple: 0, banana: {weight: 52, price: 100}, cherry: 97}

obj2
{banana: {price: 200}, durian: 100}

obj3
{apple: 0, banana: {price: 200}, cherry: 97, durian: 100}

4.jQuery 的鏈?zhǔn)秸{(diào)用是什么？

鏈?zhǔn)讲僮魇峭ㄟ^(guò)對(duì)象上的方法最后

return this

把對(duì)象再返回回來(lái)，從而可以訪問(wèn)自己的原型，對(duì)象可以繼續(xù)調(diào)用方法，就可以鏈?zhǔn)讲僮?/p>

// 鏈?zhǔn)秸{(diào)用
$('.btn').on('click',function () {
    $('.box').animate({width: 200})
            .animate({height: 200})
})

鏈?zhǔn)秸{(diào)用的好處：節(jié)省代碼量，代碼看起來(lái)更優(yōu)雅。
鏈?zhǔn)秸{(diào)用的問(wèn)題：所有對(duì)象的方法返回的都是對(duì)象本身，也就是說(shuō)沒(méi)有返回值，所以這種方法不一定在任何環(huán)境下都適合

5. jQuery 中 data 函數(shù)的作用

jQuery.data是一個(gè)調(diào)用，應(yīng)使用.data()
.data()，在匹配元素上存儲(chǔ)任意相關(guān)數(shù)據(jù) 或返回匹配的元素集合中的第一個(gè)元素的給定名稱的數(shù)據(jù)存儲(chǔ)的值。

*   #### .data( key, value )
    *   **key**
        類型:
        [String](https://www.jquery123.com/Types/#String)
        一個(gè)字符串，用戶存儲(chǔ)數(shù)據(jù)的名稱。（譯者注：存儲(chǔ)的數(shù)據(jù)名）
    *   **value**
        類型:
        [Object](https://www.jquery123.com/Types/#Object)
        新的數(shù)據(jù)值；它可以是任意的Javascript數(shù)據(jù)類型，包括Array 或者 Object。

*   ####.data( obj )
    *   **obj**
        類型:
        [Object](https://www.jquery123.com/Types/#Object)
        一個(gè)用于更新數(shù)據(jù)的 鍵/值對(duì)

用例：
我們可以在一個(gè)元素上設(shè)置不同的值，之后獲取這些值

$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
 
$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

6.寫(xiě)出以下功能對(duì)應(yīng)的 jQuery 方法：

1)給元素 $node 添加 class active，給元素 $noed 刪除 class active

$node.addClass('active') //添加
$node.removeClass('active') //刪除

2)展示元素$node, 隱藏元素$node

最簡(jiǎn)單的，直接展示、隱藏
$node.show();
$node.hide();
沒(méi)有動(dòng)畫(huà)，直接顯示和隱藏，但show可記憶display的屬性，顯示時(shí)恢復(fù)

也可增加動(dòng)畫(huà)和事件效果，并指定動(dòng)畫(huà)完成時(shí)的執(zhí)行函數(shù)，hide類似

#### .show( [duration ] [, easing ] [, complete ] )
*   **duration**    (默認(rèn): `400`)
    類型:  Number or String    一個(gè)字符串或者數(shù)字決定動(dòng)畫(huà)將運(yùn)行多久。

*   **easing** (默認(rèn):`swing`)
    類型:String
    一個(gè)字符串，表示過(guò)渡使用哪種緩動(dòng)函數(shù)。（譯者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相關(guān)的插件）

*   **complete**
    類型:Function
    在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)。

  $node.show(300, 'linear', function() {
    alert('Animation complete.');
  })

漸變效果

.fadeIn( [duration ] [, easing ] [, complete ] ) //淡入方式顯示
.fadeOut( [duration ] [, easing ] [, complete ] ) //淡出方式隱藏
.fadeToggle( [duration ] [, easing ] [, complete ] ) //通過(guò)調(diào)整不透明度，隱藏和顯示元素

滑動(dòng)效果

.slideDown( [duration ] [, easing ] [, complete ] ) //給元素高度加動(dòng)畫(huà)，下部向下滑動(dòng)動(dòng)畫(huà)顯示元素
.slideUp( [duration ] [, easing ] [, complete ] )  //給元素高度加動(dòng)畫(huà)，下部向上滑動(dòng)，高度為0時(shí)，元素隱藏
.slideToggle( [duration ] [, easing ] [, complete ] ) //上下滑動(dòng)切換，隱藏和顯示元素

3)獲取元素$node 的屬性: id、src、title，修改以上屬性

獲取屬性:.attr( attributeName )
var title = $( "em" ).attr( "title" );
$('.mod_tab').attr('id')
$('.content img').attr('src')

修改屬性:.attr( attributeName, value )
$('em').attr('title','photo for fun')
$('.mod_tab').attr('id','box');
$('.content img').attr('src','/img/test.img');

4)給$node 添加自定義屬性data-src

$node.attr('data-src','jirengu.com')

5)在$ct 內(nèi)部最開(kāi)頭添加元素$node

$ct.prepend($node)
$node.prependTo($ct)

6)在$ct 內(nèi)部最末尾添加元素$node

$node.appendTo($ct)

7)刪除$node

$node.remove();

8)把$ct里內(nèi)容清空

$ct.empty();

9)在$ct 里設(shè)置 html <div class="btn"></div>

$ct.html('<div class="btn"></div>')

10)獲取、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距、包括邊框、包括外邊距)

不包括內(nèi)邊距寬高：

$node.width() 
$node.height()

包括內(nèi)邊距padding的寬高

$node.innerWidth()
$node.innerHeight()

包括邊框的寬高

$node.outerWidth()
$node.outerHeight()

包括margin的寬高

$node.outerWidth(true)
$node.outerHeight(true)

11)獲取窗口滾動(dòng)條垂直滾動(dòng)距離

$node.scrollTop();

12)獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離

.offset()
.offset()方法允許我們檢索一個(gè)元素 包含其 border 邊框，不包括 margin相對(duì)于文檔document的當(dāng)前位置。和.position()的差別在于：.position()是相對(duì)于父級(jí)元素的位移。當(dāng)通過(guò)全局操作（特別是通過(guò)拖拽操作）將一個(gè)新的元素放置到另一個(gè)已經(jīng)存在的元素的上面時(shí)，若要取得這個(gè)新的元素的位置，那么使用 .offset()`更合適。

.offset()返回一個(gè)包含top和left屬性的對(duì)象

$node.offset().top;
$node.offset().left;

13)修改$node 的樣式，字體顏色設(shè)置紅色，字體大小設(shè)置14px

$node.css({
  "color": "red",
  "font-size": "14px"
});

14)遍歷節(jié)點(diǎn)，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍

$('.box>ul>li').each(function(index, node){
var str = $(node).text();
$(node).text(str + str)
})

15)從$ct 里查找 class 為 .item的子元素

$ct.find('.item')

16)獲取$ct 里面的所有孩子

$ct.children()

17)對(duì)于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子

$node.parent('.ct').find('.panel')

18)獲取選擇元素的數(shù)量

$node.length()

19)獲取當(dāng)前元素在兄弟中的排行

        <ul>
            <li id="foo">foo</li>
            <li id="bar">bar</li>
            <li id="baz">baz</li>
        </ul>
$('#bar').index()
1

7.用jQuery實(shí)現(xiàn)以下操作

1)當(dāng)點(diǎn)擊$btn 時(shí)，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色

鏈接1

2)當(dāng)窗口滾動(dòng)時(shí)，獲取垂直滾動(dòng)距離

鏈接2

3)當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?/h2>
鏈接3

4)當(dāng)鼠標(biāo)激活 input 輸入框時(shí)讓輸入框邊框變?yōu)樗{(lán)色，當(dāng)輸入框內(nèi)容改變時(shí)把輸入框里的文字小寫(xiě)變?yōu)榇髮?xiě)，當(dāng)輸入框失去焦點(diǎn)時(shí)去掉邊框藍(lán)色，控制臺(tái)展示輸入框里的文字

鏈接4

5)當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容

鏈接5

8.用 jQuery ajax 實(shí)現(xiàn)如下效果。當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁(yè)面

加載更多

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

進(jìn)階15——jquery動(dòng)畫(huà)及ajax

進(jìn)階15——jquery動(dòng)畫(huà)及ajax

1.jQuery 中， $(document).ready()是什么意思？

2.$node.html()和$node.text()的區(qū)別?

3.$.extend 的作用和用法?

4.jQuery 的鏈?zhǔn)秸{(diào)用是什么？

5. jQuery 中 data 函數(shù)的作用

6.寫(xiě)出以下功能對(duì)應(yīng)的 jQuery 方法：

1)給元素 $node 添加 class active，給元素 $noed 刪除 class active

2)展示元素$node, 隱藏元素$node

3)獲取元素$node 的屬性: id、src、title，修改以上屬性

4)給$node 添加自定義屬性data-src

5)在$ct 內(nèi)部最開(kāi)頭添加元素$node

6)在$ct 內(nèi)部最末尾添加元素$node

7)刪除$node

8)把$ct里內(nèi)容清空

9)在$ct 里設(shè)置 html <div class="btn"></div>

10)獲取、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距、包括邊框、包括外邊距)

11)獲取窗口滾動(dòng)條垂直滾動(dòng)距離

12)獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離

13)修改$node 的樣式，字體顏色設(shè)置紅色，字體大小設(shè)置14px

14)遍歷節(jié)點(diǎn)，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍

15)從$ct 里查找 class 為 .item的子元素

16)獲取$ct 里面的所有孩子

17)對(duì)于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子

18)獲取選擇元素的數(shù)量

19)獲取當(dāng)前元素在兄弟中的排行

7.用jQuery實(shí)現(xiàn)以下操作

1)當(dāng)點(diǎn)擊$btn 時(shí)，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色

2)當(dāng)窗口滾動(dòng)時(shí)，獲取垂直滾動(dòng)距離

3)當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?/h2>
鏈接3

5)當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容

8.用 jQuery ajax 實(shí)現(xiàn)如下效果。當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁(yè)面

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

進(jìn)階15——jquery動(dòng)畫(huà)及ajax

1.jQuery 中， $(document).ready()是什么意思？

2.$node.html()和$node.text()的區(qū)別?

3.$.extend 的作用和用法?

4.jQuery 的鏈?zhǔn)秸{(diào)用是什么？

5. jQuery 中 data 函數(shù)的作用

6.寫(xiě)出以下功能對(duì)應(yīng)的 jQuery 方法：

1)給元素 $node 添加 class active，給元素 $noed 刪除 class active

2)展示元素$node, 隱藏元素$node

3)獲取元素$node 的 屬性: id、src、title， 修改以上屬性

4)給$node 添加自定義屬性data-src

5)在$ct 內(nèi)部最開(kāi)頭添加元素$node

6)在$ct 內(nèi)部最末尾添加元素$node

7)刪除$node

8)把$ct里內(nèi)容清空

9)在$ct 里設(shè)置 html <div class="btn"></div>

10)獲取、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距、包括邊框、包括外邊距)

11)獲取窗口滾動(dòng)條垂直滾動(dòng)距離

12)獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離

13)修改$node 的樣式，字體顏色設(shè)置紅色，字體大小設(shè)置14px

14)遍歷節(jié)點(diǎn)，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍

15)從$ct 里查找 class 為 .item的子元素

16)獲取$ct 里面的所有孩子

17)對(duì)于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子

18)獲取選擇元素的數(shù)量

19)獲取當(dāng)前元素在兄弟中的排行

7.用jQuery實(shí)現(xiàn)以下操作

1)當(dāng)點(diǎn)擊$btn 時(shí)，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色

2)當(dāng)窗口滾動(dòng)時(shí)，獲取垂直滾動(dòng)距離

3)當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?/h2> 鏈接3

5)當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容

8.用 jQuery ajax 實(shí)現(xiàn)如下效果。當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁(yè)面

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1.jQuery 中， $(document).ready()是什么意思？

4.jQuery 的鏈?zhǔn)秸{(diào)用是什么？

3)獲取元素$node 的屬性: id、src、title，修改以上屬性

10)獲取、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距、包括邊框、包括外邊距)

12)獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離

13)修改$node 的樣式，字體顏色設(shè)置紅色，字體大小設(shè)置14px

17)對(duì)于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子

1)當(dāng)點(diǎn)擊$btn 時(shí)，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色

3)當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?/h2>
鏈接3

5)當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容

8.用 jQuery ajax 實(shí)現(xiàn)如下效果。當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁(yè)面