JQuery常用方法一览
Posted X-JoNNeY
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery常用方法一览相关的知识,希望对你有一定的参考价值。
2 $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 3 $(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/值,参数是map 4 $(”img”).attr(”src”,”test.jpg”); 给某个元素添加属性/值 5 $(”img”).attr(”title”, function() { return this.src }); 给某个元素添加属性/值 6 $(”元素名称”).html(); 获得该元素内的内容(元素,文本等) 7 $(”元素名称”).html(”<b>new stuff</b>”); 给某元素设置内容 8 $(”元素名称”).removeAttr(”属性名称”) 给某元素删除指定的属性以及该属性的值 9 $(”元素名称”).removeClass(”class”) 给某元素删除指定的样式 10 $(”元素名称”).text(); 获得该元素的文本 11 $(”元素名称”).text(value); 设置该元素的文本值为value 12 $(”元素名称”).toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式 13 $(”input元素名称”).val(); 获取input元素的值 14 $(”input元素名称”).val(value); 设置input元素的值为value 15 Manipulation: 16 $(”元素名称”).after(content); 在匹配元素后面添加内容 17 $(”元素名称”).append(content); 将content作为元素的内容插入到该元素的后面 18 $(”元素名称”).appendTo(content); 在content后接元素 19 $(”元素名称”).before(content); 与after方法相反 20 $(”元素名称”).clone(布尔表达式) 当布尔表达式为真时,克隆元素(无参时,当作true处理) 21 $(”元素名称”).empty() 将该元素的内容设置为空 22 $(”元素名称”).insertAfter(content); 将该元素插入到content之后 23 $(”元素名称”).insertBefore(content); 将该元素插入到content之前 24 $(”元素”).prepend(content); 将content作为该元素的一部分,放到该元素的最前面 25 $(”元素”).prependTo(content); 将该元素作为content的一部分,放content的最前面 26 $(”元素”).remove(); 删除所有的指定元素 27 $(”元素”).remove(”exp”); 删除所有含有exp的元素 28 $(”元素”).wrap(”html”); 用html来包围该元素 29 $(”元素”).wrap(element); 用element来包围该元素 30 Traversing: 31 add(expr) 32 add(html) 33 add(elements) 34 children(expr) 35 contains(str) 36 end() 37 filter(expression) 38 filter(filter) 39 find(expr) 40 is(expr) 41 next(expr) 42 not(el) 43 not(expr) 44 not(elems) 45 parent(expr) 46 parents(expr) 47 prev(expr) 48 siblings(expr) 49 50 Core: 51 $(html).appendTo(”body”) 相当于在body中写了一段html代码 52 $(elems) 获得DOM上的某个元素 53 $(function(){……..}); 执行一个函数 54 $(”div > p”).css(”border”, “1px solid gray”); 查找所有div的子节点p,添加样式 55 $(”input:radio”, document.forms[0]) 在当前页面的第一个表单中查找所有的单选按钮 56 $.extend(prop) prop是一个jquery对象, 57 举例: 58 jQuery.extend({ 59 min: function(a, b) { return a < b ? a : b; }, 60 max: function(a, b) { return a > b ? a : b; } 61 }); 62 jQuery( expression, [context] ) —$( expression, [context]); 在默认情况下,$()查询的是当前HTML文档中的DOM元素。 63 64 each( callback ) 以每一个匹配的元素作为上下文来执行一个函数 65 举例:1 66 $(”span”).click(function){ 67 $(”li”).each(function(){ 68 $(this).toggleClass(”example”); 69 }); 70 }); 71 举例:2 72 $(”button”).click(function () { 73 $(”div”).each(function (index, domEle) { 74 // domEle == this 75 $(domEle).css(”backgroundColor”, “yellow”); 76 if ($(this).is(”#stop”)) { 77 $(”span”).text(”Stopped at div index #” + index); 78 return false; 79 } 80 }); 81 }); 82 83 84 jQuery Event: 85 86 ready(fn); $(document).ready()注意在body中没有onload事件,否则该函数不能执行。在每个页面中可以 87 有很多个函数被加载执行,按照fn的顺序来执行。 88 bind( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。可能的事件属性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, 89 mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, 90 keyup, error 91 one( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。在每个对 92 象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。 93 94 trigger( type, [data] ) 在每一个匹配的元素上触发某类事件。 95 triggerHandler( type, [data] ) 这一特定方法会触发一个元素上特定的事件(指定一个事件类型),同时取消浏览器对此事件的默认行动 96 unbind( [type], [data] ) 反绑定,从每一个匹配的元素中删除绑定的事件。 97 $(”p”).unbind() 移除所有段落上的所有绑定的事件 98 $(”p”).unbind( “click” ) 移除所有段落上的click事件 99 hover( over, out ) over,out都是方法, 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。 100 $(”p”).hover(function(){ 101 $(this).addClass(”over”); 102 }, 103 function(){ 104 $(this).addClass(”out”); 105 } 106 ); 107 108 toggle( fn, fn ) 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。 109 $(”p”).toggle(function(){ 110 $(this).addClass(”selected”); 111 }, 112 function(){ 113 $(this).removeClass(”selected”); 114 } 115 ); 116 117 元素事件列表说明 118 注:不带参数的函数,其参数为可选的 fn。jQuery不支持form元素的reset事件。 119 事件 描述 支持元素或对象 120 blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area 121 change( ) 用户改变域的内容 input, textarea, select 122 click( ) 鼠标点击某个对象 几乎所有元素 123 dblclick( ) 鼠标双击某个对象 几乎所有元素 124 error( ) 当加载文档或图像时发生某个错误 window, img 125 focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area 126 keydown( ) 某个键盘的键被按下 几乎所有元素 127 keypress( ) 某个键盘的键被按下或按住 几乎所有元素 128 keyup( ) 某个键盘的键被松开 几乎所有元素 129 load( fn ) 某个页面或图像被完成加载 window, img 130 mousedown( fn ) 某个鼠标按键被按下 几乎所有元素 131 mousemove( fn ) 鼠标被移动 几乎所有元素 132 mouseout( fn ) 鼠标从某元素移开 几乎所有元素 133 mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素 134 mouseup( fn ) 某个鼠标按键被松开 几乎所有元素 135 resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame 136 scroll( fn ) 滚动文档的可视部分时 window 137 select( ) 文本被选定 document, input, textarea 138 submit( ) 提交按钮被点击 form 139 unload( fn ) 用户退出页面 window 140 141 JQuery Ajax 方法说明: 142 143 load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。 144 $(”#feeds”).load(”feeds.html”); 将feeds.html文件载入到id为feeds的div中 145 $(”#feeds”).load(”feeds.php”, {limit: 25}, function(){ 146 alert(”The last 25 entries in the feed have been loaded”); 147 }); 148 149 jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。 150 $.get(”test.cgi”, { name: “John”, time: “2pm” }, function(data){ 151 alert(”Data Loaded: ” + data); 152 }); 153 154 jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。 155 $.getJSON(”test.js”, { name: “John”, time: “2pm” }, function(json){ 156 alert(”JSON Data: ” + json.users[3].name); 157 }); 158 159 jQuery.getScript( url, [callback] ) 使用GET请求javascript文件并执行。 160 $.getScript(”test.js”, function(){ 161 alert(”Script loaded and executed.”); 162 }); 163 jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。 164 165 ajaxComplete( callback ) 当一个AJAX请求结束后,执行一个函数。这是一个Ajax事件 166 $(”#msg”).ajaxComplete(function(request, settings){ 167 $(this).append(”<li>Request Complete.</li>”); 168 }); 169 ajaxError( callback ) 当一个AJAX请求失败后,执行一个函数。这是一个Ajax事件 170 $(”#msg”).ajaxError(function(request, settings){ 171 $(this).append(”<li>Error requesting page ” + settings.url + “</li>”); 172 });
1 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->ajaxSend( callback ) 在一个AJAX请求发送时,执行一个函数。这是一个Ajax事件 2 $(”#msg”).ajaxSend(function(evt, request, settings){ 3 $(this).append(”<li<Starting request at ” + settings.url 4 + “</li<”); 5 }); 6 7 ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时,执行一个函数。这是一个Ajax事件 8 当AJAX请求开始(并还没有激活时)显示loading信息 9 $(”#loading”).ajaxStart(function(){ 10 $(this).show(); 11 }); 12 13 ajaxStop( callback ) 当所有的AJAX都停止时,执行一个函数。这是一个Ajax事件 14 当所有AJAX请求都停止时,隐藏loading信息。 15 $(”#loading”).ajaxStop(function(){ 16 $(this).hide(); 17 }); 18 19 ajaxSuccess( callback ) 当一个AJAX请求成功完成后,执行一个函数。这是一个Ajax事件 20 当AJAX请求成功完成时,显示信息。 21 $(”#msg”).ajaxSuccess(function(evt, request, settings){ 22 $(this).append(”<li>Successful Request!</li>”); 23 }); 24 25 jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。 26 设置默认的全局AJAX请求选项。 27 $.ajaxSetup({ 28 url: “/xmlhttp/”, 29 global: false, 30 type: “POST” 31 }); 32 $.ajax({ data: myData }); 33 34 serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列 35 function showValues() { 36 var str = $(”form”).serialize(); 37 $(”#results”).text(str); 38 } 39 $(”:checkbox, :radio”).click(showValues); 40 $(”select”).change(showValues); 41 showValues(); 42 43 serializeArray( ) 连接所有的表单和表单元素(类似于.serialize()方法),但是返回一个JSON数据格式。 44 从form中取得一组值,显示出来 45 function showValues() { 46 var fields = $(”:input”).serializeArray(); 47 alert(fields); 48 $(”#results”).empty(); 49 jQuery.each(fields, function(i, field){ 50 $(”#results”).append(field.value + ” “); 51 }); 52 } 53 $(”:checkbox, :radio”).click(showValues); 54 $(”select”).change(showValues); 55 showValues(); 56 57 JQuery Effects 方法说明 58 59 show( ) 显示隐藏的匹配元素。 60 show( speed, [callback] ) 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。 61 hide( ) 隐藏所有的匹配元素。 62 hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数 63 toggle( ) 切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的, 64 切换为可见的。 65 slideDown( speed, [callback] ) 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选 66 地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以 67 “滑动”的方式显示出来。 68 slideUp( speed, [callback] ) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地 69 触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以”滑动” 70 的方式隐藏起来。 71 slideToggle( speed, [callback] ) 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回 72 调函数。 这个动画效果只调整元素的高度,可以使匹配的元素以”滑动”的方式隐 73 藏或显示。 74 fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触 75 发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的 76 高度和宽度不会发生变化。 77 fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触 78 发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的 79 高度和宽度不会发生变化。 80 fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成 81 后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所 82 有匹配的元素的高度和宽度不会发生变化。 83 stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中,他们就会立即开始。 84 queue( ) 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组) 85 queue( callback ) 在每一个匹配元素的事件序列的末尾添加一个可执行函数,作为此元素的事件函数 86 queue( queue ) 以一个新的动画序列代替所有匹配元素的原动画序列 87 dequeue( ) 执行并移除动画序列前端的动画 88 animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。 89 animate( params, options ) 创建自定义动画的另一个方法。作用同上。 90 91 JQuery Traversing 方法说明 92 93 eq( index ) 从匹配的元素集合中取得一个指定位置的元素,index从0开始 94 filter( expr ) 返回与指定表达式匹配的元素集合,可以使用”,”号分割多个expr,用于实现多个条件筛选 95 filter( fn ) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。 96 is( expr ) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的 97 表达式就返回true。 98 map( callback ) 将jQuery对象中的一组元素利用callback方法转换其值,然后添加到一个jQuery数组中。 99 not( expr ) 从匹配的元素集合中删除与指定的表达式匹配的元素。 100 slice( start, [end] ) 从匹配元素集合中取得一个子集,和内建的数组的slice方法相同。 101 add( expr ) 把与表达式匹配的元素添加到jQuery对象中。 102 children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器 103 将使这个方法只匹配符合的元素(只包括元素节点,不包括文本节点)。 104 contents( ) 取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集合(只包括元素节点,不 105 包括文本节点),如果元素为iframe,则取得其中的文档元素 106 find( expr ) 搜索所有与指定表达式匹配的元素。 107 next( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 108 nextAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合 109 parent( [expr] ) 取得一个包含着所有匹配元素的唯一父元素的元素集合。 110 parents( [expr] ) 取得一个包含着所有匹配元素的唯一祖先元素的元素集合(不包含根元素)。 111 prev( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。 112 prevAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。 113 siblings( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。 114 andSelf( ) 将前一个匹配的元素集合添加到当前的集合中 115 取得所有div元素和其中的p元素,添加border类属性。取得所有div元素中的p元素, 116 添加background类属性 117 $(”div”).find(”p”).andSelf().addClass(”border”); 118 $(”div”).find(”p”).addClass(”background”); 119 end( ) 结束当前的操作,回到当前操作的前一个操作 120 找到所有p元素其中的span元素集合,然后返回p元素集合,添加css属性 121 $(”p”).find(”span”).end().css(”border”, “2px red solid”); 122 123 JQuery Selectors 方法说明 124 125 基本选择器 126 $(”#myDiv”) 匹配唯一的具有此id值的元素 127 $(”div”) 匹配指定名称的所有元素 128 $(”.myClass”) 匹配具有此class样式值的所有元素 129 $(”*”) 匹配所有元素 130 $(”div,span,p.myClass”) 联合所有匹配的选择器 131 层叠选择器 132 $(”form input”) 后代选择器,选择ancestor的所有子孙节点 133 $(”#main > *”) 子选择器,选择parent的所有子节点 134 $(”label + input”) 临选择器,选择prev的下一个临节点 135 $(”#prev ~ div”) 同胞选择器,选择prev的所有同胞节点 136 基本过滤选择器 137 $(”tr:first”) 匹配第一个选择的元素 138 $(”tr:last”) 匹配最后一个选择的元素 139 $(”input:not(:checked) + span”)从原元素集合中过滤掉匹配selector的所有元素(这里有是一个临选择器) 140 $(”tr:even”) 匹配集合中偶数位置的所有元素(从0开始) 141 $(”tr:odd”) 匹配集合中奇数位置的所有元素(从0开始) 142 $(”td:eq(2)”) 匹配集合中指定位置的元素(从0开始) 143 $(”td:gt(4)”) 匹配集合中指定位置之后的所有元素(从0开始) 144 $(”td:gl(4)”) 匹配集合中指定位置之前的所有元素(从0开始) 145 $(”:header”) 匹配所有标题 146 $(”div:animated”) 匹配所有正在运行动画的所有元素 147 内容过滤选择器 148 $(”div:contains(’John’)”) 匹配含有指定文本的所有元素 149 $(”td:empty”) 匹配所有空元素(只含有文本的元素不算空元素) 150 $(”div:has(p)”) 从原元素集合中再次匹配所有至少含有一个selector的所有元素 151 $(”td:parent”) 匹配所有不为空的元素(含有文本的元素也算) 152 $(”div:hidden”) 匹配所有隐藏的元素,也包括表单的隐藏域 153 $(”div:visible”) 匹配所有可见的元素 154 属性过滤选择器 155 $(”div[id]”) 匹配所有具有指定属性的元素 156 $(”input[name=’newsletter’]”) 匹配所有具有指定属性值的元素 157 $(”input[name!=’newsletter’]”) 匹配所有不具有指定属性值的元素 158 $(”input[name^=’news’]”) 匹配所有指定属性值以value开头的元素 159 $(”input[name$=’letter’]”) 匹配所有指定属性值以value结尾的元素 160 $(”input[name*=’man’]”) 匹配所有指定属性值含有value字符的元素 161 $(”input[id][name$=’man’]”) 匹配同时符合多个选择器的所有元素 162 子元素过滤选择器 163 $(”ul li:nth-child(2)”), 164 $(”ul li:nth-child(odd)”), 匹配父元素的第n个子元素 165 $(”ul li:nth-child(3n + 1)”) 166 167 $(”div span:first-child”) 匹配父元素的第1个子元素 168 $(”div span:last-child”) 匹配父元素的最后1个子元素 169 $(”div button:only-child”) 匹配父元素的唯一1个子元素 170 表单元素选择器 171 $(”:input”) 匹配所有的表单输入元素,包括所有类型的input, textarea, select 和 button 172 $(”:text”) 匹配所有类型为text的input元素 173 $(”:password”) 匹配所有类型为password的input元素 174 $(”:radio”) 匹配所有类型为radio的input元素 175 $(”:checkbox”) 匹配所有类型为checkbox的input元素 176 $(”:submit”) 匹配所有类型为submit的input元素 177 $(”:image”) 匹配所有类型为image的input元素 178 $(”:reset”) 匹配所有类型为reset的input元素 179 $(”:button”) 匹配所有类型为button的input元素 180 $(”:file”) 匹配所有类型为file的input元素 181 $(”:hidden”) 匹配所有类型为hidden的input元素或表单的隐藏域 182 表单元素过滤选择器 183 $(”:enabled”) 匹配所有可操作的表单元素 184 $(”:disabled”) 匹配所有不可操作的表单元素 185 $(”:checked”) 匹配所有已点选的元素 186 $(”select option:selected”) 匹配所有已选择的元素 187 188 JQuery CSS 方法说明 189 190 css( name ) 访问第一个匹配元素的样式属性。 191 css( properties ) 把一个”名/值对”对象设置为所有匹配元素的样式属性。 192 $(”p”).hover(function () { 193 $(this).css({ backgroundColor:”yellow”, fontWeight:”bolder” }); 194 }, function () { 195 var cssObj = { 196 backgroundColor: “#ddd”, 197 fontWeight: “”, 198 color: “rgb(0,40,244)” 199 } 200 $(this).css(cssObj); 201 }); 202 css( name, value ) 在所有匹配的元素中,设置一个样式属性的值。 203 offset( ) 取得匹配的第一个元素相对于当前可视窗口的位置。返回的对象有2个属性, 204 top和left,属性值为整数。这个函数只能用于可见元素。 205 var p = $(”p:last”); 206 var offset = p.offset(); 207 p.html( “left: ” + offset.left + “, top: ” + offset.top ); 208 width( ) 取得当前第一匹配的元素的宽度值, 209 width( val ) 为每个匹配的元素设置指定的宽度值。 210 height( ) 取得当前第一匹配的元素的高度值, 211 height( val ) 为每个匹配的元素设置指定的高度值。 212 213 JQuery Utilities 方法说明 214 jQuery.browser 215 .msie 表示ie 216 jQuery.browser.version 读取用户浏览器的版本信息 217 jQuery.boxModel 检测用户浏览器针对当前页的显示是否基于w3c CSS的盒模型 218 jQuery.isFunction( obj ) 检测传递的参数是否为function 219 function stub() { } 220 var objs = [ 221 function () {}, 222 { x:15, y:20 }, 223 null, 224 stub, 225 “function” 226 ]; 227 jQuery.each(objs, function (i) { 228 var isFunc = jQuery.isFunction(objs[i]); 229 $(”span:eq( ” + i + “)”).text(isFunc); 230 }); 231 jQuery.trim( str ) 清除字符串两端的空格,使用正则表达式来清除给定字符两端的空格 232 jQuery.each( object, callback ) 一个通用的迭代器,可以用来无缝迭代对象和数组 233 jQuery.extend( target, object1, [objectN] ) 扩展一个对象,修改原来的对象并返回,这是一个强大的实现继承的 234 工具,这种继承是采用传值的方法来实现的,而不是JavaScript中的 235 原型链方式。 236 合并settings和options对象,返回修改后的settings对象 237 var settings = { validate: false, limit: 5, name: “foo” }; 238 var options = { validate: true, name: “bar” }; 239 jQuery.extend(settings, options); 240 241 合并defaults和options对象,defaults对象并没有被修改。options对象中的值 242 代替了defaults对象的值传递给了empty。 243 244 var empty = {} 245 var defaults = { validate: false, limit: 5, name: “foo” }; 246 var options = { validate: true, name: “bar” }; 247 var settings = $.extend(empty, defaults, options); 248 jQuery.grep( array, callback, [invert] ) 通过一个筛选函数来去除数组中的项 249 $.grep( [0,1,2], function(n,i){ 250 return n > 0; 251 }); 252 jQuery.makeArray( obj ) 将一个类似数组的对象转化为一个真正的数组 253 将选取的div元素集合转化为一个数组 254 var arr = jQuery.makeArray(document.getElementsByTagName(”div”)); 255 arr.reverse(); // use an Array method on list of dom elements 256 $(arr).appendTo(document.body); 257 jQuery.map( array, callback ) 使用某个方法修改一个数组中的项,然后返回一个新的数组 258 jQuery.inArray( value, array ) 返回value在数组中的位置,如果没有找到,则返回-1 259 jQuery.unique( array ) 删除数组中的所有重复元素,返回整理后的数组
1 1、关于页面元素的引用 2 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 3 4 2、jQuery对象与dom对象的转换 5 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是 jquery对象。 6 普通的dom对象一般可以通过$()转换成jquery对象。 7 如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。 8 由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。 9 如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。 10 以下几种写法都是正确的: 11 $("#msg").html(); 12 $("#msg")[0].innerHTML; 13 $("#msg").eq(0)[0].innerHTML; 14 $("#msg").get(0).innerHTML; 15 16 3、如何获取jQuery集合的某一项 17 对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而 get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个<div>元素的内容。有如下两种方法: 18 $("div").eq(2).html(); //调用jquery对象的方法 19 $("div").get(2).innerHTML; //调用dom的方法属性 20 21 4、同一函数实现set和get 22 Jquery中的很多方法都是如此,主要包括如下几个: 23 $("#msg").html(); //返回id为msg的元素节点的html内容。 24 $("#msg").html("<b>new content</b>"); 25 //将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content 26 27 $("#msg").text(); //返回id为msg的元素节点的文本内容。 28 $("#msg").text("<b>new content</b>"); 29 //将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b> 30 31 $("#msg").height(); //返回id为msg的元素的高度 32 $("#msg").height("300"); //将id为msg的元素的高度设为300 33 $("#msg").width(); //返回id为msg的元素的宽度 34 $("#msg").width("300"); //将id为msg的元素的宽度设为300 35 36 $("input").val("); //返回表单输入框的value值 37 $("input").val("test"); //将表单输入框的value值设为test 38 39 $("#msg").click(); //触发id为msg的元素的单击事件 40 $("#msg").click(fn); //为id为msg的元素单击事件添加函数 41 同样blur,focus,select,submit事件都可以有着两种调用方法 42 43 5、集合处理功能以上是关于JQuery常用方法一览的主要内容,如果未能解决你的问题,请参考以下文章