热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jquery学习之一对象访问

jquery学习之一对象访问整理,学习jquery的朋友可以参考下。

each()

each(callback)

以每一个匹配的元素作为上下文来执行一个函数。
意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。

而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整形)。

返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

Execute a function within the context of every matched element.
This means that every time the passed-in function is executed (which is once for every element matched) the 'this' keyword points to the specific DOM element.

Additionally, the function, when executed, is passed a single argument representing the position of the element in the matched set (integer, zero-index).

Returning 'false' from within the each function completely stops the loop through all of the elements (this is like using a 'break' with a normal loop). Returning 'true' from within the loop skips to the next iteration (this is like using a 'continue' with a normal loop).

返回值

jQuery

参数

callback (Function) : 对于每个匹配的元素所要执行的函数

示例

迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

HTML 代码:

jQuery 代码:

$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });

结果:

[ , ]

如果你想得到 jQuery对象,可以使用 $(this) 函数。

jQuery 代码:

$("img").each(function(){
  $(this).toggleClass("example");
});

你可以使用 'return' 来提前跳出 each() 循环。

HTML 代码:

 
Stop here

jQuery 代码:

$("button").click(function () { $("div").each(function (index, domEle) {  // domEle == this  $(domEle).css("backgroundColor", "yellow");  if ($(this).is("#stop")) {  $("span").text("Stopped at div index #" + index);  return false;  } });});
--------------------------------------------------------------------------------------------------------------------------------

size()

jQuery 对象中元素的个数。
这个函数的返回值与 jQuery 对象的'length' 属性一致。
The number of elements in the jQuery object.
This returns the same number as the 'length' property of the jQuery object.

返回值

Number

示例

计算文档中所有图片数量

HTML 代码:

jQuery 代码:

$("img").size();

结果:

2
-------------------------------------------------------------------------------------------------------------------------

length

jQuery 对象中元素的个数。
当前匹配的元素个数。 size 将返回相同的值。
The number of elements in the jQuery object.
The number of elements currently matched. The size function will return the same value.

返回值

Number

示例

计算文档中所有图片数量

HTML 代码:

jQuery 代码:

$("img").length;

结果:

2
---------------------------------------------------------------------------------------------------------------------------------------

get()

取得所有匹配的 DOM 元素集合。

这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,而实际上是元素数组)。

 

如果你想要直接操作 DOM 对象而不是 jQuery 对象,这个函数非常有用。

Access all matched DOM elements.
This serves as a backwards-compatible way of accessing all matched elements (other than the jQuery object itself, which is, in fact, an array of elements). It is useful if you need to operate on the DOM elements themselves instead of using built-in jQuery functions.

返回值

Array

示例

选择文档中所有图像作为元素数组,并用数组内建的 reverse 方法将数组反向。

HTML 代码:

jQuery 代码:

$("img").get().reverse();

结果:

[ ]
---------------------------------------------------------------------------------------------------------------------------------------

get(index)

取得其中一个匹配的元素。 num表示取得第几个匹配的元素。
这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。
Access a single matched DOM element at a specified index in the matched set.
This allows you to extract the actual DOM element and operate on it directly without necessarily using jQuery functionality on it. This function called as $(this).get(0) is the equivalent of using square bracket notation on the jQuery object itself like $(this)[0].

返回值

Element

参数

index (Number) :取得第 index 个位置上的元素

示例

 

HTML 代码:

jQuery 代码:

$("img").get(0);

结果:

[ ]
---------------------------------------------------------------------------------------------------------------------------------------

index(subject)

搜索与参数表示的对象匹配的元素,并返回相应元素的索引值值。
如果找到了匹配的元素,从0开始返回;如果没有找到匹配的元素,返回-1。
Searches every matched element for the object and returns the index of the element, if found, starting with zero.
Returns -1 if the object wasn't found.

返回值

Number

参数

subject (Element) : 要搜索的对象

示例

返回ID值为foobar的元素的索引值值。

HTML 代码:

jQuery 代码:

$("*").index($('#foobar')[0])

结果:

5 if ($ != jQuery) { $ = jQuery.noConflict(); } 《SCRIPT》

推荐阅读
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ... [详细]
  • 本周信息安全小组主要进行了CTF竞赛相关技能的学习,包括HTML和CSS的基础知识、逆向工程的初步探索以及整数溢出漏洞的学习。此外,还掌握了Linux命令行操作及互联网工作原理的基本概念。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
  • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
    本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
  • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ... [详细]
  • 本文详细介绍了如何使用Python编写爬虫程序,从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制,再到多页数据抓取的全过程,并提供了完整的代码示例。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
author-avatar
瑞正可樺7991
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有