26.jquery 常用方法&ajax

問答

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

**(document).ready()**是DOM加載完成時(shí)執(zhí)行相應(yīng)的函數(shù),而不必等待頁(yè)面中的圖像加載完畢； **window.onload**是當(dāng)頁(yè)面全部加載完成時(shí)執(zhí)行相應(yīng)的函數(shù)，比如頁(yè)面內(nèi)容、圖片、資源等全部加載完成 **區(qū)別：** 1.執(zhí)行時(shí)間 ``window.onload``必須等到頁(yè)面內(nèi)包括``圖片``的所有元素加載完畢后才能執(zhí)行。 ``(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到所有元素都加載完畢。 2.編寫個(gè)數(shù)不同window.onload不能同時(shí)編寫多個(gè)，如果有多個(gè)window.onload方法，只會(huì)執(zhí)行最后一個(gè)(document).ready()``可以同時(shí)編寫多個(gè)，并且都可以得到執(zhí)行 3.簡(jiǎn)化寫法 ``window.onload``沒有簡(jiǎn)化寫法； ``(document).ready(function(){...})``可以簡(jiǎn)寫成(function(){})或().ready(function(){});

舉例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
</head>
<body>

    <iframe src="http://www.taobao.com"></iframe>
    <script>    
        $( window ).load(function() {  //加載完執(zhí)行，編寫多個(gè)都執(zhí)行
            console.log( "window loaded 1" );
        });
        $( window ).load(function() {
            console.log( "window loaded 11" );
        });

        window.onload=function() {  
            console.log( "window loaded 2" );
        };
        window.onload=function() {  //加載完執(zhí)行，編寫多個(gè)只執(zhí)行最后一個(gè)
            console.log( "window loaded 22" );
        };

        $( document ).ready(function() {   //最先被執(zhí)行，多個(gè)都執(zhí)行
            console.log( "document loaded 3" );
        });
        $( document ).ready(function() {
            console.log( "document loaded 33" );
        });
    </script>
</body>
</html>
Paste_Image.png

注意：
由于在$(document).ready() 方法內(nèi)注冊(cè)的事件，只要 DOM 就緒就會(huì)被執(zhí)行，因此可能此時(shí)元素的關(guān)聯(lián)文件未下載完。例如與圖片有關(guān)的 html 下載完畢，并且已經(jīng)解析為 DOM 樹了，但很有可能圖片還沒有加載完畢，所以例如圖片的高度和寬度這樣的屬性此時(shí)不一定有效。
要解決這個(gè)問題可以使用jquery中的load方法，如果處理函數(shù)綁定給 window 對(duì)象，則會(huì)在所有內(nèi)容(包括窗口、框架、對(duì)象和圖像等)加載完畢后觸發(fā)；如果處理函數(shù)綁定在元素上，則會(huì)在元素的內(nèi)容加載完畢后觸發(fā)。
例如

$(window).load(function (){  
    // 編寫代碼    
});  
$("img").load(function(){
    // 編寫代碼   
});

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

$node.html()是獲取元素的html內(nèi)容（包含標(biāo)簽和文本）
$node.text()是獲取元素文本內(nèi)容

舉例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
</head>
<body>
    <div>
        這是用于測(cè)試
        <h1>測(cè)試html，text</h1>
    </div>

    <script>
    $(document).ready(function(){
        console.log( $('div').html());
        console.log( $('div').text());

        console.log( $('h1').html() );
        console.log( $('h1').text() ); 
        console.log( $('h1').html()===$('h1').text() );
       //當(dāng)元素內(nèi)只有文本時(shí)，html和text獲取都是一樣的
    })
    </script>
</body>
</html>
Paste_Image.png

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

描述：將兩個(gè)或更多對(duì)象的內(nèi)容合并到第一個(gè)對(duì)象。

第1種情況：

jQuery.extend( target [, object1 ] [, objectN ] )

當(dāng)我們提供兩個(gè)或多個(gè)對(duì)象給$.extend()，對(duì)象的所有屬性都添加到目標(biāo)對(duì)象（target參數(shù)）。
如果附加對(duì)象中的屬性在目標(biāo)對(duì)象中沒有，那么在目標(biāo)對(duì)象中添加該屬性。如果附件對(duì)象中的屬性在目標(biāo)對(duì)象中也有，那么目標(biāo)對(duì)象中屬性的值被該屬性的值所覆蓋。

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
</head>
<body>
   <div id="test"></div>

   <script>
        var object1={
            apple:1,
            banana:{weight:23,price:100},
            orange:23
        };
        var object2={
            banana:{price:300,color:'yellow'},
            pineapple:50
        }
        $.extend( object1,object2 );
        $('#test').append( JSON.stringify( object1 ))
   </script> 
</body>
</html>
Paste_Image.png

第2種情況：

jQuery.extend( [deep ], target, object1 [, objectN ] )

1.deep
類型: [Boolean]
如果是true，合并成為遞歸（又叫做深拷貝）。
2.target
類型: [Object]
對(duì)象擴(kuò)展。這將接收新的屬性。
3.object1
類型: [Object]
一個(gè)對(duì)象，它包含額外的屬性合并到第一個(gè)參數(shù).
4.objectN
類型: [Object]
包含額外的屬性合并到第一個(gè)參數(shù)

這個(gè)用法多了一個(gè)參數(shù)true，它會(huì)用遞歸的方式去合并對(duì)象，并且是深拷貝。與上面的用法不同處在于如果目標(biāo)對(duì)象的某個(gè)屬性在附加對(duì)象中有，那么這個(gè)屬性的值會(huì)發(fā)生合并，而不是覆蓋。

同上
$.extend( true,object1,object2 );
Paste_Image.png

第3種情況

var object = $.extend({}, object1, object2);

目標(biāo)對(duì)象（也就是第一個(gè)參數(shù)）將被修改，并且將通過$.extend()返回。將目標(biāo)對(duì)象設(shè)為{}，它是合并多個(gè)對(duì)象，但是不改變?cè)瓕?duì)象。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
</head>
<body>
   <div id="test"></div>

   <script>
        var object1={
            apple:1,
            banana:{weight:23,price:100},
            orange:23
        };
        var object2={
            banana:{price:300,color:'yellow'},
            pineapple:50
        }
        var settings=$.extend( {},object1,object2 );
        $('#test').append( JSON.stringify( object1 )+'<br>');
        $('#test').append( JSON.stringify( object2 )+'<br>');
        $('#test').append( JSON.stringify( settings ));
   </script> 
</body>
</html>
Paste_Image.png
//extend默認(rèn)生成的是淺拷貝對(duì)象，將上面加個(gè)ture就變?yōu)樯羁截悓?duì)象
var settings=$.extend(true, {},object1,object2 );
Paste_Image.png

淺拷貝和深拷貝

<script>
        var obj1 = {
            a:{a:1,b:2},
        }
        var j1 =$.extend({},obj1)
        var j2 =$.extend(true,{},obj1)
        obj1.a.b =33333
        console.log(obj1)  //{ a:{a:1,b:333} }
        console.log(j1)  //{ a:{a:1,b:333} }
        console.log(j2)  //{ a:{a:1,b:2} }  //j2是深拷貝，它開辟了另外的空間，所以值沒有變化
    </script>

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

jQuery的鏈?zhǔn)秸{(diào)用就是指對(duì)一個(gè)jquery對(duì)象連續(xù)的使用jQuery方法。
原理是執(zhí)行完一個(gè)方法后就返回對(duì)象本身（return this），然后使用本對(duì)象的其他jQuery方法。

例如：

$("#Test").addClass('style').find("div").eq(0).fadeOut(200);

上面的例子意為：先為id為Test的對(duì)象添加"style"這個(gè)樣式，再找尋其下的第一個(gè)div標(biāo)簽，并使其淡出。通過上面看出鏈?zhǔn)讲僮骶褪菄@一個(gè)jQuery對(duì)象進(jìn)行的。

作用：讓代碼更加簡(jiǎn)潔易讀，減少重復(fù)性代碼，提高性能。

5.JQuery ajax 中緩存怎樣控制?

jQuery ajax利用cache這個(gè)參數(shù)來控制是否緩存頁(yè)面。當(dāng)為ture時(shí)則緩存頁(yè)面（默認(rèn)為ture，除了dataType為jsonp及script以外）；false為不緩存頁(yè)面，即每當(dāng)發(fā)起ajax請(qǐng)求時(shí)，都會(huì)向后臺(tái)請(qǐng)求數(shù)據(jù)；
其實(shí)不緩存頁(yè)面的實(shí)現(xiàn)原理就是在GET請(qǐng)求參數(shù)后面附加"_={timestamp}"（時(shí)間戳）；

$.ajax({
     cache:true //true開啟緩存,false為關(guān)閉
});

注意：只有當(dāng)使用GET方法時(shí)，設(shè)置cache為false是有用的。而使用POST方法時(shí)，則每次都會(huì)被認(rèn)為是新的請(qǐng)求，不會(huì)緩存頁(yè)面。

6.jquery 中 data 函數(shù)的作用

描述：存儲(chǔ)任意數(shù)據(jù)到指定的元素或者返回設(shè)置的值。
可以向元素附加數(shù)據(jù),以 .data(key,value)或.data(obj)的形式;
可以從元素上讀取數(shù)據(jù),以.data(key)或者.data()的形式

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

console.log( $( "body" ).data( "foo" ) );
console.log( $( "body" ).data( "bar" ) );
console.log( $( "body" ).data( "baz" ) );
console.log( $( "body" ).data() );

代碼

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

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

$node.addClass('active');
$node.removeClass('active');

2.展示元素node, 隱藏元素node

$node.show();
$node.hide();

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

獲取元素屬性值
$node.attr('id');
$node.attr('src');
$node.attr('title');
修改元素屬性值
$node.attr('id',xxx);
$node.attr('src',xxx);
$node.attr('title',xxx);

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

$node.attr('data-src',xxx);

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

$ct.prepend('<li>遛狗</li>')

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

$ct.append('<li>看電影</li>');
或者
var $li=$('<li>看電影</li>');
$ct.append( $li );

7.刪除$node

remove() - 刪除被選元素（及其子元素）
$node.remove();

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

empty() - 從被選元素中刪除子元素
$ct.empty();

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

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

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

$node.width(); //設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）
$node.height(); //設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距）
$node.width(500).height(500); //設(shè)置元素的寬高，jQuery會(huì)自動(dòng)加上像素單位（px）

$node.innerWidth(); //返回元素的寬度（包括內(nèi)邊距）
$node.innerHeight(); //返回元素的高度（包括內(nèi)邊距）

$node.outerWidth(); //返回元素的寬度（包括內(nèi)邊距和邊框）
$node.outerHeight(); //返回元素的高度（包括內(nèi)邊距和邊框）

$node.outerWidth(true); //返回元素的寬度（包括內(nèi)邊距、邊框和外邊距）
$node.outerHeight(true); //返回元素的寬度（包括內(nèi)邊距、邊框和外邊距）

注意：
.css( "height" )和.height()的區(qū)別:
.height()返回一個(gè)無單位的像素值（比如說，400）
.css( "height" )返回一個(gè)帶完整單位的值（比如說，400px）

<fieldset>
        <style>
            div{
                box-sizing:border-box;
                width:100px;
                height: 100px;
                background:red;
                border:10px solid;
            }
        </style>

        <div></div>

        <script>
            console.log( $('div').css('width') );
            console.log( $('div').width() );
        </script>
    </fieldset>

Paste_Image.png

當(dāng)元素為box-sizing:border-box;時(shí),使用和獲取/設(shè)置寬高的方法要慎重.

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

scrollTop()  //用于獲得針對(duì)匹配的元素集合中第一個(gè)元素的滾動(dòng)條的當(dāng)前垂直位置
$(document).scrollTop();

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

$node.offset().left  //水平偏移距離
$node.offset().top  //垂直偏移距離

offset()方法返回或設(shè)置匹配元素相對(duì)于文檔的偏移（位置）。
并且返回第一個(gè)匹配元素的偏移坐標(biāo)。該方法返回的對(duì)象包含兩個(gè)整型屬性：top 和 left，以像素計(jì)。此方法只對(duì)可見元素有效。

    <p>本段落的偏移</p>
    <button>獲得 offset</button>
    <script>
        $(document).ready(function(){
          $("button").click(function(){
           console.log( $('p').offset() )
          });
        });
    </script>

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

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

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

.each( function(index, Element) ) //遍歷一個(gè)jQuery對(duì)象，為每個(gè)匹配元素執(zhí)行一個(gè)函數(shù)。

$( "li" ).each(function( index ) {   //這里的參數(shù)是數(shù)字索引和dom元素
  console.log( index + ": "" + $(this).text() );
});

或者

var obj = {
  "flammable": "inflammable",
  "duh": "no duh"
};
$.each( obj, function( key, value ) {  //這里的參數(shù)是屬性和值
  console.log( key + ": " + value );
});

為什么上面兩種例子回調(diào)函數(shù)中參數(shù)不一樣？
each處理json數(shù)據(jù)之所以能循環(huán)每一個(gè)屬性，因?yàn)閖son格式內(nèi)是一組無序的屬性-值，既然無序，又何來數(shù)字呢。而這個(gè)value等同于obj[key]。

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

$ct.find('.item');

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

$ct.children();

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

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

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

$node.length

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

$node.index();

二、簡(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)容
代碼運(yùn)行結(jié)果

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

demo

<?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);

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

Paste_Image.png

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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