jquery常用技术总结_技术最新工作总结_第1页
jquery常用技术总结_技术最新工作总结_第2页
jquery常用技术总结_技术最新工作总结_第3页
jquery常用技术总结_技术最新工作总结_第4页
jquery常用技术总结_技术最新工作总结_第5页
已阅读5页,还剩10页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、xx年X月X日精品范文-jquery常用技术总结_技术工作总结(文章一):jquery技术核心点总结2xx-05-19 14:11:50jquery是一款非常优秀的web脚本语言,可以处理后端的各种数据,实现前端各样的效果,是web开发不可缺少的一门语言,下面就对jquery常用的函数做概要的介绍,方便查询和使用。(一)、核心:$是jquery类的一个别名,$()构造一个jquery对象,jQuery 的核心功能都是通过这个函数实现的。jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。(1)、$表达式:根据这个表达式来查找所有匹配的元素。eg:$(divp);查找所有p元

2、素,且这些p元素都是div的子元素.$(input:radio,document.forms0);查找文档第一个表单中,所有的单选按钮。$(div,xml.responseXML);在一个由ajax返回的xml文档中,查找所有的div元素。(2)、$(标记字符串) :根据提供的字符串,创建jquery对象包装的dom元素。eg: $(divpHello/p/div).appendTo(body);创建一个 input元素必须同时设定 type属性$(input type=text)(3)、$(dom元素):将一个或多个dom元素转换为jquery对象。eg: $(document.body).

3、css( background,black);设置页面背景色(4)、$(document).ready(function()=$(function();在页面加载完成后自动执行的代码。(二)、jquery对象访问。eq返回的是jquery对象,只能使用jquery方法,get返回的是dom元素对象,只能使用dom方法.(1)、$(dom元素).each(function():以每一个匹配的元素作为上下文来执行一个函数(2)、$(dom元素).size()=$(dom元素).length;对象中元素的个数。eg:img src=test(1)、jpg/img src=test(2)、jpg/,j

4、query代码:$(来自:jquery常用技术总结)img).size();返回2(3)、context:返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。如果没有指定,那么context指向当前的文档(document)。(4)、$(dom元素).get():取得所有匹配的dom元素的集合。如果你想要直接操作 DOM 对象而不是 jQuery 对象,这个函数非常有用。(5)、$(dom元素).get(index):取得其中一个匹配的元素.(6)、$(dom元素).index():搜索与参数表示的对象匹配的元素,并返回相应元素的索引值。(三)、插件机制:(1)、j

5、Query.fn.extend(object);扩展 jQuery 元素集来提供新的方法,针对某一个dom元素。eg:jQuery.fn.extend(check: function() return this.each(function() this.checked = true;);,uncheck: function() return this.each(function() this.checked = false;););调用:$(inputtype=checkbox).check();$(inputtype=radio).uncheck();(2)、$.extend(object)

6、;用来在jQuery命名空间上增加新函数,针对所有dom元素。$.extend(min:function(a,b)return aba:b;,max:function(a,b)return aba;b;);调用:$.max(10,20);(四)、选择器基本:(1)、$(#id): 根据给定的ID匹配一个元素。(2)、$(dom元素名):根据给定的元素名匹配所有元素(3)、$(.Class类名): 根据给定的类匹配元素。(4)、$(x) :匹配所有元素。(5)、$(dom元素.class类名):选择所有class属性为指定类名的dom元素。(6)、$(.stripe tr): 获取class属性

7、为stripe的table元素下的所有行层级:(1)、$(ancestor descendant):在给定的祖先元素下匹配所有的后代元素(2)、$(parent child):在给定的父元素下匹配所有的子元素(3)、$(prev + next):匹配所有紧接在 prev 元素后的 next 元素(4)、$(prevsiblings):匹配 prev 元素之后的所有 siblings(同级) 元素简单:(1)、$(tr:first) 匹配找到的第一个元素(2)、$(tr:last) 匹配找到的最后一个元素(3)、$(input:not(:checked) 去除所有与给定选择器匹配的元素(4)、$

8、(tr:even) 匹配所有索引值为偶数的元素,从 0 开始计数(5)、$(tr:odd) 匹配所有索引值为奇数的元素,从 0 开始计数(6)、$(tr:eq(1) 匹配一个给定索引值的元素(7)、$(tr:gt(0) 匹配所有大于给定索引值的元素(8)、$(tr:lt(2) 匹配所有小于给定索引值的元素内容:(1)、$(div:contaxx(John) 匹配包含给定文本的元素(2)、$(div:has(p) 匹配所有包含 p 元素的 div 元素(3)、$(td:empty) 查找所有不包含子元素或者文本的空元素可见性:(1)、$(tr:visible) 查找所有可见的 tr 元素(2)、

9、$(tr:hidden) 匹配所有的不可见元素,input 元素的 type 属性为 hidden的话也会被匹配到属性:(1)、$(divid) 查找所有含有 id 属性的 div 元素(2)、$(inputname=newsletter) 查找所有 name 属性是 newsletter 的 input 元素(3)、$(inputname!=newsletter) 查找所有 name 属性不是 newsletter 的 input 元素(4)、$(inputnamenews) 查找所有 name 以 news 开始的 input 元素(5)、$(inputname$=letter) 查找所有

10、 name 以 letter 结尾的 input 元素(6)、$(inputnamex=man) 查找所有 name 包含 man 的 input 元素(7)、$(inputidname$=man) 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的 子元素:(1)、nth-child(even)/:nth-child(odd)/:nth-child(3n)/:nth-child(2)/:nth-child(3n+1)/:nth-child(3n+2) 匹配其父元素下的第N个子或奇偶元素(2)、$(ul li:first-child) 在每个 ul 中查找第一个 li(3)

11、、$(ul li:last-child)在每个 ul 中查找最后一个 li(4)、$(ul li:only-child)在 ul 中查找是唯一子元素的 li表单:(1)、$(:input) 查找所有的input元素(2)、$(text) 匹配所有的单行文本框(3)、$(:password) 匹配所有密码框(4)、$(radio)匹配所有单选按钮(5)、$(checkbox) 匹配所有复选框(6)、$(submit)匹配所有提交按钮(7)、$(image) 匹配所有图像域(8)、$(button)匹配所有按钮(9)、$(file) 匹配所有文件域(10)、$(hidden) 匹配所有不可见元素,

12、或者type为hidden的元素表单对象属性:(1)、$(input:checked) 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)(2)、$(input:enabled) 匹配所有可用元素(3)、$(input:disabled) 匹配所有不可用元素(4)、$(select option:selected) 匹配所有选中的option元素(五)、属性操作操作属性:(1)、$(img).attr(src);返回文档中第一个图像的src属性值。(2)、$(img).attr(src,test.jpg);为所有匹配的元素设置一个属性值(3)、$(img).att

13、r(title,function() return this.src );为所有匹配的元素设置一个计算的属性值(4)、$(img).removeAttr(src);从每一个匹配的元素中删除一个属性(5)、$(img).attr( src: test.jpg,alt: Test Image);将一个“名/值”形式的对象设置为所有匹配元素的属性。操作CSS:(1)、$(p).addClass(selected);为每个匹配的元素添加指定的类名(2)、$(p).removeClass(selected);从所有匹配的元素中删除全部或者指定的类。一个或多个要删除的CSS类名,请用空格分开$(p).re

14、moveClass();删除匹配元素的所有类(3)、$(p).toggleClass(selected);如果存在(不存在)就删除(添加)一个类(4)、var count = 0;$(p).click(function()$(this).toggleClass(highlight,count+ % 3 = 0););每点击三下加上一次 selected 类代码:(1)、$(div).();取得第一个匹配元素的内容(2)、$(div).(pHello Again/p);设置每一个匹配元素的内容文本:(1)、$(p).text();取得所有匹配元素的内容(2)、$(p).text(bSome/bn

15、ew text.);设置所有匹配元素的文本内容值:(1)、$(#single).val() 获得第一个匹配元素的当前值。(2)、$(input).val(hello world!);设置每一个匹配元素的值(六)、筛选过滤:(1)、$(p).eq(1) 获取第N个元素,这个元素的位置是从0算起(2)、if ( $(this).hasClass(protected) ) 检查当前的元素是否含有某个特定的类,如果有,则返回true。(3)、$(p).filter(.selected) 筛选出与指定表达式匹配的元素集合(4)、is(expr) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元

16、素符合这个给定的表达式就返回true。(5)、$(p).not( $(#selected)0 ) 删除与指定表达式匹配的元素查找:(1)、$(div).children();取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。(2)、$(p).find(span);搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。(3)、$(p).next();取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合(4)、$(p).prev();取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。(5)、$(div).parent;取得一个

17、包含着所有匹配元素的唯一父元素的元素集合。(6)、$(span).parents;找到每个span元素的所有祖先元素(7)、$(div).siblings();取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合(七)、文档处理内部:(1)、$(p).append(bHello/b);向每个匹配的元素内部尾部追加内容(2)、$(p).prepend(bHello/b);向每个匹配的元素内部前部追加内容(3)、$(p).appendTo(#foo);把所有段落追加到ID值为foo的元素中。思想汇报专题外部:(1)、$(p).after(bHello/b);在每个匹配的元素之后内容(

18、2)、$(p).before(bHello/b);在每个匹配的元素之前内容包裹(1)、$(p).wrap(div class=wrap/div);把所有匹配的元素用其他元素的结构化标记包裹起来。替换:(1)、$(p).replaceWith(bParagraph./b);将所有匹配的元素替换成指定的或DOM元素。删除:(1)、$(p).empty();删除匹配的元素集合中所有的子节点。(2)、$(p).remove();从DOM中删除所有匹配的元素(八)、CSS操作CSS:(1)、$(p).css(color);取得第一个段落的color样式属性的值(2)、$(p).css( color: #

19、ff0011,background: blue);把一个“名/值对”对象设置为所有匹配元素的样式属性。(3)、$(p).css(color,red);在所有匹配的元素中,设置一个样式属性的值位置:(1)、var offset = p.offset();获取匹配元素在当前视口的相对偏移,返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。(2)、var position = p.position();获取匹配元素相对父元素的偏移尺寸:(1)、$(p).height();取得第一个匹配元素当前计算的高度值(px)。(2)、$(p).height(20);为每个匹配的元素设置C

20、SS高度(hidth)属性的值(3)、$(p).width();取得第一个匹配元素当前计算的宽度值(px)。$(window).width();获取当前窗口的宽(4)、$(p).width(20);为每个匹配的元素设置CSS宽度(width)属性的值(九)、效果基本:(1)、$(p).show() 显示隐藏的匹配元素(2)、$(p).hide() 隐藏显示的元素(3)、$(p).show(slow);以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。speed (String,Number) : 三种预定速度之一的字符串(slow,normal,or fast)或表示动画时

21、长的毫秒数值(如:1000)callback (Function) : (Optional) 在动画完成时执行的函数,每个元素执行一次。用迅速的动画将隐藏的段落显示出来,历时200毫秒。并在之后执行反馈!p style=display: noneHello/pjQuery 代码:$(p).show(fast,function()$(this).text(Animation Done!););(4)、$(p).hide(slow);以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。(5)、$(p).toggle() 切换元素的可见状态(6)、$(p).toggle(slow)

22、;以优雅的动画切换所有匹配的元素,并在显示完成后可选地触发一个回调函数淡入淡出:(1)、$(p).fadeIn(slow);通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数(2)、$(p).fadeOut(slow);通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。(3)、$(p).fadeTo(slow,0.66);$(p).fadeTo(slow,0.66);把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数自定义:(1)、$(#block).animate(width: 9

23、0%,(文章二):JQuery常用方法总结JQuery常用方法总结(2)ajaxSend( callback ) 在一个AJAX请求发送时,执行一个函数。这是一个Ajax事件 $(”#msg”).ajaxSend(function(evt,request,settings)$(this).append(”liStarting request at ” + settings.url+ “/li”););ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时,执行一个函数。这是一个Ajax事件当AJAX请求开始(并还没有激活时)显示loading信息$(”#loading

24、”).ajaxStart(function()$(this).show(););ajaxStop( callback ) 当所有的AJAX都停止时,执行一个函数。这是一个Ajax事件当所有AJAX请求都停止时,隐藏loading信息。$(”#loading”).ajaxStop(function()$(this).hide(););ajaxSuccess( callback ) 当一个AJAXAjax事件 当AJAX请求成功完成时,显示信息。$(”#msg”).ajaxSuccess(function(evt,request,settings)$(this);jQuery.ajaxSetup(

25、 options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。设置默认的全局AJAX请求选项。global: false,type: “POST”);$.ajax( data: myData );serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列function showValues() var str = $(”form”).serialize();$(”#results”).text(str);$(”:checkbox,:radio”).click(showValues);$(”select”).change(showV

26、alues);showValues();serializeArray( ) 连接所有的表单和表单元素(类似于.serialize()方法),但是返回一个JSON数据格式。从form中取得一组值,显示出来function showValues() var fields = $(”:input”).serializeArray();alert(fields);$(”#results”).empty();jQuery.each(fields,function(i,field)$(”#results”).append(field.value + ” “););$(”:checkbox,:radio”)

27、.click(showValues);$(”select”).change(showValues);showValues();JQuery Effects 方法说明show( ) 显示隐藏的匹配元素。show( speed,callback ) 回调函数。hide( ) 隐藏所有的匹配元素。hide( speed,callback ) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数toggle( ) 切换为可见的。通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以“”slideUp( s

28、peed,callback ) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以”滑动”的方式隐藏起来。slideToggle( speed,callback ) 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以”滑动”的方式隐藏或显示。fadeIn( speed,callback ) 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和

29、宽度不会发生变化。fadeOut( speed,callback ) 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的 高度和宽度不会发生变化。fadeTo( speed,opacity,callback ) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中,他们就会立即开始。queue( ) 取得第一个匹配

30、元素的动画序列的引用(返回一个内容为函数的数组)queue( callback ) 在每一个匹配元素的事件序列的末尾添加一个可执行函数,作为此元素的事件函数queue( queue ) 以一个新的动画序列代替所有匹配元素的原动画序列dequeue( ) 执行并移除动画序列前端的动画animate( params,duration,easing,callback ) 用于创建自定义动画的函数。animate( params,options ) 创建自定义动画的另一个方法。作用同上。JQuery Traversing 方法说明eq( index ) 从匹配的元素集合中取得一个指定位置的元素,ind

31、ex从0开始filter( expr ) 返回与指定表达式匹配的元素集合,可以使用”,”号分割多个expr,用于实现多个条件筛选filter( fn ) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。is( expr ) 表达式就返回true。map( callback ) 将jQuery对象中的一组元素利用callback方法转换其值,然后添加到一个jQuery数组中。not( expr ) 从匹配的元素集合中删除与指定的表达式匹配的元素。slice方法相同。add( expr ) 把与表达式匹配的元素添加到jQuery对象中。children( expr ) 取得一个包含匹配的元

32、素集合中每一个元素的所有子元素的元素集合。可选的过滤器将使这个方法只匹配符合的元素(只包括元素节点,不包括文本节点)。(只包括元素节点,不包括文本节点),如果元素为iframe,则取得其中的文档元素find( expr ) 搜索所有与指定表达式匹配的元素。next( expr ) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。nextAll( expr ) 取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合 parent( expr ) 取得一个包含着所有匹配元素的唯一父元素的元素集合。parents( expr ) 取得一个包含着所有匹配元素的唯一祖先元

33、素的元素集合(不包含根元素)。prev( expr ) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。prevAll( expr ) 取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。siblings( expr ) 取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。andSelf( ) 将前一个匹配的元素集合添加到当前的集合中取得所有div元素和其中的p元素,添加border类属性。取得所有div元素中的p元素,添加background类属性$(”div”).find(”p”).andSelf().addClass(”border”);

34、$(”div”).find(”p”).addClass(”background”);end( ) 结束当前的操作,回到当前操作的前一个操作找到所有p元素其中的span元素集合,然后返回p元素集合,添加css属性$(”p”).find(”span”).end().css(”border”,“2px red solid”);JQuery Selectors 方法说明基本选择器$(”#myDiv”) 匹配唯一的具有此id值的元素$(”div”) 匹配指定名称的所有元素 $(”.myClass”) 匹配具有此class样式值的所有元素$(“x”) 匹配所有元素$(”div,span,p.myClass

35、”) 联合所有匹配的选择器层叠选择器$(”form input”) 后代选择器,选择ancestor$(”#main x”) 子选择器,选择parent的所有子节点$(”label + input”) 临选择器,选择prev的下一个临节点$(”#prevdiv”) 同胞选择器,选择基本过滤选择器$(”tr:first”)$(”tr:last”) 匹配最后一个选择的元素$(”input:not(:checked) + span”)从原元素集合中过滤掉匹配selector的所有元素(这里有是一个临选择器)$(”tr:even”) 匹配集合中偶数位置的所有元素(从0开始)$(”tr:odd”) (从

36、0开始)$(”td:eq(2)”) 匹配集合中指定位置的元素(从0开始)$(”td:gt(4)”) 匹配集合中指定位置之后的所有元素(从0开始)(从0开始)$(”:header”) 匹配所有标题匹配所有正在运行动画的所有元素内容过滤选择器$(“div:contaxx(John)”) 匹配含有指定文本的所有元素$(”td:empty”) 匹配所有空元素(只含有文本的元素不算空元素)$(”div:has(p)”) 从原元素集合中再次匹配所有至少含有一个selector的所有元素$(”td:parent”) 匹配所有不为空的元素(含有文本的元素也算)$(”div:hidden”) 匹配所有隐藏的元素

37、,也包括表单的隐藏域$(”div:visible”) 匹配所有可见的元素属性过滤选择器$(”divid”) 匹配所有具有指定属性的元素$(”inputname=newsletter”) 匹配所有具有指定属性值的元素$(”inputname!=newsletter”) 匹配所有不具有指定属性值的元素$(”inputnamenews”) 匹配所有指定属性值以value开头的元素$(”inputname$=letter”) 匹配所有指定属性值以value结尾的元素 $(”inputnamex=man”) 匹配所有指定属性值含有value字符的元素$(”inputidname$=man”) 匹配同时符

38、合多个选择器的所有元素子元素过滤选择器$(”ul li:nth-child(2)”),$(”ul li:nth-child(odd)”),匹配父元素的第n个子元素$(”ul li:nth-child(3n +1)”)$(”div span:first-child”) 匹配父元素的第1个子元素$(”div span:last-child”) 匹配父元素的最后1个子元素$(”div button:only-child”) 匹配父元素的唯一1个子元素表单元素选择器$(”:input”) 匹配所有的表单输入元素,包括所有类型的input,textarea,select 和 button $(”:tex

39、t”) 匹配所有类型为text的input元素$(”:password”) 匹配所有类型为password的input$(”:radio”) 匹配所有类型为radio的input元素$(”:checkbox”) 匹配所有类型为checkbox的input元素$(”:submit”) 匹配所有类型为submit的input元素$(”:image”) 匹配所有类型为image的input元素$(”:reset”) 匹配所有类型为reset的$(”:button”) 匹配所有类型为button的input元素$(”:file”) 匹配所有类型为file的input元素$(”:hidden”) 匹配所

40、有类型为hidden的input元素或表单的隐藏域表单元素过滤选择器$(”:enabled”)$(”:disabled”) 匹配所有不可操作的表单元素$(”:checked”)$(”select option:selected”) 匹配所有已选择的元素css( properties ) 把一个”名/值对”对象设置为所有匹配元素的样式属性。$(”p”).hover(function () $(this).css( backgroundColor:”yellow”,fontWeight:”bolder” );,function () var cssObj = backgroundColor: “#

41、ddd”,fontWeight: “”,color: “rgb(0,40,244)”$(this).css(cssObj);(文章三):jquery心得、技巧、总结Jquery.开始:$(document).ready(function() );可缩写成:$(function();选择器:引号中可以有多个一起选择$(“#id”)要求id唯一$(“.class”) class名对应的元素$(“标签”)所有标签元素对象$(“x”)所有元素$(“a b”)a元素下的所有子孙b元素$(“ab”)a元素下的所有子b元素$(“a+b”)a元素后的下一个b元素 等价于 $(“a”).next(“b”);$(

42、“ab”)a元素后的所有b元素 等价于 $(“a”).nextAll(“b”);$(“#a”).siblings(“div”)#a元素的所有同辈div元素过滤选择器::first 第一个元素:last 最后一个元素:not(selector) 除selector选择器对应的之外的所有元素:even 索引为偶数的所有元素(索引从0开始)dd 索引为奇数的所有元素:eq(index) 索引等于index的元素:gt(index) 索引大于index的元素:lt(index) 索引小于index的元素:header 所有标题元素(h1h6):animated 正在执行动画的所有元素:contaxx(

43、text) 含有文本内容为text的元素:empty 不包含子元素或文本的空元素:has(selector) 含有selector选择器所匹配的元素的元素:parent 含有子元素或者文本的元素:hidden 所有不可见元素:visible 所有可见元素属性过滤选择器:多个可合并att 拥有此属性的元素att=val 属性值为val的元素att!=val 属性值不等于val的元素attval 属性值以val开始的元素att$=val 属性值以val结束的元素attx=val 属性值含有val的元素子元素过滤选择器:nth-child(index/even/odd/equation)每个父元素下

44、的第index个子元素或者奇偶元素index从1开始也可以是2n代表2的倍数:first-child每个父元素的第一个子元素:last-child每个父元素的最后一个子元素nly-child每个父元素中只有一个子元素的子元素表单对象属性过滤选择器:enabled 所有可用元素:disabled 所有不可用元素:checked 所有选中元素(单选、复选):selected 所有选中元素(下拉列表)表单选择器:input 所有imput,textarea,select,button:text 所有单行文本框:password 所有密码框:radio 所有单选框:checkbox 所有多选框:sub

45、mit 所有提交按钮:image 所有图像按钮:reset 所有重置按钮:button 所有按钮:file 所有上传域:hidden 所有不可见元素Object.filter(exp)筛选出与exp匹配的元素集合。exp可以是多个选择器的组合交互处理: 两个function中来回切换调用Object.hover(enter,leave):鼠标移上,移出事件 Object.toggle(fn1,fn2,fnN):多次点击事件例如:Object.toggle(function()/显示元素代码,function()/隐藏元素代码)交互使用class样式:Object.toggleClass(“cl

46、assName”)重复交替使用classObject.show(time) time ms时间显示Object对应的元素(宽高和透明度同时)Object.hide(time) time ms时间隐藏Ojbect对应的元素(宽高和透明度同时)若无时间则瞬间Object.fadeIn();增加不透明度使显示,只改变元素的不透明度Object.fadeOut();降低不透明度Object.slideUp();元素由下到上缩短隐藏Object.slideDown();元素由上至下延伸显示都可以指定三种参数:”slow”,”normal”,”fast”分别是600,400,200ms,都可以设定一个回调

47、函数 自定义动画:Object.animate(params,speed,callback);params:key/val的键值对,speed:速度,callback:动画完成执行函数.例如:$(“div”).animate(left:”+=500px”,3000);3s内向右移动500px.其中的值可以是数字,+=代码原来基础上向右500,也可以-=,也可500px控制滚动条用scrollTop属性停止动画:stop(clearQueue,gotoEnd),两参数都可选同为boolean值,第一个代表是否清空未执行完的动画队列,第二个代表是否直接将正在执行的动画跳转到末状态。默认都为fals

48、e判断元素是否正处于动画状态:Object.is(“:animated”)Object.toggle();交替显示/隐藏元素(可见性)。Object.slideToggle();交替显示/隐藏元素(元素高度)。Object.fadeTo();交替显示/隐藏元素(元素不透明度)。可含参数:时间,不透明度var $xx = jQuery对象 var xx=DOM对象1(3)、jQuery对象和DOM对象间方法不可混用,可将jQuery对象转换成DOM对象后使用原本DOM对象的方法:$xx0或者$xx.get(0);将DOM对象转换成jQuery对象:var $xx = $(xx),可将xx的DOM

49、对象转换成jQuery对象1(4)、判断复选框是否选中:$xx.is(“:checked”)解决和其他js框架的冲突: 后导入jQuery库一开始调用方法:jQuery.noConflict();使用:其他的可以用$,jQuery的只能用jQuery(“”)或者开始定义:var $j = jQuery.noConflict();然后其他的用$,jQuery的用$j(“”)共同使用$:jQuery.noConflict();(function($)$(function()/jQuery代码可以使用$(“”);)(jQuery);/其他js框架使用$(“”) 先导入jQuery库:不需要调用jQu

50、ery.noConflict();其他一样使用判断元素是否存在:if($(“#id”).length 0) 或者if($(“#id”)0) 而不能用if($(“#id”)获取对象的属性:Object.attr(“属性的key”)设置对象的属性:Object.attr(“属性的key”,”属性的val”)或者Object.attr(key:val,key:val) 删除对象的属性:Object.removeAttr(“属性的key”)追加样式:Object.addClass();修改样式:可用attr来做移除样式:Object.removeClass();多个之间用空格分隔创建,DOM:$(“标

51、签”)例创建一个li:var $li1=$(“li/li”)添加节点:Object.append(Object2);在Object中追加Object2。例$(“ul”).append($li1);Object.appendTo(Object2);与上一个相反,将Object追加到Object2中。$li(1)、appendTo(“ul”) Object.prepend(Object2);在Object前追加Object2。(文章四):JQuery中常用的函数方法总结jQuery中为我们提供了很多有用的方法和属性,自己总结的一些常用的函数,方法。个人认为在开发中会比较常用的,仅供大家学习和参考。

52、事件处理ready(fn)代码 :$(document).ready(function()/ Your code here.);作用 :它可以极大地提高web应用程序的响应速度。通过使用这个方法,可以在DOM载入就绪能够读取并 操纵时立即调用你所绑定的函数,而9(9)、99%的JavaScript函数都需要在那一刻执行。bind(type,data,fn)代码 :$(p).bind(click,function()alert( $(this).text() ););作用 :为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。起到事件监听的作用。toggle(fn,fn)代 码:$

53、(td).toggle(function () $(this).addClass(selected);,function () $(this).removeClass(selected););作用 :每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同 一元素时,则触发指定的第二个函数。挺有趣的一个函数,在动态实现某些功能的时候可能会用到。(像click(),focus(),keydown()这样的事件这里就不提了,那些都是开发中比较常用到的。)外观效果addClass(class)和 removeClass(class)代码 :$(.stripe tr)

54、.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(c

55、olor,red);作用 :很简单,就是在匹配的元素中,设置一个样式属性的值。这个个人感觉和上面的 addClass(class)有点类似。slide(),hide(),fadeIn(),fadeout(),slideUp(),slideDown()代码 :$(#btnShow).bind(click,function(event) $(#divMsg).show() );$(#btnHide).bind(click,function(ev) $(#divMsg).hide() );作用 :jQuery中提供的比较常用的几个动态效果的函数。还可以添加参数:show(speed,callback)以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。animate(params,duration,easing,callback)作 用 :制作动画效果用到的函数,功能非常的强大,可以连续使用此函数。查找筛选map(callback) 代码:pbValues: /b/pforminput type=t

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论