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 相关文章推荐
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
微信小程序自定义导航栏
Dec 31 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中使用BigMap实例
2015/03/30 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
Python设计实现的计算器功能完整实例
2017/08/18 Python
python requests post多层字典的方法
2018/12/27 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
Python continue语句实例用法
2020/02/06 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
书香家庭事迹材料
2014/05/09 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
员工年终考核评语
2014/12/31 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫