jQuery中prev()方法用法实例

本文实例讲述了jQuery中prev()方法用法。分享给大家供大家参考。具体分析如下：

此方法取的匹配元素集合中每个元素紧邻的前一个同辈元素。
同辈元素集合可以通过选择器进行筛选。

语法结构:


代码如下:

$(selector).prev(expr)

参数列表:

参数 描述
expr 可选。用于筛选前一个同辈元素的表达式

实例代码:

实例一:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<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="http://www.jb51.net/" />
<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程序设计有所帮助。

赞 (0)

相关推荐

  • JQuery事件e参数的方法preventDefault()取消默认行为

    JQuery事件的e参数的方法preventDefault()可以取消对象的默认行为.如下代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <t

  • jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍

    jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍

    nextUntil() 获得每个元素所有跟随的同胞元素,当有参数时,则直到遇到该方法的参数所匹配的元素时会停止搜索.返回的新 jQuery 对象包含所有跟随的同胞元素,但不包括被选择器.DOM 节点或已传递的 jQuery 对象匹配的元素.如果没有参数,则会选取所有跟随的同胞元素,此时与.nextAll()方法相同. 语法一: 复制代码 代码如下: .nextUntil(selector,filter) 语法二: 复制代码 代码如下: .nextUntil(element,filter) 详细说

  • jQuery prev ~ siblings选择器使用介绍

    jQuery prev ~ siblings选择器使用介绍

    1.prev ~ siblings:匹配 prev 元素之后的所有 siblings 元素 2.(1)prev:任何有效选择器 (2)siblings:一个选择器,并且它作为第一个选择器的同辈 3.示例 (1)源码 siblings.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

  • jquery事件preventDefault()方法用法实例

    本文实例讲述了jquery事件preventDefault()方法用法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jquery事件:preventDefault()方法的使用</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <

  • jQuery中prevAll()方法用法实例

    本文实例讲述了jQuery中prevAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法查找匹配元素集合之前所有的同辈元素. 同辈元素集合可以通过选择器进行筛选. 语法结构: 复制代码 代码如下: $("selector").prevAll(expr) 参数列表: 参数 描述 expr 可选.用于过滤的表达式. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta cha

  • 使用jquery prev()方法找到同级的前一个元素

    检索每个段落,找到类名为 "selected" 的前一个同胞元素: $("p").prev(".selected") .prev() 方法允许我们在 DOM 树中搜索这些元素的前一个同胞元素,并用匹配元素构造一个新的 jQuery 对象. .prev()方法找到的是当前元素的同级的前一个元素

  • 关于jQuery里prev()的简单操作代码

    prev() 函数被用来匹配元素集的前一个兄弟元素,仅仅只有前一个兄弟元素被选择,其子元素将被忽略.这里给大家介绍jQuery里prev()的简单操作,具体内容如下: 一个朋友提了个需求给我:点击按钮删除input,如果input剩一个,点击按钮全部消失. 很简单的操作,但是你如果不知道jquery里有prev()这个方法,可能你会走很多弯路. 代码: html <div> <input type="text" placeholder="用户名"&

  • jQuery插件imgPreviewQs实现上传图片预览

    上传图片预览,支持IE6.IE7.IE8.IE9.IE10.IE11. 火狐.Chrome 具体没有测试,但是高版本都支持. imgPreviewQs.js /*! 依赖 jQuery 1.5.2 (c) 2016 license: http://www.opensource.org/licenses/mit-license.php */ (function($){ $.fn.imgPreviewQs = function(options){ function isIE(ver){ var b

  • jQuery中prev()方法用法实例

    本文实例讲述了jQuery中prev()方法用法.分享给大家供大家参考.具体分析如下: 此方法取的匹配元素集合中每个元素紧邻的前一个同辈元素. 同辈元素集合可以通过选择器进行筛选. 语法结构: 复制代码 代码如下: $(selector).prev(expr) 参数列表: 参数 描述 expr 可选.用于筛选前一个同辈元素的表达式 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&

  • jQuery中innerHeight()方法用法实例

    本文实例讲述了jQuery中innerHeight()方法用法.分享给大家供大家参考.具体分析如下: 获取第一个匹配元素内部区域高度. 包括内补白(padding).不包括边框border). 也就是说内部区域的宽度等于width和padding之和. 此方法对可见和隐藏元素均有效. 可以结合innerWidth()方法学习. 语法结构: 复制代码 代码如下: $(selector).innerHeight() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html

  • jQuery中die()方法用法实例

    本文实例讲述了jQuery中die()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除所有通过live()方法向指定元素添加的一个或多个事件处理程序. 语法结构: 复制代码 代码如下: $(selector).die(type,function) 参数列表: 参数 描述 type 可选.定义附加到元素的一个或多个事件类型.由空格分隔多个事件值. function 定义当事件发生时运行的函数. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html>

  • jQuery中data()方法用法实例

    本文实例讲述了jQuery中data()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以向匹配元素附加数据,或者从匹配元素获取数据. 语法结构一: 复制代码 代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-

  • jQuery中scrollLeft()方法用法实例

    本文实例讲述了jQuery中scrollLeft()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取或设置匹配元素相对滚动条左侧的偏移(offset)量. 语法结构一: 当scrollLeft()方法没有参数的时候就是获取匹配元素相对滚动条左侧的偏移量. 复制代码 代码如下: $(selector).scrollLeft() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&quo

  • jQuery中each()方法用法实例

    本文实例讲述了jQuery中each()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以以匹配元素集合中每一个元素作为上下文去执行一个函数. 当每次执行函数时,函数的执行环境都是一个匹配元素集合中不同的DOM元素,并且会将此元素在集合中索引传递给此函数,索引值是从0开始的.通过返回false可用于提早停止循环运行,返回true将继续执行函数,直到匹配元素中每一个元素都遍历完成. each()方法不同于jQuery.each()方法 .each()方法只能够遍历JQuery对象,而jQu

  • jQuery中offset()方法用法实例

    本文实例讲述了jQuery中offset()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置所匹配元素相对于document对象的偏移量. 语法结构一: 复制代码 代码如下: $(selector).offset() 获取匹配元素在当前document的相对偏移. 返回的对象包含两个整型属:top和left. 此方法只对可见元素有效. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta char

  • jQuery中unbind()方法用法实例

    本文实例讲述了jQuery中unbind()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除被选元素的事件处理程序,包括通过bind()方法注册的自定义事件. unbind()方法如果不带参数,则删除所有绑定的事件. 此方法如果提供了事件类型作为参数,则只删除该类型的绑定事件. 如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除. 语法结构: 复制代码 代码如下: $(selector).unbind(type,function) 参数列表: 参数 描述

  • jQuery中first()方法用法实例

    本文实例讲述了jQuery中first()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取匹配元素集合中的第一个元素. 语法结构: 复制代码 代码如下: $(selector).first() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="h

随机推荐