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 相关文章推荐
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
学习ExtJS fit布局使用说明
Oct 08 Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
jquery 元素相对定位代码
Oct 15 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
React Native 图片查看组件的方法
Mar 01 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生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
php生成gif动画的方法
2015/11/05 PHP
php上传图片类及用法示例
2016/05/11 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python实现删除文件与目录的方法
2014/11/10 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
python3中的md5加密实例
2018/05/29 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
详解如何减少python内存的消耗
2019/08/09 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
专升本个人自我评价
2013/12/22 职场文书
意向书范文
2014/03/31 职场文书
关于保护环境的建议书
2014/08/26 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
golang中的并发和并行
2021/05/08 Golang
nginx安装以及配置的详细过程记录
2021/09/15 Servers
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript