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