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 写类方式之七
Jul 05 Javascript
ScrollDown的基本操作示例
Jun 09 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
js+html5实现侧滑页面效果
Jul 15 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
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中数据的批量导入(csv文件)
2006/10/09 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
js tab 选项卡
2009/04/26 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
python实现探测socket和web服务示例
2014/03/28 Python
Python使用MONGODB入门实例
2015/05/11 Python
python中zip和unzip数据的方法
2015/05/27 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
python算法题 链表反转详解
2019/07/02 Python
使用python turtle画高达
2020/01/19 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
介绍一下linux的文件系统
2012/03/20 面试题
护理个人求职信范文
2014/01/08 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
职称评定个人总结
2015/03/05 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python