jQuery会涎、DOM&事件

1. 說說庫和框架的區(qū)別裹匙?

  • 類庫是實現(xiàn)各種功能的類的集合,可以幫助編程人員簡化工作末秃,提高工作效率概页。就像一個小的工具箱,里面有錘子练慕、剪刀惰匙、扳手等之類的工具。
  • 框架是解決方案铃将,集成了最佳實踐和可復用的基礎(chǔ)結(jié)構(gòu)项鬼,是加速和提高系統(tǒng)質(zhì)量的半成品。

2. jquery 能做什么劲阎?

jQuery相較于原生js能用更少的代碼秃臣,做更多的事情。jQuery可以:

  1. 快速獲取文檔元素哪工。采用$()奥此,如:$('#header')。為了方便使用者jQuery刻意和CSS選擇器使用相同的語法雁比,幾乎支持所有類型的CSS3選擇器稚虎,當然也有一些其特定的選擇器。
  2. 提供漂亮的頁面動態(tài)效果偎捎。jQuery內(nèi)置了一系列動畫效果蠢终,如淡入、淡出茴她、顯示寻拂、隱藏等,還有自定義動畫.animate()丈牢。
  3. 提供常用函數(shù)祭钉。如.each( function(index, Element) )遍歷一個jQuery對象,為每個匹配元素執(zhí)行一個函數(shù)己沛。
  4. 事件處理更好的實現(xiàn)了瀏覽器兼容慌核。
  5. 操作DOM元素距境,更改網(wǎng)頁內(nèi)容。

3. jquery 對象和 DOM 原生對象有什么區(qū)別垮卓?如何轉(zhuǎn)化垫桂?

jQuery對象是一個類數(shù)組對象(用[]包裹的),用$()方法得到的都是jQuery對象粟按,jQuery對象可以使用jQuery自帶的屬性和方法诬滩。

2.jpg

如圖用$('#hd')獲得的是jQuery對象,在$('#hd')后面加上[index]則獲得DOM原生對象灭将,
若是.eq(index)則獲取的是jQuery對象碱呼。jQuery對象轉(zhuǎn)原生對象還可以用.get([index])方法獲取指定index的DOM 對象。.get()不寫參數(shù)就是把所有轉(zhuǎn)化為jQuery對象再返回宗侦。
DOM原生對象擁有其特有屬性愚臀,例如.innerText(),.target等。將DOM原生對象轉(zhuǎn)化為jQuery對象的方法是用$()包裹矾利,如:$('<div>abc</div>')姑裂。

4. jquery中如何綁定事件?bind男旗、unbind舶斧、delegate、live察皇、on茴厉、off都有什么作用?推薦使用哪種什荣?使用on綁定事件使用事件代理的寫法矾缓?

jQuery綁定事件的方法以及對應特點:

  • .bind()
    $('a').bind('click', function() { alert("That tickles!") });
    這是最簡單的綁定方法了。JQuery掃描文檔找出所有的$(‘a(chǎn)’)元素稻爬,并把alert函數(shù)綁定到每個元素的click事件上嗜闻。

  • .live()
    $('a').live('click', function() { alert("That tickles!") });
    JQuery把alert函數(shù)綁定到$(document)元素上,并使用’click’和’a’作為參數(shù)桅锄。任何時候只要有事件冒泡到document節(jié)點上琉雳,它就查看該事件是否是一個click事件,以及該事件的目標元素與’a’這一CSS選擇器是否匹配友瘤,如果都是的話翠肘,則執(zhí)行函數(shù)。
    live方法還可以被綁定到具體的元素(或“context”)而不是document上辫秧,像這樣:
    $('a', $('#container')[0]).live(...);

  • .delegate()
    $('#container').delegate('a', 'click', function() { alert("That tickles!") });
    JQuery掃描文檔查找$(‘#container’)束倍,并使用click事件和’a’這一CSS選擇器作為參數(shù)把alert函數(shù)綁定到$(‘#container’)上。任何時候只要有事件冒泡到$(‘#container’)上,它就查看該事件是否是click事件肌幽,以及該事件的目標元素是否與CCS選擇器相匹配。如果兩種檢查的結(jié)果都為真的話抓半,它就執(zhí)行函數(shù)喂急。
    $('a').live('click', function() { blah() });
    // 或者
    $(document).delegate('a', 'click', function() { blah() });
    以上兩個例子可以達到相同的效果,.delegate和.live哪個更好用笛求?答案是.delegate廊移。為什么呢?看似兩個的作用差不多探入,但是使用.live()首先要掃描整個的文檔查找所有的$(‘a(chǎn)’)元素狡孔,把它們存成jQuery對象。而delegate方法僅需要查找并存儲$(document)元素蜂嗽。所以后者速度更快苗膝。
    其次,live方法有一個非常大的缺點植旧,那就是它僅能針對直接的CSS選擇器做操作辱揭,這使得它變得非常的不靈活。

  • .on()
    在jQuery 3.0中病附,.bind()已被標記為棄用问窃。從jQuery 1.7開始,.live() 方法也已廢棄完沪,[.on()] 方法是將事件處理程序綁定到文檔(document)的首選方法域庇。 舊版本的jQuery中用戶,應優(yōu)先使用[.delegate()]來取代.live()覆积。

    // Bind
    $( "#members li a" ).on( "click", function( e ) {} ); 
    $( "#members li a" ).bind( "click", function( e ) {} );
    // Delegate
    $( "#members" ).on( "click", "li a", function( e ) {} ); 
    //注意子元素參數(shù)位置
    $( "#members" ).delegate( "li a", "click", function( e ) {} );
    

on事件綁定把上面三種方法統(tǒng)一了听皿,用起來更方便。
on方法可以在同一個元素上綁定多個事件
$( "#cart" ).on( "mouseenter mouseleave", function( event ) {
$( this ).toggleClass( "active" );
});
.toggleClass()方法用于為匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類(class),取決于這個樣式類(class)是否存在或state參數(shù)的值宽档。(如果存在(不存在)就刪除(添加)一個類写穴。)
.on()綁定事件和事件代理
$( "#dataTable tbody tr" ).on( "click", function() {
console.log( $( this ).text() );
});
以上代碼如果表格tbody中有多個tr,這需要給每個tr都綁定這樣的事件處理程序雌贱。由于點擊每一個tr時事件都會冒泡到它的父元素上啊送,所以采用事件代理可以避免頻繁的綁定和解綁事件。代碼如下:
$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});

5. jquery 如何展示/隱藏元素欣孤?

  • .show()用于顯示元素
    $('.target').show();
    采用這種方式馋没,元素將立即被顯示,沒有動畫降传∨穸洌可以為其添加參數(shù),顯示時間或快慢。參考http://www.css88.com/jqapi-1.9/show/
  • .hide()用于隱藏元素

6. jquery 動畫如何使用声旺?

.animate()為元素添加動畫笔链。

7. 如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容?如何設(shè)置和獲取元素內(nèi)部文本腮猖?

  • .html()用于獲取和設(shè)置元素內(nèi)部的HTML內(nèi)容鉴扫,在.html()里添加字符串則為該元素設(shè)置HTML內(nèi)容。如:
    <p class="p1">段落</p>
  • .text()用于獲取和設(shè)置元素文本澈缺。
text.jpg

text2.jpg

8. 如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容坪创?如何設(shè)置和獲取元素屬性?

  • .val([value])
    這是一個讀寫雙用的方法姐赡,用來處理input的value莱预,當方法沒有參數(shù)的時候返回input的value值,當傳遞了一個參數(shù)的時候项滑,方法修改input的value值為參數(shù)值
    $('input').val()
    $('input').val('newValue');
    input.jpg
ii.jpg
input2.jpg
  • .attr(attributeName)獲取元素特定屬性的值或者為元素屬性賦值依沮。
  • .removeAttr()為匹配的元素集合中的每個元素中移除一個屬性(attribute).
  • .css()獲取或設(shè)置元素的css.
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市枪狂,隨后出現(xiàn)的幾起案子悉抵,更是在濱河造成了極大的恐慌,老刑警劉巖摘完,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件姥饰,死亡現(xiàn)場離奇詭異,居然都是意外死亡孝治,警方通過查閱死者的電腦和手機列粪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門啦鸣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來憨愉,“玉大人,你說我怎么就攤上這事堰汉『即耄” “怎么了费什?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長手素。 經(jīng)常有香客問我鸳址,道長,這世上最難降的妖魔是什么泉懦? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任稿黍,我火速辦了婚禮,結(jié)果婚禮上崩哩,老公的妹妹穿的比我還像新娘巡球。我一直安慰自己言沐,他們只是感情好,可當我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布酣栈。 她就那樣靜靜地躺著险胰,像睡著了一般。 火紅的嫁衣襯著肌膚如雪矿筝。 梳的紋絲不亂的頭發(fā)上起便,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天,我揣著相機與錄音跋涣,去河邊找鬼缨睡。 笑死鸟悴,一個胖子當著我的面吹牛陈辱,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播细诸,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼沛贪,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了震贵?” 一聲冷哼從身側(cè)響起利赋,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎猩系,沒想到半個月后媚送,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡寇甸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年塘偎,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拿霉。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡吟秩,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出绽淘,到底是詐尸還是另有隱情涵防,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布沪铭,位于F島的核電站壮池,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏杀怠。R本人自食惡果不足惜火窒,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望驮肉。 院中可真熱鬧熏矿,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至慧域,卻和暖如春鲤竹,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背昔榴。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工辛藻, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人互订。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓吱肌,卻偏偏與公主長得像,于是被迫代替她去往敵國和親仰禽。 傳聞我的和親對象是個殘疾皇子氮墨,可洞房花燭夜當晚...
    茶點故事閱讀 44,779評論 2 354

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

  • 問答部分 一、說說庫和框架的區(qū)別吐葵? 庫~是一個提供了封裝好很多方法的工具规揪,在這個工具里面,用與不用都是由你決定温峭,控...
    dengpan閱讀 347評論 1 2
  • 問答 說說庫和框架的區(qū)別猛铅? 庫為 Library ( 簡寫 Lib ),框架為 Framework凤藏。 庫是將代碼集...
    coolheadedY閱讀 220評論 0 1
  • 1.說說庫和框架的區(qū)別奸忽? 庫:用來提供一些方法的集合,避免重復定義相同功能的函數(shù)并具有一定的模式兼容性清笨, 框架月杉,規(guī)...
    candy252324閱讀 298評論 0 0
  • 1.說說庫和框架的區(qū)別? 庫主要是封裝了某些函數(shù)的集合抠艾】廖框架也是。使用庫是指检号,你的代碼決定什么時候從庫中調(diào)用一個特...
    墨月千樓閱讀 417評論 0 2
  • 問答: 1.說說庫和框架的區(qū)別腌歉? 庫就是一些已經(jīng)封裝好了的函數(shù),這些函數(shù)可以實現(xiàn)特定的效果齐苛,只需要在使用的時候用少...
    饑人谷_任磊閱讀 254評論 0 1