jQuery動畫與ajax

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

  • $(document).ready()方法：為防止文檔在完全加載之前運行Jquery代碼,若在文檔未完全加載前就運行函數(shù),操作可能失敗.必須在文檔加載完后執(zhí)行操作,可使用ready事件,作用相當(dāng)于把js寫到body末尾.
$(document).ready(function(){
});

//可簡寫為:
$(function(){
})
  • window.onload：必須等網(wǎng)頁中所有的元素全部加載完畢，才能執(zhí)行不能同時寫多個，否則后面覆蓋前面.
  • ready和onload的區(qū)別是：前者只包括文檔元素的加載，后者是所有資源的加載.

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

  • $node.html()，返回所選擇元素內(nèi)的html內(nèi)容，包含html標(biāo)簽和文本內(nèi)容
  • $node.text()，返回所選擇元素內(nèi)的文本內(nèi)容，不包含html標(biāo)簽，只包含文本內(nèi)容

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

$.extend()將多個對象合并到一起，可以傳入多個參數(shù)。$.extend([deep,] target [, object1 ] [, objectN ] )為布爾值默認(rèn)情況不是深拷貝，可設(shè)置true為深拷貝

  1. 當(dāng)我們提供兩個或多個對象給$.extend(), 對象的所有屬性都添加到目標(biāo)對象
    （target參數(shù)）
  2. 如果只有一個參數(shù)提供給$.extend(), 這意味著目標(biāo)參數(shù)被省略。在這種情況下，jQuery對象本身被默認(rèn)為目標(biāo)對象，可以在jQuery的命名空間下添加新的功能
  3. 如果想保留原對象，可以傳遞一個空對象作為目標(biāo)對象：
    var object = $.extend({}, object1, object2);
    deep：默認(rèn)false，如果為true，合并成為遞歸（又叫做深拷貝）
//定義一個對象
var obj={
    name: 'linpeng',
    age: 23,
    sex: 'male'
};
//定義一個新對象
var obj1={
    name: 'lanhaobin',
    age: 22
};
//extend方法接受多個參數(shù),并且第一個對象被覆蓋
$.extend(obj,obj1,{
    name: 'jierngu',
    age: 5,
    like: 'eat'
});
console.log(obj);
//object{
   //name: 'jierngu',
   //age: 5,
   //sex: 'male'
   //like: 'eat',
}

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

鏈?zhǔn)秸{(diào)用：使用jQuery方法時，對象方法返回的是對象本身，
         可以調(diào)用對此對象的其他jQuery方法，實現(xiàn)連續(xù)調(diào)用多個方法.
//例如
$(this).siblings().removeClass('active');

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

  • 作用：實際上是對js對象或DOM對象的額外屬性做一個集中管理，來避免內(nèi)存泄漏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中 data 函數(shù)</title>
</head>
<body>
<div id="k-box"></div>
<div id="v-box"></div>
<script src="../js/jquery-1.11.1.min.js"></script>
<script>
    console.log($("#k-box").data("bkk")); //undefined
    $("#k-box").data("bkk","word"); //設(shè)置bkk為word
    console.log($("#k-box").data("bkk")); //word
    $("#k-box").removeData("bkk"); //移除bkk設(shè)置的值
    console.log($("#k-box").data("bkk")); //undefined

    $("#v-box").data("test",{first:0,last:28}); //給存儲名為test的對象存儲內(nèi)容{first:0,last:28}
    console.log($("#v-box").data("test").first); //0
    console.log($("#v-box").data("test").last); //28
    console.log($("#v-box").data("test")); //{first: 0, last: 28}
    $("#v-box").removeData("test"); //移除test設(shè)置的內(nèi)容
    console.log($("#v-box").data("test")); //undefined
</script>
</body>
</html>

6：寫出以下功能對應(yīng)的 jQuery 方法

  • 給元素 $node 添加 class active，給元素 $noed 刪除 class active
$node.addClass('active');//添加
$node.removeClass('active');//刪除
  • 展示元素$node, 隱藏元素$node
$node.show();//展示
$node.hide();//隱藏
  • 獲取元素$node 的 屬性: id、src、title， 修改以上屬性
$node.attr('id');//獲取
$node.attr('id’,'值'); //修改
$node.attr('src');//獲取
$node.attr('src’,'值');//修改
$node.attr('title');//獲取
$node.attr('title’,'值');//修改
  • 給$node 添加自定義屬性data-src
$node.data('src','str')
  • 在$ct 內(nèi)部最開頭添加元素$node
$(".ct").prepend(node);
  • 在$ct 內(nèi)部最末尾添加元素$node
$(".ct").append(node);
  • 刪除$node
$(node).remove();
  • 把$ct里內(nèi)容清空
$node.empty();
  • 在$ct 里設(shè)置 html <div class="btn"></div>
- 獲取、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距、包括邊框、包括外邊距)

$node.width();//不包括內(nèi)邊距寬度,僅包括內(nèi)容
$node.height();//不包括內(nèi)邊距高度,僅包括內(nèi)容
$node.innerWidth();//包括內(nèi)容和內(nèi)邊距寬度
$node.innerHeight();//包括內(nèi)容和內(nèi)邊距高度
$node.outerWidth();//包括內(nèi)容,內(nèi)邊距,邊框?qū)挾?br> $node.outerHeight();//包括內(nèi)容,內(nèi)邊距,邊框高度
$node.outerHeight(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距高度
$node.outerWidth(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距寬度

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

$(window).scrollTop()

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

$node.offset()

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

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

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

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

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

$(".ct").find(".item")

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

$(".ct").children()

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

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

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

$node.length;
$node.size();

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

$node.index();


####7：用jQuery實現(xiàn)以下操作
- 當(dāng)點擊$btn 時，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
- 當(dāng)窗口滾動時，獲取垂直滾動距離
- 當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?- 當(dāng)鼠標(biāo)激活 input 輸入框時讓輸入框邊框變?yōu)樗{(lán)色，當(dāng)輸入框內(nèi)容改變時把輸入框里的文字小寫變?yōu)榇髮?，?dāng)輸入框失去焦點時去掉邊框藍(lán)色，控制臺展示輸入框里的文字
- 當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容
[代碼](https://github.com/LINPENGISTHEONE/jQuery-practice/blob/master/jQuery%E7%AE%80%E5%8D%95%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86.html)
[預(yù)覽](https://linpengistheone.github.io/jQuery-practice/jQuery%E7%AE%80%E5%8D%95%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86.html)

####8：用 jQuery ajax 實現(xiàn)如下效果。當(dāng)點擊加載更多會加載數(shù)據(jù)展示到頁面
[代碼](https://github.com/LINPENGISTHEONE/jQuery-practice/tree/master/jQuery-ajax%E5%8A%A0%E8%BD%BD%E6%9B%B4%E5%A4%9A)

![1.png](http://upload-images.jianshu.io/upload_images/4866329-5a600140a43ac117.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![2.png](http://upload-images.jianshu.io/upload_images/4866329-fbf07d10d685affe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


####9：實現(xiàn)一個天氣預(yù)報頁面，前端展示自由發(fā)揮，數(shù)據(jù)接口: http://api.jirengu.com/weather.php
[預(yù)覽](https://linpengistheone.github.io/jQuery-practice/weather.html)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

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