`
jackroomage
  • 浏览: 1217927 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

jQuery中(prev + next) 和 (prev ~ siblings)的不同点。

 
阅读更多

jQuery中(prev + next) 和 (prev ~ siblings)的不同点。

 

 

 

<!DOCTYPE html>
<html>
<head>
  <style>

  div,span {
    display:block;
    width:80px;
    height:80px;
    margin:5px;
    background:#bbffaa;
    float:left;
    font-size:14px;
  }
  div#small {
    width:60px;
    height:25px;
    font-size:12px;
    background:#fab;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <div>div (doesn't match since before #prev)</div>
  <span id="prev">span#prev</span>

  <div>div sibling</div>

  <div>div sibling <div id="small">div niece</div></div>
  <span>span sibling (not div)</span>
  <div>div sibling</div>

<script>
//   ~  代表id"prem"后面的div都要变
$("#prev ~ div").css("border", "3px groove blue");
//  +  代表id"prev"后面的第一个div要变
$("#prev + div").css("border", "3px groove blue");
</script>


</body>
</html>

分享到:
评论

相关推荐

    jQuery1.4.1中文速查参考

    - 层次选择器:例如`parent &gt; child`,`ancestor descendant`,`prev + next`,`prev ~ siblings`,用于选取特定关系的元素。 2. **DOM操作(DOM Manipulation)** - `$(html)`:将HTML字符串转换为jQuery对象,...

    jquery1.7.2中文手册

    - `.next()`和`.prev()`获取元素的下一个或上一个兄弟元素。 - `.filter()`和`.not()`用于筛选元素集合。 4. **事件处理(Events)** - `$(selector).on("event", function)`用于绑定事件处理函数,如`click`、`...

    jquery相关知识点

    2. **层次选择器**: 如`parent&gt;child`, `prev+next`, `prev~siblings`。 3. **基本过滤器选择器**: 如`:first`, `:last`, `:not(selector)`, `:even`, `:odd`, `:eq(index)`, `:gt(index)`, `:lt(index)`。 4. **...

    jQuery编程笔记

    ### jQuery编程笔记知识点详解 #### 一、jQuery概述 ...以上是对jQuery编程笔记中提到的知识点的详细解读,覆盖了从基础知识到高级应用的各个方面,有助于深入理解和掌握jQuery的使用方法和技术细节。

    JQuery API中文版CHM

    jQuery提供了`children()`, `siblings()`, `parent()`, `next()`, `prev()`等方法遍历DOM树,`:first`, `:last`, `:even`, `:odd`, `:eq(index)`等过滤器用于筛选元素。 ### 9. **工具方法(Utility Methods)** 如...

    jQuery轮播图

    1. **响应式设计**:确保轮播图在不同设备和屏幕尺寸下都能良好展示。 2. **优化性能**:合理使用CSS3的动画效果,减少JavaScript的计算量,避免影响页面加载速度。 3. **无障碍访问**:为键盘用户和屏幕阅读器提供...

    jQuery全能权威指南 源代码

    7. **遍历与迭代**:jQuery提供了便利的遍历和迭代方法,如`.each()`, `.next()`, `.prev()`, `.siblings()`等,帮助开发者处理集合操作。 8. **链式调用**:jQuery的一大特色是链式调用,允许在单个对象上调用多个...

    jQuery1.3中文参考文档.rar

    7. **遍历(Traversal)**:jQuery提供了多种遍历DOM的方法,如`parent()`, `children()`, `siblings()`, `next()`, `prev()`等,帮助开发者在DOM树中导航。 8. **插件机制(Plugin System)**:jQuery的插件机制是...

    jquery鼠标滑过闪光滑出标题.zip

    在实际的代码实现中,可能还会涉及到DOM遍历(如`children()`、`siblings()`等方法)、AJAX加载新图片(如果相册支持动态加载更多)以及响应式设计,确保在不同设备和屏幕尺寸上都能良好运行。 综上所述,“jquery...

    前端面试题全套整理附详细解答.pdf

    - 在JavaScript中,DOM对象和jQuery对象是两种不同的对象类型,不能混用彼此的方法。 - DOM对象可使用原生JavaScript方法,而jQuery对象则不能。 - 在需要对动态生成的元素进行事件绑定时,推荐使用`live()`或其替代...

    jQueryAPI1.4

    - 兄弟元素选择器:`$('prev + next')`选择紧接在prev元素后面的next元素。 2. **DOM操作(DOM Manipulation)** - 插入元素:`$(selector).append(content)`在选定元素的末尾添加内容,`prepend`则在开头插入。 ...

    jquery大号箭头焦点图.

    jQuery作为一款轻量级的JavaScript库,因其丰富的插件和易用性,常被用来实现焦点图功能。本篇文章将深入探讨如何利用jQuery创建具有大号箭头导航的焦点图,帮助开发者更好地理解和实践这一技术。 首先,理解焦点图...

    精通JQuery 比较适合初学者

    5. **DOM遍历**:理解`.parent()`, `.children()`, `.siblings()`, `.next()`, `.prev()`等方法,熟练进行DOM树的遍历。 6. **回调函数**:学习如何使用jQuery中的回调函数,实现异步操作的顺序执行。 **第二季(3...

    js-day03培训内容1

    `children()`、`next()`、`prev()`和`siblings()`操作子元素和相邻元素,`show()`、`hide()`、`fadeIn()`、`fadeOut()`、`slideUp()`、`slideDown()`和`slideToggle()`控制元素的显示和动画效果。 jQuery事件API则...

    jQueryAPI_CHM.rar

    7. **遍历和过滤**:`each()`, `find()`, `siblings()`, `next()`, `prev()`等方法帮助开发者遍历DOM树并筛选特定元素。 8. **CSS操作**:通过`.css()`方法可以方便地设置或获取元素的样式,支持链式调用。 9. **...

    中文版JQuery_1.4_API手册

    - 兄弟元素:`.next()`, `.prev()`, `.siblings()` 方法用于查找相邻元素。 6. **效果(Effects)** - 显示/隐藏:`.show()`, `.hide()`, `.toggle()` 用于控制元素的可见性。 - 动画:`.animate()` 方法创建...

    JQuery总结内容

    以下是对标题和描述中所提及的jQuery知识点的详细说明: 1. **jQuery对象**:jQuery对象是由DOM元素组成的集合,通过$函数包装DOM对象创建。它们能调用jQuery提供的各种方法,例如`.html()`,这个方法用于获取或...

    JQuery学习笔记

    最后,jQuery 提供了各种方法遍历和操作节点,如 `next()` 和 `prev()` 找到相邻的兄弟元素,`children()` 获取子元素,`parent()` 获取父元素,以及 `siblings()` 获取同级元素。这些方法在处理复杂的 DOM 结构时...

Global site tag (gtag.js) - Google Analytics