jQuery中nextAll()方法用法实例


Posted in Javascript onJanuary 07, 2015

本文实例讲述了jQuery中nextAll()方法用法。分享给大家供大家参考。具体分析如下:

此方法查找匹配元素之后所有的同辈元素。也可以使用可选的表达式对同辈元素集合进行筛选。

语法结构:

$(selector).nextAll(expr)

参数列表:

参数 描述
expr 可选。用来过滤的表达式。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css"> 

.father{ 

  height:200px; 

  width:200px; 

  border:1px solid blue; 

} 

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("p").nextAll().css("color","blue") 

}) 

</script> 

</head> 

<body> 

<div class="father"> 

  <p>我是p元素</p> 

  <span>我是span元素</span> 

  <p>我是p元素</p> 

  <div>我是div元素</div> 

</div> 

</body> 

</html>

将p元素之后的所有同辈元素中的字体颜色设置蓝色。

实例二:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title> 

<style type="text/css"> 

.father{ 

  height:200px; 

  width:200px; 

  border:1px solid blue; 

} 

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("p").nextAll("div").css("color","blue") 

}) 

</script> 

</head> 

<body> 

<div class="father"> 

  <p>我是p元素</p> 

  <span>我是span元素</span> 

  <div>我是div元素</div> 

  <p>我是p元素</p> 

  <div>我是div元素</div> 

</div> 

</body> 

</html>

将p元素之后的所有同辈div元素中的字体颜色设置蓝色。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 Javascript
vue 实现上传组件
May 31 Vue.js
jQuery中next()方法用法实例
Jan 07 #Javascript
jQuery中find()方法用法实例
Jan 07 #Javascript
jQuery中closest()函数用法实例
Jan 07 #Javascript
javascript实现全角与半角字符的转换
Jan 07 #Javascript
自己封装的常用javascript函数分享
Jan 07 #Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 #Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 #Javascript
You might like
php中显示数组与对象的实现代码
2011/04/18 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
浅谈json_encode用法
2015/03/05 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
JS event使用方法详解
2008/04/28 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
JavaScript字符串对象
2017/01/14 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
浅谈js闭包理解
2019/03/28 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
3分钟学会一个Python小技巧
2018/11/23 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
高等教育学自荐书范文
2014/02/10 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
保护环境建议书400字
2014/05/13 职场文书
建筑管理专业求职信
2014/07/28 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书