jquery 常用方法&ajax

  • Jquery 中, $(document).ready()是什么意思?和window.onload 的區(qū)別? 還有其他什么寫法或者替代方法?
  • $(document).ready(): 是DOM結(jié)構繪制完畢后就執(zhí)行,不必等到加載完畢,可以同時編寫多個,并且都可以執(zhí)行。
  • window.onload:必須等到頁面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。 不能同時編寫多個,如果有多個window.onload方法,只會執(zhí)行一個。
  • 其他寫法
$(document).ready(handler)
$().ready(handler)
$(handler)
  • $node.html()和$node.text()的區(qū)別?

  • $node.html():獲取集合中第一個匹配元素的HTML內(nèi)容.不加參數(shù)時和innerHTML相似。當有參數(shù)時html(str),修改元素的innerHTML為參數(shù)值。

  • $node.text():得到匹配元素集合中每個元素的合并文本和innerText方法類似。只能匹配到文本不能匹配標簽,當有參數(shù)時text(str),修改元素的文本為參數(shù)值。

  • $.extend 的作用和用法?

  • $.extend:將兩個或更多對象的內(nèi)容合并到第一個對象,它有兩種方式。

  • jQuery.extend( target [, object1 ] [, objectN ] ):將object1、object2、objectN…的內(nèi)容合并到target中,改變了target本身的內(nèi)容。


  • jQuery.extend( [deep ], target, object1 [, objectN ] ):增加第一個布爾值參數(shù),決定此方法為深拷貝。更像是一個添加更改的方式而不是完全的替換。


  • JQuery 的鏈式調(diào)用是什么?

  • 是指在執(zhí)行完一個函數(shù)之后通過return this返回本身,然后繼續(xù)執(zhí)行后面的函數(shù)

$('#id').find('li').show();
  • JQuery ajax 中緩存怎樣控制?
  • 在使用JQuery ajax時設置參數(shù)cache為 false,它的工作原理是在GET請求參數(shù)中附加為new date()對象"_={timestamp}"的時間戳。這樣每次訪問的地址都不一樣,也就不會緩存文件了。
ajax({
//...
 cache: false,
//...
});
  • jquery 中 data 函數(shù)的作用
  • data:在匹配元素上存儲任意相關數(shù)據(jù)。.data()方法允許我們在DOM元素上綁定任意類型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風險。
  • .data( key, value ):存儲的數(shù)據(jù)value到key上。
  • .data( obj ):更新數(shù)據(jù)的 鍵/值
$("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 ] }
  • 寫出以下功能對應的 Jq 方法:
    1 給元素 $node 添加 class active,給元素 $noed 刪除 class active
$node.addClass('active');//Element.classList.add(str);相似
$node.removeClass('active');//Element.classList.remove(str);相似

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

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

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

$node.attr('id');//獲取ID
$node.attr('src');//獲取src
$node.attr('title');//獲取title屬性
$node.attr('id', 'str');
$node.attr('src', 'str');
$node.attr('title', 'str');
$node.removeAttr('title')//刪除屬性

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

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

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

$ct.prepend($node);

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

$ct.append($node);

7 刪除$node

$node.remove();//刪除的同時刪除事件
$node.detach();//保存所有jQuery數(shù)據(jù)和被移走的元素相關聯(lián)。當需要移走一個元素,不久又將該元素插入DOM時,這種方法很有用。

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

$ct.empty();

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

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

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

//不包括內(nèi)邊距、外邊距、邊框
$node.width();
$node.height();
//包括內(nèi)邊距
$node.innerWidth();
$node.innerHeight();
//包括內(nèi)邊距、邊框
$node.outerWidth();
$node.outerHeight();
//包括內(nèi)邊距、邊框、外邊距
$node.outerWidth(true);
$node.outerHeight(true);

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

$(window).scrollTop();

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

$node.offset();//返回left,top兩個參數(shù)
$node.offset().left;
$node.offset().top;

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

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

14 遍歷節(jié)點,把每個節(jié)點里面的文本內(nèi)容重復一遍

$node.each(function(){
   console.log($(this).text());
})

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

$ct.find('.item');

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

$ct.children();

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

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

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

$node.length;

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

$node.index();
  • 簡單實現(xiàn)以下操作
    1 當點擊$btn 時,讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{色
    代碼1
    2 當窗口滾動時,獲取垂直滾動距離
    代碼2
    3 當鼠標放置到$div 上,把$div 背景色改為紅色,移出鼠標背景色變?yōu)榘咨?br> 代碼3
    4 當鼠標激活 input 輸入框時讓輸入框邊框變?yōu)樗{色,當輸入框內(nèi)容改變時把輸入框里的文字小寫變?yōu)榇髮懀斴斎肟蚴ソ裹c時去掉邊框藍色,控制臺展示輸入框里的文字
    代碼4
    5 當選擇 select 后,獲取用戶選擇的內(nèi)容
    代碼5
  • 用 jquery ajax 實現(xiàn)如下效果。當點擊加載更多會加載數(shù)據(jù)展示到頁面。當鼠標放置上去會變色
    http://jrgzuoye.applinzi.com/作業(yè)安排/jscode/JS9-jqueryajax/1.html
    代碼6
<?php
    // 后端 php 測試接口文件
    $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);

本博客版權歸 本人和饑人谷所有,轉(zhuǎn)載需說明來源

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容