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 实例一(first)
Mar 16 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 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 八种基本的数据类型小结
2011/06/01 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
常用的javascript设计模式
2017/01/11 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
一套C#面试题
2013/10/09 面试题
会计找工作求职信范文
2013/12/09 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
小学清明节活动方案
2014/03/08 职场文书
主持词开场白
2014/03/17 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
工作保证书怎么写
2015/02/28 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js
Elasticsearch 批量操作
2022/04/19 Python
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL