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>
分享到:
相关推荐
- 层次选择器:例如`parent > child`,`ancestor descendant`,`prev + next`,`prev ~ siblings`,用于选取特定关系的元素。 2. **DOM操作(DOM Manipulation)** - `$(html)`:将HTML字符串转换为jQuery对象,...
- `.next()`和`.prev()`获取元素的下一个或上一个兄弟元素。 - `.filter()`和`.not()`用于筛选元素集合。 4. **事件处理(Events)** - `$(selector).on("event", function)`用于绑定事件处理函数,如`click`、`...
2. **层次选择器**: 如`parent>child`, `prev+next`, `prev~siblings`。 3. **基本过滤器选择器**: 如`:first`, `:last`, `:not(selector)`, `:even`, `:odd`, `:eq(index)`, `:gt(index)`, `:lt(index)`。 4. **...
### jQuery编程笔记知识点详解 #### 一、jQuery概述 ...以上是对jQuery编程笔记中提到的知识点的详细解读,覆盖了从基础知识到高级应用的各个方面,有助于深入理解和掌握jQuery的使用方法和技术细节。
jQuery提供了`children()`, `siblings()`, `parent()`, `next()`, `prev()`等方法遍历DOM树,`:first`, `:last`, `:even`, `:odd`, `:eq(index)`等过滤器用于筛选元素。 ### 9. **工具方法(Utility Methods)** 如...
1. **响应式设计**:确保轮播图在不同设备和屏幕尺寸下都能良好展示。 2. **优化性能**:合理使用CSS3的动画效果,减少JavaScript的计算量,避免影响页面加载速度。 3. **无障碍访问**:为键盘用户和屏幕阅读器提供...
7. **遍历与迭代**:jQuery提供了便利的遍历和迭代方法,如`.each()`, `.next()`, `.prev()`, `.siblings()`等,帮助开发者处理集合操作。 8. **链式调用**:jQuery的一大特色是链式调用,允许在单个对象上调用多个...
7. **遍历(Traversal)**:jQuery提供了多种遍历DOM的方法,如`parent()`, `children()`, `siblings()`, `next()`, `prev()`等,帮助开发者在DOM树中导航。 8. **插件机制(Plugin System)**:jQuery的插件机制是...
在实际的代码实现中,可能还会涉及到DOM遍历(如`children()`、`siblings()`等方法)、AJAX加载新图片(如果相册支持动态加载更多)以及响应式设计,确保在不同设备和屏幕尺寸上都能良好运行。 综上所述,“jquery...
- 在JavaScript中,DOM对象和jQuery对象是两种不同的对象类型,不能混用彼此的方法。 - DOM对象可使用原生JavaScript方法,而jQuery对象则不能。 - 在需要对动态生成的元素进行事件绑定时,推荐使用`live()`或其替代...
- 兄弟元素选择器:`$('prev + next')`选择紧接在prev元素后面的next元素。 2. **DOM操作(DOM Manipulation)** - 插入元素:`$(selector).append(content)`在选定元素的末尾添加内容,`prepend`则在开头插入。 ...
jQuery作为一款轻量级的JavaScript库,因其丰富的插件和易用性,常被用来实现焦点图功能。本篇文章将深入探讨如何利用jQuery创建具有大号箭头导航的焦点图,帮助开发者更好地理解和实践这一技术。 首先,理解焦点图...
5. **DOM遍历**:理解`.parent()`, `.children()`, `.siblings()`, `.next()`, `.prev()`等方法,熟练进行DOM树的遍历。 6. **回调函数**:学习如何使用jQuery中的回调函数,实现异步操作的顺序执行。 **第二季(3...
`children()`、`next()`、`prev()`和`siblings()`操作子元素和相邻元素,`show()`、`hide()`、`fadeIn()`、`fadeOut()`、`slideUp()`、`slideDown()`和`slideToggle()`控制元素的显示和动画效果。 jQuery事件API则...
7. **遍历和过滤**:`each()`, `find()`, `siblings()`, `next()`, `prev()`等方法帮助开发者遍历DOM树并筛选特定元素。 8. **CSS操作**:通过`.css()`方法可以方便地设置或获取元素的样式,支持链式调用。 9. **...
- 兄弟元素:`.next()`, `.prev()`, `.siblings()` 方法用于查找相邻元素。 6. **效果(Effects)** - 显示/隐藏:`.show()`, `.hide()`, `.toggle()` 用于控制元素的可见性。 - 动画:`.animate()` 方法创建...
以下是对标题和描述中所提及的jQuery知识点的详细说明: 1. **jQuery对象**:jQuery对象是由DOM元素组成的集合,通过$函数包装DOM对象创建。它们能调用jQuery提供的各种方法,例如`.html()`,这个方法用于获取或...
最后,jQuery 提供了各种方法遍历和操作节点,如 `next()` 和 `prev()` 找到相邻的兄弟元素,`children()` 获取子元素,`parent()` 获取父元素,以及 `siblings()` 获取同级元素。这些方法在处理复杂的 DOM 结构时...