jQuery中的一些常见方法小结(推荐)


Posted in Javascript onJune 13, 2016

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中的一些常见方法小结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
javascript iframe跨域详解
Oct 26 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 #Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 #Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 #Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 #Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 #Javascript
浅谈JavaScript对象的创建方式
Jun 13 #Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 #Javascript
You might like
PHP安全性漫谈
2012/06/28 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
零基础php编程好学吗
2019/10/11 PHP
PHP实现倒计时功能
2020/11/16 PHP
javascript自启动函数的问题探讨
2013/10/05 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python2 与 python3 实现共存的方法
2018/07/12 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
keras 权重保存和权重载入方式
2020/05/21 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
学python爬虫能做什么
2020/07/29 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
《童年的发现》教学反思
2014/02/14 职场文书
环卫工人节活动总结
2014/08/29 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
行政前台岗位职责
2015/04/16 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
运动会3000米加油稿
2015/07/21 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
导游词之南京中山陵
2019/11/27 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python