jQuery2

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

加載更多

后端代碼在JS中
http://js.jirengu.com/jivazejazo/2/edit

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末酬姆,一起剝皮案震驚了整個濱河市嗜桌,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌辞色,老刑警劉巖骨宠,帶你破解...
    沈念sama閱讀 216,843評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異相满,居然都是意外死亡层亿,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評論 3 392
  • 文/潘曉璐 我一進(jìn)店門雳灵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來棕所,“玉大人,你說我怎么就攤上這事悯辙×帐。” “怎么了?”我有些...
    開封第一講書人閱讀 163,187評論 0 353
  • 文/不壞的土叔 我叫張陵躲撰,是天一觀的道長针贬。 經(jīng)常有香客問我,道長拢蛋,這世上最難降的妖魔是什么桦他? 我笑而不...
    開封第一講書人閱讀 58,264評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮谆棱,結(jié)果婚禮上快压,老公的妹妹穿的比我還像新娘。我一直安慰自己垃瞧,他們只是感情好蔫劣,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,289評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著个从,像睡著了一般脉幢。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上嗦锐,一...
    開封第一講書人閱讀 51,231評論 1 299
  • 那天嫌松,我揣著相機(jī)與錄音,去河邊找鬼奕污。 笑死萎羔,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的菊值。 我是一名探鬼主播外驱,決...
    沈念sama閱讀 40,116評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼育灸,長吁一口氣:“原來是場噩夢啊……” “哼腻窒!你這毒婦竟也來了昵宇?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,945評論 0 275
  • 序言:老撾萬榮一對情侶失蹤儿子,失蹤者是張志新(化名)和其女友劉穎瓦哎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體柔逼,經(jīng)...
    沈念sama閱讀 45,367評論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蒋譬,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,581評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了愉适。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片犯助。...
    茶點(diǎn)故事閱讀 39,754評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖维咸,靈堂內(nèi)的尸體忽然破棺而出剂买,到底是詐尸還是另有隱情,我是刑警寧澤癌蓖,帶...
    沈念sama閱讀 35,458評論 5 344
  • 正文 年R本政府宣布瞬哼,位于F島的核電站,受9級特大地震影響租副,放射性物質(zhì)發(fā)生泄漏坐慰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,068評論 3 327
  • 文/蒙蒙 一用僧、第九天 我趴在偏房一處隱蔽的房頂上張望结胀。 院中可真熱鬧,春花似錦责循、人聲如沸糟港。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽着逐。三九已至,卻和暖如春意蛀,著一層夾襖步出監(jiān)牢的瞬間耸别,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評論 1 269
  • 我被黑心中介騙來泰國打工县钥, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留秀姐,地道東北人。 一個月前我還...
    沈念sama閱讀 47,797評論 2 369
  • 正文 我出身青樓若贮,卻偏偏與公主長得像省有,于是被迫代替她去往敵國和親痒留。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,654評論 2 354

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

  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式蠢沿。設(shè)計者無需花費(fèi)時間糾纏JS復(fù)雜的高級特性伸头。 1....
    LaBaby_閱讀 1,171評論 0 1
  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    程序員poetry閱讀 114,363評論 24 450
  • 1.幾種基本數(shù)據(jù)類型?復(fù)雜數(shù)據(jù)類型?值類型和引用數(shù)據(jù)類型?堆棧數(shù)據(jù)結(jié)構(gòu)? 基本數(shù)據(jù)類型:Undefined、Nul...
    極樂君閱讀 5,514評論 0 106
  • “讀萬卷書不如行萬里路舷蟀,行萬里路不如名師指路”恤磷,永和小學(xué)是我們的新建小學(xué),辦“生動大氣”的教育是我們追求的目標(biāo)野宜,采...
    西嶺布衣閱讀 403評論 0 1
  • 文/李勝梅 圖/網(wǎng)絡(luò) 臨睡前匈子,家家都有一場戰(zhàn)爭河胎。關(guān)于睡與不睡,關(guān)于幾點(diǎn)睡虎敦,關(guān)于睡之前的收拾洗漱游岳,關(guān)于臨睡前的一切。...
    李勝梅閱讀 899評論 0 21