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 相关文章推荐
javascript语句中的CDATA标签的意义
May 09 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 Javascript
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
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
jQuery语法总结和注意事项小结
2012/11/11 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
python版本的读写锁操作方法
2016/04/25 Python
python实现数据图表
2017/07/29 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
python实现猜数字游戏
2020/03/25 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
如何现实servlet的单线程模式
2014/08/05 面试题
大专生自我鉴定范文
2013/10/01 职场文书
写给老师的表扬信
2014/01/21 职场文书
六查六看剖析材料
2014/02/15 职场文书
设备售后服务承诺书
2014/05/30 职场文书
重阳节活动总结
2014/08/27 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
风之谷观后感
2015/06/11 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
四十九个javascript小知识实用技巧
2021/11/20 Javascript
Rust中的Struct使用示例详解
2022/08/14 Javascript