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

锋利的jQuery读书笔记(一)相关推荐

JQuery读书笔记--JQuery-Form中的AjaxForm和AjaxSubmit的区别
JQuery中的AjaxForm和AjaxSubmit使用差不多功能也差不多.很容易误解. 按照作者的解释: AjaxForm ajaxForm不能提交表单.在document的ready函数中,使用 ...
锋利的JQuery学习笔记01
1. JQuery的链式操作风格 <script type="text/javascript"> //等待dom元素加载完毕. $(document).ready(fu ...
锋利的jQuery学习笔记（4）-DOM操作
1. DOM操作的分类: DOM Core:JavaScript中的getElementByID,getElementByTagName,getAttribute,setAttribute等方法都是其 ...
《锋利的jQuery》笔记第1章认识jQuery
jQuery是支持链式操作的,现在我们用jQuery来实现一个导航栏: ./css/default.css: /* reset */ body{margin:0;padding:0 0 12px 0; ...
jQuery读书笔记二 jQuery中的事件与应用
1.实践中的冒泡现象: <style type="text/css">body{font-size:13px} .clsShow{border:#ccc 1px sol ...
jQuery读书笔记一
1.通过vai()可以获取select中的多个选项的值,语法格式:val().join(","); 2.增加CSS类别:通过addClass()方法增加元素类别,可同时添加多个类别 ...
锋利的Jquery【读书笔记】 -- 第四章 jQuery中的事件和动画
锋利的Jquery读书笔记第三章 jQuery中的DOM操作 jQuery中的事件事件绑定 bind方法合成事件 hover方法 toggle方法事件冒泡事件对象停止事件冒泡阻止默认行为 ...
读书笔记：锋利的JQuery
本文首发于我的个人博客:cherryblog.site/ 最近开启了阅读源码之旅,有兴趣的童靴可以持续关注,这几天再看 Zepto.js 的源码,估计博文过几天就会出来~另外,买的十几本书陆陆续续的在 ...
【读书笔记】锋利的 jQuery
本文首发于我的个人网站: http://cherryblog.site/ 本文作者: Cherry 本文链接: http://cherryblog.site/sharp-jquery.html 版权声 ...
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术非常多,样例非常多.仅仅好慢慢学,慢慢实践!!如今学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQ ...

锋利的jQuery读书笔记(一)

锋利的jQuery读书笔记(一)相关推荐

最新文章

热门文章