鋒利的jQuery讀書筆記(一)

第一章 認識Jquery

1 $(document).ready(function(){

alert(“hello world”);

});

簡化寫法：

$(function(){

});

2 $("#table>tbody>tr:has(td:has(:checkbox:enabled))").css(“background”,“red”);

解釋：在一個id為table的表格的tbody中，如果每行的一列中的checkbox沒有被禁用，則把這一行的背景設定為紅色

3//等待dom元素加載完畢.

$(document).ready(function(){

$(".level1 > a").click(function(){

$(this).addClass(“current”).next().show().parent().siblings().children(“a”).removeClass(“current”).next().hide();

return false;

});

});

優化後的寫法：

//等待dom元素加載完畢.

$(document).ready(function(){

$(".level1 > a").click(function(){

$(this).addClass(“current”) //給目前元素添加"current"樣式

.next().show() //下一個元素顯示

.parent().siblings().children(“a”).removeClass(“current”) //父元素的兄弟元素的子元素移除"current"樣式

.next().hide(); //它們的下一個元素隐藏

return false;

});

});

4 jQuery對象和DOM對象的互相轉換

1）jQuery對象轉為DOM對象

var $cr = $("#cr"); //jquery對象

var cr = $cr[0]; //dom對象

2） DOM對象轉成jQuery對象

var cr = document.getElementById(“cr”);//dom對象

var $cr = $(cr); //jquery對象

5 解決jQuery和其他庫的沖突

代碼片段：

Test-prototype(将被隐藏)

Test-jQuery(将被綁定單擊事件)

1）jQuery在其他庫之後導入

方案1：

var $j = jQuery.noConflict(); //自定義一個快捷方式

$j(function(){

$j(“p”).click(function(){

alert( KaTeX parse error: Expected 'EOF', got '}' at position 20: …is).text() ); }̲); }); 方案2： jQu…的控制權讓渡給prototype.js

jQuery(function($){ //使用jQuery

$(“p”).click(function(){ //繼續使用 $ 方法

alert( KaTeX parse error: Expected 'EOF', got '}' at position 19: …is).text() ); }̲); }); 方案3： jQu…的控制權讓渡給prototype.js

(function(KaTeX parse error: Expected '}', got 'EOF' at end of input: … //定義匿名函數并設定形參為

KaTeX parse error: Expected '}', got 'EOF' at end of input: …{ //匿名函數内部的均為jQuery

$(“p”).click(function(){ //繼續使用 $ 方法

alert($(this).text());

});

});

})(jQuery); //執行匿名函數且傳遞實參jQuery

2）jQuery在其他庫之前導入，無需處理

6 eclipse支援代碼提示的插件：jQueryWTP和Spket