jQuery 中， $(document).ready()是什么意思？
-
$(document).ready()的作用是當(dāng)DOM準(zhǔn)備就緒時(shí)，指定一個(gè)函數(shù)來執(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()獲取/設(shè)置被選元素的節(jié)點(diǎn)包括html結(jié)構(gòu)
$(".box").html() //獲取元素內(nèi)部的html內(nèi)容，類似于innerHTML
$(".box").html("<p>設(shè)置了一個(gè)段落</p>")//設(shè)置了元素內(nèi)部的html內(nèi)容,標(biāo)簽生效
-
$node.text()獲取/設(shè)置被選元素的文本節(jié)點(diǎn)
$(".box").text() //獲取元素內(nèi)部的text文本，類似于innerText
$(".box").text("設(shè)置了一個(gè)文本")//設(shè)置了元素內(nèi)部的text文本
$.extend 的作用和用法?
jQuery.extend( target [, object1 ] [, objectN ] )
- 將兩個(gè)或更多對(duì)象的內(nèi)容合并到第一個(gè)對(duì)象
var obj1 = {name:'wing'}
var obj2 = {age:19}
var obj3 = {name:'hcb',age:20}
var obj4 = {}
var obj5 = $.extend(obj4,obj1,obj2,obj3) //{name: "hcb", age: 20}
jQuery 的鏈?zhǔn)秸{(diào)用是什么？
- 使用jQuery方法時(shí)，對(duì)象方法返回的是對(duì)象本身，可以調(diào)用對(duì)此對(duì)象的其他jQuery方法，實(shí)現(xiàn)連續(xù)調(diào)用多個(gè)方法
例：$(this).siblings().removeClass('active')
jQuery 中 data 函數(shù)的作用
data([key],[value])
在元素上存放或讀取數(shù)據(jù)，返回jQuery對(duì)象。
例子：
$("body").data("foo" , 18);
$("body").data("abc", { name: "text", sex: 20 });
$("body").data({cba:[a,b,c]});
$("body").data("foo"); // 18
$("body").data() // {foo: 18, abc: {name: "text", sex: 20}, cba:[a,b,c]}
寫出以下功能對(duì)應(yīng)的 jQuery 方法：
- 給元素 $node 添加 class active，給元素 $noed 刪除 class active
$node.addClass('active') //添加
$noed.removeClass('active') //刪除
- 展示元素$node, 隱藏元素$node
$node.show(); //展示
$node.hide(); //隱藏
- 獲取元素$node 的 屬性: id、src、title， 修改以上屬性
//獲取并修改
$node.attr('id','newId');
$node.attr('src','newSrc');
$node.attr('title','newTitle');
- 給$node 添加自定義屬性data-src
$node.attr("data-src","value");
- 在$ct內(nèi)部最開頭添加元素$node
$ct.prepend($node);
- 在$ct 內(nèi)部最末尾添加元素$node
$ct.append($node);
- 刪除$node
$node.remove();
- 把$ct里內(nèi)容清空
$ct.empty();
- 在$ct 里設(shè)置
<div class="btn"></div>
$ct.html('<div class="btn"></div>');
- 獲取、設(shè)置$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);
- 獲取窗口滾動(dòng)條垂直滾動(dòng)距離
$(window).scrollTop();
- 獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離
$node.offset().left; //水平
$node.offset().top; //垂直
- 修改$node 的樣式，字體顏色設(shè)置紅色，字體大小設(shè)置14px
$node.css({color:'red', 'font-size':'14px'});
- 遍歷節(jié)點(diǎn)，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍
$node.each(function(){
console.log($(this).text());
});
- 從$ct 里查找 class 為 .item的子元素
$ct.find('.item');
- 獲取$ct 里面的所有孩子
$ct.children();
- 對(duì)于$node，向上找到 class 為
'.ct'的父親，在從該父親找到'.panel'的孩子
$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)色
$("#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>
$btn.on('mouseenter',function(){
$(this).css('background','red')
}).on('mouseleave',function(){
$(this).css('background','white')
})
- 當(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)展示輸入框里的文字
<input id="ipt" type="text">
$("#ipt").on("focus",function(){
$(this).css({"outlineColor":"blue"})
})
//鍵盤事件
$("#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)容
$('#city').change(function(){
var $val = $(this).val()
$('.user-select').text('選擇：' + $val)
})
用 jQuery ajax 實(shí)現(xiàn)效果。當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁面
- 啟用
mock start
mock start
