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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
js 获取扫码枪输入数据的方法
Jun 10 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过滤XSS攻击的函数
2013/11/12 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
Use Word to Search for Files
2007/06/15 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
python自然语言编码转换模块codecs介绍
2015/04/08 Python
详解Python中的文件操作
2016/08/28 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
社会治安综合治理管理责任书
2014/04/16 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
python实现简单聊天功能
2021/07/07 Python
MySQL学习必备条件查询数据
2022/03/25 MySQL