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 操作DOM的基本用法分享
Apr 05 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
浅谈node的事件机制
Oct 09 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
深入探密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新手上路(十四)
2006/10/09 PHP
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
客服服务心得体会
2013/12/30 职场文书
大学生实习思想汇报
2014/01/12 职场文书
银行内勤岗位职责
2014/04/09 职场文书
推广活动策划方案
2014/08/23 职场文书
画展邀请函
2015/01/31 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
详解MySQL 用户权限管理
2021/04/20 MySQL
Django如何创作一个简单的最小程序
2021/05/12 Python
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android