jquery小笔记（过一遍书）.doc

1、Jquery 小笔记（根据锋利的 jquery一书，主要是前八章）第一章1，$(document).ready(function( ) );$(document).ready(function( ) );函数内的所有代码都将在 DOM 加载完毕后，页面全部内容（包括图片等）完全加载完毕前被执行。它允许用户在第一眼看到元素的时候，就能立即看到元素产生的一些隐藏效果、显示效果和其他效果。它的缩写：$(function( ) );2，jQuery 的代码风格（1） 链式操作风格例：$(“has_children”).click(function()$(this).add(“highlight”).c

2、hildren(“a”).show().end().siblings().removeClass(“highlight”).children(“a”).hide(););（2）为代码添加注释3，DOM（文档对象模型）对象4.jQuery 对象jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。在 jQuery 对象中无法使用 DOM 对象的任何方法；同样，DOM 对象也不能使用jQuery 里的方法。5，jQuery 对象和 DOM 对象的相互转换如果获取的对象是 jQuery 对象，那么在变量前面加上 $如：var $variable = jQuery 对象;如果获取的

3、是 DOM 对象如：var variable = DOM 对象;（1） ，jQuery 对象转成 DOM 对象index和 get(index)（2） ，DOM 对象转成 jQuery 对象只需要用$()把 DOM 对象包装起来6，解决 jQuery 和其他库的冲突调用 jQuery.noConflict()函数第二章1， jQuery 选择器的写法与 CSS 选择器写法相似#id 选择器：$(“#test”).class 选择器：$(“.test”)Element：$(“p”)*：$(“*”)2,层次选择器$(“div span”)$(“div span”)$(“.one + div”)：选

4、取 class 为 one 的下一个 兄弟元素，等价于$(“ .one”).next(“div”);$(“#twodiv”)：选取 id 为 two 的元素后面的所有兄弟元素3，过滤选择器 等价于 window.onload=function()2，事件绑定bind(type , data , fn );类型包括：blur、focus 、load、resize、scroll、unload 、click、dblclick、mousedown 、mouseup、mousemove、mouseover、mouseout 、mouseenter 、mouseleave、change、select、su

5、bmit、keydown、keypress、keyup、error可以发现，jQuery 中的事件绑定类型比普通的 Javascript 事件绑定类型少了“on”3，合成事件hover(enter,leave); 模拟光标悬停事件toggle(fn1,fn2fnN); 模拟鼠标连续单击事件；切换元素的可见状态4，事件冒泡什么是冒泡？在页面上可以有多个事件，也可以多个元素响应同一个事件。（1）事件对象：使用事件对象，只需要为函数添加一个参数$(“element”).bind(“click”,function( event ) );这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事

6、件对象就被销毁。（2）停止事件冒泡：可以阻止事件中其他对象的事件处理函数被执行。stopPropagation()方法。event.stopPropagation();（3）阻止默认行为：网页中的元素有自己默认的行为，例如，单击超链接后会跳转、单击“提交”按钮后表单会提交，有时候需要阻止元素的默认行为。preventDefault()阻止元素的默认行为。event.preventDefault();（4）事件捕获：事件捕获与事件冒泡刚好相反的两个过程，事件捕获是从最顶端往下开始触发。jQuery 不支持事件捕获，如需要直接使用原生的 javascript5，事件对象属性event.type ：

7、获取到事件类型event.preventDefault() event.stopPropagation() event.target ：获取到事件触发的元素event.relatedTargetevent.pageX / event.pageY ：获取到光标相对于页面的 x 坐标和 y 坐标event.which ：在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键event.metaKey() ：为键盘事件中获取按键event.originalEvent ：指向原始的事件对象6，移除事件（1） 移除按钮元素上以前注册的事件$(“#btn”).unbind(“click”);

8、 $(“#btn”).unbind();（2） 移除元素的其中一个事件$(“#btn”).unbind(“click”,myFun2); /删除绑定事件 27，模拟操作（1）.trigger(“click”); /触发点击事件（2）触发自定义事件（3）传递数据：trigger(type , data)第二个参数是要传递给事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。（4）绑定多个事件（5）添加事件命名空间（6）相同事件名称，不同命名空间执行方法8，jQuery 中的动画用 jQuery 做动画效果要求要在标准模式下，否则可能

9、会引起动画抖动。标准模式即要求文件头部包含如下的 DTD 定义（1）show() 方法和 hide() 方法 （现、隐）（2）fadeIn() 方法和 fadeOut() 方法 （淡入、淡出）（3）slideUp() 方法和 slideDown() 方法 （改变元素的高度：又下至上延伸、由上至下延伸）（4）animate(param, speed, callback)$(this).animate(left: “+=500px”,300); /在当前位置累加 500px9，停止元素的动画Stop( clearQueue , gotoEnd);clearQueue 代表是否要清空未执行完的动画队

10、列，gotoEnd 代表是否直接将正在执行的动画跳转到末状态。Stop（）方法停止当前正在运行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。经常会遇到这种情况，在为一个元素绑定 hover 事件之后，用户把光标移入元素时会触发动画效果，而当这个动画还没结束时，用户就会将光标移出这个元素了，那么光标移出的动画效果将会被放进队列中，等待光标移入的动画结束后再执行。10，判断元素是否处于动画状态If(!$(element).is(“:animated”) /如果当前没有进行动画，则添加新动画 11，其他动画方法toggle(speed , callback) ：切换元素的可见

11、状态slideToggle(speed ,callback) ：通过高度切换匹配元素的可见性fadeTo(speed , opacity , callback) ：调整不透明度第五章1，表单应用2，表格的应用3，其他应用（1） 网页字体大小（2） 网页选项卡（3） 网页换肤第六章1，Ajax 的优势与不足2，jQuery 中的 AjaxjQuery 对 Ajax 操作进行了封装，在 jQuery 中$.ajax() 方法属于最底层的方法，第二层是 load()、$.get()和$.post() 方法，第三层是$.getScript() 和$.getJSON()方法。（ 1） load()：是

12、jQuery 中最为常见和常用的 Ajax 方法a、通过单击 id 为“send ”的按钮来调用 load()方法，然后将 test.html 的内容加载到 id 为“resText”的元素里。$(function()$(“#send”).click(function()$(“#resText”).load(“test.html”););)b、传递方式：/无参数传递，则是 GET 方式$(“#resText”).load(“test.php”,function();/有参数传递，则是 POST 方式$(“#resText”).load(“test.php”,name:“rain“,age:“2

13、2“,function();（ 2） $.get()方法和 $.post()方法 ：是 jQuery 中的全局函数。（ 3） $.getScript()方法和 $.getJson()方法 ：分别直接加载.js 文件和加载 JSON 文件（ 4） $.ajax()方法 ：是 jQuery 最底层的 Ajax。3，序列化元素（1）serialize()方法：作用于一个 jQuery 对象，它能够将 DOM 元素内容序列化为字符串，用于 Ajax 请求。$(“#send”).click(function()$.get(“get1.php”,$(“#form1”).serialize(),functi

14、on(data,textStatus)$(“#resText”).html(data); /将返回的数据添加到页面上););（2）serializeArray()方法：返回的是 JSON 格式的数据。（3）$.param()方法：它是 serialize()方法的核心，用来对一个数组或对象按照 key / value 进行序列化。4，jQuery 中的 Ajax 全局事件当 Ajax 请求开始的时候，将此元素显示，用来提示用 Ajax 请求正在进行。当 Ajax 请求结束后，将此元素隐藏。$(“#loading”).ajaxStart(function()$(this).show(););$(“#loading”).ajaxStop(function()$(this).hide(););第七章1，验证插件的使用和写法例：$(document).ready(function()$(“#commentForm”).validate(rules:username:required:true,minlength:2,emai:required:true,email:true,url:“url“,comment:“required“););2，jQuery 表单插件