jQuery中prev()方法用法实例


Posted in Javascript onJanuary 08, 2015

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

此方法取的匹配元素集合中每个元素紧邻的前一个同辈元素。
同辈元素集合可以通过选择器进行筛选。

语法结构:

$(selector).prev(expr)

参数列表:

参数 描述
expr 可选。用于筛选前一个同辈元素的表达式

实例代码:

实例一:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

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

<title>prev()函数-三水点靠木</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(){

  $(".father p").prev().css("color","blue")

})

</script>

</head>

<body>

<div class="father">

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

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

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

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

</div>

</body>

</html>

以上代码可以将class属性值为father元素下的p元素集合中每一个p元素前一个元素的字体颜色设置为蓝色。

实例二:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

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

<title>prev()函数-三水点靠木</title> 

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

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("li").prev(".js").css("color","red"); 

}) 

</script> 

</head> 

<body> 

<div> 

  <ul> 

    <li>HTML专区</li> 

    <li class="js">Javascript专区</li> 

    <li>Div+Css专区</li> 

    <li>Jquery专区</li> 

  </ul> 

</div> 

</body> 

</html>

以上代码可以将所有li元素集合中每一个li元素前面class属性值为js的元素的字体颜色设置为红色。

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

Javascript 相关文章推荐
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
vue+canvas实现拼图小游戏
Sep 18 Javascript
深入探密Javascript数组方法
Jan 08 #Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 #Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 #Javascript
jQuery中parents()方法用法实例
Jan 07 #Javascript
jQuery中parent()方法用法实例
Jan 07 #Javascript
jQuery中nextUntil()方法用法实例
Jan 07 #Javascript
jQuery中nextAll()方法用法实例
Jan 07 #Javascript
You might like
php for 循环语句使用方法详细说明
2010/05/09 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
JS 图片缩放效果代码
2010/06/09 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
Python中的面向对象编程详解(上)
2015/04/13 Python
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
python爬取网易云音乐评论
2018/11/16 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
Weblogic和WebSphere不同特点
2012/05/09 面试题
房产销售经理职责
2013/12/20 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
六一亲子活动总结
2014/07/01 职场文书
教师师德师风整改措施
2014/10/24 职场文书
加入学生会自荐书
2015/03/05 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
考试后的感想
2015/08/07 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
代码复现python目标检测yolo3详解预测
2022/05/06 Python