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

资源描述

Jquery小笔记（根据《锋利的jquery》一书，主要是前八章）第一章 1，$(document).ready(function( ){ }); $(document).ready(function( ){ });函数内的所有代码都将在DOM加载完毕后，页面全部内容（包括图片等）完全加载完毕前被执行。它允许用户在第一眼看到元素的时候，就能立即看到元素产生的一些隐藏效果、显示效果和其他效果。它的缩写：$(function( ){ }); 2，jQuery的代码风格（1）链式操作风格例： $(“has_children”).click(function(){$(this).add(“highlight”).children(“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对象; 如果获取的是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”)：选取class为one的下一个<div>兄弟元素，等价于$(“.one”).next(“div”); $(“#two~div”)：选取id为two的元素后面的所有<div>兄弟元素 3，过滤选择器&内容过滤选择器&可见型过滤选择器 4，属性过滤选择器 5，子元素过滤选择器 6，对象表单属性过滤选择器 :enabled ：选取所有可用元素 :disabled ：选取所有不可用元素 :checked ：选取所有被选中的元素（单选框、复选框） :selected ：选取所有被选中的元素（下拉列表） 7，表单选择器 :input :text :password :radio :checkbox :submit :image :reset :button :file :hidden 第三章 1， DOM操作的分类（1） DOM Core：类似于get…()方法（2） HTML-DOM：直接.属性方法,类似于document.forms （3） CSS-DOM：类似于element.style.color 2，jQuery中的DOM操作第四章 1，加载DOM $(window).load(function( ){ }); <==>等价于 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、submit、keydown、keypress、keyup、error 可以发现，jQuery中的事件绑定类型比普通的Javascript事件绑定类型少了“on” 3，合成事件 hover(enter,leave); 模拟光标悬停事件 toggle(fn1,fn2…fnN); 模拟鼠标连续单击事件；切换元素的可见状态 4，事件冒泡什么是冒泡？在页面上可以有多个事件，也可以多个元素响应同一个事件。（1）事件对象：使用事件对象，只需要为函数添加一个参数 $(“element”).bind(“click”,function( event ){ }); 这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁。（2）停止事件冒泡：可以阻止事件中其他对象的事件处理函数被执行。stopPropagation()方法。 event.stopPropagation(); （3）阻止默认行为：网页中的元素有自己默认的行为，例如，单击超链接后会跳转、单击“提交”按钮后表单会提交，有时候需要阻止元素的默认行为。preventDefault()阻止元素的默认行为。 event.preventDefault(); （4）事件捕获：事件捕获与事件冒泡刚好相反的两个过程，事件捕获是从最顶端往下开始触发。jQuery不支持事件捕获，如需要直接使用原生的javascript 5，事件对象属性 event.type ：获取到事件类型 event.preventDefault() event.stopPropagation() event.target ：获取到事件触发的元素 event.relatedTarget event.pageX / event.pageY ：获取到光标相对于页面的x坐标和y坐标 event.which ：在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键 event.metaKey() ：为键盘事件中获取<ctrl>按键 event.originalEvent ：指向原始的事件对象 6，移除事件（1）移除按钮元素上以前注册的事件 $(“#btn”).unbind(“click”); $(“#btn”).unbind(); （2）移除<button>元素的其中一个事件 $(“#btn”).unbind(“click”,myFun2); //删除绑定事件2 7，模拟操作（1）.trigger(“click”); //触发点击事件（2）触发自定义事件（3）传递数据：trigger(type [ , data]) 第二个参数是要传递给事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。（4）绑定多个事件（5）添加事件命名空间（6）相同事件名称，不同命名空间执行方法 8，jQuery中的动画用jQuery做动画效果要求要在标准模式下，否则可能会引起动画抖动。标准模式即要求文件头部包含如下的DTD定义 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> （1）show() 方法和 hide() 方法（现、隐）（2）fadeIn() 方法和 fadeOut() 方法（淡入、淡出）（3）slideUp() 方法和 slideDown() 方法（改变元素的高度：又下至上延伸、由上至下延伸）（4）animate(param, speed, callback) $(this).animate({left: “+=500px”},300); //在当前位置累加500px 9，停止元素的动画 Stop([ clearQueue] [, gotoEnd]); clearQueue代表是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。 Stop（）方法停止当前正在运行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。经常会遇到这种情况，在为一个元素绑定hover事件之后，用户把光标移入元素时会触发动画效果，而当这个动画还没结束时，用户就会将光标移出这个元素了，那么光标移出的动画效果将会被放进队列中，等待光标移入的动画结束后再执行。 10，判断元素是否处于动画状态 If(!$(element).is(“:animated”)){ //如果当前没有进行动画，则添加新动画 } 11，其他动画方法 toggle(speed , [callback]) ：切换元素的可见状态 slideToggle(speed ,[callback]) ：通过高度切换匹配元素的可见性 fadeTo(speed , opacity , [callback]) ：调整不透明度第五章 1，表单应用 2，表格的应用 3，其他应用（1）网页字体大小（2）网页选项卡（3）网页换肤第六章 1，Ajax的优势与不足 2，jQuery中的Ajax jQuery对Ajax操作进行了封装，在jQuery中$.ajax() 方法属于最底层的方法，第二层是load()、$.get()和$.post()方法，第三层是$.getScript() 和$.getJSON()方法。（1）load()：是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:"22"},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(),function(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表单插件

展开阅读全文