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 相关文章推荐
javascript使用activex控件的代码
Jan 27 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
axios post提交formdata的实例
Mar 16 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 Javascript
Vue学习之组件用法实例详解
Jan 06 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
python复制与引用用法分析
2015/04/08 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
Django REST framework 视图和路由详解
2019/07/19 Python
python根据多个文件名批量查找文件
2019/08/13 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
买房子个人收入证明
2014/01/16 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
铁路安全反思材料
2014/12/24 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
计划生育目标责任书
2015/05/09 职场文书
2016教师节问候语
2015/11/10 职场文书
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技