吴声子夜歌的博客

jQuery概述JavaScript语言是NetScape公司开发的一种脚本语言，其功能强大，交互性强，是Web前端语言发展过程中的一个重要里程碑。JavaScript的实时性、跨平台、使用简单且安全性较高等特点决定了其再Web前端涉及中的重要第位。但随着浏览器种类的推陈出新，JavaScript对浏览器的兼容性收到了极大挑战，网页前端设计者往往因浏览器的不兼容而导致工作量大增。2006年1月...

复制节点节点复制也是常见的DOM操作，例如，在实现购物车时使用鼠标将商品拖拽到购物车中，商品的拖拽功能就可以使用节点的复制来实现。在jQuery中提供了clone()方法，用于复制DOM节点（包含节点中的子节点、文本节点和属性节点），其语法格式如下：$(sselector).clone(includeEvents, [deepEvents])$(selector)：表示需要复制的节点元...

删除节点在jQuery中提供了remove()和detach()方法，用于删除元素节点；empty()方法用于清空当前元素中的内容，而元素的标签部分仍被保留。1. remove()方法：remove()方法用于删除所匹配的元素，包括该元素的文本节点和子节点。该方法返回一个jQuery对象或数组，其中包含被删除元素的基本内容，但不包含所绑定的事件和附加数据等信息。remove()方法的语法格式...

包裹节点所谓包裹节点，是指在现有节点的外围包裹一层其他元素标签，使当前节点称为新元素的子节点。jQuery提供了wrap()和wrapAll()等方法用于实现节点的包裹。1. wrap()方法：wrap()方法用于将所匹配的元素通过指定的HTML标签包裹起来，其语法格式如下：$(selector).wrap(htnml)$(selector).wrap(element)$(sele...

遍历节点在DOM模型中，提供了parentNode、childNodes、firstChild、lastChild、lastChild、previousSibling和nextSibling等原生属性，用于实现DOM树的遍历而在jQuery中进一步对DOM操作封装和扩展，常见的jQuery遍历方式有以下4种：祖先遍历、后代遍历、同袍遍历和筛选遍历。祖先遍历祖先遍历又称向上遍历，常用的方法有p...

后代遍历后代遍历又称向下遍历，常用的方法有children()、find()和contents()方法，通过向下遍历DOM树的方式来查找元素的后台元素。1. children()方法：children()方法用于返回所匹配元素的直接子元素，并允许使用选择器进行筛选，其语法格式如下：$(selector).children([childSelector])$(selector)：表示所...

同袍遍历所谓同袍节点，是指拥有相同父元素的节点。在jQuery中提供了多种同袍节点遍历的方法，如siblings()、next()、nextAll()、prev()、prevAll()和preUntil()等方法1. siblings()方法：siblings()方法用于返回所匹配元素的同袍元素（但不包括匹配元素），并允许使用选择器进行筛选，其语法格式如下：$(selector).sibl...

节点过滤在查找元素时，可以使用：first-child、:last-child和:eq()过滤选择器来选择一个特定的元素，还可以使用first()、last()和eq()方法对元素进行查找，功能与过滤器基本相同。first()方法用于返回所匹配元素中的第一个元素，last()方法用于返回所匹配元素中的最后一个元素，eq()方法用于返回所匹配元素中指定索引位置的元素。1. filter()方法...

each()方法each()方法用于实现对数组的遍历，其语法格式如下：$(selector).each(function(index, element))$.each(object, function(index, element))$(selector)和object：表示需要遍历的对象或数组function()：表示回调函数，用于对数组中的元素进行遍历(selector).ea...

插件的基本原理开发的jQuery插件常见的有3种：封装全局函数的插件、封装对象方法的插件、自定义选择器插件。1. 封装全局函数的插件：封装全局函数的插件是指将独立的函数追加到jQuery命名空间之下，通过jQuery或符号进行访问，如jQuery.each()或符号进行访问，如jQuery.each()或符号进行访问，如jQuery.each()或.each()形式。示例：<!DO...

load()方法load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程html代码并插入DOM中。其语法格式为：load(url [, data] [, callback])参数：参数名称类型说明urlString请求HTMl页面的RUL地址data(可选)Object发送至服务器的key/value数据callback(可选）...

$.get()方法：$.get()方法使用GET方式来进行异步请求。其语法格式如下：$.get(url [, data] [, callback] [, type])参数名称类型说明urlString请求的url地址data（可选）Object发送至服务器的key/value数据会作为QueryString附加到请求的URL中callback(可选...

$.ajax()方法：$.ajax()方法是jQuery最底层的Ajax实现。其语法格式如下：$.ajax(options)该方法只有一个参数，但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息，参数以key/value形式存在，所有参数都是可选的。参数名称类型说明asyncBoolean是否为异步请求（默认为true）conten...

Validation简介最常使用的JavaScript的场合就是表单验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件——Validation。Validation拥有如下特点：内置验证规则：用于必填、数字、E-mail、URL和信用卡号码等19类内置验证规则自定义验证规则：可以很方便地自定义验证规则简单而强大的验证信息提示：默认了验证信息提示，并...

1. after()方法：after()方法用于在所匹配的元素之后插入内容，其语法格式如下：$(selector).after(content)$(selector).after(function(index, htmlCode))$(selector)：表示所匹配的元素content：表示被插入的内容function(index, htmlCode)：表示将函数的返回值作为要插入...

插入节点在动态创建HTML元素节点后，还需将节点插入到文档中才有用。根据元素的插入位置不同，插入方法分为内部插入和外部插入，如下表：类型方法描述内部插入append()向每个匹配的元素内部追加由参数指定的内容appendTo()把所有匹配的元素追加到指定的元素中prepend()向每个匹配的元素内部前置内容外部插入after()在每个匹配...

在JavaScript中，通过getElementById()、getElementsByClassName()和querySelector()等方法来获取要页面中的HTML元素。示例：获取DOM对象var menuDiv = document.getElementById("menuDiv");var baseSpan = menuDiv.getElementsByClassName("b...

jQuery选择器通过jQuery选择器可以方便快捷地获得页面中的元素，然后为其添加相应行为，无需担心浏览器的兼容性问题。jQuery选择器完全继承了CSS选择的风格，将jQuery选择器分为4类：基本选择器、层次选择器、过滤选择器和表单选择器。基本选择器基本选择器是jQuery中最常用的选择器，通过元素的id、className或tagName来查找页面中的元素，如下表：选择器...

过滤选择器基本选择器和层次选择器可以满足大部分页面元素的选取需求。在jQuery中还提供了功能更加强大的过滤选择器，根据特定的过滤规则来筛选出所有需要的页面元素。过滤选择器又分为简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性过滤选择器。简单过滤选择器简单过滤选择器是过滤选择器中用得最多的一种，过滤规则主要体现在元素的位置上或一些特定的元素上，...

可见性过滤选择器可见性过滤选择器是指根据元素的可见性来筛选元素的选择器。选择器描述返回:hidden选取所有的不可见元素，或者ytpe为hidden的元素jQuery对象数组:visible选取所有的可见元素jQuery对象数组其中，:hidden选择器用于选取所有不可见元素，包括< input type=“hidden” />、< ...

子元素过滤器在页面设计过程中需要突出某些行时，可以通过基本过滤选择器中的:eq()来实现表单中行的凸显，但不能同时让多个表具有相同的效果。在jQuery中， 字元素过滤选择器可以轻松地选取所有父元素中的指定元素，并进行处理。选择器描述返回:first-child选取每个父元素中的第一个元素JQuery对象数组:last-child选取每个父元素中的最后一个元素...

属性操作在JQuery中提供了一系列方法用于操作对象的属性。方法描述attr(name|pro|key|,val|fn)获取或设置元素的属性removeAttr(name)删除元素的某一个属性prop(name|pro|key,val|fn)后去或设置元素的一个或多个属性removeProp(name)删除由prop()方法设置的属性集当元素...

样式操作在HTML代码中，通过class属性指定HTML标签的样式名；在jQuery中，可以使用attr()方法操作元素的class属性，以获取或改变元素的样式。1. addClass()方法：addClass()方法用于对一个或多个匹配元素追加样式，其语法格式如下：addClass(className)addClass(className1 className2 ... classNa...

样式操作在jQuery中，提供了html()和text()方法用于操作页面元素的内容，val()方法用于操作表单元素的值。以上方法的使用方式基本相同，当方法没有提供参数时，表示获取匹配元素的内容或值；当方法携带参数时，表示对匹配元素的内容或值进行修改。1. html()方法：html()方法用于获取第一个匹配元素的HTML，内容或修改匹配元素的HTML内容，方方法仅对XHTML文档有效，不能...

事件绑定所谓事件绑定，是指将页面元素的事件类型与事件处理函数关联到一起，当事件触发时调用事件绑定的事件处理函数。在jQuery中，提供了强大的API来执行事件的绑定操作，如bing()、one()、toggle()、live()、delegate()、on()和hover()等。1. bind()方法：bind()方法用于对匹配元素的特定事件绑定的事件处理函数，语法格式如下：bing(ty...

live()方法使用bind()方式绑定事件时，只能针对页面中存在的元素进行绑定，而bind()绑定后新增的元素上没有事件响应。使用live()方法能够对页面所有匹配元素绑定事件，包含存在的元素和将来新增的元素，其语法格式如下：live(types, fun)types：表示事件类型，是一个或多个事件类型构成的字符串，类型之间由空格隔开fn：表示所绑定的事件处理函数示例：$("d...

解除事件绑定在元素绑定事件之后，当在某个时刻不再需要该事件处理时，可以解除所绑定的事件。在jQuery中提供了unbind()和undelegate()方法，分别用于解除由bind()和delegate()方法所绑定的事件，通过参数指明需要解除的绑定事件即可。当方法没有提供参数时，表示解除该元素所有的事件绑定。在jQuery1.7+中提供了off()方法，用于解除由on()、bind()和de...

事件对象由于标准DOM和IE-DOM所提供的事件对象的方法有所不同，导致使用JavaScript在不同的浏览器中获取事件对象比较繁琐。jQuery针对该问题进行了必要的封装与扩展，已解决浏览器兼容性问题，使得在任意浏览器中都可以轻松获取事件处理对象。事件对象常见的属性列表：属性描述pageX鼠标指针相对于文档的左边缘的位置pageY鼠标指针相对于文档的上边缘的位...

创建节点根据W3C中的HTML DOM标准，HTML文档的所有内容都是节点，包括文档节点、元素节点、文本节点、属性节点和注释节点。各种节点相互关联，共同形成了DOM树。在页面中添加元素时，首先要找到该元素的上一级节点，再通过函数$ () 完成节点的创建，然后完成节点的添加操作。$ () 函数用于动态创建元素节点，其语法格式如下：$(htmlCode)htmlCode：表示动态创建DOM...

前端页面：<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html><html><head><meta charset="ISO-8859-1"><title>In...