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 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
Vue的编码技巧与规范使用详解
Aug 28 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的责任链编程模式
2015/08/11 PHP
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
简单讲解Python中的闭包
2015/08/11 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
社区端午节活动方案
2014/01/28 职场文书
安全生产责任书
2014/03/12 职场文书
2015年防汛工作总结
2015/05/15 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
jquery插件实现搜索历史
2021/04/24 jQuery
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript