1. 說說庫和框架的區(qū)別裹匙?
- 類庫是實現(xiàn)各種功能的類的集合,可以幫助編程人員簡化工作末秃,提高工作效率概页。就像一個小的工具箱,里面有錘子练慕、剪刀惰匙、扳手等之類的工具。
- 框架是解決方案铃将,集成了最佳實踐和可復用的基礎(chǔ)結(jié)構(gòu)项鬼,是加速和提高系統(tǒng)質(zhì)量的半成品。
2. jquery 能做什么劲阎?
jQuery相較于原生js能用更少的代碼秃臣,做更多的事情。jQuery可以:
- 快速獲取文檔元素哪工。采用$()奥此,如:$('#header')。為了方便使用者jQuery刻意和CSS選擇器使用相同的語法雁比,幾乎支持所有類型的CSS3選擇器稚虎,當然也有一些其特定的選擇器。
- 提供漂亮的頁面動態(tài)效果偎捎。jQuery內(nèi)置了一系列動畫效果蠢终,如淡入、淡出茴她、顯示寻拂、隱藏等,還有自定義動畫.animate()丈牢。
- 提供常用函數(shù)祭钉。如.each( function(index, Element) )遍歷一個jQuery對象,為每個匹配元素執(zhí)行一個函數(shù)己沛。
- 事件處理更好的實現(xiàn)了瀏覽器兼容慌核。
- 操作DOM元素距境,更改網(wǎng)頁內(nèi)容。
3. jquery 對象和 DOM 原生對象有什么區(qū)別垮卓?如何轉(zhuǎn)化垫桂?
jQuery對象是一個類數(shù)組對象(用[]包裹的),用$()方法得到的都是jQuery對象粟按,jQuery對象可以使用jQuery自帶的屬性和方法诬滩。
如圖用
$('#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è)置元素文本澈缺。
8. 如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容坪创?如何設(shè)置和獲取元素屬性?
-
.val([value])
這是一個讀寫雙用的方法姐赡,用來處理input的value莱预,當方法沒有參數(shù)的時候返回input的value值,當傳遞了一個參數(shù)的時候项滑,方法修改input的value值為參數(shù)值
$('input').val()
$('input').val('newValue');
input.jpg
-
.attr(attributeName)
獲取元素特定屬性的值或者為元素屬性賦值依沮。 -
.removeAttr()
為匹配的元素集合中的每個元素中移除一個屬性(attribute). -
.css()
獲取或設(shè)置元素的css.