锋利的jQuery读书笔记(一)

Bertha 。 2022-02-26 04:24 162阅读 0赞

第一章 认识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