jQuery中andSelf()方法用法实例


Posted in Javascript onJanuary 08, 2015

本文实例讲述了jQuery中andSelf()方法用法。分享给大家供大家参考。具体分析如下:

此方法可以将先前所选的元素加入当前元素集合中。

语法结构:

.andSelf()

对于此方法可能理解起来有所困难,那么下面就详细分析一下下面的一段实例,为了便于查看代码,只截取了代码中的核心内容。
$(".second").nextAll().css("color","green"); 

<ul> 

  <li>html专区</li> 

  <li class="second">DIV+CSS专区</li> 

  <li>Javascript专区</li> 

  <li>Jquery专区</li> 

</ul>

以上代码运行之后,第三个和第四个li中的文本颜色被设置为绿色。再看下面这个代码:

$(".second").nextAll().andSelf().css("color","green");

<ul>

  <li>html专区</li>

  <li class="second">DIV+CSS专区</li>

  <li>Javascript专区</li>

  <li>Jquery专区</li>

</ul>

以上代码运行之后,第二个、第三个和第四个li中的文本颜色被设置为绿色。
两个代码运行结果的差距就是因为andSelf()方法的原因。

分析一下代码的执行过程:首先使用类选择器会选中第二个li元素,然后再使用nextAll()方法会把第三个和第四个元素转化为当前所选。如果到这里开始调用css()方法,那么就是第一段代码的运行结果。如果调用andSelf()方法则会把先前所选的加入到当前元素集合中,于是再调用css()方法,三个li元素中的字体颜色都会变成绿色。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $(".second").nextAll().andSelf().css("color","green"); 

}) 

</script> 

</head> 

<body> 

<div> 

  <ul> 

    <li>html专区</li> 

    <li class="second">DIV+CSS专区</li> 

    <li>Javascript专区</li> 

    <li>Jquery专区</li> 

  </ul> 

</div> 

</body> 

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
javascript解析json数据的3种方式
May 08 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery中add()方法用法实例
Jan 08 #Javascript
javascript 动态创建表格
Jan 08 #Javascript
javascript实现避免页面按钮重复提交
Jan 08 #Javascript
Node.js 制作实时多人游戏框架
Jan 08 #Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 #Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 #Javascript
jQuery中siblings()方法用法实例
Jan 08 #Javascript
You might like
优化使用mysql存储session的php代码
2008/01/10 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
浅入深出Vue之自动化路由
2019/08/06 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
python提取字典key列表的方法
2015/07/11 Python
基于python实现简单日历
2018/07/28 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
python变量命名的7条建议
2019/07/04 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
大学生入党思想汇报
2014/01/14 职场文书
大学毕业感言50字
2014/02/07 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
文化建设工作方案
2014/05/12 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
大学教师个人总结
2015/02/10 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
婚育证明格式
2015/06/17 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
分享3个非常实用的 Python 模块
2022/03/03 Python