關於jQuery和js的區別
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(開發時):一般用於閱讀學習原始碼或修改原始碼,一般不用於線上專案。