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。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Jquery中使用each和call
each的使用方法
在jQuery里有一个each方法，用起来非常的爽，不用再像原来那样写for循环，jQuery 源码里自己也有很多用到each方法。
其实jQuery里的each方法是通过js里的call方法来实现的。
Call的使用方法。
call这个方法很奇妙，其实官方的说明是：“调用一个对象的一个方法，以另一个对象替换当前对象。
”网上更多的解释是变换上下文环境，也有说是改变上下文this指针。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。
将被用作当前对象的对象。
arg1, arg2, ,argN
可选项。
将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。
call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
引用网上有一个很经典的例子
复制代码
function add(a,b) {
alert(a+b);
}
function sub(a,b) {
alert(a-b);
}
add.call(sub,3,1);
复制代码
用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);
注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。
具体call更深入的就不在这里提了。
下面提一下jQuery的each方法的几种常用的用法
复制代码
vararr = [ "one", "two", "three", "four"];
$.each(arr, function(){
alert(this);
});
//上面这个each输出的结果分别为：one,two,three,four
var 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 7
varobj = { one:1, two:2, three:3, four:4};
$.each(obj, function(i) {
alert(obj[i]);
});
//这个each就有更厉害了，能循环每一个属性
//输出结果为：1 2 3 4。