12招jQuery常用技巧

由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

1、关于页面元素的引用

通过jQuery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jQuery对象（集合对象），不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换

只有jQuery对象才能使用jQuery定义的方法。注意dom对象和jQuery对象是有区别的，调用方法时要注意操作的是dom对象还是jQuery对象。普通的dom 对象一般可以通过$()转换成jQuery对象。

如：$(document.getElementById(”msg”))则为jQuery对象，可以使用jQuery 的方法。

由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。如：$(”#msg”) [0]，

$(”div”).eq(1)[0]，$(”div”).get()[1]，$(”td”)[5]这些都是dom对象，可以使用dom中的方法，但不能再使用jQuery的方法。

以下几种写法都是正确的：

1.$("#msg”).html();

2.$("#msg”)[0].innerHTML;

3.$("#msg”).eq(0)[0].innerHTML;

4.$("#msg”).get(0).innerHTML;

3、如何获取jQuery集合的某一项

对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jQuery对象，而 get(n)和索引返回的是dom元素对象。对于jQuery对象只能使用jQuery的方法，而dom对象只能使用dom的方法，如要获取第三个

元素的内容。有如下两种方法：

1.$("div”).eq(2).html(); //调用jQuery对象的方法

2.$("div”).get(2).innerHTML; //调用dom的方法属性

4、同一函数实现set和get

jQuery中的很多方法都是如此，主要包括如下几个：

1.$("#msg").html(); //返回id为msg的元素节点的html内容。

2.$("#msg").html("new content");

3.//将“new content" 作为html串写入id为msg的元素节点内容

中,页面显示粗体的new content

4.$("#msg").text(); //返回id为msg的元素节点的文本内容。

5.$("#msg").text("new content");

6.//将“new content" 作为普通文本串写入id为msg的元素节点

内容中,页面显示new content

7.$("#msg").height(); //返回id为msg的元素的高度

8.$("#msg").height("300″); //将id为msg的元素的高度设为300

9.$("#msg").width(); //返回id为msg的元素的宽度

10.$("#msg").width("300″); //将id为msg的元素的宽度设为300

11.$("input").val("); //返回表单输入框的value值

12.$("input").val("test"); //将表单输入框的value值设为test

13.$("#msg").click(); //触发id为msg的元素的单击事件

14.$("#msg").click(fn); //为id为msg的元素单击事件添加函数

同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能

对于jQuery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jQuery已经为我们提供的很方便的方法进行集合的处理。包括两种形式：

1.$("p”).each(function(i){this.style.color=['#f00','#0f0','#00f'

][ i ]})

2.//为索引分别为0，1，2的p元素分别设定不同的字体颜色。

3.$("tr”).each(function(i){this.style.backgroundColor=['#ccc','#

fff'][i%2]})

4.//实现表格的隔行换色效果

5.$("p”).click(function(){alert($(this).html())})

6.//为每个p元素增加了click事件，单击某个p元素则弹出其内容

6、扩展我们需要的功能

1.$.extend({

2.min: function(a, b){return a < b?a:b; },

3.max: function(a, b){return a > b?a:b; }

4.}); //为jQuery扩展了min,max两个方法

使用扩展的方法（通过“$.方法名”调用）：

1.alert(”a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20));

7、支持方法的连写

所谓连写，即可以对一个jQuery对象连续调用各种不同的方法。例如：

1.$("p”).click(function(){alert($(this).html())})

2..mouseover(function(){alert(’mouse over event’)})

3..each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]}

);

8、操作元素的样式

主要包括以下几种方式：

1.$("#msg").css("background"); //返回元素的背景颜色

2.$("#msg").css("background","#ccc") //设定元素背景为灰色

3.$("#msg").height(300); $("#msg").width("200″); //设定宽高

4.$("#msg").css({ color: “red", background: “blue" });//以名值

对的形式设定样式

5.$("#msg").addClass("select"); //为元素增加名称为select的

class

6.$("#msg").removeClass("select"); //删除元素名称为select的

class

7.$("#msg").toggleClass("select"); //如果存在（不存在）就删除（添

加）名称为select的class

9、完善的事件处理功能

jQuery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jQuery获取的对象添加事件。如：

1.$(”#msg”).click(function(){alert(”good”)}) //为元素添加了单

击事件

2.$(“p”).click(function(i){this.style.color=['#f00','#0f0','#00

f'][ i ]})

3.//为三个不同的p元素单击事件分别设定不同的处理

jQuery中几个自定义的事件：

（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。

1.//当鼠标放在表格的某行上时将class置为over，离开时置为out。

2.$("tr”).hover(function(){

3.$(this).addClass(”over”);

4.,function(){

5.$(this).addClass(”out”);

6.});

（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

1.$(document).ready(function(){alert(”Load Success”)})

2.//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等

价

（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

1.//每次点击时轮换添加和删除名为selected的class。

2.$("p”).toggle(function(){

3.$(this).addClass(”selected”);

4.},function(){

5.$(this).removeClass(”selected”);

6.});

（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。例如：

1.$("p”).trigger(”click”); //触发所有p元素的click事件

（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定

从每一个匹配的元素中（添加）删除绑定的事件。例如：

1.$("p").bind("click", function(){alert($(this).text());}); //为

每个p元素添加单击事件

2.$("p").unbind(); //删除所有p元素上的所有事件

3.$("p").unbind("click") //删除所有p元素上的单击事件

10、几个实用特效功能

其中toggle()和slidetoggle()方法提供了状态切换功能。如toggle()方法包括了hide()和show()方法。slideToggle()方法包括了slideDown()和slideUp 方法。

11、几个有用的jQuery方法

$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。

$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。如

1.$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n

); });

等同于：

1.var tempArr=[0,1,2];

2.for(var i=0;i

3.alert("Item #"+i+": "+tempArr[ i ]);

4.}

也可以处理json数据，如

1.$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "N

ame: " + i + ", Value: " + n ); });

结果为：

https://www.360docs.net/doc/9214524901.html,:name, Value:John

https://www.360docs.net/doc/9214524901.html,:lang, Value:JS

3.$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，

返回这个被扩展的对象。这是jQuery实现的继承方式。如：

4.$.extend(settings, options);

5.//合并settings和options，并将合并结果返回settings中，相当于

options继承setting并将继承结果保存在setting中。

6.var settings = $.extend({}, defaults, options);

7.//合并defaults和options，并将合并结果返回到setting中而不覆盖

default内容。

可以有多个参数（合并多项并返回）$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。如：

1.var tempArr=$.map( [0,1,2], function(i){ return i + 4; });

2.tempArr内容为：[4,5,6]

3.var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 :

null; });

4.tempArr内容为：[2,3]

$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。如：

1.$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]

$.trim(str)：删除字符串两端的空白字符。如：

1.$.trim(" hello, how are you? "); //返回"hello,how are you? "

12、解决自定义方法或其他类库与jQuery的冲突

很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，jQuery对此专门提供了方法用于解决此问题。

使用jQuery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用 jQuery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#msg")改为jQuery("#msg")。如：

1.jQuery.noConflict();

2.// 开始使用jQuery

3.jQuery("div p").hide();

4.// 使用其他库的 $()

5.$("content").style.display = 'none';

50个实用的JQUERY案例

jquery案例 jquery案例1.如何创建嵌套的过滤器： 1.//允许你减少集合中的匹配元素的过滤器， 2.//只剩下那些与给定的选择器匹配的部分。在这种情况下， 3.//查询删除了任何没（:not）有（:has） 4.//包含class为“selected”（.selected）的子节点。 5..filter(":not(:has(.selected))") jquery案例2.如何重用元素搜索 1.var allItems=$("div.item"); 2.var keepList=$("div#container1div.item"); 3.//现在你可以继续使用这些jQuery对象来工作了。例如， 4.//基于复选框裁剪“keep list”，复选框的名称 5.//符合 6.

class names: 7.$(formToLookAt+"input:checked").each(function(){ 8.keepList=keepList.filter("."+$(this).attr("name")); 9.}); 10.

jquery案例3.任何使用has()来检查某个元素是否包含某个类或是元素： 1.//jQuery1.4.*包含了对这一has方法的支持。该方法找出 2.//某个元素是否包含了其他另一个元素类或是其他任何的 3.//你正在查找并要在其之上进行操作的东东。 4.$("input").has(".email").addClass("email_icon"); jquery案例4.如何使用jQuery来切换样式表 1.//找出你希望切换的媒体类型（media-type），然后把href设置成新的样式表。 2.$('link[media='screen']').attr('href','Alternative.css'); jquery案例5.如何限制选择范围（基于优化目的）： 1.//尽可能使用标签名来作为类名的前缀， 2.//这样jQuery就不需要花费更多的时间来搜索 3.//你想要的元素。还要记住的一点是， 4.//针对于你的页面上的元素的操作越具体化， 5.//就越能降低执行和搜索的时间。

jQuery常用方法中文解析

jQuery常用方法中文解析 jQuery设计思想 【目录】 一、选择网页元素 二、改变结果集 三、链式操作 四、元素的操作：取值和赋值 五、元素的操作：移动 六、元素的操作：复制、删除和创建 七、工具方法 八、事件操作 九、特殊效果 一、选择网页元素 jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。选择表达式可以是CSS选择器： $(document) //选择整个文档对象 $('#myId') //选择ID为myId的网页元素 $('div.myClass') // 选择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').next('p'); //选择div元素后面的第一个p元素 $('div').parent(); //选择div元素的父元素 $('div').closest('form'); //选择离div最近的那个form父元素 $('div').children(); //选择div的所有子元素 $('div').siblings(); //选择div的同级元素 三、链式操作 选中网页元素以后，就可以对它进行某种操作。jQuery允许将所有操作连接在一起，以链条的形式写出来，比如： $('div').find('h3').eq(2).html('Hello'); 分解开来，就是下面这样： $('div') //找到div元素 .find('h3') //选择其中的h3元素 .eq(2) //选择第3个h3元素 .html('Hello'); //将它的内容改为Hello 这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。jQuery还提供了.end()方法，使得结果集可以后退一步： $('div').find('h3').eq(2).html('Hello').end() //退回到选中所有的h3元素的那一步.eq(0) //选中第一个h3元素.html('World'); //将它的内容改为World

jQuery入门教程(很不错)

jQuery入门[1]－构造函数 https://www.360docs.net/doc/9214524901.html,/archive/2008/03/05/1091816.html jQuery优点 ?体积小（v1.2.3 15kb） ?丰富的DOM选择器(CSS1-3 + XPath) ?跨浏览器（IE6,FF,Safari,Opera） ?链式代码 ?强大的事件、样式支持 ?强大的AJAX功能 ?易于扩展，插件丰富 jQuery的构造函数接收四种类型的参数： jQuery(expression,context) jQuery(html) jQuery(elements) jQuery(fn) 第一种根据表达式（ID，DOM元素名，CSS表达式，XPath表达式）找出文档中的元素，并组装成一个jQuery对象返回。 DEMO: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.360docs.net/doc/9214524901.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">