jQuery 中, $(document).ready()是什么意思木蹬?
當(dāng)DOM加載完畢以后换团,執(zhí)行指定的代碼
$(document).ready(function() { //也可指定具體函數(shù)名;
//do something..
})
window.onload只有當(dāng)頁面完全加載完畢(圖片資源等)才執(zhí)行指定的回調(diào)函數(shù),而$(document).ready()只要DOM加載完成就會執(zhí)行指定的回調(diào)函數(shù)
$node.html()和$node.text()的區(qū)別?
$node.html()
獲取的是元素內(nèi)的HTML阅虫,$node.text()
獲取的是元素內(nèi)的文本
兩者不接受參數(shù)時為獲取,設(shè)置參數(shù)時為設(shè)置具體內(nèi)容
假設(shè)HTML片段
<div id="box">
<p>Hello world!</p>
</div>
$("#box").html() // <p>Hello world!</p>
$("#box").text() // Hello world!
$.extend 的作用和用法?
$.extend([deep,] target [, object1 ] [, objectN ])
把多個對象合并到目標(biāo)對象中不跟,修改并返回目標(biāo)對象
[deep]:布爾值颓帝,是否進(jìn)行深合并;默認(rèn)為false
target:合并的目標(biāo);
[object1]:合并項(xiàng)购城;
這么兩個對象
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
obj2合并到obj1中吕座,obj1被改變,屬性為對象會被重寫
$.extend( object1, object2 ); //obj1 ={"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
設(shè)置[deep]則對象屬性也會進(jìn)行合并
$.extend( true, object1, object2 ); //{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
如果希望產(chǎn)生一個新的合并對象瘪板,不改變?nèi)魏螌ο笪馀浚梢允褂靡粋€空對象作為target
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend( {}, defaults, options );
//defaults --> {"validate":false,"limit":5,"name":"foo"}
//options --> {"validate":true,"name":"bar"}
//settings --> {"validate":true,"limit":5,"name":"bar"}
jQuery 的鏈?zhǔn)秸{(diào)用是什么?
在jQuery的語法中侮攀,本質(zhì)上都是函數(shù)的調(diào)用锣枝,每次調(diào)用函數(shù),都會產(chǎn)生一個新的結(jié)果兰英,再在新的結(jié)果上調(diào)用另外的函數(shù)
在這種情況下撇叁,我們可以把調(diào)用的函數(shù)寫成一行
$(element).function1().function2().function3().function4()
形如這樣的調(diào)用稱為鏈?zhǔn)秸{(diào)用
jQuery中data函數(shù)的作用
data()
用于向匹配元素存儲數(shù)據(jù)或從匹配的第一個元素中獲取data()
方法存儲的數(shù)據(jù)
$(element).data() //不給于參數(shù),獲取所有的數(shù)據(jù)畦贸;
$(element).data(name) //通過數(shù)據(jù)名稱name獲取數(shù)據(jù)陨闹;
$(element).data(name,value) //通過key = value的方式存儲數(shù)據(jù);
$(element).data(object) //傳遞一個對象方式存儲數(shù)據(jù)
注意undefinef是一個無效的值
$(element).data("name",undefined) //設(shè)置name的值為undefined是無效的
$(element).data(“name") //等同于這句薄坏,獲取name的值
HTML5新的屬性data-*
可以用來在HTML標(biāo)簽中添加自定義屬性來存儲數(shù)據(jù)趋厉,jQuery的.data()
同樣可以獲取到這些值
<h1 data-name="Jack">
$("h1").data("name") // "Jack"
寫出以下功能對應(yīng)的 jQuery 方法
//給元素$node 添加class active,給元素$noed刪除class active
$node.addClass("active") //添加
$node.removeClass("active") //刪除
// 隱藏元素$node
$node.hide() //逐步改變寬高胶坠,display為none
$node.fadeOut() //逐步改變透明度觅廓,display為none
$node.slideUp() //向上活動隱藏元素
//顯示元素$node
$node.show()
$node.fadeIn()
$node.slideDown()
//獲取元素$node的屬性: id、src涵但、title
$node.attr("id") //一個參數(shù)為獲取目標(biāo)屬性值
$node.attr("title")
$node.title("src")
//修改元素$node 的 屬性: id杈绸、src、title
$node.attr("id","link") //兩個參數(shù)為設(shè)置目標(biāo)屬性值
$node.attr("title","address")
$node.title("src","http://www.baidu.com")
//給$node添加自定義屬性data-src
$node.attr("data-src","xxxx")
//在$ct 內(nèi)部最開頭添加元素$node
$ct.prepend($node)
//在$ct 內(nèi)部最末尾添加元素$node
$ct.append($node)
//刪除$node
$node.remove([seletor]) //可以添加一個選擇器參數(shù)來過濾刪除對象
//把$ct里內(nèi)容清空
$ct.empty([seletor]) //可以添加一個選擇器參數(shù)來過濾清空的內(nèi)容
//在$ct 里設(shè)置 html <div class="btn"></div>
$ct.html("<div class="btn"></div>")
//獲取矮瘟、設(shè)置$node 的寬度瞳脓、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距澈侠、包括邊框劫侧、包括外邊距)
$node.width() //獲取元素content寬度
$node.height() //獲取元素content高度
$node.innerWidth() //獲取元素(content+padding)寬度
$node.innerHeight() //獲取元素(content+padding)高度
$node.outerWidth() //獲取元素(content+padding+border)寬度
$node.outerHeight() //獲取元素(content+padding+border)高度
$node.outerWidth(true) //獲取元素(content+padding+border+margin)寬度,只讀
$node.outerHeight(true) //獲取元素(content+padding+border+margin)高度哨啃,只讀
//傳遞參數(shù)(Number or String)可設(shè)置相應(yīng)的值
//獲取窗口滾動條垂直滾動距離
$(element).scroll(function() {
console.log($(element).scrollTop()) //.scroll()監(jiān)聽滾動事件烧栋;scrollTop()獲取當(dāng)前匹配元素垂直滾動條的位置
})
//獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離
$node.offset() //獲取$node相對document的坐標(biāo)
//修改$node 的樣式拳球,字體顏色設(shè)置紅色审姓,字體大小設(shè)置14px
$node.css({color: "red",font-size: "14px"})
//遍歷節(jié)點(diǎn),把每個節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍
$(node).each(function(index,element) {
var text = element.innerText
$(element).text(text + text)
})
//從$ct 里查找 class 為 .item的子元素
$ct.find(".item")
//獲取$ct 里面的所有孩子
$ct.children() //可以傳入選擇器參數(shù)進(jìn)行過濾祝峻,具體選擇什么孩子
//對于$node魔吐,向上找到 class 為'.ct'的父親扎筒,在從該父親找到'.panel'的孩子
$node.parent(".ct").children(".panel")
//獲取選擇元素的數(shù)量
$node.length
$node.size()
//獲取當(dāng)前元素在兄弟中的排行
$node.index() //可以傳遞選擇器參數(shù)進(jìn)行過濾,確定在什么范圍排行
實(shí)現(xiàn)如下效果
http://js.jirengu.com/wakahelaha/3/edit