jquery基础教程.doc

第1章. 选择符取得你想要的一切$()会替换FOR循环访问一组元素的需求，放到贺括号中的任何元素都将自动执行循环遍历。并且会保存到一个JQUERY对象中，如果一个页面有几个JQUERY库，有可能会产生冲突，最简单的方式是把每个库用一个JQUERY代替，也可以参考插件中的解决方法。用JQuery取得的元素是JQuery对像，不是普通的DOM对象，但可以访问包装在jQuery对象中的DOM元素。$(document).ready会在DOM加载后立即执行。这个$()中的参数是一个DOM对象，也可以是一段HTML代码。所以用$(document.createElement(script)是可以的。$(document).ready(function()alert(dd););第1节. $的其他用法$(函数):DOM载入后就执行该函数.所以$(document).ready()可以写做$() $(选择器部分,选择器来源):这个举例说明 $(input:radio,document.forms0):在文档的第一个表单中,搜索所有单选按钮 $(div,xml.responseXML):查询指定XML文档中的所有div元素第2节. 访问DOM元素1. 取得DOM元素：get(index) 例：取得id=”my”属性的元素集合的第一个元素的标签名。var myTag = $(#my).get(0).tagName或$(#my)0。其中jquery变量也可以用var t = $()来定义，但t只能调用jquery的方法。 get()如果没有参数,返回所有,是一个对象数组;如果带参数,必须是数字,基数从0开始.例子: $(div).get():返回一个div对象数组 $(div).get(1):返回第二个div对象 ，也可以简写成$(div)1 index(需求的元素节点对象)返回数字.用个例子说明: $(div).index($(.test)1 /表示从所有div节点中查找class属性为test的节点.并且找的是第二个节点(基数从0开始).返回值是该节点在div节点中的位置(基数也是从0开始).2. this选择符var $ele = $(this);/返回的是jquery对象第3节. 选择符类型CSS选择符， XPath选择符及其它选择符。第2章. 事件扣去扳机前面提到的$(document).ready()事件相当于window.onload。但前者是DOM树下载之后就可以执行，这时有些图片文件可能没下载完，所以相应的属性不能执行，可以考虑用.load()方法来代替。而onload要等所有的图片和相关的文件都下载后才执行，速度上可能要慢一些。$(img).load(function();一般的onload只能加bind一个函数，但用jquery可以bind多个函数。也就是说当window.onload = fu1;window.onload = fu2;这时程序只会执行fu2；如果用bind绑定后会依次顺序执行，是一个继承的过程。这里的onload只是一个例子。第1节. 一般的事件 $().bind(, function()，如果用$(this)则指当前控件。允许向$()传递DOM元素，但只允许是this，也可像 if(this.id = “mytag”)这样来使用。在function中还可以带参数，详细参考下面的事件目标一节。 unbind(, function()：解除绑定。 one(, function()：如果有些事件只触发一次就解除可以调用此方法。 $(p).bind(click, function()alert($(this).text();); /为每个p元素添加单击事件 $(p).unbind(); /删除所有p元素上的所有事件 $(p).unbind(click) /删除所有p元素上的单击事件 向方法中传递参数$(function() $(p).bind(click, str1 : hello, str2 : world, function(event) alert(event.datastr1 + event.datastr2); ););$(document).ready(function()var $ok = $(#ok).attr(id);/取得属性的使用方法alert($ok);$(#ok).bind(click, function()alert(this.value);/这里的this使用方法);第2节. 复合事件n .toggle(function, function)：交替事件，接受两个参数，在第一次点击时运行第一个参数指定的函数。第二次点击时执行第二个参数指定的函数。n .hover(function, function)：第一函数在鼠标进入时执行，第二个函数在鼠标离开时执行。n .toggleClass(cssClassName)：这个方法一般会用addClass取代。n .addClass(cssClassName)：n removeClass(cssClassName)：(可选) 一个或多个要删除的CSS类名，请用空格分开，如果不带名称，则是删除所有的样式。n string.test(this.value)：验证是否符合字符串要求/这个方法手册中没有n trigger(click)：$(#switcher). trigger(click)模拟事件的操作，这个是在页面一加载就开始执行。不需要用户点击，常用于表单提交验证等。第3节. 事件传播事件触发一般有两种方式：事件捕获和事件冒泡，这是不同IE厂商的不同标准所致。但如何用JQUERY的机制来绑定事件，否则也存在跨浏览器的问题，相关的方法都自动处理了这个问题，没有处理的也可以用内置的方法来解决。n 事件捕获：事件从外层向内层传输。n 事件冒泡：与上相反，这是IE的机制。1. 解决方法1：事件目标原理就是在function中传递event参数，这是DOM中规定的类型，然后利用event.target属性来进行验证。$(#btu1).bind(click, function(event)if (event.target = this) |if ($（event.target）.is(btu1)/这句可有可无 alert(event.target); );2. 解决方法2：JQUERY内置方法 也传递event参数，但用到的是stop方法来完成。$(#btu1).bind(click, function(event) alert(event.target); event.stopPropageation(); );第4节. 其它几个有用的全局方法1. event.preventDefault()在默认操作前终止将在进行的默认操作，如输入表单后按回车则会提交表单，如果在提交前调用此函数。则可以终止提交行为，也可以有JS中的return false来完成相应的功能，JS中验证后就是通过返回false来阻止提交操作。2. $.browser浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true，其中$是jQuery的缩写。3. $.extend(target,prop1,propN)用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。例如：$.extend(settings, options); /合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。var settings = $.extend(, defaults, options);/合并defaults和options，并将合并结果返回到settings中而不覆盖default内容。可以有多个参数（合并多项并返回）4. $.map(array, fn)数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。如：var tempArr=$.map( 0,1,2, function(i) return i + 4; );tempArr内容为：4,5,6var tempArr=$.map( 0,1,2, function(i) return i 0 ? i + 1 : null; );tempArr内容为：2,35. $.merge(arr1,arr2)合并两个数组并删除其中重复的项目。如：$.merge( 0,1,2, 2,3,4 ) /返回0,1,2,3,46. $.trim(str)删除字符串两端的空白字符。如：$.trim( hello, how are you? ); /返回hello,how are you? 第3章. 效果为操作添加艺术性 主要讨论CSS样式添加删除和元素的淡入淡出等操作。第1节. 修改内联的CSS.css()：这个方法集成get和set于一身。主要是由参数形式来定： $().css(fontSize)则是调用的get方法。 $().css(property, value)则是调用的set方法。 $().css(property1:value1, property2:value2)如果value是数字，则不需要号第2节. 显示和隐藏n .hide()：也可以带参数slow、normal、fast或int数，如 hide(slow)或是指定毫秒级的数据hide(850)。如果带以上三个参数则元素会同时修改高度，宽度和不透明度三个属性。n .show()：以上两个方法可以有两种方法指定效果从高，宽，透明度。第3节. 多重效果以上show和hide函数可以同时改变宽，高，透明度，为了实现单独的效果可以用以下四个函数来代替。n fadeIn()和fadeOut()：不透明度n fadeTo()：不透明度n slideDown()和slideUp()：高度。构造函数如下，不可以不带参数，fadeIn(slow, function()回调函数。 speed (String,Number) : 三种预定速度之一的字符串(slow, normal, or fast)或表示动画时长的毫秒数值(如：1000) callback (Function) : (Optional) (可选) 在动画完成时执行的函数n 也可以用animate(param1, spead, easing, function) 方法来代替 param1：用括起来的CSS样式表。 spead：slow normal fast或表示动画时长的毫秒数值(如：1000)。 easing：可选的缓动类型，运动的轨迹，一般要加入第三方插件。 function：回调函数。例：animate(height:, width:, opacity:, slow)其中heigth, width要以指定数字，指定移动到哪，但移动时相对于块级元素来说的，元素默认定位方式为static，如果不设成relative和absolute则不会发生移动。第4章. DOM操作基于命令改变页面这一章中有些效果可以用前几章的方法来代替，在实际操作中建议还是用前几章的方式来完成，可能会有些麻烦。第1节. 属性操作n .attr()： attr(property, value); attr(property1:value1, property2:value2)n .removeAttr(propertyName)：一次只能移徐一个。n .each(function)例：$().each(function(index)这样每次index都会加1。实际操作只能传index参数。但在方法内部可以用this或$(this)来取得此次遍历的对象。第2节. 取得属性的值n $(input).val(); /返回表单输入框的value值n $(input).val(test); /将表单输入框的value值设为testn $(#msg).height(); /返回id为msg的元素的高度$(#msg).height(300); /将id为msg的元素的高度设为300n $(#msg).width(); /返回id为msg的元素的宽度$(#msg).width(300); /将id为msg的元素的宽度设为300第3节. 插入新元素1. 在每个匹配的元素中插入新元素n $(par1).append(par2)：加在匹配的元素中的最后元素的后面，其中par1和par2是DOM对像，所以可以是css等选择符，也可以是一段html代码。n appendTo()：n prepend()：加在匹配的元素中的第一个元素的前面n prependTo()2. 在每个匹配的元素相邻的位置上插入新元素n after() :$().after(html code);n insertAtert():$(html code).inserAter(div.chapter p).n before()n insertBefore()3. 在每个匹配的元素外面插入新元素n wrap()：参数为一个标签，如果标签带内容则忽略。$(#p1).wrap(aaa/a.)用新元素或文本替换每个匹配的元素中的元素。n html()：如果不带参数，则和text()一样，返回对象的文档，带参数，则参数是html标签。n $().html(“dfsafasdfsaf”)相当于innerHtml()。n text()：和上面差不多。只不过不把标签做为文本来返回。n $(#msg).html();/返回id为msg的元素节点的html内容。$(#msg).html(new content); /将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content4. 移除每个匹配的元素中的元素n empty()：从文档中移除每个匹配元素及其后代，但不实际删除他们n remove()：5. 复制元素及元素的事件n clone()：默认情况下不会复制后代结点，但当参数为true时则复制。这个方法不会复制结点的事件，可以换成cloneWithEvent()来取代或手工添加。第5章. AJAX让网站与时俱进 复用AJAX技术来实现异步传输。由于浏览器对于XMLHttpRequest对象实现的不一致性，导致跨浏览器的问题，所以很多框架拿出自己的方案来实现跨浏览器。第1节. 追加HTML.load()方法$(#dictionary).load(“a.html”)：参数是url，取得html代码段。但有可能存在网络延迟问题，这个方法还可以追加一个回调函数。第2节. 追加JSON对象$.getJSON方法JS对像，是由一些键-值对组成，而且可以方便使用来定义，数组则用来定义。以下是一个数组，有几点要求注意，1，数组间和数值间用，分开；2，KEY和VALUE用双引号。term: liudong,quote: a1,b1,c1,age: a,term: liudong1,quote: a1,b1,c1,age: a1$.getJSON(x.json , function(data)：function为回调函数，此函数保存了x.json的内容。JSON文件格式要求非常严格，如果出错，IE也不会报错，只是在后台终止执行。function init()$(#btu1).bind(click, function()$.getJSON(a.json, function(data)$.each(data, function(index, entrys)var html = entrysterm;alert(html);););/以上方法index和entrys一定要存在，参数名不固定。第3节. 动态加载JS脚本$.getSript(url)方法$.getScript(url)全局方法，参数是一个URL。第4节. 追加XML对象$.get()方法取得URL指定的文件，然后将纯文本格式的数据提供给回调函数。但一般由MIME类型指定。如果指定是XML则提供给回调函数的将是一个XML DOM树，JQUERY对XML的解析与对HTML的解析一样，可以使用find()、filter()及其它方法。$.get(b.xml, function(data)$(data).find(entry).each(function()var $entry = $(this);/entry和term是b.xml的结点和属性。$entry.attr(term);););return false;第5节. AJAX请求n $.get(a.jsp, “name”:”liudong”, “age”:”12”, function(data)n $.post(a.jsp, “name”:”liudong”, “age”:”12”, function(data)n $().load(e.jsp， “name”:”liudong”, “age”:”12”)为了防止这种调用方式打开新的URL，在事件处理程序中必须返回false。在AJAX处发时会调用两个全局的函数.ajaxStart(), .ajaxStop()。利用这种方式可以做一个提示页。如：loading.$(#loading).ajaxStart(function() $(this).show();).ajaxStop(function() $(this).hide(););1. 双点击事件在AJAX后，DOM文档结构发生了变化，如果想在新加载的DOM上绑定事件，就需要采用如下的方式来解决：1、把所有的绑定事件放在一个公共的方法中，并把公共的方法设置一个DOM范围，否则只能点一次，每次AJAX后重新调用；2、利用事件昌泡来处理。解决方式1：$(document).ready(function()var bind = function(scope)$(h3,scope).click(function()$(this).toggleClass(hightLighted););/scope是个范围，是一个jquery对象$(h3,$table)bind(this);$(#letter).click(function()$.get(a.html, function()bind(this););););解决方式1：$(document).ready(function()$(body).click(function(event)if($(event.target.is(h3)$(event.garget).toggleClass(hightlight);););第6章. 表格操作分页，排序等操作。一般分页和排序是放在一起操作的，要么放在服务器要么放在客户端用JS来实现，否则容易出错。第1节. 表格排序$(document).ready(function() var alterRowColor = function($table) /$table是范围，添加奇偶行着色 $(tbody tr:odd, $table).removeClass(even).addClass(odd); $(tbody tr:odd, $table).removeClass(odd).addClass(even); ; $table = $(#tableID); alterRowColor($table);var rows = $table.find(tbody tr).get();$.each(rows, function(index, row)row.sortKey = $(row).children(td).eq(column).text().toUpperCase(););row.sort(function(a, b)return a.sortKeyb.sortKey?1:-1;);$.each(rows, function(index, row)$table.children(tbody).append(row);row.sortKey = null;); alterRowColor($table););如果可以升降序替换排列则在不同的时间加上不同的class名字，判断名字然后把中的返回值，换成那个变量，1或-1。这样就实现了替换点击的功能。row.sort(function(a, b)return a.sortKeyb.sortKey?1:-1;);第2节. 表格分页function sequPage(tableName, rows, pageAppend)var currentPage = 0;/当前页var numPerPage = rows;/每页多少行 var $table = $(tableName); var numRows = $table.find(tbody tr).length;var numPages = Math.ceil(numRows/numPerPage);$(pageAppend).html(共( + numRows + )条记录,每页( +rows+ )条,共( +numPages+ )页);/添加新的结点/添加分页指示器 for (var i=0; inumPages; i+)$(+ (i+1) + ).bind(click, newPage:i传入新的页数，防止闭包, function(event)currentPage = event.datanewPage;/取值repaginater(currentPage, numPerPage, tableName);$(this).css(border,1px solid #000).siblings().css(border:1px solid #8CB9D7, margin-right:5px,background-color:#D6EFFF);).appendTo(pageAppend);$(pageAppend).find(span:first).css(border,1px solid #000);repaginater(currentPage, numPerPage, tableName);function repaginater(currentPage, numPerPage, tableName)/显示隐藏行var numStart = currentPage*numPerPage;var numEnd = (currentPage+1)*numPerPage-1;var $table = $(tableName);$table.find(tbody tr).show();$table.find(tbody tr:lt(+numStart+).hide();$table.find(tbody tr:gt(+numEnd+).hide();第3节. 混合上面两种效果事实上bind除了绑定规定的事件外，还能绑定自定义的事件，用trigger响应。使用定义两个.ready函数，其中第一个负责排序，第二个负责分页，其中第二个用trigger方式来调用，称为解耦。（这种方式暂时行不通，只能定义一个ready函数）$(document).ready(function()$(#ok).bind(isc, function()alert(aa););$(#ok).trigger(isc););第4节. 提示标签和折叠、显示工具提示条效果循环加click事件，然后取得鼠标位置var tPosX = event.pageX 5;var tPosY = event.pageY 5;然后显示层。折叠和扩展就是hide()和show()第7章. 构建功能型表单第1节. 改变网页元素添加样式页面中的元素有时CSS属性不多，所以很难格式化，这时可以改变其标签名，然后添加样式，但事实还是原来的标签，只是人为添加了一些属性以便格式化，下面是把length改成h3的方法，因为length占位比h3强。function init()$(fieldset).each(function()var heading = $(legend, this).remove().text();$().text(heading).prependTo(this););/如果还存在一个,在上面指定this是引用的这次循环的元素。否则以后的循环什么也得不到。确保一次只取一个legend中的文本。第2节. 表单验证由于客户端有可能禁止了JS，所以要服务器和客户端同时验证，这样才能起到一个好的响应。第3节. 类似于迅雷的搜索功能这个功能需要为文本框注册keyup事件，然后采用AJAX从数据库中搜索。其中的下拉列表，可以是一个UL，也可以是DIV，然后注册每个LI的click事件，鼠标选取功能。然后在搜索条件失去焦点时隐藏列表。$.ajax(function)方法：查询相应的API。有时我们设计布局时用到多个DIV，为了里面的元素不至于溢出到外层元素外面去，可以设置z-index，而不需要用overflow。第8章. 自定义插件插件文档官方网站是。下面是从最简单的开始，接下来的几节是对自定义插件的限制。定义自己的插件时要注意这些内容。第1节. 最简单的插件jQuery.myPlug=foo:function()alert(foo);,bar:function()alert(bar);用jQuery.myPlug.foo()或$.myPlug.foo()调用。用后一种方法调用请参考$的使用一节。如果扩展jQuery可以用下面的，但这样容易和jQuery内置方法起冲突，所以还是采用上面的方法自定义插件。用$.foo()调用。jQuery.extend(foo:function()alert(foo);,bar:function()alert(bar););第2节. 限制1对象方法环境jQuery采用隐式迭代，所以自定义的方法一般始终在环境上调用.each()方法。this依次引用每个DOM元素。jQuery.fn对象是jQtotype的别名。/添加jQuery方法,这里添加的是对象方法，而上节中是添加全局方法。jQuery.fn.xxyyz = function();/用$.xxyyz()调用/实现隐式迭代功能，所以在实现上要用each()来遍历。 jQuery.fn.xxyyz = function() this.each(functionalert(this); ;/方法连缀，需要返回jQuery对像，通常就是this所引用的对象。一般的jQuery可以是用$定义的对象，但这个对象也可以带有自己的方法，下面的例子就是返回带有方法的jQuery对象。jQuery.fn.xxyyz = function() return this.each(functionalert(this); ;/$(#div).xxyyz().hide(slow);第3节. 限制2DOM遍历方法如果jQuery对象方法在实际操作中要改变原来的jQuery对象，应该新建一个对象，否则会破坏原来的对像。jQuery.fn.grandparent = function()var grandparents = ;jQuery.each(this, function(index, value) grandparents.push(value.parentNode.parentNode););grandparents = $.unique(grandparents);/过滤掉重复元素return this.setArray(grandparents);如果用var $frood = $(#hoppy);$frood.grandparent().hide();$frood.show();会发现最后frood变成了引用父级元素的jQuery对象，因为以上方法是有破坏性的。如果把最后一句换成return this.pushStack(grandparents);就不会改变，因为这个方法是创建一个新的对象。第4节. 限制3方法的参数一般方法的参数是定义成一个映射，而不是分开的多个参数。这样可以用内置的extend方法进行过滤等。jQuery.fn.myMethod = function tt(parames)defaults=mess: aaa,age: 97；var aa = defaults.age;/这种方式可以取得值jQuery.extend(defaults, parames);/这个方法是jQuery的很重要alert(str + defaults.mess);/如果值有改变就用改变后的值。alert(num + defaults.age);调用：$(#div1).tt(age:23);/这时会自动匹配传入的参数第5节. 别名$的使用一般编写插件时不能假设$有效，一定要用jQuery全名。但在较长的插件中使用全名不太直观，一种很好的解决方法就是定义并立即执行函数的方式，利用这种方式传递全局jQuery对像，又由于参数被命名为$，所以在这个函数的内部可以使用$别名而不会导致冲突。(function(a)alert(a);)(a);/这样会马上执行此函数。函数中还可以定义内部函数。所以一般写插件时这样写(function($)函数代码(jQuery);这样$就有效了。;(function($) $.blockUI = function(opts) install(window, opts); ;$.unblockUI = function(opts) remove(window, opts); ;)(jQuery);/用$.blockUI(opts);调用，其中opts是一个映射第6节. 解决不同库的命名冲突很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$(#msg)改为jQuery(#msg)。jQuery.noConflict(); / 开始使用jQueryjQuery(div p).hide();/ 使用其他库的 $() $(content).style.display = none;第7节. 扩展jQuery已存在方法下例中easing是jQuery已存在的一个方法，linner是新增的方法。jQuery.extend(easing: linner:function() /dosomthing);第9章. JavaScript闭包当内部函数在定义它的作用域的外部被引用时，就创建了这个内部函数的一个闭包。这种情况下，这个内部函数的变量称为自由变量，称外部函数的调用环境为封闭闭包环境。从本质上来讲，如果内部函数引用了位于外部函数中的变量，相当于授权该变量能够被推迟使用。因此当外部函数调用后，这些变量不会被释放，因为闭包仍然需要使用他们。function outerFun()function innerFun()alert(aa);innerFun();/这段代码就会引发一个错误，因为innerFun是一个内部函数。第1节. 两种解决方式1. 第一种：将内部函数指定给一个全局变量。var globVar;function outerFun()function innerFun()alert(aa);globVar = innerFun;globVar();2. 第二种：在父函数中返回值来营救出内部函数的引用。var globVar;function outerFun()function innerFun()alert(aa);return innerFun;globVar = outerFun();第2节. jQuery中的闭包 在jQuery中，所有的函数全部放在.ready()当中，实际上所有的变量和代码都是局部变量和局部函数，如果在外部引用也会引起闭包。一般在一个循环中同时包含dom元素和常规的js对象时，IE无法释放任何一个对象，因为这两类对象是由不同的内存管理程序负责管理的。.ready()也相当于一个循环，所以尽量不要写下面的程序代码。$(document).ready(function()var div = cocument.getElementById(aaa);div.onclick = function();一直用jQuery的事件绑定方法，就不会导致内存泄漏。第10章. 网络JQUERY插件网络中的一些插件第1节. jQuery的表单校验插件validate官方网站：http:/bassistance.de/jquery-plugins/jquery-plugin-validation/API: http:/jquery.bassistance.de/api-browser/plugins.html1. DEMO$(#commAddForm).validate( event: keyup,rules:commbilyCode:required:true,remote: url: Welcome?MainOp=masParaManager&masParaManager=masCommunicateValidate, type: post ,eccode :required,messages:commbilyCode:required:*对象ID不能为空,remote:jQuery.forma