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 相关文章推荐
jquery 批量上传图片实现代码
Jan 28 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
JS与C#编码解码
Dec 03 Javascript
javascript实现获取字符串hash值
May 10 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 Javascript
vue3获取当前路由地址
Feb 18 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删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
phpinfo的知识点总结
2019/10/10 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
vue组件学习教程
2017/09/09 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
js实现时钟定时器
2020/03/26 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
在Python下尝试多线程编程
2015/04/28 Python
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python实现批量压缩图片
2018/01/25 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
python命令行工具Click快速掌握
2019/07/04 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
如何让python的运行速度得到提升
2020/07/08 Python
迪奥官网:Dior.com
2018/12/04 全球购物
新文化运动的口号
2014/06/21 职场文书
爱的教育观后感
2015/06/17 职场文书
小学同学聚会感言
2015/07/30 职场文书
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA
基于docker安装zabbix的详细教程
2022/06/05 Servers