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实现以post打开新窗口
Mar 19 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
纯js实现倒计时功能
Jan 06 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 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调用数据库的存贮过程!
2006/10/09 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
python散点图实例之随机漫步
2018/08/27 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
python实现图像拼接功能
2020/03/23 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
C语言基础笔试题
2013/04/27 面试题
求职信模板标准格式范文
2014/02/23 职场文书
产品委托授权书范本
2014/09/16 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL