Jquery中使用 each和call

合集下载

jquery使用方法

jquery使⽤⽅法jQuery是⽬前使⽤最⼴泛的javascript函数库。

据统计，全世界排名前100万的⽹站，有46%使⽤jQuery，远远超过其他库。

微软公司甚⾄把jQuery作为他们的官⽅库。

对于⽹页开发者来说，学会jQuery是必要的。

因为它让你了解业界最通⽤的技术，为将来学习更⾼级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。

⼀、选择⽹页元素jQuery的基本设计和主要⽤法，就是"选择某个⽹页元素，然后对其进⾏某种操作"。

这是它区别于其他函数库的根本特点。

使⽤jQuery的第⼀步，往往就是将⼀个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。

选择表达式可以是CSS选择器：1 $(document)//选择整个⽂档对象2 $('#myId')//选择ID为myId的⽹页元素3 $('div.myClass')//选择class为myClass的div元素4 $('input[name=first]')//选择name属性等于first的input元素也可以是jQuery特有的表达式：1 $('a:first')//选择⽹页中第⼀个a元素2 $('tr:odd')//选择表格的奇数⾏3 $('#myForm :input')//选择表单中的input元素4 $('div:visible') //选择可见的div元素5 $('div:gt(2)')//选择所有的div元素，除了前三个6 $('div:animated')//选择当前处于动画状态的div元素⼆、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩⼩结果集：1 $('div').has('p'); //选择包含p元素的div元素2 $('div').not('.myClass'); //选择class不等于myClass的div元素3 $('div').filter('.myClass'); //选择class等于myClass的div元素4 $('div').first(); //选择第1个div元素5 $('div').eq(5); //选择第6个div元素有⼀些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动⽅法：1 $('div').next('p'); //选择div元素后⾯的第⼀个p元素2 $('div').parent(); //选择div元素的⽗元素3 $('div').closest('form'); //选择离div最近的那个form⽗元素4 $('div').children(); //选择div的所有⼦元素5 $('div').siblings(); //选择div的同级元素三、链式操作选中⽹页元素以后，就可以对它进⾏某种操作。

jQuery中的Ajax几种请求方法

jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。

废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到).1. load( url, [data], [callback] ) ：载入远程HTML 文件代码并插入至DOM 中。

url (String) : 请求的HTML页的URL地址。

data (Map) : (可选参数) 发送至服务器的key/value 数据。

callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

这个方法默认使用GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。

jQuery 1.2 中，可以指定选择符，来筛选载入的HTML 文档，DOM 中将仅插入筛选出的HTML 代码。

语法形如"url #some > selector"。

这个方法可以很方便的动态加载一些HTML文件，例如表单。

示例代码：$(".ajax.load").load("[url]/QLeelulu/archive/2008/03/30/1130270.html[/url] .post",function (responseText, textStatus, XMLHttpRequest){this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0]//alert(responseText);//请求返回的内容//alert(textStatus);//请求状态：success，error//alert(XMLHttpRequest);//XMLHttpRequest对象});这里将显示结果。

jquery的each循环

jquery的each循环jquery的each循环,主要有2种:1) 循环数据语法: jQuery.each(object,[callback])参数: object: 需要遍历的对象或数组。

callback: 每个成员/元素执⾏的回调函数.回调函数拥有两个参数：第⼀个为对象的成员或数组的索引，第⼆个为对应变量或内容。

如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

例⼦1: 循环⼀个列表<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="/jquery-3.1.1.min.js" ></script><script>var arr=[123,456,789,0];$.each(arr,function(i,j){console.log(i,j);})</script></head><body>显⽰结果如下: 列表的每个索引和他对应的值例⼦2: 循环⼀个对象var obj={"name":"tom","age":15};$.each(obj,function(i,j){console.log(i,j);});结果:显⽰对象中的key和value2)循环标签元素代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="/jquery-3.1.1.min.js" ></script><script>$(function () {$("ul li a").each(function () {console.log($(this).html())})})</script></head><body><ul><li><a href="">关于我们</a></li><li><a href="">联系⽅式</a></li><li><a href="">产品答疑</a></li></ul></body></html>注意: 这样写⼀定要写$(function (){}),$(function (){})是$(document).ready(function()的简写,会在DOM加载完毕之后执⾏.。

jquery中$.ajax（）方法使用详解

jquery中$.ajax（）⽅法使⽤详解1.url说明：发送请求的地址（默认为当前页⾯），要求是String类型的参数，⽐如是.net下，"~wexin(控制器)/getweinxinmenu(动作)"，2.type说明：请求⽅法(post或者get)，默认是get，要求是String类型的参数。

其他的htpp请求如（put、delete）等也⽀持，但是要浏览器⽀持3.timeout说明：设置请求超时时间（毫秒），要求是number类型的参数。

此设置将覆盖$.ajaxSetup()⽅法的全局设置。

4.async说明：默认值为true，所有请求是异步，要求是Bool类型的参数，如果需要发送同步请求，将此项设置为false。

注意：同步时浏览器会被锁住。

5.cache说明：默认为true(当datatype为script时，默认为false)从浏览器缓存中加载请求信息，要求是Bool类型的参数。

6.data说明：发送到服务器的数据，要求是Object或string类型的参数。

如果已经不是字符串，将⾃动转换为字符串格式。

get请求中将附加在url 后。

防⽌这种⾃动转换，可以查看 processData选项。

对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。

如果是数组，JQuery将⾃动为不同值对应同⼀个名称。

例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

7.dataType:说明：预期服务器返回的数据类型，要求为String类型的参数。

如果不指定，JQuery将⾃动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。

jquery.map（）方法的使用详解

jquery.map（）⽅法的使⽤详解原型⽅法map跟each类似调⽤的是同名静态⽅法，只不过返回来的数据必须经过另⼀个原型⽅法pushStack⽅法处理之后才返回，源码如下：map: function( callback ) {return this.pushStack( jQuery.map(this, function( elem, i ) {return callback.call( elem, i, elem );}));},本⽂主要就是分析静态map⽅法⾄于pushStack在下⼀篇随笔⾥⾯分析；⾸先了解下map的使⽤（⼿册内容）$.map将⼀个数组中的元素转换到另⼀个数组中。

作为参数的转换函数会为每个数组元素调⽤，⽽且会给这个转换函数传递⼀个表⽰被转换的元素作为参数。

转换函数可以返回转换后的值、null（删除数组中的项⽬）或⼀个包含值的数组，并扩展⾄原始数组中。

参数arrayOrObject,callbackArray/Object,FunctionV1.6arrayOrObject:数组或者对象。

为每个数组元素调⽤，⽽且会给这个转换函数传递⼀个表⽰被转换的元素作为参数。

函数可返回任何值。

另外，此函数可设置为⼀个字符串，当设置为字符串时，将视为“lambda-form”（缩写形式？），其中 a 代表数组元素。

如“a * a”代表“function(a){ return a * a; }”。

⽰例1：//将原数组中每个元素加 4 转换为⼀个新数组。

//jQuery 代码:$.map( [0,1,2], function(n){return n + 4;});//结果:[4, 5, 6]⽰例2：//原数组中⼤于 0 的元素加 1 ，否则删除。

//jQuery 代码:$.map( [0,1,2], function(n){return n > 0 ? n + 1 : null;});//结果:[2, 3]⽰例3：//原数组中每个元素扩展为⼀个包含其本⾝和其值加 1 的数组，并转换为⼀个新数组//jQuery 代码:$.map( [0,1,2], function(n){return [ n, n + 1 ];});//结果:[0, 1, 1, 2, 2, 3]可以看出map⽅法跟each⽅法类似通过循环每个对象或者数组的“项”执⾏回调函数来实现对数组或者对象的操作，但是这两个⽅法也有很多不同点⽐如each()返回的是原来的数组，并不会新创建⼀个数组，⽽map则会创建新的数组，；each遍历是this指向当前数组或对象值，map则指向window，因为在源码中并不像each那样使⽤对象冒充；例如：var items = [1,2,3,4];$.each(items, function() {alert('this is ' + this);});var newItems = $.map(items, function(i) {return i + 1;});// newItems is [2,3,4,5]//使⽤each时，改变的还是原来的items数组，⽽使⽤map时，不改变items，只是新建⼀个新的数组。

如何优化JQueryeach（）函数的性能

如何优化JQueryeach（）函数的性能如果对jQuery这东西只停留在⽤的层⾯，⽽不知其具体实现的话，真的很容易⽤出问题来。

这也是为什么近期我⼀直不怎么推崇⽤jQuery，这框架的API设定就有误导⼈们⾛上歧途之嫌。

01$.fn.beautifyTable = function(options) {02 //定义默认配置项，再⽤options覆盖03 return this.each(function() {04 var table = $(this),05 tbody = table.children('tbody'),06 tr = tbody.children('tr'),07 th = tbody.children('th'),08 td = tbody.children('td');09 //单独内容的class10 table.addClass(option.tableClass);11 th.addClass(options.headerClass); //112 td.addClass(options.cellClass); //21314 //奇偶⾏的class15 tbody.children('tr:even').addClass(options.evenRowClass); //316 tbody.children('tr:odd').addClass(options.oddRowClass); //41718 //对齐⽅式19 tr.children('th,td').css('text-align', options.align); //52021 //添加⿏标悬浮22 tr.bind('mouseover', addActiveClass); //623 tr.bind('mouseout', removeActiveClass); //72425 //点击变⾊26 tr.bind('click', toggleClickClass); //827 });28};总的来说，这段代码不错，思路清晰，逻辑明确，想要做什么也通过注释说得很明⽩了。

jquery $的用法

jquery $的用法
jQuery是一个JavaScript库，它简化了HTML文档遍历、事件处理、动画效果以及Ajax交互的过程。

$是jQuery中最常用的函数，它可以帮助我们快速地获取和操作HTML元素。

$()函数可以接受一个参数，这个参数可以是选择器、HTML代码、DOM元素、DOM元素数组、函数等。

下面是一些常用的$()函数的用法：
1. $(document).ready()函数：当文档加载完毕后执行函数中的代码。

2. $(selector)函数：根据选择器选取页面中的元素，返回一个jQuery对象。

3. $(element)函数：将DOM元素转换为jQuery对象。

4. $(function)函数：当文档加载完毕后执行函数中的代码，等价于$(document).ready()函数。

5. $(html)函数：将HTML代码转换为DOM元素，并返回一个jQuery对象。

6. $(callback)函数：在DOMContentLoaded事件发生后执行回调函数中的代码。

除了$()函数之外，jQuery还提供了许多其他的函数和方法，例如：addClass()、removeClass()、css()、animate()、
click()、get()等，它们可以帮助我们更加方便地操作HTML元素和处理页面事件。

总之，jQuery的$()函数是一个非常强大和灵活的工具，它可以帮助我们快速地操作HTML元素和处理页面事件，从而为我们的Web开发带来更高效、更便捷的体验。

JQuery $.each用法

通过它，你可以遍历对象、数组的属性值并进行处理。

使用说明each函数根据参数的类型实现的效果不完全一致：1、遍历对象(有附加参数)$.each(Object, function(p1, p2) {this; //这里的this指向每次遍历中Object的当前属性值p1; p2; //访问附加参数}, ['参数1', '参数2']);2、遍历数组(有附件参数)$.each(Array, function(p1, p2){this; //这里的this指向每次遍历中Array的当前元素p1; p2; //访问附加参数}, ['参数1', '参数2']);3、遍历对象(没有附加参数)$.each(Object, function(name, value) {this; //this指向当前属性的值name; //name表示Object当前属性的名称value; //value表示Object当前属性的值});4、遍历数组(没有附加参数)$.each(Array, function(i, value) {this; //this指向当前元素i; //i表示Array当前下标value; //value表示Array当前元素});下面提一下jQuery的each方法的几种常用的用法Js代码var arr = [ "one", "two", "three", "four"];$.each(arr, function(){alert(this);});//上面这个each输出的结果分别为：one,two,three,fourvar arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]$.each(arr1, function(i, item){alert(item[0]);});//其实arr1为一个二维数组，item相当于取每一个一维数组，//item[0]相对于取每一个一维数组里的第一个值//所以上面这个each输出分别为：1 4 7var obj = { one:1, two:2, three:3, four:4}; $.each(obj, function(key, val) {alert(obj[key]);});//这个each就有更厉害了，能循环每一个属性//输出结果为：1 2 3 4。

国开电大 JavaScript程序设计实训八：使用jQuery技术实现企业信息展示系统的相关功能

国开电大 JavaScript程序设计实训八：使用jQuery技术实现企业信息展示系统的相关功能使用jQuery技术实现企业信息展示系统的相关功能，旨在掌握jQuery的基本知识和应用方法，进一步理解Ajax程序的设计方法，并能够利用所学知识设计简单的应用程序。

具体内容包括用jQuery技术实现产品的查询、添加、修改和删除，以及用户的登录、注册、查询和删除。

为了实现这些功能，下载jQuery库，并将在客户端网页中使用的MyTools中的函数转换为jQuery函数。

同时，还需要进一步完善功能，优化界面。

以下是一个代码示例，其中Jq是一个自定义的jQuery类，包含了一些常用的方法，如添加事件、获取节点等。

javascriptclass Jq {constructor(arg。

root) {记录上次操作的节点；if (typeof root == 'undefined') {this.prevObject = new Jq(document。

null);if (root) {this.prevObject = root;if (typeof arg == "string") {字符串let eles = document.querySelectorAll(arg);this.addEvent(eles);else if (typeof arg == "n") {window.addEventListener("DOMContentLoaded"。

arg); else {原生节点；if (typeof arg.length == "undefined") {this[0] = arg;this.length = 1;else {this.addEvent(arg);addEvent(eles) {eles.forEach((el。

JQuery中each（）的使用方法说明

JQuery中each（）的使⽤⽅法说明each()函数是基本上所有的框架都提供了的⼀个⼯具类函数，通过它，你可以遍历对象、数组的属性值并进⾏处理。

jQuery和jQuery对象都实现了该⽅法，对于jQuery对象，只是把each⽅法简单的进⾏了委托：把jQuery对象作为第⼀个参数传递给jQuery的each⽅法.换句话说：jQuery提供的each⽅法是对参数⼀提供的对象的中所有的⼦元素逐⼀进⾏⽅法调⽤。

⽽jQuery 对象提供的each⽅法则是对jQuery内部的⼦元素进⾏逐个调⽤。

each函数根据参数的类型实现的效果不完全⼀致：1、遍历对象(有附加参数)复制代码代码如下:$.each(Object, function(p1, p2) {this; //这⾥的this指向每次遍历中Object的当前属性值p1; p2; //访问附加参数}, ['参数1', '参数2']);2、遍历数组(有附件参数)复制代码代码如下:$.each(Array, function(p1, p2){this; //这⾥的this指向每次遍历中Array的当前元素p1; p2; //访问附加参数}, ['参数1', '参数2']);3、遍历对象(没有附加参数)复制代码代码如下:$.each(Object, function(name, value) {this; //this指向当前属性的值name; //name表⽰Object当前属性的名称value; //value表⽰Object当前属性的值});4、遍历数组(没有附加参数)复制代码代码如下:$.each(Array, function(i, value) {this; //this指向当前元素i; //i表⽰Array当前下标value; //value表⽰Array当前元素});下⾯提⼀下jQuery的each⽅法的⼏种常⽤的⽤法var arr = [ "one", "two", "three", "four"];$.each(arr, function(){alert(this);});//上⾯这个each输出的结果分别为：one,two,three,fourvar arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]$.each(arr1, function(i, item){alert(item[0]);});//其实arr1为⼀个⼆维数组，item相当于取每⼀个⼀维数组，//item[0]相对于取每⼀个⼀维数组⾥的第⼀个值//所以上⾯这个each输出分别为：1 4 7var obj = { one:1, two:2, three:3, four:4};$.each(obj, function(key, val) {alert(obj[key]);});//这个each就有更厉害了，能循环每⼀个属性//输出结果为：1 2 3 4JQuery中的each函数在1.3.2的官⽅⽂档中的描述如下：each(callback)以每⼀个匹配的元素作为上下⽂来执⾏⼀个函数。

jqeach方法

jqeach方法
jqeach方法是jQuery库中的一个方法，用于遍历一个数组或对象，并对每个元素执行一个回调函数。

它类似于JavaScript中的forEach方法，但具有更丰富的功能和更强大的语法。

使用jqeach方法，您可以轻松地遍历数组或对象，并对每个元素执行自定义的操作。

例如，您可以使用它来过滤数组中的元素，将所有元素转换为大写，或者将元素添加到新的数组中。

jqeach方法的语法如下：
$.each(object, callback);
其中，object是要遍历的数组或对象，callback是一个回调函数，它将被应用于每个元素。

回调函数的语法如下：
function(index, value) {
// 回调函数的操作代码
}
其中，index是当前元素的索引，value是当前元素的值。

使用jqeach方法时，您可以选择使用回调函数的参数，也可以将它们省略。

例如，如果您只需要访问数组或对象中的值，并不关心索引，那么您可以简单地使用value参数。

反之，如果您需要索引，那么您可以使用index参数。

总的来说，jqeach方法是一个非常有用的工具，它可以让您轻松地遍历数组或对象，并对每个元素执行自定义的操作。

如果您正在
使用jQuery库，那么它应该是您的常用方法之一。

jquery学习总结(超级详细)

一、选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。

这是它区别于其他函数库的根本特点。

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为＄），然后得到被选中的元素。

选择表达式可以是CSS选择器:＄（document)//选择整个文档对象$（'#myId'）//选择ID为myId的网页元素$('div。

m yClass’)//选择class为myClass的div元素＄('input[name=first]’）//选择name属性等于first的input元素也可以是jQuery特有的表达式:＄('a：first’)//选择网页中第一个a元素$（’tr：odd’）//选择表格的奇数行＄(’#myForm ：input'）//选择表单中的input元素$（’div：visible’) //选择可见的div元素$（'div:gt（2)')//选择所有的div元素,除了前三个＄(’div:animated’)//选择当前处于动画状态的div元素二、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩小结果集：* $（'div').has（’p’）; //选择包含p元素的div元素＊$（’div'）.not('。

myClass'）；//选择class不等于myClass的div元素＊$(’div’）.filter（'.myClass'）; //选择class等于myClass的div元素＊$（’div’).first（); //选择第1个div元素＊$（’div')。

eq(5); //选择第6个div元素有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：$（'div’)。

JQuery核心用法

JQuery快速入门快速入门
讲座内容
1、jQuery是什么、是什么 2、jQuery核心函数、核心函数 3、jQuery对象访问、对象访问 4、jQuery选择器使用、选择器使用 5、 jQuery属性的使用、属性的使用 6、jQuery筛选、筛选
官方解释：官方解释： jQuery是一个以前未曾有过的是一个以前未曾有过的JavaScript库。是一个以前未曾有过的库他快速、简洁，能够很轻易地处理HTML文档、控制事件、给页面添文档、他快速、简洁，能够很轻易地处理文档控制事件、加动画和Ajax效果。效果。加动画和效果 jQuery是为了改变是为了改变JavaScript的编写方式而设计的。的编写方式而设计的。是为了改变的编写方式而设计的他适合所有人：设计师、开发人员、极客、商业应用... 他适合所有人：设计师、开发人员、极客、商业应用体积小：压缩版），精简版），体积小：26.5KB（1.2.1压缩版），（压缩版），45.3KB（1.2.1精简版），（精简版 78.6KB（1.2.1完整版）...20.7KB（1.1.2压缩版），完整版）压缩版），（完整版（压缩版），57.9KB（1.1.2 （完整版）完整版）兼容性：支持CSS 1-3和基本的和基本的XPath 兼容性：支持和基本的跨浏览器：跨浏览器：IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+（向后兼容）（向后兼容）
对象，函数。如果你想得到 jQuery对象，可以使用 $(this) 函数。对象 jQuery 代码代码: $("img").each(function(){ $(this).toggleClass("example"); });

jquery中each的用法

jquery中each的用法在使用jQuery编写JavaScript代码时，经常会遇到需要遍历一个集合或数组的情况。

而jQuery中的each()方法便是用来实现遍历功能的。

使用each()方法可以对集合或数组中的每个元素进行迭代，并对每个元素执行指定的函数。

具体用法如下：```javascript$(selector).each(function(index, element) {// 执行操作});```其中，`$(selector)`为jQuery选择器，用于选择要遍历的元素集合。

`function(index, element)` 是需要执行的函数，它接受两个参数：index表示元素在集合中的索引，element表示当前遍历到的元素。

在函数中，可以根据需求对每个元素进行相应的操作。

例如，可以通过使用`$(this)`来获取当前遍历到的元素，并进行操作。

以下是一个示例，展示了如何使用each()方法遍历一个`<ul>`中的每个`<li>`元素，并将每个元素的文本内容输出到控制台：```javascript$("ul li").each(function(index, element) {var text = $(this).text();console.log("第 " + index + " 个元素的文本内容是：" + text);});```这段代码会遍历所有的`<li>`元素，并输出每个元素的文本内容到控制台。

需要注意的是，jQuery的each()方法在遍历时是支持`return false`的。

当在函数中的某个地方返回`false`时，将会立即停止遍历。

通过学习以上使用each()方法的示例和说明，相信您已经了解了jQuery中each()方法的基本用法和原理。

有了它，您可以更加方便地遍历和操作元素集合或数组。

Jquery获取对象的几种方式（转载）

Jquery获取对象的⼏种⽅式（转载）1、先讲讲JQuery的概念JQuery⾸先是由⼀个 America 的叫什么 John Resig的⼈创建的，后来⼜很多的JS⾼⼿也加⼊了这个团队。

其实 JQuery是⼀个JavaScript的类库，这个类库集合了很多功能⽅法，利⽤类库你可以⽤简单的⼀些代码实现⼀些复杂的JS效果。

2、JQuery实现了代码的分离不⽤再⽹页中加⼊如：onclick之类的事件来调⽤函数了，直接引⼊JQuery类库和⾃⼰编写的JQuery代码就可以了；如： $(function(){ $("Element").click{function(){ alert("点击我哦！"); } } })；上⾯的代码中只要定义了Element 这个元素后⾯的click是动作alert("点击我哦！");这个是要执⾏的代码，当然你可以有很多的操作在这个函数中；这⾥⾯的$这个号代表JQuery的意思，就是引⽤类库了。

我是这么理解的； 3、JQuery的核⼼的⼀些⽅法 each(callback) '就像循环 $("Element").length; ‘元素的个数，是个属性 $("Element").size(); ’也是元素的个数，不过带括号是个⽅法 $("Element").get(); ‘某个元素在页⾯中的集合，以数组的形式存储 $("Element").get(index); ’功能和上⾯的相同，index表⽰第⼏个元素，数组的下标$("Element").get().reverse(); ‘把得到的数组⽅向 $("Element1").index($("Element2")); ’元素2在元素1中的索引值是。

jquery_详细中文说明教学文档

目录部分常用方法速查 (2)选择器 (2)表单选择器 (4)属性 (5)节点匹配 (6)文本处理 (12)Css (13)事件 (15)动画效果 (18)Ajax (20)其他 (24)Ajax (24)1. load( url, [data], [callback] ) (24)2. jQuery.get( url, [data], [callback] ) (25)3. jQuery.post( url, [data], [callback], [type] ) (26)4. jQuery.getScript( url, [callback] ) (27)5. jQuery Ajax 事件 (27)6. jQuery.ajax( options ) (29)7. jQuery.ajaxSetup( options ) (31)8. serialize() 与serializeArray() (31)1部分常用方法速查$()如果()内是css选择器：找到相应的节点包装成JQuery对象DOM对象：直接包装成JQuery对象一段HTML代码：先创建DOM对象，再包装成JQuery对象$("<div></div>").appendTo($(obj))返回jQuery$(#id)根据给定的ID匹配一个元素。

返回jQuery$(element)根据给定的元素名匹配所有元素返回Array<Element(s)>$(.class)根据给定的类匹配元素。

返回Array<Element(s)>$(*)匹配所有元素返回Array<Element(s)>$(selector1,selector2,selectorN)将每一个选择器匹配到的元素合并后一起返回。

返回Array<Element(s)>选择器parent > child取得<div>下的所有<span>子节点$("div > span")返回Array<Element(s)>:first选取所有<div>元素中第一个<div>元素$("div:first")返回jQuery:last选取所有<div>元素中最后一个<div>元素$("div:last")返回jQuery:not(Selector)选取所有class不是mytest的<div>元素$("div:not(.mytest)")返回Array<Element(s)>:even查找表格的偶数行，从0开始计数$("tr:even")返回Array<Element(s)>:odd查找表格的奇数行，从0开始计数$("tr:odd")返回Array<Element(s)>:eq(index)匹配一个给定索引值的元素，从0开始计数$("tr:eq(1)")返回Array<Element(s)>:gt(index)匹配所有大于给定索引值的元素，从0开始计数$("tr:gt(0)")返回Array<Element(s)>:lt(index)匹配所有小于给定索引值的元素，从0开始计数$("tr:lt(2)")返回Array<Element(s)>:animated选取当前正在执行动画的所有元素$(":animated")返回Array<Element(s)>:contains(string)选取所有文本内容包含“关键词”的<div>元素$("div:contains('关键词')")返回Array<Element(s)>:has查找所有含有<p>子元素的<div>父元素$("div:has(p)")返回Array<Element(s)>:empty选取所有空<div></div>的元素$("div:empty")返回Array<Element(s)>:visible查找所有可见元素$("tr:visible")返回Array<Element(s)>[attribute = value]选取文本输入框的input元素$("input[type=text]")返回Array<Element(s)>[attribute != value]选取所有不是hidden的input元素，注意，没有type属性的input也会被选取$("input[type!=hidden]")返回Array<Element(s)>[attribute ^= value]选取开头为mailto:的所有a链接$("a[href^='mailto']")返回Array<Element(s)>[attribute $= value]选取所有结尾为.jpg的img图片$("img[src$='.jpg']")返回Array<Element(s)>表单选择器:input查找所有的input元素（包括input, textarea, select和button）$(":input")返回Array<Element(s)>:password查找所有密码框$(":password")返回Array<Element(s)>:text查找所有单行文本框$(":text")返回Array<Element(s)>:radio查找所有单选按钮$(":radio")返回Array<Element(s)>:checkbox查找所有复选框$(":checkbox")返回Array<Element(s)>:checked查找所有选中的checkbox, radio$("input:checked")返回Array<Element(s)>:selected查找所有选中的选项元素$("select:selected")返回Array<Element(s)>属性attr(key) attr(key,value)设置一个属性的值HTML:<img src="test.jpg"/>jQuery:$("img").attr("src");Result:test.jpg返回jQueryremoveAttr(key)删除一个属性HTML:<img src="test.jpg"/>jQuery:$("img").removeAttr("src");Result:[<img /> ]返回jQueryaddClass(class)追加指定的类名HTML:<p>Hello</p>jQuery:$("p").addClass("selected highlight");Result:[ <p class="selected highlight">Hello</p> ] 如果要替换样式，用attr() 返回jQueryremoveClass()移除样式Html:<p class="red">你最喜欢的是？</p>JQuery:$("p").removeClass("red");Result:<p >你最喜欢的是？</p>可以同时移除多个样式：$("p").removeClass("red bold");或者全部移除样式：$("p").removeClass();返回jQuerytoggleClass()如果节点存在该样式，则移除，不存在，则追加$("p").toggleClass("blue");返回jQueryhasClass(class)判断节点是否存在该样式，返回布尔值$("p").hasClass("blue"); 该方法等价于：$("p").is(".blue"); 返回jQueryhtml()取得或设置文本内容类似innerHTML()仅可用于html文档返回String/jQuerytext()取得或设置文本内容类似innerText()可以用于html和xml文档返回String/jQueryval()取得或设置input文本框的值Html：<input type="text" id="searchbox" value="搜索的内容…" /> JQuery:$("searchbox").focus(function(){if(this.val()=="搜索的内容…"){this.val("")}});$("searchbox").blur(function(){if(this.val()==""){this.val(this.defaultValue)}});this.defaultValue 表示input文本框的默认value通过val()还能做到将表单多选框,checkbox,radio事先选中：$(":checkbox").val(["check2","check3"]);$(":radio").val(["radio2"]);返回String/Array节点匹配each(callback)为每一个匹配的元素执行一个函数迭代两个图像，并设置它们的src 属性注意此处this 指代的是DOM 对象而非jQuery 对象HTML:<img/><img/>jQuery:$("img").each(function(i){this.src = "test" + i + ".jpg";});Result:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]返回jQuerysize()/length获取对象中元素的个数$("img").size();$("img").length;返回Numberindex([subject])匹配的元素，并返回相应元素的索引值，从0开始计数HTML:<ul><li id="foo">foo</li><li id="bar">bar</li><li id="baz">baz</li></ul>jQuery:$('li').index($('#bar')); //1$('li').index($('li:gt(0)')); //1$('#bar').index('li'); //1$('#bar').index(); //1返回Numberget()/get(index)get():以数组形式取得所有匹配的节点集合get(index) :index存在则从中选择某一个DOM节点HTML:<img src="test1.jpg"/><img src="test2.jpg"/>jQuery:$("img").get(0);Reslut:[ <img src="test1.jpg"/> ]返回Array<Element>/ Elementeq(index)以对象形式获取第index个元素，位置从0算起获取匹配的第二个元素HTML:<p> This is just a test.</p><p> So is this</p>jQuery:$("p").eq(1)Result:[ <p> So is this</p> ]补充 .get(index)和.eq(index)的区别.get(index)返回的是一个html数组.eq(index)返回的是一个Jquery对象$("ul li").get(1).css("color", "red");//这个是错误的$("ul li").eq(1).css("color", "red");//这个是正确的同理将JQuery对象转换为DOM对象可以使用get alert一个非JQuery对象，如：var $cr = $("#cr");var cr = $cr.get(0);alert(cr.checked);返回jQueryfirst()获取匹配的第一个元素$('li').first() 等价于$('li:first')返回jQuerylast()获取匹配的最后一个元素$('li').last() 等价于$('li:last')返回jQueryfilter(fn)筛选出与指定函数返回值匹配的元素集合保留子元素中不含有ol的元素。

jquery的each()函数用法

each()方法能使DOM循环结构简洁，不容易出错。

each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等在javaScript开发过程中使用$each可以大大的减轻我们的工作量。

下面提一下each的几种常用的用法each处理一维数组var arr1 = [ "aaa", "bbb", "ccc" ];$.each(arr1, function(i,val){alert(i);alert(val);});alert(i)将输出0，1，2alert(val)将输出aaa，bbb，ccceach处理二维数组var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] $.each(arr, function(i, item){alert(i);alert(item);});arr2为一个二维数组，item相当于取这二维数组中的每一个数组。

item[0]相对于取每一个一维数组里的第一个值alert(i)将输出为0，1，2，因为这二维数组含有3个数组元素alert(item)将输出为 ['a', 'aa', 'aaa']，['b', 'bb', 'bbb']，['c', 'cc', 'ccc']对此二位数组的处理稍作变更之后var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] $.each(arr, function(i, item){$.each(item,function(j,val){alert(j);alert(val);});});alert(j)将输出为0，1，2，0，1，2，0，1，2alert(val)将输出为a，aa，aaa，b，bb，bbb，c，cc，ccceach处理json数据，这个each就有更厉害了，能循环每一个属性var obj = { one:1, two:2, three:3};each(obj, function(key, val) {alert(key);alert(val);});这里alert(key)将输出one two threealert(val)将输出one，1，two，2，three,3这边为何key不是数字而是属性呢，因为json格式内是一组无序的属性-值，既然无序，又何来数字呢。

jq方法大全

JQ方法大全网友：linuxphpmysql 发布于：2008.10.22 08:58(共有条评论) 查看评论| 我要评论Dom：Attribute：$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值，参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值$("img").attr("title", function() { return this.src }); 给某个元素添加属性/值$("元素名称").html(); 获得该元素内的内容（元素，文本等）$("元素名称").html("new stuff"); 给某元素设置内容$("元素名称").removeAttr("属性名称") 给某元素删除指定的属性以及该属性的值$("元素名称").removeClass("class") 给某元素删除指定的样式$("元素名称").text(); 获得该元素的文本$("元素名称").text(value); 设置该元素的文本值为value$("元素名称").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式$("input元素名称").val(); 获取input元素的值$("input元素名称").val(value); 设置input元素的值为valueManipulation：$("元素名称").after(content); 在匹配元素后面添加内容$("元素名称").append(content); 将content作为元素的内容插入到该元素的后面$("元素名称").appendTo(content); 在content后接元素$("元素名称").before(content); 与after方法相反$("元素名称").clone(布尔表达式) 当布尔表达式为真时，克隆元素（无参时，当作true处理）$("元素名称").empty() 将该元素的内容设置为空$("元素名称").insertAfter(content); 将该元素插入到content之后$("元素名称").insertBefore(content); 将该元素插入到content之前$("元素").prepend(content); 将content作为该元素的一部分，放到该元素的最前面$("元素").prependTo(content); 将该元素作为content的一部分，放content的最前面$("元素").remove(); 删除所有的指定元素$("元素").remove("exp"); 删除所有含有exp的元素$("元素").wrap("html"); 用html来包围该元素$("元素").wrap(element); 用element来包围该元素Traversing：add(expr)add(html)add(elements)children(expr)contains(str)end()filter(expression)filter(filter)find(expr)is(expr)next(expr)not(el)not(expr)not(elems)parent(expr)parents(expr)prev(expr)siblings(expr)Core：$(html).appendTo("body") 相当于在body中写了一段html代码$(elems) 获得DOM上的某个元素$(function(){……..}); 执行一个函数$("div > p").css("border", "1px solid gray"); 查找所有div的子节点p，添加样式$("input:radio", document.forms[0]) 在当前页面的第一个表单中查找所有的单选按钮$.extend(prop) prop是一个jQuery对象，举例：jQuery.extend({min: function(a, b) { return a b ? a : b; }});jQuery( expression, [context] ) ---$( expression, [context]); 在默认情况下，$()查询的是当前HTML文档中的DOM元素。

jquery的ajax常用方法

});
else
add(j, jQuery.isFunction(a[j]) ? a[j]() : a[j]);
// 返回生成字符串
return s.join("&").replace(/%20/g, "+");
}
Get&post
// 如果不是字符集串就转换在查询字符集串
if (s.data && s.processData && typeof s.data != "string")
s.data = jQuery.param(s.data);
// 构建jsonp请求字符集串。jsonp是跨域请求，要加上callback=？后面将会加函数名
7.1 jquery的ajax常用方法
对于Ajax原理不深入分析。Jquery肯定也会提供Ajax的实现。对于ajax的请求，可以分成如下的几步：
1、通过 new XMLHttpRequest 或其它的形式（指IE）生成ajax的对象xhr。
2、通过xhr.open(type, url, async, username, password)的形式建立一个连接。
3、通过setRequestHeader设定xhr的请求头部（request header）。
4、通过send(data)请求服务器端的数据。
5、执行在xhr上注册的onreadystatechange回调处理返回数据。
任何的lib都是在这几步之上进行相关扩展而达到自己的功能。这几步之中，对于url，我们要考虑是跨域请求怎么办，ajax为了安全的考虑不支持跨域请求，那么对于这个问题，Jquery和Ext都是采用scriptTag的方式。

使用jquery中$.each（）方法来循环一个数据列表

使⽤jquery中$.each（）⽅法来循环⼀个数据列表定义和⽤法jQuery.each() 函数⽤于遍历指定的对象和数组。

语法$.each( object, callback )参数描述object Object类型指定需要遍历的对象或数组。

callback Function类型指定的⽤于循环执⾏的函数。

通过这个⽅法可以将⼯作中遇到的数据列表如商城⾥⾯的商品列表等很好的进⾏循环，简单⽅便，下⾯就是我写的⼀个案例：当然这个这个数组对象是我⾃⼰模拟的，实际⼯作中我们只需要根据后台给的接⼝来进⾏操作。

html:<div class="index"><h1>⾸页</h1><ul class="shop_box"></ul><button id="btn">点击</button></div>js：<script>$(function () {var con = [{name: '⼩王',age: 18},{name: '⼩张',age: 19},{name: '⼩李',age: 20},{name: '⼩何',age: 21},{name: '⼩陆',age: 22},]var html = '';$.each(con, function (k, v) { // 这⾥的函数参数是键值对的形式，k代表键名，v代表值html += '<li class="shopBox">' +'<div class="ShopListName">' + con[k].name + '</div>' +'<div class="age">' + con[k].age + '</div>' + '</li>'});$(".index").append(html);})</script>效果图：。