jQuery小記.2

jQuery 中, $(document).ready()是什么意思慢逾?

$(document).ready()的作用是當(dāng)文檔中的DOM節(jié)點加載完成后立倍,在加載外部圖片和資源前,執(zhí)行ready()里面的操作侣滩。(注意:$(document).ready(function(){})可以簡寫成$(function(){}))

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

window.onload是整個頁面加載完成(包括圖片,css策添,腳本等)之后再執(zhí)行onload()中的操作材部。并且 window.onload不能同時編寫多個,如果有多個window.onload方法唯竹,只會執(zhí)行一個 (后者會覆蓋前者)乐导。


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

$node.html():獲取 $node元素的HTML內(nèi)容,包括HTML標(biāo)簽和文本
$node.text():獲取 $node元素的文本內(nèi)容浸颓,不包括HTML標(biāo)簽


$.extend 的作用和用法?

將兩個或更多對象的內(nèi)容合并到第一個對象兽叮。
在默認(rèn)情況下,通過$.extend()合并操作不是遞歸的猾愿;
如果第一個對象的屬性本身是一個對象或數(shù)組,那么它將完全用第二個對象相同的key重寫一個屬性,這些值不會被合并账阻。
如果將 true 作為該函數(shù)的第一個參數(shù)蒂秘,那么會在對象(只是對象)上進(jìn)行遞歸的合并。

var obj1 = {
    name : zoro,
    number: {a:17,b:18}
 }   
var obj2 = 
    number: {a:20,c:21}
    color: green
 }
 $.extend(obj1,obj2)
  //obj1     { name:zoro, number:{a:20,c:21},color:green}

 obj1 = {
    name : zoro,
    number: {a:17,b:18}
 }   
 $extend(true,obj1,obj2) 
 //obj1   {name:zoro,number:{a:20,b:18,c:21},color:green} 

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

$('#id').css('color','pink').find('p').text()
jQuery進(jìn)行的每一步操作最終返回的都是一個jQuery對象姻僧。

鏈?zhǔn)讲僮髂艽蟠缶喆a量。
使用鏈?zhǔn)讲僮髌涯粒胁僮鞔a共享一個jQuery對象撇贺,省去了逐步查詢DOM元素的性能損耗。

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

.data() 方法允許我們在DOM元素上綁定任意類型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險冰抢。
.data(key,value);
以指定的鍵名key存取數(shù)據(jù)松嘶。如果指定了value參數(shù),則表示以鍵名key存放值為value的數(shù)據(jù)挎扰;如果沒有指定value參數(shù)翠订,則表示讀取之前以鍵名key存放的數(shù)據(jù)巢音;如果沒有指定任何參數(shù),則以對象形式返回之前存儲的所有數(shù)據(jù)
data(obj);
以對象形式同時傳入任意多個key-value形式的數(shù)據(jù)尽超,對象的每個屬性就是鍵名key官撼,屬性值就是value。

data()函數(shù)的所有"存儲數(shù)據(jù)"操作針對當(dāng)前jQuery對象所匹配的每一個元素似谁;所有"讀取數(shù)據(jù)"操作只針對第一個匹配的元素

即當(dāng)使用.data()獲取值時傲绣,jQuery會首先嘗試將獲取的字符串值轉(zhuǎn)化成JS類型,包括布爾值巩踏,null秃诵,數(shù)字,對象蛀缝,數(shù)組
如果就是想獲取字符串值而不想獲得自動轉(zhuǎn)換的值顷链,可以使用.attr(“data-”+key)來獲取相應(yīng)的值


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

給元素 $node 添加 class active,給元素 $noed 刪除 class active

 $node.addClass('active')  $node.removeClass('active')

展示元素$node, 隱藏元素$node

 $node.hide() $node.show()

獲取元素$node 的 屬性: id屈梁、src嗤练、title, 修改以上屬性

 $node.attr('id') $node.attr('src') $node.attr('title')    

 $node.attr({id: 'zoro', src: 'http:asd', title: 'real'})

給$node 添加自定義屬性data-src

 $node.data('data-src','url')     

在$ct 內(nèi)部最開頭添加元素$node

 $ct.prepend($node)     

在$ct 內(nèi)部最末尾添加元素$node

 $cd.append($node)

刪除$node

$node.remove()  

把$ct里內(nèi)容清空

$ct.empty()

在$ct 里設(shè)置 html <div class="btn"></div>

$ct.html('<div class="btn"></div> ')

獲取在讶、設(shè)置$node 的寬度煞抬、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距构哺、包括邊框革答、包括外邊距)

 設(shè)置參數(shù)則設(shè)置獲取的屬性 $node.height('700')     

$node.height()  不包括內(nèi)邊距 僅是內(nèi)容的高度
$node.width()   不包括內(nèi)邊距 僅是內(nèi)容的寬度

$node.innerHeight()  獲取padding+內(nèi)容的高度
$node.innerWidth()   獲取padding+內(nèi)容的寬度

$node.outerHeight()  獲取邊框+padding+內(nèi)容的高度
$node.outerWidth()   獲取邊框+padding+內(nèi)容的寬度

$node.outerHeight(true)  獲取外邊距+邊框+padding+內(nèi)容的高度
$node.outerWidth(true)  獲取外邊距+邊框+padding+內(nèi)容的寬度

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

$(window).scrollTop()  垂直滾動距離
$(window).scrollLeft() 水平滾動距離

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

$node.offset().left 水平偏移距離
$node.offset().top 垂直偏移距離

修改$node 的樣式曙强,字體顏色設(shè)置紅色残拐,字體大小設(shè)置14px

$node.css({'font-size':'14px', 'color':'red'})
遍歷節(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

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

$node.index()

代碼1


代碼2

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市娜扇,隨后出現(xiàn)的幾起案子错沃,更是在濱河造成了極大的恐慌,老刑警劉巖雀瓢,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件枢析,死亡現(xiàn)場離奇詭異,居然都是意外死亡刃麸,警方通過查閱死者的電腦和手機(jī)醒叁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人辐益,你說我怎么就攤上這事断傲。” “怎么了智政?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵认罩,是天一觀的道長。 經(jīng)常有香客問我续捂,道長垦垂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任牙瓢,我火速辦了婚禮劫拗,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘矾克。我一直安慰自己页慷,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布胁附。 她就那樣靜靜地躺著酒繁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪控妻。 梳的紋絲不亂的頭發(fā)上州袒,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天,我揣著相機(jī)與錄音弓候,去河邊找鬼郎哭。 笑死,一個胖子當(dāng)著我的面吹牛菇存,可吹牛的內(nèi)容都是我干的夸研。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼依鸥,長吁一口氣:“原來是場噩夢啊……” “哼亥至!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起毕籽,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎井辆,沒想到半個月后关筒,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡杯缺,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年蒸播,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡袍榆,死狀恐怖胀屿,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情包雀,我是刑警寧澤宿崭,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站才写,受9級特大地震影響葡兑,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜赞草,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一讹堤、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧厨疙,春花似錦洲守、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至搭独,卻和暖如春婴削,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背牙肝。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工唉俗, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人配椭。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓虫溜,卻偏偏與公主長得像,于是被迫代替她去往敵國和親股缸。 傳聞我的和親對象是個殘疾皇子衡楞,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,577評論 2 353

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

  • 題目1: jQuery 中, $(document).ready()是什么意思敦姻? ready( handler )...
    南山碼農(nóng)閱讀 330評論 0 2
  • Jquery 中瘾境, $(document).ready()是什么意思?和window.onload 的區(qū)別镰惦? 還有...
    Nicklzy閱讀 618評論 0 50
  • jquery中,$(document).ready()是什么意思迷守?和window.onload的區(qū)別?還有什么其他...
    冰哲閱讀 371評論 0 1
  • 本教程版權(quán)歸小圓和饑人谷所有旺入,轉(zhuǎn)載須說明來源 問答 1. Jquery 中兑凿, $(document).ready(...
    饑人谷__小圓閱讀 352評論 0 2
  • 不得不說的是卡上確實只剩下兩位數(shù)的余額了在這樣一個節(jié)骨眼我卻選擇了出去是因為端午回家了回家就有錢了還有吃自助的時候...
    城管隊長閱讀 165評論 0 0