jQuery笔记jQuery笔记.doc

JQuery开发工具——GVIM。 锋利的jQuery 目录 第1章 认识jQuery 1 第2章 jQuery选择器 2 第3章 jQuery的DOM操作 5 第4章 jQuery中的事件和动画 8 第5章 jQuery对表单、表格的操作及更多应用 11 第6章 jQuery与Ajax的应用 13 第1章 认识jQuery 1．jQuery的优势：轻量级；强大的选择器；出色的DOM操作的封装；可靠的事件处理机制；完整的Ajax；不污染顶级变量；出色的浏览器兼容性；链式操作方式；隐式迭代；行为层与结构层的分离；丰富的插件支持；完善的文档；开源。 2．使用jQuery之前，要先导入jQuery库。script src=”../scripts/jquery-1.3.1.js” type=”text/javascript” /\ 在jQuery库中，$就是jQuery的一个简写形式，例如$(“#foo”)和jQuery(“#foo”)和document.getElementById(“foo”)是等价的。 Window.onload和$(document).ready()的区别： 执行时机：前者必须等待网页中所有的内容加载完毕(包括图片)才能执行；后者在网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完。 编写个数：前者只能编写一个function()块，后者能同时编写多个(多个会依次执行)。 简化写法：前者无；后者$(document).ready(function(){//…})可以简写成：$(function(){//…}) 3. jQuery代码风格。 链式操作风格： $(.has_children).click( function(){ $(this).addClass(highlight) //为当前元素增加highlight类 .children(a).show().end() //将子节点的a元素显示出来并重新定位到上次操作的元素 .siblings().removeClass(highlight)//获取元素的兄弟元素，并去掉它们的highlight类 .children(a).hide(); //将兄弟元素下的a元素隐藏 }); 代码规范： 对于同一个对象不超过3个操作的，可以直接写成一行。 对于同一个对象的较多操作，建议每行写一个操作。(也可按功能块换行) 对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进。 对于多个对象的较多操作，建议结合第(2)、(3)条来做。 4. jQuery对象与DOM对象。 jQuery对象就是通过jQuery包装DOM对象后产生的对象。是jQuery独有的。可以使用jQuery里的方法。 如：$(“#foo”).html()等同于document.getElementById(“foo”).innerHTML; 在jQuery对象中无法使用DOM对象的任何方法。 命名规则：jQuery对象的变量名前应加上$。 jQuery对象转换成DOM对象的方法：即[index]和get(index)。 jQuery对象是一个数组对象，可能过[index]得到相应的DOM对象。如var $cr=$(“#cr”); var cr=$cr[0]; 通过get(index)方法。如：var $cr=$(“#cr”); var cr=$cr.get(0); //cr为DOM对象 DOM对象转成jQuery对象：只需用$()把DOM对象包装起来即可。如：var $cr=$(cr); //cr为DOM对象 注：$()函数就是一个jQuery对象的制造工厂。 $cr.is(“:checked”) ：is(“:checked”)是jQuery中的方法，判断jQuery对象是否被选中，返回boolean值。 5．解决jQuery和其他库的冲突。 1）在其他库和jQuery库都被加载完成后，可以在任何时间调用jQuery.noConfilict()函数来将变量$的控制权移交给其他JavaScript库。也可以使用此方法的返回值来自定义一个快捷方式，如$j(“#p”)。 2）如果jQuery库在其他库之前就已经导入了，那么可以直接使用”jQuery”来做一些jQuery的工作。同时，可以使用$()方法作为其他库的快捷方式。 6. jQuery开发工具和插件。 1) Dreamweaver：下载jQuery_API.mxp插件。在Dreamweaver中依次选择：命令——扩展管理——安装扩展——jQuery_API.mxp。 2) Aptana。 3) jQueryWTP和Spket插件：可以使Ec