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中关于indexOf的使用方法与问题小结
Aug 05 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
一行命令搞定node.js 版本升级
Jul 20 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
js漂浮广告实现代码
Aug 15 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
编写一个javascript元循环求值器的方法
Apr 14 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 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
自己做矿石收音机
2021/03/02 无线电
php中文件上传的安全问题
2006/10/09 PHP
PHP中cookies使用指南
2007/03/16 PHP
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
Python中多线程的创建及基本调用方法
2016/07/08 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
python FTP编程基础入门
2021/02/27 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
见习期自我鉴定
2014/01/31 职场文书
运动会解说词200字
2014/02/06 职场文书
商超业务员岗位职责
2015/02/13 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
赡养老人协议书范本
2015/08/06 职场文书