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 相关文章推荐
event.X和event.clientX的区别分析
Oct 06 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
一文搞懂redux在react中的初步用法
Jun 09 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 多维数组排序(usort,uasort)
2010/06/30 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
vue如何判断dom的class
2018/04/26 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
python实现简单爬虫功能的示例
2016/10/24 Python
python selenium firefox使用详解
2019/02/26 Python
pandas 时间格式转换的实现
2019/07/06 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
pytorch 修改预训练model实例
2020/01/18 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
制衣厂各岗位职责
2013/12/02 职场文书
工程业务员工作职责
2013/12/07 职场文书
公司开业庆典主持词
2014/03/21 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
务工证明怎么写
2015/06/18 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
python中__slots__节约内存的具体做法
2021/07/04 Python