一、問答

（一）、Jquery 中， $(document).ready()是什么意思？和window.onload 的區(qū)別？還有其他什么寫法或者替代方法？

意思是當(dāng)document準(zhǔn)備就緒時(shí)就執(zhí)行某個(gè)指定的函數(shù)；
區(qū)別：
1、window.onload只能編寫一個(gè)，即使編寫多個(gè)也只執(zhí)行一個(gè)，而$(document).ready()則可編寫多個(gè)并且都可得到執(zhí)行；
2、window.onload需要等到頁面所有的元素（含圖片的加載）加載完成后才執(zhí)行，而$(document).ready()只需等到DOM準(zhǔn)備就緒時(shí)就執(zhí)行（不必等待所有元素加載完后再執(zhí)行）；
3、window.onload是原生js中的，而 $(document).ready()需在調(diào)用jquery庫后才能使用；
4、window.onload不可簡(jiǎn)寫，而$(document).ready()可簡(jiǎn)寫成

$(function(){})

或者

$().ready(function(){})

下面舉個(gè)例子：

window.onload = function() {
  init();
  doSomethingElse();
};

其實(shí)jQuery里也load方法

$("img").load(function(){
console.log("hello")
})
// 或者這樣
$(window).load(function () {
  // run code
});

（二）、$node.html()和$node.text()的區(qū)別?

$node.html()是獲取集合中第一個(gè)匹配元素的html內(nèi)容;當(dāng)()里面含有參數(shù)時(shí)則表示設(shè)置每個(gè)匹配元素的html內(nèi)容；
$node.text()是獲取匹配集合中每個(gè)元素的合并文本，包括他們的后代;當(dāng)（）里含有參數(shù)時(shí)，表示設(shè)置每個(gè)匹配元素的文本內(nèi)容為指定文本內(nèi)容；另外，$node.text()與$node.html()的不同在于$node.text()能夠在xml文檔中使用，而html不可以。

舉個(gè)例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style type="text/css">
    </style>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>

    <p class="first"> 我是 <em>段落1</em> </p>
    <p class="second">我是段落2</p>

    <script>
     console.log("我是段落1的html類型 "+$(".first").html()) ;
     console.log("我是段落1的text類型 "+$(".first").text()) ;
     console.log("我是段落2的html類型 "+$(".second").html()) ;
     console.log("我是段落2的text類型 "+$(".second").text()) ;
     console.log($(".second").html()===$(".second").text());
    </script>

</body>
</html>

運(yùn)行結(jié)果

需要指出的是，當(dāng)$node里面是純文字時(shí)，$node.html()和$node.text() 結(jié)果是相等的，例如上面的例子：$(".second").html()===$(".second").text() 運(yùn)行結(jié)果是true；

再舉個(gè)例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style type="text/css">
    </style>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>

    <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 class="demo-container">
        我是第二個(gè)<em>demo-container</em>
    </div> 

    <script>
     console.log("我是html類型 "+$(".demo-container").html()) ;
     console.log("我是text類型 "+$(".demo-container").text()) ;
    </script>

</body>
</html>

運(yùn)行結(jié)果

（三）、$.extend 的作用和用法?

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

Paste_Image.png

舉個(gè)例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style type="text/css">
    </style>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>



<script>

    var licai={
    "name":"licai",
    "age":"24",
    "like":{"inside":"coding","outside":"cycling","middle":"football"}

    };
    var caili={
    "name":"caili",
    "like":{"inside":"reading","outside":"footbal"}    
    }

    $.extend(licai,caili);
    console.log(licai);
    console.log(caili);

</script>

</body>
</html>

Paste_Image.png

若將 $.extend(licai,caili) 改成 $.extend(true，licai,caili)就變成了深拷貝，見下面的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style type="text/css">
    </style>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>



<script>
    var licai={
    "name":"licai",
    "age":"24",
    "like":{"inside":"coding","outside":"cycling","middle":"football"}

    };

    var caili={
    "name":"caili",
    "like":{"inside":"reading","outside":"footbal"}    
    }


    $.extend(true,licai,caili);
    console.log(licai);
    console.log(caili);

</script>

</body>
</html>

Paste_Image.png

綜上所述：
當(dāng)目標(biāo)對(duì)象的屬性與非目標(biāo)對(duì)象屬性相同時(shí)，目標(biāo)對(duì)象的屬性值若與非目標(biāo)對(duì)象不同，則會(huì)被非目標(biāo)對(duì)象的屬性值給修改掉；（比如上面深拷貝的例子，目標(biāo)對(duì)象name及l(fā)ike屬性與非目標(biāo)對(duì)象相同，目標(biāo)對(duì)象的name屬性值與非目標(biāo)的name屬性值相同，目標(biāo)對(duì)象的屬性值將被修改成非目標(biāo)對(duì)象的屬性值；目標(biāo)對(duì)象的like屬性值與非目標(biāo)對(duì)象的like屬性值也不同，目標(biāo)對(duì)象like中的屬性值inside屬性及outside屬性的屬性值均被非目標(biāo)對(duì)象修改了，但是若在深拷貝時(shí)，middle屬性的屬性值會(huì)被保留，但若是淺拷貝，則目標(biāo)對(duì)象like屬性值會(huì)被非目標(biāo)對(duì)象完全粗暴的替換/修改成與非目標(biāo)對(duì)象完全一樣的屬性值）

（四）、JQuery 的鏈?zhǔn)秸{(diào)用是什么？

可以連續(xù)使用jQuery方法的過程叫做JQuery 的鏈?zhǔn)秸{(diào)用；
$(selector).方法1（回調(diào)函數(shù)1）.方法2（回調(diào)函數(shù)2）.方法N（回調(diào)函數(shù)N）....
也可這樣寫：

$("選擇器")
    .方法1(回調(diào)函數(shù)1)
    .方法2(回調(diào)函數(shù)2)
    .方法N(回調(diào)函數(shù)N);

其實(shí)鏈?zhǔn)秸{(diào)用就是通過對(duì)象的方法最后將對(duì)象再返回回來（return this）繼續(xù)被其他方法調(diào)用；可通過這里的原生 js 實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用的例子能夠很好的理解：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style type="text/css">
    </style>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
    <script>
    var Dog=function (name,age){
        this.name=name;
        this.age=age;
    };
    Dog.prototype={
        getName:function(){
            console.log(this.name);
            return this
        },
        getAge:function(){
            console.log(this.age);
            return this
        }
    } ;
    Dogs=function(name,age){
        return new Dog(name,age);
    } ;    
    Dogs("goutou",3).getName().getAge();
    </script>

</body>
</html>

Paste_Image.png

（五）、JQuery ajax 中緩存怎樣控制?

可使用cache這個(gè)參數(shù)來控制是否緩存頁面，當(dāng)為ture時(shí)則緩存頁面（默認(rèn)為ture，除了dataType為jsonp及script以外），false為不緩存頁面；其實(shí)不緩存頁面的實(shí)現(xiàn)原理就是在GET請(qǐng)求參數(shù)中附加"_={timestamp}"（時(shí)間戳）；

（六）、jquery 中 data 函數(shù)的作用？

存儲(chǔ)數(shù)據(jù)

返回參數(shù)

值得提出的是：注意這兩種方法目前并不提供在XML文檔上跨平臺(tái)設(shè)置，作為Internet Explorer不允許通過自定義屬性附加數(shù)據(jù)。

下面舉個(gè)例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
  div { color:blue; }
  span { color:red; }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <div>
    我的興趣是
    <span></span>
    and
    <span></span>
  </div>
<script>
$("div").data("like", { "inside": "coding", "outside": "football" });
$("span:first").text($("div").data("like").inside);
$("span:last").text($("div").data("like").outside);
console.log($("div").data("like"))
console.log($("div").data())
</script>
 
</body>
</html>

運(yùn)行結(jié)果

從jQuery 1.4.3起， HTML 5 data- 屬性將自動(dòng)被引用到j(luò)Query的數(shù)據(jù)對(duì)象中。嵌入式破折號(hào)處理屬性（ attributes）的方式在 jQuery 1.6 中已經(jīng)改變，以使之符合W3C HTML5 規(guī)范.

舉個(gè)例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
  div { color:blue; }
  span { color:red; }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'>    
  </div>
  <script>
    console.log($("div").data("role")==="page");
    console.log($("div").data("lastValue")===43);
    console.log($("div").data("lastValue")==="43");
    console.log($("div").data("hidden")===true);
    console.log($("div").data("hidden")==="true");
    console.log($("div").data("options").name==="John");
  </script>
 
</body>
</html>

Paste_Image.png

二、代碼

（一）、寫出以下功能對(duì)應(yīng)的 Jq 方法：

1.給元素 $node 添加 class active，給元素 $noed 刪除 class active
2.展示元素$node, 隱藏元素$node
3.獲取元素$node 的屬性: id、src、title，修改以上屬性
4.給$node 添加自定義屬性data-src
5.在$ct 內(nè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)前元素在兄弟中的排行

代碼詳見：https://github.com/have-not-BUG/task/blob/master/renwu/renwu26/renwu26-1.html

（二）、簡(jiǎn)單實(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)榘咨?br> 4.當(dāng)鼠標(biāo)激活 input 輸入框時(shí)讓輸入框邊框變?yōu)樗{(lán)色，當(dāng)輸入框內(nèi)容改變時(shí)把輸入框里的文字小寫變?yōu)榇髮?，?dāng)輸入框失去焦點(diǎn)時(shí)去掉邊框藍(lán)色，控制臺(tái)展示輸入框里的文字
5.當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容
代碼詳見：https://github.com/have-not-BUG/task/blob/master/renwu/renwu26/renwu26-2.html

（三）、用 jquery ajax 實(shí)現(xiàn)如下效果。當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁面。當(dāng)鼠標(biāo)放置上去會(huì)變色

http://jrgzuoye.applinzi.com/作業(yè)安排/jscode/JS9-jqueryajax/1.html

<?php
    // 后端 php 測(cè)試接口文件
    $start = $_GET['start']; //2
    $len = $_GET['len'];  //6 
    $items = array();
 
    for($i = 0; $i < $len; $i++){
        array_push($items, '內(nèi)容' . ($start+$i));
    }
    $ret = array('status'=>1, 'data'=>$items);

    //{status: 1, data: ['內(nèi)容1','內(nèi)容2','內(nèi)容3']}
    sleep(0.5);
    echo json_encode($ret);

HTML代碼詳見：https://github.com/have-not-BUG/task/blob/master/renwu/renwu26/3/renwu26_3.html

本地測(cè)試通過：

Paste_Image.png

**本文版權(quán)歸本人即簡(jiǎn)書筆名：該賬戶已被查封所有，如需轉(zhuǎn)載請(qǐng)注明出處。謝謝！ *

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

jquery 常用方法&ajax 基礎(chǔ)知識(shí)問答

jquery 常用方法&ajax 基礎(chǔ)知識(shí)問答

一、問答

（一）、Jquery 中， $(document).ready()是什么意思？和window.onload 的區(qū)別？還有其他什么寫法或者替代方法？

（二）、$node.html()和$node.text()的區(qū)別?

（三）、$.extend 的作用和用法?

（四）、JQuery 的鏈?zhǔn)秸{(diào)用是什么？

（五）、JQuery ajax 中緩存怎樣控制?

（六）、jquery 中 data 函數(shù)的作用？

二、代碼

（一）、寫出以下功能對(duì)應(yīng)的 Jq 方法：

（二）、簡(jiǎn)單實(shí)現(xiàn)以下操作

（三）、用 jquery ajax 實(shí)現(xiàn)如下效果。當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁面。當(dāng)鼠標(biāo)放置上去會(huì)變色

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

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

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

jquery 常用方法&ajax 基礎(chǔ)知識(shí)問答

一、問答

（一）、Jquery 中， $(document).ready()是什么意思？和window.onload 的區(qū)別？ 還有其他什么寫法或者替代方法？

（二）、$node.html()和$node.text()的區(qū)別?

（三）、$.extend 的作用和用法?

（四）、JQuery 的鏈?zhǔn)秸{(diào)用是什么？

（五）、JQuery ajax 中緩存怎樣控制?

（六）、jquery 中 data 函數(shù)的作用？

二、代碼

（一）、寫出以下功能對(duì)應(yīng)的 Jq 方法：

（二）、簡(jiǎn)單實(shí)現(xiàn)以下操作

（三）、用 jquery ajax 實(shí)現(xiàn)如下效果。當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁面。當(dāng)鼠標(biāo)放置上去會(huì)變色

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

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

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

一、問答

（一）、Jquery 中， $(document).ready()是什么意思？和window.onload 的區(qū)別？還有其他什么寫法或者替代方法？

（二）、$node.html()和$node.text()的區(qū)別?

（四）、JQuery 的鏈?zhǔn)秸{(diào)用是什么？

（五）、JQuery ajax 中緩存怎樣控制?

（六）、jquery 中 data 函數(shù)的作用？

二、代碼

（一）、寫出以下功能對(duì)應(yīng)的 Jq 方法：

（三）、用 jquery ajax 實(shí)現(xiàn)如下效果。當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁面。當(dāng)鼠標(biāo)放置上去會(huì)變色