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 文件大小判断的实现代码
Apr 07 Javascript
js href的用法
May 13 Javascript
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 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正确配置mysql(apache环境)
2011/08/28 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
js实现抽奖效果
2017/03/27 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
在python中求分布函数相关的包实例
2020/04/15 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
SQL Server面试题
2013/04/04 面试题
2016年学校十一国庆节活动总结
2016/04/01 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
JavaScript组合继承详解
2021/11/07 Javascript
SQL 聚合、分组和排序
2021/11/11 MySQL
为Centos安装指定版本的Docker
2022/04/01 Servers