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 相关文章推荐
XmlUtils JS操作XML工具类
Oct 01 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
OpenLayer学习之自定义测量控件
Sep 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实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
PHP实现八皇后算法
2019/05/06 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
Jquery性能优化详解
2014/05/15 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
利用python将json数据转换为csv格式的方法
2018/03/22 Python
Python中文编码知识点
2019/02/18 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
公司门卫岗位职责
2014/03/15 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
写给女朋友的保证书
2015/05/09 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
防止web项目中的SQL注入
2021/12/06 MySQL