JQuery中常用的函数方法总结

jQuery中为我们提供了很多有用的方法和属性，自己总结的一些常用的函数，方法。个人认为在开发中会比较常用的，仅供大家学习和参考。

事件处理

ready(fn)

代码：

$(document).ready(function(){

// Your code here...

})；

作用：它可以极大地提高web应用程序的响应速度。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

bind(type,[data],fn)

代码：

$("p").bind("click", function(){

alert( $(this).text() );

});

作用：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。起到事件监听的作用。toggle(fn,fn)

代码：

$("td").toggle(

function () {

$(this).addClass("selected");

},

function () {

$(this).removeClass("selected");

}

);

作用：每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。挺有趣的一个函数，在动态实现某些功能的时候可能会用到。(像click(),focus(),keydown()这样的事件这里就不提了，那些都是开发中比较常用到的。)

外观效果

addClass(class)和removeClass(class)

代码：

$(".stripe tr").mouseover(function(){

$(this).addClass("over");}).mouseout(function(){

$(this).removeClass("over");})

});

也可以写成：

$(".stripe tr").mouseover(function() { $(this).addClass("over") });

$(".stripe tr").mouseout(function() { $(this).removeClass("over") });

作用：为指定的元素添加或移除样式，从而实现动态的样式效果，上面的实例中实现鼠标移动双色表格的代码。

css(name,value)

代码：

$("p").css("color","red");

作用：很简单，就是在匹配的元素中，设置一个样式属性的值。这个个人感觉和上面的addClass(class)有点类似。

slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()

代码：

$("#btnShow").bind("click",function(event){ $("#divMsg").show() });

$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });

作用：jQuery中提供的比较常用的几个动态效果的函数。还可以添加参数：show(speed, [callback])以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。

animate(params[,duration[,easing[,callback]]])

作用：制作动画效果用到的函数，功能非常的强大，可以连续使用此函数。

查找筛选

map(callback)

HTML 代码:

Values:

return $(this).val();

}).get().join(", ") );

结果:

[

John, password, https://www.doczj.com/doc/d01236469.html,/%3C/p> ]

作用：将一组元素转换成其他数组（不论是否是元素数组）你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。

find(expr)

HTML 代码:

Hello, how are you?

jQuery 代码:

$("p").find("span")

结果:

[ Hello ]

作用：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

文档处理

attr(key,value)

HTML 代码:

jQuery 代码:

$("img").attr("src","test.jpg");

作用：取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回undefined 。在控制HTML标记上是必备的工具。

html()/html(val)

HTML 代码 :

Hello

jQuery 代码 :

$("div").html();

结果:

Hello

作用：取得或设置匹配元素的html内容，同类型的方法还有text()和val()。前者是取得所有匹配元素的内容。，后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。

wrap(html)

HTML 代码:

Test Paragraph.

jQuery 代码:

$("p").wrap("

");

结果:

Test Paragraph.

作用：把所有匹配的元素用其他元素的结构化标记包裹起来。

这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。可以灵活的修改我们的DOM。

empty()

HTML 代码:

Hello, Person and person

jQuery 代码:

$("p").empty();

结果:

作用：删除匹配的元素集合中所有的子节点。

Ajax 处理

load(url,[data],[callback])

url (String) : 待装入HTML 网页网址。

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

callback (Callback) : (可选) 载入成功时回调函数。

代码：

$("#feeds").load("feeds.aspx", {limit: 25}, function(){

alert("The last 25 entries in the feed have been loaded");

});

作用：载入远程HTML 文件代码并插入至DOM 中。这也是Jquery操作Ajax最常用最有效的方法。

serialize()

HTML 代码:

Results:

Single

Single2

Multiple

Multiple2

Multiple3

check1

checked="checked"/> check2

checked="checked"/> radio1

radio2

jQuery 代码:

$("#results").append( "" + $("form").serialize() + "" );

作用：序列化表格内容为字符串。用于Ajax 请求。

工具

jQuery.each(obj,callback)

代码：

$.each( [0,1,2], function(i, n){

alert( "Item #" + i + ": " + n );

});//遍历数组

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

alert( "Name: " + i + ", Value: " + n );//遍历对象

});

作用：通用例遍方法，可用于例遍对象和数组。

jQuery.makeArray(obj)

HTML 代码:

jQuery 代码:

var arr = jQuery.makeArray(document.getElementsByTagName("div"));

结果:

Fourth

Third

Second

First

作用：将类数组对象转换为数组对象。使我们可以在数组和对象之间灵活的转换。

jQuery.trim(str)

作用：这个大家应该很熟悉，就是去掉字符串起始和结尾的空格。

小结：在实际的开发中我们可能会用到其他的方法和属性，以上只是个人认为新手初学jQuery时，必须掌握的一些方法。仅供大家学习的参考。有什么不对的高手指教。

?18:01

?浏览(398)

?评论 (0)

?分类: JQuery

2010-06-24

缩略显示

JQuery笔记

文章分类:Web前端

简介

jQuery可以像CSS一样选择页面内的元素。比如：$('p')会选中所有的段落。

使用$(document).ready()就可以添加文档载入完毕之后执行的代码。

使用$.fn.func = function(){}的方式可以扩展jQuery。

选择器

简单示例：

属性选择器

p[title]

只选择设置了title属性的p元素。

p[title=foo]title

title属性等于foo的。

p[title^=foo]

title属性以foo开头的。

p[title$=foo]

title属性以foo结束的。

p[title*=foo]

title属性含有foo的。

例如：

$('p[title]').css('color','blue');

选中了设置title属性的p，并且将其颜色设置为blue。

包含选择器

li:has(a)

表示含有a的li元素。

例如：

$('li:has(a)').css('border','1px solid black');

选中含有a的里元素，并且设置其style的border属性。

位置选择器

p:first-child

选中作为第一个子元素的p元素。

例如：

$('p:first-child').css('backgroundColor','pink');

类似的还有

p:nth-child(n)

例如：

$('p:nth-child(3)').css('backgroundColor','yellow');

选中第三段。

这些表示子节点位置的都是从1开始计数的。

:odd

选中位置排序是奇数的元素。

even

选择偶数位置的元素。

eq(n)

选中第n个元素。

这些都是从0开始计数的。

以上为书上的分类方式。

所有选择器

按照官方的选择器分类，而不是书上的表。

基本选择器：

1. #id

2. element

3. .class

4. *

5. selector1, selector2, selectorN

层次选择器：

1. ancestor descendant

div p选中p，且p必须在div中。可以是隔代的关系2. parent > child

div>p选中p，且p必须是div的子元素，不包括隔代。

3. prev + next

div+p紧跟着div的p

4. prev ~ siblings

div~p选中p，且p前面必须是div。

基本过滤器：

1. :first

p:first匹配第一个p元素

2. :last

p:last匹配最后一个p元素

3. :not(selector)

过滤掉selector选中的元素

4. :even

偶数元素，0开始的索引。

5. :odd

奇数元素，0开始的索引。

6. :eq(index)

根据index返回一个元素。

7. :gt(index)

索引大于index的元素。

8. :lt(index)

索引小于index的元素。

9. :header

标题元素，h1到h6。

10. :animated

当前正在动画状态的元素。

内容过滤器：

1. :contains(text)

匹配文本中包含text的元素。

2. :empty

匹配没有任何子节点的元素。(有文本节点算作有节点)

3. :has(selector)

在selector匹配的元素中，至少要包含一个才可以匹配。

4. :parent

匹配所有作为父元素的元素。

可见性过滤器：

1. :hidden

所有可见元素

2. :visible

匹配所有不可见元素。

属性过滤器：

1. [attribute]

设置了指定属性的元素。

2. [attribute=value]

属性attribute的值等于value

3. [attribute!=value]

属性attribute的值不等于value，或者没有指定该属性。

4. [attribute^=value]

属性attribute的值以value开始。

5. [attribute$=value]

属性attribute的值以value结束。

6. [attribute*=value]

属性attribute的值含有value。

7. [attributeFilter1][attributeFilter2][attributeFilterN]

匹配满足所有属性过滤器的元素。

子节点过滤器：

1. :nth-child(index/even/odd/equation)

匹配元素是它们父亲元素的第n个子节点、或者是奇数偶数节点。

2. :first-child

作为第一个子节点的元素。

3. :last-child

作为最后一个子节点的元素。

4. :only-child

作为唯一的子节点的元素。

表单选择器：

1. :input

匹配input, textarea, select 以及button 元素。

2. :text

3. :password

4. :radio

5. :checkbox

6. :submit

7. :image

8. :reset

9. :button

10. :file

11. :hidden

匹配不可见的元素以及input hidden

表单过滤器：

1. :enabled

2. :disabled

3. :checked

4. :selected

管理选择结果

访问结果长度

$('p').size()

size方法

获取某个元素

$('p')[0]

$('p').get(0)

将结果转换为数组

get方法如果没有参数就会将

var arr = $('p').get()

取得当前节点的索引

$('#foo').index($('div'))

取得id为foo的div在所有div内的索引。

向结果中添加元素

$('p').add('a').fadeOut().fadeIn();

和$('p,a').fadeOut().fadeIn();是完全等同的。从结果中删除元素

$('div').not('#foo').fadeOut().fadeIn();

从$('div')中去掉'#foo'。

注意not不再接受标签。不能写not('div#foo') 从结果中过滤元素

$('div').filter('#foo').fadeOut().fadeIn();

从div中再过滤一遍id等于foo的。再如：$('p').filter('[title]').fadeOut().fadeIn();

filter与not一样不再接受标签，而且过滤的时候没有=只有^=、*=、$=。filter中也可以使用函数过滤器，返回true的选中。

$('div').filter(function(){ return true})

极端情况：

$('div').filter(function(){ return false}).fadeOut().fadeIn();

一个也不选中。

$('div').filter(function(){ return true}).fadeOut().fadeIn();

全部选中。

在结果范围内寻找元素

$('ul').find('a').fadeOut().fadeIn();

在ul的范围内再寻找a。

jQuery链

end方法

返回上一层操作的元素。

$('div').find('a').end().fadeOut().fadeIn();

end又回到了$('div')。

andSelf方法

$('div').find('a').andSelf().fadeOut().fadeIn();

包含$('div')以及.find('a')的结果。

操作元素

each方法

each方法可以遍历所有的选中的元素，并且使用一个函数来对其进行操作。

$('p').each(function(index){$(this).prepend(index+'.')});

选中所有的p，并且在前面加上索引号。

属性

使用attr访问和设置元素的属性。

var test = $('p[title]').attr('title');

获得了title属性的值。当传递两个参数的时候可以设置属性。

$('p[title]').attr('title','jQuery');

将title属性设置为'jQuery'。

$('a[href^=http://]').attr('target','_blank');

外部链接在新窗口打开。

removeAttr删除属性

$('p[title]').removeAttr('title');

删除了title属性。

CSS样式

直接使用css来设置CSS属性。

$('p').css('color','green')

addClass添加类名。

removeClass删除类名。

toggleClass切换类名。

元素内容

html()访问innerHTML

html(content)设置innerHTML

text()访问文本。

text(content)设置文本。

书上的例子，非常巧妙：

$('li').click(function(){var temp = $(this).html(); $(this).text(temp);})

点击就显示源代码。

操作元素

append

给元素末尾添加一个子节点。除了可以添加DOM节点之外，还可以这么写：

$('p').append('经典论坛')

如果append的目标只有一个，那么就和DOM操作的时候一样，已经在文档内的会被移动。如果目标是多个，那么是采用复制的方式。

appendTo

将元素添加到别的元素中作为尾部子节点。

prepend

给元素头部添加一个子节点。

prependTo

将元素添加到别的元素中作为头部子节点。

before、after

分别将元素插入到其它节点的前面或者后面。

remove

删除节点。

empty

清空一个节点。

clone

复制一个节点。

表单

val获取或者是设置表单域的值。

事件

bind

绑定事件响应函数。

$('p').bind('click',function(){$(this).prepend('Clicked!');}); 每当点击p元素的时候就在前面加一段文字。

也可以直接使用事件名，比如click等等：

$('p').click(function(){$(this).prepend('Clicked!');});

等效上面的代码。

one

只执行一次的事件响应函数。

unbind

unbind不带参数会删除所有时间响应函数。

$('p').unbind('click')则只删除指定事件的时间响应函数。

$('p').unbind('click',func)则只删除指定的func函数。

事件对象

事件对象统一以函数第一个参数的形式被传入事件响应函数。

trigger

模拟事件触发

$('p').trigger('click');

会触发所有p元素的click事件。

toggle

事件响应函数的切换

function func1(){ $(this).prepend('func1');}

function func2(){ $(this).prepend('func2');}

$('p').toggle(func1,func2);

hover

鼠标经过的效果

function func1(){ $(this).prepend('func1');}

function func2(){ $(this).prepend('func2');}

$('p').hover(func1,func2);

效果

show

显示，语法：show(duration,callback)，例如：$('p').show(3000)

hide

隐藏，如上。

fadeIn、fadeOut

渐显和渐隐效果。

fadeTo(duration,opacity,callback)

到指定的opacity。例如：

$('p').fadeTo(2000,0.5)

在两秒之内变化到0.5。

slideUp、slideDown、slideToggle

滑动显示，隐藏，切换。例如：

$('p').slideUp(2000)

$('p').slideDown(2000)

animate(params,duration,easing,callback)

自定义动画

params是对象，属性就是所有要变换的CSS属性。

jQuery选择题

1.以下关于jQuery的描述错误的是（）。（选一项） A、jQuery 是一个 JavaScript 函数库 B、jQuery 极大地简化了 JavaScript 编程 C、jQuery 的宗旨是“write less，do more” D、jQuery的核心功能不是根据选择器查找HTML元素，然后对这些元素执行相应的操作 2.在jQuery中，下列关于文档就绪函数的写法错误的是（）。（选一项） A、$(document).ready(function() { }); B、$(function() { }); C、$(document)(function() { }); D、$().ready(function() { }); 3.以下（）选项不能够正确地得到这个标签：（选一项） A、$("#btnGo") B、$(".btnGo") C、$(".btn") D、$("input[type='button']") 4.在HTML页面中有如下结构的代码：

请问下列选项（）所示jQuery代码，不能够让汉字“四”的颜色变成红色。（选一项） A、$("#header ul li:eq(3)").css("color","red"); B、$("#header li:eq(3)").css("color","red"); C、$("#header li:last").css("color","red"); D、$("#header li:gt(3)").css("color","red"); 5.在HTML页面中有如下结构的代码：

• 苹果iPhone 4S

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.doczj.com/doc/d01236469.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.doczj.com/doc/d01236469.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">