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 isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
jQuery 创建Dom元素
May 07 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
微信小程序中显示倒计时代码实例
May 09 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
PHP sprintf()函数用例解析
2011/05/18 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
python中的五种异常处理机制介绍
2014/09/02 Python
Python多线程编程简单介绍
2015/04/13 Python
Python实现的简单hangman游戏实例
2015/06/28 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
python学习基础之循环import及import过程
2018/04/22 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
Solaris操作系统的线程机制
2015/07/28 面试题
上课说话检讨书大全
2014/01/22 职场文书
验房委托书
2014/08/30 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书