当前位置:主页 > jquery教程 > jQuery中的一些常见方法小结

jQuery中的一些常见方法实例总结

发布:2019-08-01 21:41:39 154


本站精选了一篇相关的编程文章,网友马星晖根据主题投稿了本篇教程内容,涉及到jquery常见问题、方法、jQuery中的一些常见方法小结相关内容,已被241网友关注,如果对知识点想更进一步了解可以在下方电子资料中获取。

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 >//将div中带有class=‘box'的div的背景色改成红色</SPAN> 
  $('div').not('.box').css('background','red');    <SPAN >//将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 >//只有包含span标签的div(父级)的背景色为红色</SPAN> 
  $('div').has('.box').css('background','red');  <SPAN >//只有包含的标签的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 >//只会给div下的所有h2的背景色设置为红色</SPAN> 
  $('div').find('h2').eq(0).css('background','red');  <SPAN >//给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 > //索引就是当前元素在所有兄弟节点中的位置</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 >//获取属性title的值</SPAN> 
  $('div').attr('title','456');  <SPAN >//设置title属性的值是456</SPAN> 
  $('div').attr('class','box'); <SPAN > //给div设置class属性,值是box</SPAN> 
  }); 
</script> 
</head> 
 
<body> 
<div title="123">div</div> 
</body> 
</html> 

以上这篇jQuery中的一些常见方法小结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。


参考资料

相关文章

  • Python实例化class的执行顺序实例方法

    发布:2019-11-07

    这篇文章主要给大家介绍了关于Python中实例化class的执行顺序的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用python具有一定的参考学习价值,需要的朋友们随着小编来一起


  • pandas DataFrame行或列的删除方法代码

    发布:2020-01-06

    这篇文章主要介绍了pandas DataFrame行或列的删除方法的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学


  • SpringBoot中读取application.properties配置文件的方法

    发布:2023-04-11

    这篇文章主要介绍了SpringBoot中读取application.properties配置文件的三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧


  • Java 信息摘要加密MD2、MD4、MD5实例实现方法

    发布:2020-02-05

    这篇文章主要介绍了Java 信息摘要加密MD2、MD4、MD5实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下


  • python输出中文的方法

    发布:2020-07-21

    python中输出中文可以使用print语句。python3.0以上版本默认编码格式为utf-8。可以在命令行中和python交互模式中分别输出中文。


  • PHP实现关键字搜索后标红的方法

    发布:2019-11-22

    这篇文章主要介绍了PHP实现关键字搜索后描红功能,结合实例形式分析了php数据库连接、查询、字符串转换等相关操作技巧,需要的朋友可以参考下


  • Mybatis-Plus使用saveOrUpdate及问题解决方法

    发布:2023-03-05

    本文主要介绍了Mybatis-Plus使用saveOrUpdate及问题解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


  • python在WIN运行时去掉DOS窗口显示的方法

    发布:2018-10-22

    Python运行不显示DOS窗口的解决方法 很多朋友在写python程序的时候对DOS界面窗口比较排斥,无论从视觉还是应用上都是感觉怪怪的,我们在这里就给大家整理了运行python程序时候隐藏掉DOS窗口的方法,一起来看下。 方法1: pythonw xxx.py 方法2: 将.py改成.pyw (这个其实就是使用脚本解析程序pythonw.exe) 跟 python.exe 比较起来,pythonw.exe 有以下的不同: 1)执行时不会弹出控制台窗口(也叫


网友讨论