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的内存泄漏
Mar 04 Javascript
Prototype Array对象 学习
Jul 19 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 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中获取文件扩展名的N种方法小结
2012/02/27 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
php类自动加载器实现方法
2015/07/28 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
jQuery数组处理方法汇总
2011/06/20 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
python中MySQLdb模块用法实例
2014/11/10 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
浅析Python 条件控制语句
2020/07/15 Python
python dict如何定义
2020/09/02 Python
python中remove函数的踩坑记录
2021/01/04 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
规划编制实施方案
2014/03/15 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
模范教师事迹材料
2014/12/16 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
mysql left join快速转inner join的过程
2021/06/30 MySQL
在python中读取和写入CSV文件详情
2022/06/28 Python
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS