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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 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中Session和Cookie是如何操作的
2015/10/10 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
javascript自然分类法算法实现代码
2013/10/11 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
python利用Guetzli批量压缩图片
2017/03/23 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
Python __slots__的使用方法
2020/11/15 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
工商治理实习生的自我评价分享
2014/02/20 职场文书
授权委托书公证
2014/09/14 职场文书
解除施工合同协议书
2014/10/17 职场文书
销售2014年度工作总结
2014/12/08 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
祝寿主持词
2015/07/02 职场文书
使用HttpSessionListener监听器实战
2022/03/17 Java/Android
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server