day28ajax03jquery教程

jQuery教程作者：金云龙。如要转发，请注明出处:1. 初识jQuery1.1. jQuery简介l jQuery是继prototype之后又一个优秀的Javascript库，是一个由John Resig创建于2006年1月的开源项目。l 现在的jQuery团队主要包括核心库、UI和插件等。l jQuery凭借着简洁的语法和跨平台的兼容性，极大地简化了javascript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。1.2. jQuery的优势jQuery的宗旨是WRITE LESS,DO MORE,写更少的代码,做更多的事情。l 轻量级jQuery非常轻巧，采用Dean Edwards编写的Packer（/packer/）压缩后，大小不到30KB。如果使用Min版并且在服务器端启用Gzip压缩后，大小只有18KB。l 强大的选择器jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。l 出色的DOM操作的封装jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候能够得心应手。l 可靠的事件处理机制吸收了javascript专家Dean Edwards编写的事件处理函数的精华，使得jQuery在处理事件绑定的时候非常可靠。在预留退路、循序渐进以及非入侵式变成思想方面，jQuery做得非常不错。l 完善的Ajax使开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。l 不污染顶级变量jQuery只建立一个名为jQuery对象，其所有的函数方法都在这个对象之下。l 出色的浏览器兼容性jQuery修复了一些浏览器之间的差异，使开发者不必在开展项目前建立浏览器兼容库。l 链式操作方式jQuery中最有特色的莫过于它的链式操作方式 即对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。l 隐式迭代l 行为层与结构层的分离开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。这种将行为层与结构层完全分离的思想，可以使jQuery开发人员和HTML或其他页面开发人员各司其职，摆脱开发冲突或个人单干的开发模式。l 丰富的插件支持jQuery的易扩展性，吸引了来自全球的开发者编写jQuery的扩展插件。目前已经有超过几百种的官方插件支持，而且还不断有新插件面世。l 完善的文档jQuery的文档非常丰富。l 开源1.3. DOM对象和jQuery对象1.3.1. DOM对象1.3.2. jQuery对象l jQuery对象就是通过jQuery包装DOM对象后产生的对象。l jQuery 对象是 jQuery 独有的。l 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。1.3.3. DOM对象和jQuery对象之间转换. DOM对象转换成jQuery对象l 对于一个DOM对象，只需要用 $( ) 把DOM对象包装起来，就可以获得一个jQuery对象。 var usernameElement = document.getElementById(username);/DOM对象var $usernameElement = $(usernameElement);/jQuery对象. jQuery对象转换成DOM对象l jQuery对象是一个数组对象，可以通过index的方法，来得到相应的DOM对象 var $usernameElements = $(#username);/jQuery对象var usernameElement = $usernameElements0;/DOM对象l jQuery本身提供，通过.get(index)方法，得到相应的DOM对象 var $usernameElements = $(#username);/jQuery对象var usernameElement = $usernameElements.get(0);/DOM对象2. jQuery选择器2.1. 什么是jQuery选择器l jQuery中的选择器完全集成了CSS的风格。l 利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素。l 学会使用选择器是学习jQuery的基础。2.2. jQuery选择器的优势l 简介的写法$( ) 函数在很多javascript类库中都被作为一个选择器函数来使用，在jQuery中也不例外。l 支持CSS1到CSS3选择器jQuery选择器支持CSS1、CSS2的全部和CSS3的部分选择器，同时拥有少量独有的选择器。使用jQuery选择器时无需考虑浏览器是否支持这些选择器。l 完善的处理机制2.3. jQuery九大选择器2.3.1. 基本选择器/$(#b1).click(function()/css()方法里，改变样式的时候，参数一background里的值对应css里面的值$(#one).css(background,#0000FF););/input type=button value= 改变元素名为 的所有元素的背景色为 #00FFFF id=b2/$(#b2).click(function()$(div).css(background,#00FFFF););/$(#b3).click(function()$(.mini).css(background,#FF0033););/$(#b4).click(function()$(*).css(background,#00FF33););/input type=button value= 改变所有的元素和 id 为 two 的元素的背景色为 #3399FF id=b5/$(#b5).click(function()$(span,#two).css(background,#3399FF););2.3.2. 层次选择器/input type=button value=改变 内所有 的背景色为 #0000FF id=b1/$(#b1).click(function()$(body div).css(background,#0000FF););/input type=button value= 改变 内子 的背景色为 #FF0033 id=b2/$(#b2).click(function()$(bodydiv).css(background,#FF0033););/input type=button value= 改变 id 为 one 的下一个 的背景色为 #0000FF id=b3/$(#b3).click(function()$(#one+div).css(background,#0000FF););/input type=button value= 改变 id 为 two 的元素后面的所有兄弟的元素的背景色为 # #0000FF id=b4/$(#b4).click(function()$(#twodiv).css(background,#0000FF););/input type=button value= 改变 id 为 two 的元素所有 兄弟元素的背景色为 #0000FF id=b5/$(#b5).click(function()$(#two).siblings(div).css(background,#0000FF););2.3.3. 基础过滤选择器/$(#b1).click(function()$(div:first).css(background,#0000FF););/$(#b2).click(function()$(div:last).css(background,#0000FF););/$(#b3).click(function()$(div:not(.one).css(background,#0000FF););/$(#b4).click(function()$(div:even).css(background,#0000FF););/$(#b5).click(function()$(div:odd).css(background,#0000FF););/$(#b6).click(function()$(div:gt(3).css(background,#0000FF););/$(#b7).click(function()$(div:eq(3).css(background,#0000FF););/$(#b8).click(function()$(div:lt(3).css(background,#0000FF););/$(#b9).click(function()$(:header).css(background,#0000FF););/function ca() $(#mover).slideToggle(slow,ca); ca();$(#b10).click(function()$(:animated).css(background,red););2.3.4. 内容过滤选择器/$(#b1).click(function()$(div:contains(di).css(background,#0000FF););/$(#b2).click(function()$(div:empty).css(background,#0000FF););/$(#b3).click(function()$(div:has(.mini).css(background,#0000FF););/$(#b4).click(function()$(div:parent).css(background,#0000FF););/$(#b5).click(function()$(div:not(:contains(di).css(background,#0000FF););2.3.5. 可见度过滤选择器/$(#b1).click(function()$(div:visible).css(background,#0000FF););/$(#b2).click(function()$(div:hidden).show().css(background,#0000FF););/$(#b3).click(function()var $hids = $(input:hidden);/for(var i=0;i$hids.length;i+)/alert($hidsi.value);/* * $hids.each(function(index, domEle); * * 以每一个匹配的元素作为上下文来执行一个函数。 * * 回调函数：function(index, domEle) * * 参数一：index，索引值 * * 参数二：dom对象 */$hids.each(function(index, domEle)/alert(domEle.value);/alert($(domEle).val();/alert(this.value);alert($(this).val();););/$(#b4).click(function()var $hids = $(input:hidden);/* * $.each($hids,function(index,domEle); * * 通用例遍方法，可用于例遍对象和数组。 * * each()方法 * * 参数一：需要例遍的对象或数组。 * * 参数二：回调函数：function(index, domEle) * * 回调函数：function(index, domEle) * * 参数一：index，索引值 * * 参数二：dom对象 */$.each($hids,function(index,domEle)alert(domEle.value);););2.3.6. 属性过滤选择器/$(#b1).click(function()$(divtitle).css(background,#0000FF););/$(#b2).click(function()$(divtitle=test).css(background,#0000FF););/$(#b3).click(function()$(divtitle!=test).css(background,#0000FF););/$(#b4).click(function()$(divtitle=te).css(background,#0000FF););/$(#b5).click(function()$(divtitle$=est).css(background,#0000FF););/$(#b6).click(function()$(divtitle*=es).css(background,#0000FF););/$(#b7).click(function()$(dividtitle*=es).css(background,#0000FF););2.3.7. 子元素过滤选择器/$(#b1).click(function()/子元素过滤选择器,使用时中间必须添加空格$(divclass=one :nth-child(2).css(background,#0000FF););/$(#b2).click(function()/子元素过滤选择器,使用时中间必须添加空格$(divclass=one :first-child).css(background,#0000FF););/$(#b3).click(function()/子元素过滤选择器,使用时中间必须添加空格$(divclass=one :last-child).css(background,#0000FF););/$(#b4).click(function()/子元素过滤选择器,使用时中间必须添加空格$(divclass=one :only-child).css(background,#0000FF););2.3.8. 表单对象属性过滤选择器/input type=button value= 利用 jQuery 对象的 val() 方法改变表单内可用 元素的值 id=b1/* * */$(#b1).click(function()$(inputtype=text:enabled).val(xxxxxxxxxxx););/input type=button value= 利用 jQuery 对象的 val() 方法改变表单内不可用 元素的值 id=b2/$(#b2).click(function()$(inputtype=text:disabled).val(xxxxxxxxxxx););/* * 美容 IT 金融 管理 */$(#b3).click(function()alert($(inputtype=checkbox:checked).length););/$(#b4).click(function()var $select = $(select option:selected);$select.each(function(index,domEle)alert($(domEle).text();););2.3.9. 表单选择器/$(#b1).click(function()$(:input).each(function(index,domEle)alert($(domEle).val();););3. jQuery 中的 DOM 操作3.1. 查找节点l 查找元素节点var $usernameElement = $(#username);alert(jquery +$usernameElement.val();l 查找属性节点jQuery查找到需要的元素节点后，使用attr()方法来获取它的各种属性的值。$usernameElement.attr(value);l 查找文本节点jQuery查找到需要的元素节点后，使用text()方法来获取它的文本内容。$usernameElement.text();3.2. 创建节点l 创建元素节点使用 jQuery 的工厂函数 $(HTML) 。该工厂函数会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回。当创建单个元素时, 需注意闭合标签。var $option = $();l 创建文本节点n 创建元素节点后，使用text()方法来设置其节点的文本内容。$option.text(北京);n 创建元素节点时，直接将其节点的文本内容插入其中。var $option = $(北京);l 创建属性节点n 创建元素节点后，使用attr()方法来设置其节点的属性。$option.attr(value,北京);n 创建元素节点时，直接将其节点的属性插入其中。var $option = $(北京);3.3. 插入节点3.3.1. 内部插入节点l append(content) :向每个匹配的元素的内部的结尾处追加内容l appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处l prepend(content):向每个匹配的元素的内部的开始处插入内容l prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处/* append(content) :向每个匹配的元素的内部的结尾处追加内容/append后面的元素插入到append前面的元素的后面$(#fk).append($(#bj);/* appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处/append前面的元素插入到append后面的元素的后面$(#xj).appendTo($(#tj);/* prepend(content):向每个匹配的元素的内部的开始处插入内容/append后面的元素插入到append前面的元素的前面$(#city).prepend($(#fk);/* prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处/append前面的元素插入到append后面的元素的前面$(#xj).prependTo($(#tj);3.3.2. 外部插入节点l after(content) :在每个匹配的元素之后插入内容 l before(content):在每个匹配的元素之前插入内容 l insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面 l insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面 /* after(content) :在每个匹配的元素之后插入内容/把after后面的元素插入到after前面的元素的后面$(#p3).after($(#bj);/* before(content):在每个匹配的元素之前插入内容 /把before后面的元素插入到before前面的元素的前面$(#p2).before($(#tj);/* insertAfter(content):把所有匹配的元素插入到另一个、指定的元素集合的后面 /把insertAfter前面的元素插入到insertAfter后面的元素的后面 $(#p1).insertAfter($(#bj);/* insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面 /把insertAfter前面的元素插入到insertAfter后面的元素的前面$(#p1).insertBefore($(#bj);3.4. 删除节点北京海淀区天津河西区重庆 3.4.1. remove()方法$(#bj).remove();3.4.2. empty()方法$(#tj).empty();3.5. 复制节点保存 段落/button增加事件$(button).click(function()alert(button););/克隆button 追加到p上 ,但事件不克隆/clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为$(button).clone().appendTo($(p);/克隆button 追加到p上 ,但事件也克隆/clone(true): 复制元素的同时也复制元素中的的事件 $(button).clone(true).appendTo($(p);3.6. 替换节点 段落段落段落保存3.6.1. replaceWith()$(button).replaceWith(tttttttt);3.6.2. replaceAll()$(保存).replaceAll($(p);3.7. 包裹节点3.7.1. wrap()jQueryjQuery/jQue