jQuery中的一些常见方法小结(推荐)
更新时间:2016年06月13日 17:20:03 投稿:jingxian
下面小编就为大家带来一篇jQuery中的一些常见方法小结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
1.filter()和not()方法
filter()和not()是一对反方法,filter()是过滤.
filter()方法是针对元素自身。(跟has()方法有区别)
<script type="text/javascript" src="jquery-1.12.3.min.js"></script> <script> /*filter(): 过滤 not():filter的反义词<BR>*/ $(function(){ //$('div').filter('.box').css('background','red'); <SPAN style="COLOR: #ff0000">//将div中带有class=‘box'的div的背景色改成红色</SPAN> $('div').not('.box').css('background','red'); <SPAN style="COLOR: #ff0000">//将div中除带有class=‘box'的div的其他div设置背景色为红色</SPAN> ? 1 }); </script> <BR></head> <BR><body> <BR><div class="box">div</div><BR> <div>div2</div> <BR></body> <BR></html>
2.has()方法
has()方法表示的是包含的意思,它跟filter()方法是有区别的。has()方法有父子级关系。
<script type="text/javascript" src="jquery-1.12.3.min.js"></script> <script> /*filter(): 过滤 not():filter的反义词 has():包含 */ $(function(){ //$('div').has('span').css('background','red'); <SPAN style="COLOR: #ff0000">//只有包含span标签的div(父级)的背景色为红色</SPAN> $('div').has('.box').css('background','red'); <SPAN style="COLOR: #ff0000">//只有包含的标签的class值是box的div(父级)的背景色为红色</SPAN> }); </script> </head> <body> <div> div <span class="box"> span </span> </div> <div class="box">div2</div> <div class="haha">div3</div> </body> </html>
3.next()、prev()、find()、eq()方法
next()、prev()方法就是寻找下一个兄弟节点和上一个兄弟节点。
find()方法:寻找
eq():索引
<script type="text/javascript" src="jquery-1.12.3.min.js"></script> <script> /*next():下一个兄弟节点 prev():上一个兄弟节点 find():寻找 eq():索引 */ $(function(){ //$('div').find('h2').css('background','red'); <SPAN style="COLOR: #ff0000">//只会给div下的所有h2的背景色设置为红色</SPAN> $('div').find('h2').eq(0).css('background','red'); <SPAN style="COLOR: #ff0000">//给div下的第一个h2的背景设置为红色</SPAN> }); </script> </head> <body> <div> <h3>h3</h3> <h2>h2</h2> <h2>h2</h2> <h1>h1</h1> </div> <h2>haha</h2> //不会变红 </body> </html>
4.index()方法
<script> /* index():索引就是当前元素在所有兄弟节点中的位置 */ $(function(){ alert($('#h').index()); <SPAN style="COLOR: #ff0000"> //索引就是当前元素在所有兄弟节点中的位置</SPAN> //弹出是3 }); </script> </head> <body> <div> <h3>h3</h3> <h2>h2</h2> <h2>h2</h2> <h3 id="h">h3</h3> <h1>h1</h1> </div> <h2>haha</h2> </body> </html>
4.attr()方法
<script type="text/javascript" src="jquery-1.12.3.min.js"></script> <script> /* attr():属性设置 */ $(function(){ alert($('div').attr('title')); <SPAN style="COLOR: #ff0000">//获取属性title的值</SPAN> $('div').attr('title','456'); <SPAN style="COLOR: #ff0000">//设置title属性的值是456</SPAN> $('div').attr('class','box'); <SPAN style="COLOR: #ff0000"> //给div设置class属性,值是box</SPAN> }); </script> </head> <body> <div title="123">div</div> </body> </html>
以上这篇jQuery中的一些常见方法小结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
jquery的ajax如何使用ajaxSetup做全局请求拦截
在Web开发中,Ajax是一种常用的前后端数据交互技术,由于业务需求的复杂性和安全性的考虑,我们可能需要对Ajax请求进行全局拦截和处理,以便统一处理一些共性问题,如权限验证、错误处理等,本项目方案将介绍如何使用jQuery的Ajax实现全局请求拦截2023-11-11
最新评论