jQuery对象访问:
1 each(calllback) 以每一个匹配的元素作为上下文来执行一个函数。
--callback 对于每个匹配的元素所要执行的函数
eg:迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非jQuery对象。
HTML 代码:
<img/><img/>jQuery 代码:
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
结果:
[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
如果你想得到 jQuery对象,可以使用 $(this) 函数。
2 size()返回jQuery对象中元素的个数
eg:
计算文档中所有图片数量
HTML 代码:
<img src="test1.jpg"/> <img src="test2.jpg"/>jQuery 代码:
$("img").size();
结果:
2
3 同size()
eg: $("img").length;
4 selector
返回传给jQuery()的原始选择器
eg:确定查询的选择器
jQuery 代码:
$("ul")
.append("<li>" + $("ul").selector + "</li>")
.append("<li>" + $("ul li").selector + "</li>")
.append("<li>" + $("div#foo ul:not([class])").selector+"</li>"); 结果:
ul
ul li
div#foo ul:not([class])
5 context
返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。如果没指定,那么context指向当前的文档(document)。
eg:
检测使用的文档内容
jQuery 代码:
$("ul")
.append("<li>" + $("ul").context + "</li>")
.append("<li>" + $("ul", document.body).context.nodeName + "</li>");
结果:
[object HTMLDocument] //如果是IE浏览器,则返回[object]
BODY
6 get()取得所有匹配的DOM元素集合
eg:
选择文档中所有图像作为元素数组,并用数组内建的 reverse 方法将数组反向。
HTML 代码:
<img src="test1.jpg"/> <img src="test2.jpg"/>jQuery 代码:
$("img").get().reverse();结果:
[ <img src="test2.jpg"/> <img src="test1.jpg"/> ]
7 get(index)取得其中一个匹配的元素。index表示去得第几个匹配的元素
eg:取得第 index 个位置上的元素
HTML 代码:
<img src="test1.jpg"/> <img src="test2.jpg"/>jQuery 代码:
$("img").get(0);
结果:
[ <img src="test1.jpg"/> ]
8 index(subject)
搜索与参数表示的对象匹配的元素,并返回相应元素的索引值
--subject 要搜索的对象
eg:返回ID值为foobar的元素的索引值。
HTML 代码:
<div id="foobar"><div></div><div id="foo"></div></div>
jQuery 代码:
$("div").index($('#foobar')[0]) // 0
$("div").index($('#foo')[0]) // 2
$("div").index($('#foo')) // -1
分享到:
相关推荐
本篇将详细探讨jQuery学习笔记中第二天涉及的电梯导航案例,该案例旨在实现一个网页上的楼层跳转功能,通过点击楼层链接,页面会平滑滚动到相应的位置,提升用户体验。 首先,我们要理解电梯导航的基本原理。在网页...
在本篇jQuery笔记中,我们将深入探讨购物车案例的实现,这个案例主要涉及前端开发中的交互设计和数据管理。购物车是电商网站的核心功能之一,它涉及到商品的添加、删除、数量调整等操作,同时也需要实时更新总价。...
《jQuery学习笔记——15天快速入门指南》 jQuery,作为一个强大的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。它以其简洁的API和高效的性能,成为了前端开发者的首选工具之一...
在本篇“jQuery 15天学习笔记”的第二部分中,我们将聚焦于如何处理HTML表格,特别是实现隔行变色的效果。隔行变色是一种常见的网页设计技巧,它能提高表格数据的可读性,使用户更容易区分和浏览数据行。 首先,...
在“斑码教育大前端笔记-HTML第二天”的学习资源中,我们主要聚焦于HTML这一核心前端技术。HTML,全称为HyperText Markup Language,是构建网页的基础语言,它定义了网页的结构和内容。HTML5是其最新版本,带来了...
**第二天:基本使用方法** 1. **创建XMLHttpRequest对象**:在JavaScript中,可以使用`new XMLHttpRequest()`来创建对象。 2. **设置请求参数**:`open(method, url, async)`,方法包括GET和POST,url是请求的地址...
在“ajax-day01.rar_达内开发学习笔记”这个压缩包中,包含了第一天学习Ajax的基础内容,旨在帮助初学者理解并掌握Ajax的核心概念和使用方法。** **一、Ajax简介** Ajax并不是一种单一的技术,而是一组技术的组合,...
本篇PHP笔记涵盖了从基础到进阶的知识点,适合初学者和有一定基础的开发者参考学习。主要内容包括简单的“Hello World”示例、网页内容抓取技巧、编码转换方法、缓存逻辑设计、数据解析方式、Ajax与PHP之间的交互、...
在进行EduSoho二次开发前,还需要学习相关的开源框架和类库的使用,例如前端开发文档中提到的jQuery、Sea.js、Arale、Bootstrap等。这些都是常用的前端技术栈,通过这些技术能够更好地控制页面的动态效果和样式。 ...
它不仅可以直接应用,还支持二次修改,这意味着你可以根据自己的项目需求进行定制和调整,以适应不同网页的设计风格。 CSS3是层叠样式表的第三个版本,相较于之前的版本,它引入了许多新的功能和特性,如选择器、...
"Day12-master"可能是一个学习资源或项目文件,包含第十二天学习或开发的所有内容,可能包括笔记、代码示例、练习题或小型项目。这个压缩包可能涵盖JavaScript的某个特定主题,如异步编程、AJAX、Promise或Async/...
此特效还可能结合了jQuery库,虽然主要依赖CSS3,但jQuery可以用于简化DOM操作,添加交互功能,如鼠标悬停时改变元素状态等。 在实际项目中,开发者可以依据自己的需求对这些代码进行二次修改,以适应不同的设计...
在网页设计和开发中,CSS3(层叠样式表第三版)已经成为不可或缺的一部分,它带来了丰富的视觉效果和更高效的代码组织方式。这个“傍晚山里大风车场景CSS3特效”是一个实例,展示了如何利用CSS3来创建动态、富有情感...
在本周的第九周第二天的学习内容中,我们主要聚焦于JavaScript这一重要的编程语言。JavaScript,通常简称为JS,是网络开发中的基石,它被广泛应用于网页和应用的动态化与交互性增强。JavaScript允许开发者在用户的...