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 相关文章推荐
js+css在交互上的应用
Jul 18 Javascript
jquery uaMatch源代码
Feb 14 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
Vue.js用法详解
Nov 13 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 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设计模式 Adapter(适配器模式)
2011/06/26 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
jQuery 事件队列调整方法
2009/09/18 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
详解django中自定义标签和过滤器
2017/07/03 Python
Python zip()函数用法实例分析
2018/03/17 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
对python中list的五种查找方法说明
2020/07/13 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
一次性工伤赔偿协议书范本
2014/11/25 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
教师节班会开场白
2015/06/01 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
师德师风培训感言
2015/08/03 职场文书
关于军训的感想
2015/08/07 职场文书
培训心得体会怎么写
2016/01/25 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
用Python创建简易网站图文教程
2021/06/11 Python
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏