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 SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
JS打印组合功能
Aug 04 Javascript
jQuery查找节点方法完整实例
Sep 13 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
深入探密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 $_ENV为空的原因分析
2009/06/01 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
cument.execCommand()用法深入理解
2012/12/04 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
python为什么会环境变量设置不成功
2020/06/23 Python
浅析python实现动态规划背包问题
2020/12/31 Python
我的求职计划书
2014/01/10 职场文书
初一体育教学反思
2014/01/29 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
作文评语集锦大全
2014/04/23 职场文书
创意婚礼策划方案
2014/05/18 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
公司行政管理制度范本
2015/08/05 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
优秀大学生申请书
2019/06/24 职场文书