問答
說說庫和框架的區(qū)別？
庫為 Library ( 簡寫 Lib )，框架為 Framework睁本。
庫是將代碼集合成的一個產品尿庐，供程序員調用。面向對象的代碼組織形式而成的庫也叫類庫呢堰。面向過程的代碼組織形式而成的庫也叫函數庫抄瑟。在函數庫中的可直接使用的函數叫庫函數。開發(fā)者在使用庫的時候暮胧，只需要使用庫的一部分類或函數锐借，然后繼續(xù)實現自己的功能问麸。
框架則是為解決一個(一類)問題而開發(fā)的產品往衷，框架用戶一般只需要使用框架提供的類或函數，即可實現全部功能严卖∠幔可以說，框架是庫的升級版哮笆。開發(fā)者在使用框架的時候来颤，必須使用這個框架的全部代碼。
jquery 能做什么稠肘？
jquery可以做到存取文檔元素福铅、修改頁面的展現樣式、修改文檔內容项阴、對用戶的交互作出反應滑黔、為文檔添加動畫改變、無刷新的從服務器取回數據环揽、完成簡單的js任務如迭代和數組控制略荡。
jquery 對象和 DOM 原生對象有什么區(qū)別？如何轉化歉胶？
區(qū)別：
1 jquery選擇器得到的jquery對象和標準的 javascript中的document.getElementById()取得的dom對象是兩種不同的對象類型汛兜；
2 jQuery無法使用DOM對象的任何方法，DOM對象不能使用jQuery里的方法.通今。轉化方法：
jQuery對象轉成DOM對象(兩種方法)：
1 jQuery對象是一個數據對象粥谬，通過[index]的方法，如：
var $jq = $("#id") ; //jQuery對象
var dom = $jq[0]; //DOM對象
2 jQuery本身提供辫塌，通過.get(index)方法,如：
var $jq = $("#id"); //jQuery對象
var dom = $jq.get(0); //DOM對象DOM對象轉成jQuery對象:
1 對于DOM對象漏策，只需用$()把DOM對象包裝起來，就可得到jQuery對象,如：
var dom=document.getElementById("id"); //DOM對象
var $jq=$(dom); //jQuery對象jquery中如何綁定事件璃氢？bind哟玷、unbind、delegate、live巢寡、on喉脖、off都有什么作用？推薦使用哪種抑月？使用on綁定事件使用事件代理的寫法树叽？
jquery中可以使用bind()、delegate()谦絮、live()题诵、on()四種方法綁定事件。
各種方法的作用：
bind:會給所有匹配的元素都綁定一次事件层皱，當元素很多時性能會變差性锭。 而且后來動態(tài)新增的元素不會被綁定。
live:附加一個事件處理器到匹配目前選擇器的所有元素叫胖，現在和未來草冈。把 事件 和 選擇的元素 作為函數的參數。有事件冒泡到document節(jié)點的時候瓮增，檢查這個事件是不是 所綁定的 事件怎棱，target element能不能匹配 選擇元素的 css選擇器，如果兩個條件都是true绷跑，處理函數執(zhí)行拳恋。
delegate:是另一種綁定事件的方式。它將事件處理函數綁定在指定的根元素上砸捏， 由于事件會冒泡谬运，它用來處理指定的子元素上的事件。與bind不同它可以自動綁定動態(tài)添加的元素带膜。因為事件處理函數綁定在#root上吩谦，新加的子元素事件也會冒泡到#root。性能好于.bind()只綁定一個事件處理函數膝藕，綁定速度相當快式廷。它與live() 方法很相似，但運行速度快于live()芭挽。
on：on()才是jQuery事件的提供者滑废。其他的事件綁定方法都是通過.on()
來實現的。所以推薦使用on(0
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}
unbind: function( types, fn ) {
return this.off( types, null, fn );
}
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
die: function( types, fn ) {
jQuery( this.context ).off( types, this.selector || "**", fn );
return this;
}
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}
undelegate: function( selector, types, fn ) {
return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
}
通過on()實現其他綁定：
//bind
$( "#id" ).bind( "click", function( e ) {} );
$( "#id" ).on( "click", function( e ) {} );
// delegate
$( "#id" ).delegate( "a", "click", function( e ) {} );
$( "#id" ).on( "click", "a", function( e ) {} );
* unbind：從元素上刪除一個以前附加事件處理程序袜爪。每個用.bind()
方法綁定的事件處理程序可以使用.unbind()
移除蠕趁。
$('#id').unbind();
$('#id').unbind('click');//更加精確
$("#id").unbind( "click", handler );//指定阻止事件綁定的函數
var timesClicked = 0;
$( "#id" ).bind( "click", function( event ) {
alert( "The quick brown fox jumps over the lazy dog." );
timesClicked++;
if ( timesClicked >= 3 ) {
$( this ).unbind( event );
}
});//從自身內部處理程序時解除
* off()：移除一個事件處理函數。off()
方法移除用.on()
綁定的事件處理程序辛馆。
$("p").off()//移除所有段落上的事件
$("p").off( "click", "**" )//移除所有段落上的click事件
$("body").on("click", "p", func);
$("body").off("click", "p", func);//通過傳入的第三個參數俺陋，僅移除先前綁定的事件處理函數
- jquery 如何展示/隱藏元素豁延？
- show():顯示匹配的元素。
show();//直接顯示
show(speed);//第一個參數顯示所花費的時間
show(speed, function);//第二個參數顯示完成后執(zhí)行的函數
- hide():隱藏匹配的元素腊状。
hide();//直接隱藏
hide(speed);//第一個參數隱藏所花費的時間
hide(speed, function);//第二個參數隱藏完成后執(zhí)行的函數
$("#hidr").click(function () {
$("span:last-child").hide("fast", function () {
$(this).prev().hide("fast", arguments.callee);
});//當點擊后選擇最后一個元素進行隱藏诱咏，并使用遞歸和arguments.callee繼續(xù)執(zhí)行這個函數使隱藏元素的上一個元素也進行隱藏
- toggle()：顯示或隱藏匹配元素。
- jquery 動畫如何使用缴挖？
- 動畫使用animate()方法：根據一組 CSS 屬性袋狞，執(zhí)行自定義動畫。所有用于動畫的屬性必須是數字的映屋，除非另有說明苟鸯；這些屬性如果不是數字的將不能使用基本的jQuery功能。屬性值的單位像素（px）,單位em和%需要指定使用棚点。background-color需要使用jQuery.Color插件早处。
- 語法1：animate(styles,[speed],[easing],[callback])， 這里第2乙濒，3陕赃，4參數是可選值卵蛉，為動畫執(zhí)行的速度颁股、緩動方式、完成時執(zhí)行的函數
- 語法2：animate(styles,[options])傻丝，第2個參數為指定動畫的額外選項甘有，如：
設定queue為布爾值。指示是否在效果隊列中放置動畫葡缰。如果為 false亏掀，則動畫將立即開始。
設定step泛释。指定每步動畫執(zhí)行后調用的回調函數滤愕。
$('li').animate({
opacity: .5,
height: '50%'
},
{
step: function() {
//todo
}
});
動畫--參考
動畫的完成finish()和停止stop()--參考
- 如何設置和獲取元素內部 HTML 內容？如何設置和獲取元素內部文本怜校？
- html()：獲取集合中第一個匹配元素的HTML內容.不加參數時和innerHTML相似间影。當有參數時html(str),修改元素的innerHTML為參數值。
- text()：得到匹配元素集合中每個元素的合并文本和innerText方法類似茄茁。只能匹配到文本不能匹配標簽魂贬，當有參數時text(str)，修改元素的文本為參數值裙顽。
- 如何設置和獲取表單用戶輸入或者選擇的內容付燥？如何設置和獲取元素屬性？
- val():獲取匹配的元素集合中第一個元素的當前值value愈犹。val(str):設置str為元素的value
- attr(str):獲取匹配的元素集合中的元素特定屬性的值键科。attr(str，value)為元素特定屬性賦值。.removeAttr()可以刪除屬性與JS中removeAttribute()函數相似
代碼
- 使用 jquery實現如下效果參考
代碼1 - 使用 jquery 實現如下效果參考
代碼2
問題： 點奢侈品2的時候頁面跳到了頂部勋颖，可能是什么原因梆掸？如何解決 - 可能是因為a鏈接href指向#，可以給a鏈接指向鏈接設置為javascript:;牙言、javascript:null酸钦、javascript:void(0)或者給a鏈接的點擊事件執(zhí)行的函數加入一個event的參數，設置event.preventDefault()取消它的默認點擊事件咱枉。
- 實現如下效果參考
代碼3
提示
1.使用代理
2.當點擊按鈕時使用如下數據
var products = [
{
img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
name: '珂蘭 黃金手 猴哥款',
price: '￥405.00'
},{
img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
name: '珂蘭 黃金轉運珠 猴哥款',
price: '￥100.00'
},{
img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
name: '珂蘭 黃金手鏈 3D猴哥款',
price: '￥45.00'
}
];
本博客版權歸 本人和饑人谷所有卑硫，轉載需說明來源
