關於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(開發時):一般用於閱讀學習源碼或修改源碼,一般不用於線上項目。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章