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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
vue的for循环使用方法
Feb 12 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 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实现的mongoDB单例模式操作类
2018/01/20 PHP
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
python3.5绘制随机漫步图
2018/08/27 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
Python对列表的操作知识点详解
2019/08/20 Python
Python列表list操作相关知识小结
2020/01/29 Python
如何利用Python识别图片中的文字
2020/05/31 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
python如何停止递归
2020/09/09 Python
python自动化发送邮件实例讲解
2021/01/04 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
超市5.1促销活动
2014/01/15 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
学生评语集锦
2015/01/04 职场文书
介绍信怎么写
2015/01/30 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
男生贾里读书笔记
2015/06/30 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL