jQuery動(dòng)畫(huà)與ajax

jQuery函數(shù)方法

<div class="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li class="active">3</li>
    <li>4</li>
  </ul>
</div>
//元素遍歷 .each()
$("ul>li").each(function(index,node){  //node是原生js對(duì)象,需轉(zhuǎn)化
  var str = $(node).text()
  $(node).text(str + str)
})

//.map()
var arr = $(".box>ul>li").map(function(){
  return $(this).text()
})
console.log(arr)  // ["1", "2", "3", "4"]

//.index()
$(".active").index()  //2

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

  • 當(dāng)DOM準(zhǔn)備就緒時(shí)，指定一個(gè)函數(shù)來(lái)執(zhí)行。
  • 大多數(shù)情況下，只要DOM結(jié)構(gòu)已完全加載時(shí)，腳本就可以運(yùn)行。傳遞處理函數(shù)給.ready()方法，能保證DOM準(zhǔn)備好后就執(zhí)行這個(gè)函數(shù)

如果執(zhí)行的代碼需要在元素被加載之后才能使用時(shí)，（例如，取得圖片的大小需要在圖片被加載完后才能知道），就需要將這樣的代碼放到 load 事件中。

$(document).ready(handler)
$(handler)

$(function(){
    console.log('ready');
});

$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)容

$.extend 的作用和用法?

  • 當(dāng)我們提供兩個(gè)或多個(gè)對(duì)象給$.extend()，對(duì)象的所有屬性都添加到目標(biāo)對(duì)象（target參數(shù)）
  • 如果只有一個(gè)參數(shù)提供給$.extend()，這意味著目標(biāo)參數(shù)被省略。在這種情況下，jQuery對(duì)象本身被默認(rèn)為目標(biāo)對(duì)象。
var obj1 = {a:1}
var obj2 = {b:2,c:3}
var obj3 = {b:3,d:5} 
var obj4 = {}

$.extend(obj1,obj2)  //obj1 == {a: 1, b: 2, c: 3}
$.extend(obj1,obj2,obj3)  //obj1 == {a: 1, b: 3, c: 3, d: 5}
$.extend(obj4,obj1,obj2,obj3)  //obj4 == {a: 1, b: 3, c: 3, d: 5}
//寫(xiě)法同上
var obj5 = $.extend({},obj1,obj2,obj3)  //obj5 == {a: 1, b: 3, c: 3, d: 5}

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

  • 可以連續(xù)的使用 jQuery 方法的過(guò)程叫做 鏈?zhǔn)秸{(diào)用。
  • jQuery是通過(guò)在調(diào)用方法后返回這個(gè)調(diào)用對(duì)象來(lái)實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用的。

Query 中 data 函數(shù)的作用

  • .data()
    • 在匹配元素上存儲(chǔ)任意相關(guān)數(shù)據(jù) 或 返回匹配的元素集合中的第一個(gè)元素的給定名稱的數(shù)據(jù)存儲(chǔ)的值。

.data()方法允許我們?cè)贒OM元素上綁定任意類型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險(xiǎn)。

.data( key, value )在匹配元素上存儲(chǔ)任意相關(guān)數(shù)據(jù).

  • key:一個(gè)字符串，用戶存儲(chǔ)數(shù)據(jù)的名稱。
  • value:新的數(shù)據(jù)值；它可以是任意的Javascript數(shù)據(jù)類型，包括Array 或者 Object。
我們可以在一個(gè)元素上設(shè)置不同的值，之后獲取這些值：
$("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 ] }

寫(xiě)出以下功能對(duì)應(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','value')  //獲取并賦值
$node.attr('src','value')
$node.attr('title','value')
  • 給$node 添加自定義屬性data-src 
$node.attr("data-src","value")
  • 在$ct內(nèi)部最開(kāi)頭添加元素$node,在$ct 內(nèi)部最末尾添加元素$node 
//結(jié)尾添加
$ct.append($node) 
$node.appendTo($ct)  
//開(kāi)頭添加
$ct.prepend($node)
$node.prependTo($ct)
  • 刪除$node 把$ct里內(nèi)容清空
// 事件之類的刪除后不保存
$node.remove()
// 事件之類的刪除后保存
$node.detach()

$ct.empty()  //清空
  • 在$ct 里設(shè)置<div class="btn"></div> 
$ct.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ū)挾?$node.outerHeight();//包括內(nèi)容,內(nèi)邊距,邊框高度
$node.outerWidth(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距高度
$node.outerHeight(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距寬度
寬高
  • 獲取窗口滾動(dòng)條垂直滾動(dòng)距離
$(window).scrollTop()
  • 獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離
$node.offset()  //{top: 16, left: 48}
  • 修改$node 的樣式，字體顏色設(shè)置紅色，字體大小設(shè)置14px
$node.css({"color": "red", "font-size": "14px"})
  • 遍歷節(jié)點(diǎn)，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍
<div class="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
$("ul>li").each(function(index,node){  //node是原生js對(duì)象,需轉(zhuǎn)化
  var str = $(node).text()
  $(node).text(str + str)
})
  • 從$ct 里查找 class 為 .item的子元素
$ct.find('.item')
  • 獲取$ct里面的所有孩子
$ct.children()
  • 對(duì)于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
//找父親
$node.parents('.ct')
//從父親找兒子
$node.parents('.ct').find('.panel')
  • 獲取選擇元素的數(shù)量
$node.length
  • 獲取當(dāng)前元素在兄弟中的排行
$node.index()

用jQuery實(shí)現(xiàn)以下操作

  • 當(dāng)點(diǎn)擊$btn 時(shí)，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
<button id="btn" type="button">變色</button>

$("#btn").on("click",function(){
  $(this).css({"background-color":"red"})
//設(shè)置定時(shí)
  setTimeout(function(){
    $("#btn").css({"background-color":"blue"})
  },1000)
})
  • 當(dāng)窗口滾動(dòng)時(shí)，獲取垂直滾動(dòng)距離
$(window).on("scroll",function(){
    $("node").text($(window).scrollTop()+"px");
});
  • 當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?/li> 
<div class="bg"></div>

$(".bg").on("mouseenter",function(){
  $(this).css({"background-color":"red"})
})
$(".bg").on("mouseleave",function(){
  $(this).css({"background-color":"white"})
})
  • 當(dāng)鼠標(biāo)激活 input 輸入框時(shí)讓輸入框邊框變?yōu)樗{(lán)色，當(dāng)輸入框內(nèi)容改變時(shí)把輸入框里的文字小寫(xiě)變?yōu)榇髮?xiě)，當(dāng)輸入框失去焦點(diǎn)時(shí)去掉邊框藍(lán)色，控制臺(tái)展示輸入框里的文字
<input id="ipt" type="text">

$("#ipt").on("focus",function(){
  $(this).css({"outlineColor":"blue"})
})
//鍵盤(pán)事件
$("#ipt").on("keydown",function(){
  $(this).val($(this).val().toUpperCase())
})
$("#ipt").on("blur",function(){
  $(this).css({"outlineColor":"none"})
  console.log($(this).val())
})
  • 當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容
<select name="" class="sports">
  <option value="籃球">籃球</option>
  <option value="排球">排球</option>
  <option value="足球">足球</option>
  <option value="乒乓球">乒乓球</option>
</select>
<p>用戶選擇的內(nèi)容是:<span></span></p>

$(".sports").on("change",function(){
  $("p>span").text($("option:selected").val())
})

用 jQuery ajax 實(shí)現(xiàn)如下效果。`當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁(yè)面效果預(yù)覽

  • 啟用server-mock
  • 需開(kāi)啟 mock start
  • 代碼地址
效果預(yù)覽
最后編輯于 ：
?著作權(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)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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