jquery知识大全.docx

1、jquery知识大全-基础语法-添加一个下属节点var $h=$(第一段文字);$(#h11).append($h);添加一个样式$(li).addClass(normalStyle);添加一个属性$(li).css(color,blue);移除id为tr1的第二个表框$(#tr1 td:eq(1).remove();克隆一个按钮并显示在id为tr1的元素后面 $(#btn).click(function() $(this).clone().insertAfter($(#tr1); );设置id为key的 属性$(#key).attr(color,#ccc);点击以动画出现 toggle 表示

2、它下面的方法依次调用$(function() $(h2).toggle(function() $(this).next(p).slideUp(); ,function() $(this).next(p).slideDown(); ););点击出现下面一段文字# /# / 目 录 /# / /# / 1: 核心部分 /# / 2: DOM操作 /# / 3: css操作 /# / 4: javascript处理 /# / 5: 动态效果 /# / 6: event事件 /# / 7: ajax支持 /# / /# /# /# / 一：核心部分 /# /# /* (1)# * $()# * 运行：

3、点击文档中所有a标签时将弹出对话框# * 说明：$(a) 是一个jQuery选择器；$本身表示一个jQuery类，所有$()是构造一个 jQuery对象；# * click() 是这个对象的方法。同理$ (document)也是一个jQuery对象，ready(fn)是$(document)的方法，# * 表示当document全部下载完毕时执行函数。# */# /*# $(document).ready(function()# / do something here# $(a).click(function() # alert(Hello world!);# );# );# */# /* (

4、2)# * html()# * 运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容# */# /*# function jq()# alert($(div p).html();# # */# /* (3)# * appendTo()# * 运行：当点击id为test的元素时，向body中添加“Hello”# */# /*# function jq()# $(Hello).appendTo(body);# # */# /* (4)# * css()# * 运行：当点击id为test的元素时，背景色变成黑色# * 说明：原文为$(document.body).b

5、ackground(black); 在 jQuery1.2及以上版本中,符号应该去除,background方法被css方法取代# */# /*# function jq()# $(document.body).css(background-color,black);# # */# /* (5)# * $(elems)# * 运行：当点击id为test的元素时，隐藏form1表单中的所有元素。# * 说明：限制jQuery作用于一组特定的DOM元素# * 参数： elem：一组通过jQuery对象压缩的DOM元素# */# /*# function jq()# $(form1.elements

6、).hide();# # */# /* (6)# * $(obj)# * 运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容。# * 说明：复制一个jQuery对象# */# /*# function jq()# var f = $(div);# alert($(f).find(p).html();# # */# /* (7)# * each(fn)# * 运行：当点击id为test的元素时，img标签的src都变成了2.jpg# * 说明：将函数作用于所有匹配的对象上# */# /*# function jq()# $(img).each(function

7、()# + this.src = );# # */# /* (8)# * get(num)# * 运行：当点击id为test的元素时，alert对话框显示：So is this，即第二个 标签的内容# * 说明：获取匹配元素，get(num)返回匹配元素中的某一个元素# * 参数：get (Number): 期望限制的索引，从0 开始# * 注意：get和eq的区别，eq返回的是jQuery对象，get返回的是所匹配的dom对象，所有取$(p).eq(1)对象的内容用jQuery方法html()，而取$(p).get(1)的内容用innerHTML# */# /*# function jq()

8、# alert($(p).get(1).innerHTML);# # */# /* (9)# * eq(pos)# * 运行：当点击id为test的元素时，alert对话框显示：So is this，即第二个 标签的内# * 说明：减少匹配对象到一个单独的dom元素# * 参数：pos (Number): 期望限制的索引，从0 开始# * 注意：get和eq的区别，eq返回的是jQuery对象，get返回的是所匹配的dom对象，所有取$(p).eq(1)对象的内容用jQuery方法html()，而取$(p).get(1)的内容用innerHTML# */# /*# function jq()#

9、 alert($(p).eq(1).html()# # */# /* (10)# * index(obj)# * 运行：当点击id为test的元素时，两次弹出alert对话框分别显示0，1# * 说明：返回对象索引# * 参数：obj (Object): 要查找的对象# */# /*# function jq()# alert($(div).index(document.getElementById(test1);# alert($(div).index(document.getElementById(test2);# # */# /* (11)# * size()或Length# * 运行：

10、当点击id为test的元素时，弹出alert对话框显示2，表示找到两个匹配对象# * 说明：当前匹配对象的数量，两者等价# */# /*# function jq()# /alert($(img).length);# alert($(img).size();# # */# /# / 二：DOM操作 /# /# /* (1)# * attr(属性名)或attr(属性名,属性值)# * 运行：先弹出对话框显示id为test的连接url(1.html)，在将其url改为2.html，当弹出对话框后会看到转向到2.html# * 说明： jquery自1.2.3版本取消了直接的href等相关操作属性的

11、方法，只能使用attr方式。包括src属性等# */# /*# function jq()# alert($(#test).attr(href);# $(#test).attr(href,2.html);# # */# /* (2)# * after(html代码)# * 运行：在匹配元素后插入一段 html Hello；a href=# id=test onClick=jq()& gt;jQueryHello# * 说明：执行完后在界面可看见执行效果# */# /*# function jq()# $(#test).after(Hello);# # */# /* (3)# * after(e

12、lem)或after(elems)# * 运行：将指定对象elem或对象组elems插入到在匹配元素后# * 说明：执行后相当于 jQuery& lt;/aafter# */# /*# function jq()# $(#test).after($(#hello);# # */# /* (4)# *append(html)# * 运行：在匹配元素内部，且末尾插入指定html# * 说明：同理还有 append(elem) append(elems) before(html) before(elem) before(elems)请执行参照 append和after的方来测试、理解！# */# /

13、*# function jq()# $(#test).append(Hello);# # */# /* (5)# *appendTo(html)# * 运行：在匹配元素内部，且末尾插入指定html# * 说明：appendTo()与append() 正好相反# */# /*# function jq()# $(Hello).appendTo($(#test);# # */# /* (6)# * appendTo(html)# * 运行：复制一个id为hello的对象并且放在id为test的元素内部未尾# * 说明：原元素无保持无变化# */# /*# function jq()# $(#hel

14、lo).clone().appendTo($(#test);# # */# /* (7)# * empty()# * 运行：删除匹配对象的所有子节点# */# /*# function jq()# $(#delete).empty();# # */# /* (8)# * prepend(elem/elems/html)# * 运行：在匹配元素的内部且开始处插入# * 说明：比较：append(elem),appendTo(expr),prepend(elem) ,append在匹配元素内部结束处插入,appendTo 与append匹配相反# */# /*# function jq()# $

15、(#delete).prepend($(#test1)# alert($ (#delete).html();# # */# /* (8)# * after(elem)# * 运行：在匹配元素的外部后面开始插入# * 说明：比较：before(elem)在匹配元素的外部前面开始插入,insertAfter(elem)与 after相反匹配,insertBefore(elem)与before匹配相反# */# /*# function jq()# $ (#delete).before($(#test1)# # */# /* (9)# * remove()# * 运行：移除匹配对象# * 说明：注意

16、区分empty()，empty()移出匹配对象的子节点，remove()，移出匹配对象# */# /*# function jq()# $ (#delete).remove();# # */# /*(10)# * wrap(htm)# * 运行：将匹配对象包含在给出的html代码内# * 说明：wrap(elem) 将匹配对象包含在给出的对象内(只是一种包装，原对象不变)# */# /*# function jq()# /$(#delete).wrap();# $(#delete).wrap($(#content);# # */# /*(11)# * add(el)# * 运行：在匹配对象的基

17、础上在附加指定的dom元素# * 说明：add(els)在匹配对象的基础上在附加指定的一组对象，els是一个数组# */# /*# function jq()# var f=$(p).add(b);# /var f=$(p).add(document.getElementById(a), document.getElementById(b)# for(var i=0;i $(f).size();i+)# alert($(f).eq(i).html();# # */# /*(12)# * parents()# * 运行：一依次以匹配结点的父节点的内容为对象,一般一个文档还有 和，依次类推下去#

18、* 说明：parents(expr)在parents()的基础上之取符合表达式的对象# * 注意：新版本中取代老版本的ancestors()# */# /*# function jq()# var f= $(span).parents();# for(var i=0;i $(f).size();i+)# alert($(f).eq(i).html();# # */# /* (13)# * children()# * 运行：返回匹配对象的所有子结点# * 说明：children(expr)返回匹配对象的子介点中符合表达式的节点,与之对应的有parent()和parent(expr)# */# /

19、*# function jq()# /alert($(#delete).children(span).html();# alert($(#delete).children().html();# # */# /* (14)# * contains( String text ) returns Array# * 运行：匹配元素根据提供的test# * 说明：contents( ) returns jQuery# */# /*# function jq()# /$(p:contains(just).css(text-decoration, underline); /pass# /alert($(p:

20、contains(just).css(text-decoration, underline).html(); /pass# /$(p).contents().wrap(); /pass Find all the text nodes inside a paragraph and wrap them with a bold tag.# / $(p).not(.green, #blueone).css(text-decoration, underline)/pass emoves elements matching the specified expression from the set of matched elements.# # */# /* (15)# * filter( Function fn ) returns jQuery# * 运行：首先选择所有的div并设计其css,然后过滤掉除index为1或id为delete的元素，并且设置其css# * 说明：过滤元素，把不匹配的 filter中定义的方法都过滤掉(当function return true时选择，否则过滤)# */# /*# function jq()# $(