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获取复选框被选中值的简单方法
Jul 04 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
layUI的验证码功能及校验实例
Oct 25 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数据采集的详解
2013/06/02 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
python中的reduce内建函数使用方法指南
2014/08/31 Python
在Django的视图(View)外使用Session的方法
2015/07/23 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
解决Python中回文数和质数的问题
2019/11/24 Python
《记承天寺夜游》教学反思
2014/02/16 职场文书
白血病捐款倡议书
2014/05/14 职场文书
国贸专业求职信
2014/06/28 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
员工工作表现自我评价
2015/03/06 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
python基础之文件操作
2021/10/24 Python
详细介绍python操作RabbitMq
2022/04/12 Python