锋利的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