jq的預加載?
①頁面加載完之前執行,與嵌入的js加載方式一樣(寫jquery插件的時候使用)
(function ($) {
alert('start');
})(jQuery);
②頁面加載後執行。
$(document).ready(function(){
alert('jquery ready');
});
③頁面加載後執行。
$(function(){
alert('jquery onload');
});
④頁面加載後執行。
jQuery(function($) {
alert('jQuery ready ');
});
與window.onload 區別?
window.onload():
加載時機:必須等待網頁全部加載完畢(包括圖片等),然後再執行JS代碼;
執行次數:只能執行一次,如果第二次,那麼第一次的執行會被覆蓋;
$(document).ready():
加載時機:只需要等待網頁中的DOM結構加載完畢,就能執行JS代碼;
執行次數:可以執行多次,第N次都不會被上一次覆蓋;
簡寫:$(function () {});
2.jq與js對象的互相轉換;
1. DOM 對象轉成 jQuery 對象
對於已經是一個 DOM 對象,只需要用 $() 把DOM對象包裝起來,就可以獲得一個 jQuery 對象了,$(DOM 對象) ;
2. jQuery 對象轉成 DOM 對象
兩種轉換方式講一個 jQuery 對象轉換成 DOM 對象: [index] 和 .get(index);
jQuery 對象是一個數據對象,可以通過 [index] 的方法,來得到相應的 DOM 對象。
jQuery 本身提供,通過.get(index) 方法得到相應的 DOM 對象;
3.jq的鏈式調用什麼意思?
節約JS代碼;所返回的都是同一個對象,可以提高代碼的效率;通過簡單擴展原型方法並通過return this的形式來實現跨瀏覽器的鏈式調用。利用JS下的簡單工廠方法模式,來將所有對於同一個DOM對象的操作指定同一個實例。
4.jq的事件監聽
1.bind:
bind(type,[data],function(eventObject)) bind是使用頻率較高的一種,作用就是在選擇到的元素上綁定特定事件類型的監聽函數,
參數函數如下:
type:事件類型,如click、change、mouseover等;
data:傳入監聽函數的參數,通過event.data取到;
function:監聽函數,可傳入event對象,這裏的event是jquery封裝的event對象。
2.live
live(type, [data], fn) live的參數和bind一樣,它又有什麼蹊蹺呢,我們還是先瞄一眼源碼:
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
可以看到live方法並沒有將監聽器綁定到自己(this)身上,而是綁定到了this.context上了。通過 live() 方法添加的事件處理程序適用於匹配選擇器的當前及未來的元素(比如由腳本創建的新元素),使用事件委託的優點一目瞭然,新添加的元素不必再綁定一次監聽器。
注意:live方法在在 jQuery 版本 1.7 中被廢棄,在版本 1.9 中被移除,官方建議使用on代替。
3.delegate
將監聽事件綁定在就近的父級元素上,源碼:
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}
delegate() 方法爲指定的元素(屬於被選元素的子元素)添加一個或多個事件處理程序,並規定當這些事件發生時運行的函數。
這下,我們的選擇又多了一些靈活性,不單可以利用事件委託,還可以選擇委託的對象。代碼,實現效果,點擊div,兩個p標籤的文字顏色都發生變化。
4、on
on(type,[selector],[data],fn)參數與delegate差不多但還是有細微的差別,首先type與selector換位置了,其次selector變爲了可選項。
on() 方法在被選元素及子元素上添加一個或多個事件處理程序。
自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。代碼,實現效果同上,把delegate改爲on,第一個參數爲click,第二個參數p可寫可不寫,第三個參數同上。
5.jq的on 、live、delegat、bind 區別?
相同點:
1.都支持單元素多事件的綁定;空格相隔方式或者大括號替代方式;
2.均是通過事件冒泡方式,將事件傳遞到document進行事件的響應;
比較和聯繫:
1.bind()函數只能針對已經存在的元素進行事件的設置;但是live(),on(),delegate()均支持未來新添加元素的事件設置;
6.jq的ajax
7.如何解決$符號的衝突?
方案1:引入noConflict(),將$替換爲其他符號
代碼如下:
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("#btn1").click(function(){
alert("Text: " + $j("#test").text());
});
});
缺點:引入了這段代碼後,不僅是當前的js文件,該html引用的所有js中,如果有用到jquery中的$,都得用$j來代替之前的$ ;
方案2:
ready函數是jquery的入口函數,可以將
$(document).ready(function(){})
替換成
jQuery( document ).ready(function( $){}
缺點:只對ready嵌套內的代碼有效,對嵌套外的代碼是無效的。如果你所有的邏輯,都在寫ready函數中,那沒問題。但我們一般都會在ready函數之外寫一些子函數,然後ready函數再去調用這些函數。這個方案對這些函數是無效的,因此這套方案有侷限性。
方案3(推薦,特別是開發js插件時):
給js內容包上一個函數
代碼如下:
jQuery(function($){
//你的js代碼放在這裏(例如第二個方案提到的ready函數和子函數)
//如果是js文件,其實就是在文件頭部和尾部各加一行代碼
}
或者代碼如下:
(function($) {
//你的js代碼
})(jQuery);
8.jq需不需要做兼容?
jQuery新版本已經不再進行IE低版本(IE6、IE7、IE8)的兼容性處理。
如果項目需要兼容IE低版本,需要使用jQuery1.x版本,從2.x開始已經不兼容IE6、7、8了。
9. jq.js和jq.min.js 區別 開發時用那種 上線後用那種
1、jquery的不同的下載方式。2、文件名不完全相同
一、區別:
1.jquery.min.js:是由完整版的jQuery庫經過壓縮得來,壓縮後功能與未壓縮的完全一樣,只是將其中的空白字符、註釋、空行等與邏輯無關的內容刪除,並進行一些優化。
2.jquery.js:是完整的未壓縮的jQuery庫,文件比較大。
二、應用:
1、jquery.min.js(上線後):這個版本一般用於網站引用使用,減小文件體積,降低網站流量,提升訪問速度等。
2、jquery.js(開發時):一般用於閱讀學習源碼或修改源碼,一般不用於線上項目。