免费大黄网站,久久精品中文字幕第一页,成人毛片18女人毛片免费视频

問答

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

** $(document).ready()**是DOM加載完成時執行相應的函數,而不必等待頁面中的圖像加載完畢； **window.onload**是當頁面全部加載完成時執行相應的函數，比如頁面內容、圖片、資源等全部加載完成 **區別：** 1.執行時間 ``window.onload``必須等到頁面內包括``圖片``的所有元素加載完畢后才能執行。 ``$ (document).ready()是DOM結構繪制完畢后就執行，不必等到所有元素都加載完畢。 2.編寫個數不同window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行最后一個 $(document).ready()``可以同時編寫多個，并且都可以得到執行 3.簡化寫法 ``window.onload``沒有簡化寫法； ``$ (document).ready(function(){...})``可以簡寫成 $(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() {  //加載完執行，編寫多個都執行
            console.log( "window loaded 1" );
        });
        $( window ).load(function() {
            console.log( "window loaded 11" );
        });

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

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

Paste_Image.png

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

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

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

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

舉例

<!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>
        這是用于測試
        <h1>測試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() );
       //當元素內只有文本時，html和text獲取都是一樣的
    })
    </script>
</body>
</html>

Paste_Image.png

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

描述：將兩個或更多對象的內容合并到第一個對象。

第1種情況：

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

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

例如：

<!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]
對象擴展。這將接收新的屬性。
3.object1
類型: [Object]
一個對象，它包含額外的屬性合并到第一個參數.
4.objectN
類型: [Object]
包含額外的屬性合并到第一個參數

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

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

Paste_Image.png

第3種情況

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

目標對象（也就是第一個參數）將被修改，并且將通過$.extend()返回。將目標對象設為{}，它是合并多個對象，但是不改變原對象。

<!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默認生成的是淺拷貝對象，將上面加個ture就變為深拷貝對象
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 的鏈式調用是什么？

jQuery的鏈式調用就是指對一個jquery對象連續的使用jQuery方法。
原理是執行完一個方法后就返回對象本身（return this），然后使用本對象的其他jQuery方法。

例如：

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

上面的例子意為：先為id為Test的對象添加"style"這個樣式，再找尋其下的第一個div標簽，并使其淡出。通過上面看出鏈式操作就是圍繞一個jQuery對象進行的。

作用：讓代碼更加簡潔易讀，減少重復性代碼，提高性能。

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

jQuery ajax利用cache這個參數來控制是否緩存頁面。當為ture時則緩存頁面（默認為ture，除了dataType為jsonp及script以外）；false為不緩存頁面，即每當發起ajax請求時，都會向后臺請求數據；
其實不緩存頁面的實現原理就是在GET請求參數后面附加"_={timestamp}"（時間戳）；

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

注意：只有當使用GET方法時，設置cache為false是有用的。而使用POST方法時，則每次都會被認為是新的請求，不會緩存頁面。

6.jquery 中 data 函數的作用

描述：存儲任意數據到指定的元素或者返回設置的值。
可以向元素附加數據,以 .data(key,value)或.data(obj)的形式;
可以從元素上讀取數據,以.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() );

代碼

一、寫出以下功能對應的 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 內部最開頭添加元素$ node

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

6.在 $ct 內部最末尾添加元素$ node

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

7.刪除$node

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

8.把$ct里內容清空

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

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

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

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

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

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

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

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

注意：
.css( "height" )和.height()的區別:
.height()返回一個無單位的像素值（比如說，400）
.css( "height" )返回一個帶完整單位的值（比如說，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

當元素為box-sizing:border-box;時,使用和獲取/設置寬高的方法要慎重.

11.獲取窗口滾動條垂直滾動距離

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

12.獲取$node 到根節點水平、垂直偏移距離

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

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

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

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

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

14.遍歷節點，把每個節點里面的文本內容重復一遍

.each( function(index, Element) ) //遍歷一個jQuery對象，為每個匹配元素執行一個函數。

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

或者

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

為什么上面兩種例子回調函數中參數不一樣？
each處理json數據之所以能循環每一個屬性，因為json格式內是一組無序的屬性-值，既然無序，又何來數字呢。而這個value等同于obj[key]。

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

$ct.find('.item');

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

$ct.children();

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

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

18.獲取選擇元素的數量

$node.length

19.獲取當前元素在兄弟中的排行

$node.index();

二、簡單實現以下操作

1.當點擊 $btn 時，讓$ btn 的背景色變為紅色再變為藍色
2.當窗口滾動時，獲取垂直滾動距離
3.當鼠標放置到 $div 上，把$ div 背景色改為紅色，移出鼠標背景色變為白色
4.當鼠標激活 input 輸入框時讓輸入框邊框變為藍色，當輸入框內容改變時把輸入框里的文字小寫變為大寫，當輸入框失去焦點時去掉邊框藍色，控制臺展示輸入框里的文字
5.當選擇 select 后，獲取用戶選擇的內容
代碼運行結果

三、用 jquery ajax 實現如下效果。當點擊加載更多會加載數據展示到頁面。當鼠標放置上去會變色

demo

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

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

代碼運行結果

Paste_Image.png

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

26.jquery 常用方法&ajax

26.jquery 常用方法&ajax

問答

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

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

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

4.JQuery 的鏈式調用是什么？

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

6.jquery 中 data 函數的作用

代碼

一、寫出以下功能對應的 Jq 方法：

二、簡單實現以下操作

三、用 jquery ajax 實現如下效果。當點擊加載更多會加載數據展示到頁面。當鼠標放置上去會變色

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

26.jquery 常用方法&ajax

問答

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

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

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

4.JQuery 的鏈式調用是什么？

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

6.jquery 中 data 函數的作用

代碼

一、寫出以下功能對應的 Jq 方法：

二、簡單實現以下操作

三、用 jquery ajax 實現如下效果。當點擊加載更多會加載數據展示到頁面。當鼠標放置上去會變色

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

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

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