JQuery学习笔记（一）

学习目标

• 掌握使用jQuery操作样式
• 掌握使用jQuery操作DOM
• 能使用jQuery绑定事件
• 能使用jQuery做出网页动画
• 掌握jQuery的Ajax使用方法
• 掌握常用调试技巧

1、jQuery操作样式

1.1、.attr()

jQuery中用attr()方法来获取和设置元素特性。

• .attr(attributeName)—String
• .attr(attributeName,value)—jQuery
• .attr(attributes)—jQuery
• .attr(attributeName,function(indx,attr))—jQuery

特性（attribute）就是DOM节点自带的属性，例如html中常用的id、class、title、align等。
属性（property）是这个DOM元素作为对象，其附加的内容，例如：tagName、nodeName、nodeType、defaultChecked好defaultSelected使用.prop()方法进行取值或赋值等。

1.2、remove()

为匹配元素集合中的每个元素移除一个特性（attribute）
.removeAttr(attributeName)—jQuery

1.3、.prop()与.removeProp()

• .prop(propertyName)—String
• .prop(propertyName,value)—jQuery
• .prop(properties)—jQuery
• .prop(propertyName,function(indx,attr))—jQuery

removeProp()方法为匹配的元素集合中的每个元素移除一个属性（property）

• .removeProp(propertyName)—jQuery

1.4、.html

获取集合中第一个元素匹配的html内容或设置每一个匹配严肃的html内容。

• .html()—String
• .html(htmlString)—jQuery
• .html(function(index,oldhtml))—jQuery

1.5、.text()

得到匹配元素接种每个元素的文本内容结合，包括他们的后代，或设置匹配元素结合中每个元素的文本内容未指定的文本内容。

• .text()—String
• .text(textString)—jQuery
• .text(function(index,text))—jQuery

1.6、.val()

获取匹配元素的几何中的第一个元素的当前值或设置每个匹配元素的值

• .b=val()—[object Object],[object,Object],[object Object]
• .val()—jQuery
• .va(function(index, value))—jQuery

1.7、.addClass()

用于动态增加class类名

• .addClass(className)—jQuery
• .addClass(function(index,currentClass))—jQuery

1.8、removeClass()

去除单个、多类、或者每个与元素相匹配类

• .removeClass([className])—jQuery
• .removeClass(funtion(index,class))—jQuery

1.9、toggleClass()

在匹配元素几何中的每个元素上添加或删除一个或多个央视类，取决于这个样式雷是否存在或值切换属性。即：如果存在（不存在）就删除（添加一个类）。

• .toggleClass(className)—jQuery
• .toggleClass(className,switch)—jQuery
• .toggleClass([switch])—jQuery
• .toggleClass(function(index,class,switch)[,switch])—jQuery

1.10、.css()

• 获取元素样式属性的计算值或者设置元素的css属性。
• .css(propertyName)—String
• .css(propertyNames)—String
• .css(proeprtyName,value)—jQuery
• .css(propertyName,function(index,value))—jQuery
• .css(properties)—jQuery

1.11、.css()与.addClass()

通过.addClass()我们可以批量的给相同的元素设置统一规则，变动起来比较方便，可以同意修改删除。如果通过.css()方法就需要制定每一个元素是一一的修改，日后维护也要一一的修改，比较麻烦。
通过.css方法设置样式属性优先级要熬与.addClass方法。

2、jQuery操作DOM

2.1、用jQuery()来创建节点

发挥一个匹配的元素集合，或者同股传入的HTML字符串创建jQuery节点

• jQyery(selector [, context])—jQuery
• jQuery(html [, ownerDocument])—jQuery

2.2、.append()与.appendTo()

append()这个操作与对指定的元素执行原生的appedChild方法雷死，将它们添加到匹配元素内部末尾处，作为其子节点。

• .append(content [, content])—jQuery
• .append(function(index,html))—jQuery
• .appendTo(target)—jQuery

2.3、.prepend()与.prependTo()

prepend()将内容添加到匹配元素内部开始出，作为其子节点。

• .prepend(content [, content])—jQuery
• .prepend(function(index,html))—jQuery
• .prependTo(target)—jQuery

2.4、.after()和.before()

after()在匹配元素的后面插入所制定的内容，作为其兄弟节点
before()在匹配元素的前面插入参数所制定的内容，作为其兄弟节点

• .after(content [, content])—jQuery
• .after(function(index))—jQuery
• .before(content [, content])—jQuery
• .before(function)—jQuery

2.5、.inserAfter()与.insertBefore()

.after()和.insertAfter()实现同样的功能。主要的不同时语法——特别是（插入）内容和目标的位置。
.before()和.insertBefore()实现同样的功能。主要区别是语法——特别是（插入）内容和目标的位置。

• .insertAfter(target)—jQuery
• .insertBefore(target)—jQuery

2.6、.empty()与.remove()

empty溢出了匹配元素中的所有子节点
.empty()—jQuery
remove会将元素自身移除，同时也会溢出元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。

• .remove([selector)—jQuery

2.7、detach()

detach()方法与remove()类似，与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

• .detach([selector])—jQuery

2.8、clone()

clone()深度复制所有匹配的元素集合，包括所有匹配的元素、匹配原素下级元素、文字节点。
如果节点有事件或者数据之类的其他处理，我们需要通过clone(true)传递一个布尔值true用来指定，这样不仅仅只是科隆单纯的节点结构，还要把附带的事件与数据给一并克隆了。

• .clone([withDataAndEvents])—jQuery
• .clone([withDataAndEvents][,deepWithDataAndEvents])—jQuery

2.9、replaceWith()

replaceWith()用提供的内容替换集合中所有匹配的元素并返回被删除元素的集合。
.replaceAll和.replaceWith()功能类似，主要是目标和源的位置区别
.replaceWwith()与.replaceAll()方法会删除与节点相关联的所有数据和事件处理程序。

• .replaceWith(newContent)—jQuery
• .replaceWith(function)—jQuery

2.10、jQuery遍历

• children()
• find()
• parent()
• parents()
• closest()
• next()
• siblings()
• add()
• each()

3、jQuery事件

3.1、.click()

绑定一个点击事件的处理函数。

• .click(handler(eventObject))—jQuery
• .click()[]eventData],handler(eventObject))—jQuery

3.2、.blur()与.focus()

.focus()绑定表达元素获得焦点的时候事件处理函数。
.blur()绑定表单元素失去焦点的时候事件处理函数。

• .focus(handler(eventObject))—jQuery
• .focus([eventData],handler(eventObject))—jQuery

3.3、.on()

jQuery on()方法诗官方推荐的绑定事件的一个方法。
事件绑定在最上层div元素上，当用户出发在a元素上，事件将网上冒泡，一直会冒泡在div元素上。如果提供了单个参数，那么事件在网上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数。

• .on(events [, selector] [, data], handler(eventObject))—jQuery
• .on(events [, selector] [, data])—jQuery

3.4、off()

通过off()方法移除事件处理函数。
根据on绑定事件的一些疼，off方法也可以通过相应的传递组合事件名，名字空间，选择器或处理函数来移除绑定在元素上制定的事件处理函数。当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除。

• .off(events [, selector] [, handler(eventObject)])—jQuery
• .off(events [, selector])—jQuery
• .off()—jQuery

4、jQuery操作动画

4.1、.animate()

.animate()方法允许我们在任意的数值的css属性上创建动画。两种语法的使用，几乎差不多，唯一必要二属性就是一组css属性键值对。这组属性和用于这只.css()方法的属性键值对类似，除了属性范围做了更多闲置。第二个参数开始可以单独传递多个实参也可以合并成一个对象传递了。

• .animate(properties [, duration] [, easing] [, complete])—jQuery
• .animate(properties, options)—jQuery

5、jQuery的Ajax

5.1、.jQuery.ajax()

执行一个异步的HTTP请求。

• jQuery.ajax(url [, settings])—jqXHR

• jQuery.ajax([settings])—jqXHR

• async：Boolean默认设置下，所有请求均为异步请求

• url：String发送请求地址

• data：Plain,Object发送到服务器的数据

• dataType：String与其服务器返回的数据类型

• type：String请求方式（"POST"或者"GET"）

• error：Function请求失败时调用此函数。

• success：Function请求成功后毁掉函数。

• beforeSend：Function发送请求前调用此函数

• dataFilter：Function给Ajax返回的原始数据进行预处理的函数。

6、调试技巧

6.1、使用Chrome开发工具调试

• 控制台Console