位置:首页 » 教程 » jquery 学习之一 对象访问

jquery 学习之一 对象访问

日期:2011-10-01 阅读:0num
Advertisement

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 代码:

<img/><img/>

jQuery 代码:

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

结果:

[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

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

jQuery 代码:

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

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

HTML 代码:

<button>Change colors</button><span></span> <div></div> <div></div><div></div> <div></div><div id="stop">Stop here</div> <div></div><div></div><div></div>

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 代码:

<img src="test1.jpg"/> <img src="test2.jpg"/>

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 代码:

<img src="test1.jpg"/> <img src="test2.jpg"/>

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<Element>

示例

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

HTML 代码:

<img src="test1.jpg"/> <img src="test2.jpg"/>

jQuery 代码:

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

结果:

[ <img src="test2.jpg"/> <img src="test1.jpg"/> ]

---------------------------------------------------------------------------------------------------------------------------------------

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 代码:

<img src="test1.jpg"/> <img src="test2.jpg"/>

jQuery 代码:

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

结果:

[ <img src="test1.jpg"/> ]

---------------------------------------------------------------------------------------------------------------------------------------

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 代码:

<div id="foobar"><b></b><span id="foo"></span></div>

jQuery 代码:

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

结果:

5

相关文章
  • jquery 学习之一 对象访问

    each() each(callback) 以每一个匹配的元素作为上下文来执行一个函数. 意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素). 而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整形). 返回 'false' 将停止循环 (就像在普通的循环中使用 'break').返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue'). Ex

  • JQuery学习(2)-怎么访问DOM对象

    JQuery学习(2)-如何访问DOM对象 jQuery选择器 示例1 .为超链接增加不同的样式: <script type="text/javascript" src="jquery/jquery-1.3.2.js" ></script> <script type="text/javascript"> $(document).ready(function() {//增加不同的样式 $("a[href

  • jquery对象访问 介绍及如何使用 jquery对象访问 介绍及如何使用

    前言 本篇是继上篇jQuery核心函数之后介绍如何访问jQuery对象. jquery对象访问 each(callback) size() length selector context get() get(index) index([subject]) 测试用例 以下是通过代码的方式测试上述jQuery对象访问,供不明白的朋友们参考: html> jquery对象访问 <script type="text/javascript" src="./js/jquery

  • jquery对象访问 介绍及怎么使用 jquery对象访问 介绍及怎么使用

    jquery对象访问 介绍及如何使用 前言 本篇是继上篇jQuery核心函数之后介绍如何访问jQuery对象. jquery对象访问 each(callback) size() length selector context get() get(index) index([subject]) 测试用例 以下是通过代码的方式测试上述jQuery对象访问,供不明白的朋友们参考: <!DOCTYPE html> <html> <head> <title>jquer

  • jQuery学习笔记(五)-事件与事件对象

    jQuery学习笔记(5)-事件与事件对象 一.前言 主要讲解事件的绑定与触发 二.jQuery中添加事件 1.使用bind()方法绑定事件 <input id="btn" type="button" value="按钮" /> <script> $("#btn").bind("click", function (event) { alert("one"); })

  • jQuery学习第五课(jquery中的事件跟事件对象)

    jQuery学习第五课(jquery中的事件和事件对象)  jquery中的事件和事件对象 1.加载文档事件 2.鼠标事件 3.键盘事件 4.表单事件 5.浏览器事件 6.事件对象 7.绑定事件的方法 8.移除事件的方法 9.事件冒泡(略) 10.事件命名空间 加载文档事件 a. ready()略 b. $.holdReady(bool)暂停或恢复ready事件 c. load(),unload() 1.8中移除 鼠标事件 click()单击左键事件 dblclick()双击左键事件 foc

  • 【学习-滴水穿石】 JavaScript用arguments对象访问函数的参数

    [学习-水滴石穿] JavaScript用arguments对象访问函数的参数 有这么个需求:求n个数中最大数, <script type="text/javascript"> function maxNumber(){ var maxNumber = arguments[0]; for (var i = arguments.length - 1; i >= 0; i--) { if(arguments[i] > maxNumber){ maxNumber =a

  • jQuery学习-(2)JQuery对象与DOM对象的区别与转换

    jQuery学习-----(二)JQuery对象与DOM对象的区别与转换 1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj = document.getElementById("id"); //DOM对象 var $obj = $("#id"); //jQuery对象; jQuery对象就是通过jQuery包装DOM对象

  • jQuery学习小疑点记录 jQuery学习小疑点记录

    jQuery学习小问题记录 1.关于attr对复选框二次全选失效 引起这个问题的原因,因为attr返回值为固有属性值,举个例子 <input id="chk1" type="checkbox" />是否可见 <input id="chk2" type="checkbox" checked="checked" />是否可见 $("#chk1").attr("

  • jQuery学习笔记一

    jQuery学习笔记1 1. jQuery入门 1.1. 优点 解决浏览器的兼容性问题. 支持扩展,通过插件方式实现扩展,避免特性蠕变. 使用隐式迭代的技术,使方法的操作面向集合.如".hide()" 使用方法链接编程方式,使多重操作集于一行. 强大的选择符. 可靠的事件处理机制. 完善的Ajax. 行为层与结构层的分离. 有很多使用者,文档相当完善. 开源. 1.2. 缺点 不能向后兼容,这是由jQuery的版本发布特性决定 2. 选择符 2.1. DOM 文档对象模型(Docume

  • jQuery学习札记(一)

    jQuery学习笔记(一) 一.jQuery 简介  jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库  jQuery 理念: 写得少, 做得多. 优势如下: 轻量级.强大的选择器.出色的 DOM 操作的封装.可靠的事件处理机制.完善的 Ajax.出色的浏览器兼容性. 链式操作方式 二.HelloWord: <script type="text/javascript" src="scripts/jquery.js">

  • Jquery学习札记

    Jquery学习笔记 1,jquery通过返回"this"关键字,返回一个jquery对象,便可以使jquery可以优雅地使用链式访问jquery方法. 2,jquery对象索引返回的是DOM对象,可以使用$()将其转换成jquery对象,如:$($("img")[0]).size(); 3,jquery内部使用javascript原生态的getElementById()方法,所以ID选择是最快的,应尽量选择从ID开始的选择器 4,保存选择对象,尽量减少选择器使用次

  • jQuery学习札记一:你必须知道的JavaScript知识

    jQuery学习笔记一:你必须知道的JavaScript知识 JavaScript是一种基于对象和事件驱动的客户端脚本语言,由Netscape的LiveScript发展而来,是一种动态.弱类型.基于原型的语言.一个完整的 JavaScript 实现由核心(ECMAScript).文档对象模型(Document Object Model,简称DOM)和浏览器对象模型(Browser Object Model,简称BOM)三个部分组成. 关于JavaScript对象 大多数的面向对象语言都定义了一个

  • JQuery 学习札记(随笔)03

    JQuery 学习笔记(随笔)03 第三章 jQuery 中的DOM操作 Dom是一种文档对象模型,DOM是一种与浏览器.平台无关的接口,使用该接口可以轻松的访问页面中的标签组件. Dom操作的分类:Dom Core(核心).HTML Dom .CSS Dom Dom 并不是专门用来处理网页,也可以用它来处理一些使用标记语言的文档.例如XML. Dom Core组成部分:getElementById().getElementsByTagName().getAttribute().setAttri

  • jquery学习工作总结2

    jquery学习工作总结二 JQuery Effects 方法说明 show( ) 显示隐藏的匹配元素. show( speed, [callback] ) 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数. hide( ) 隐藏所有的匹配元素. hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数 toggle( ) 切换元素的可见状态.如果元素是可见的,切换为隐藏的:如果元素是隐藏的, 切换为可见的. s

  • JQuery学习—打包,让这个世界变得更简单

    JQuery学习-封装,让这个世界变得更简单 1.编者寄语 小编认为,JQuery就是用JavaScript封装成的一些js方法,又将这些方法封装在一起,称为JQuery.除此之外,js还有两个库就是Prototype.MooTools,这里不再多做介绍. 在之前学过的js中知道,js中的函数和方法都是需要我们自己亲自编写的,但是有些方法是我们经常要用到的,由此就产生了JQuery库,就好比生产汽车,飞机,大炮等,之前我们得先用钢材造螺丝,铁板等,然后再去造我们需要的汽车,飞机等,而现在是直接用

  • jQuery学习之旅 Item10  ajax便餐 jQuery学习之旅 Item10 ajax便餐

    jQuery学习之旅 Item10 ajax快餐 1. 摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式. 2. 前言 Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列

  • jQuery学习教程(一) jQuery学习教程(一)

    jQuery学习教程(1) 一.什么是jQuery JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器.jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用).events.实现动画效果,并且方便地为网站提供AJAX交互.jQuery还有一个比较大的优势是,

  • jQuery学习-(1)JQuery的&#39;$&#39;符号用法

    jQuery学习-----(一)JQuery的'$'符号用法 1.jQuery的三种$() 1)$()可以是$(expresion),即css选择器.Xpath或html元素,也就是通过上述表达式来匹配目标元素. 比如:$("a")构造的这个对象,是用CSS选择器构建了一个jQuery对象--它选择了所有的<a/>这个标签. eg:$("a").click(function(){...}) :就是在点击页面上的任何一个链接时的触发事件. alert($(

  • JQuery Ajax通过Handler访问外部XML数据的代码

    JQuery的使用非常简单,我们只需要从其官方网站上下载一个脚本文件并引用到页面上即可,然后你就可以在你的脚本代码中任意使用JQuery提供的对象和功能了. 在JQuery中使用Ajax方法异步获取服务器资源非常简单,读者可以参考其官方网站上提供的例子http://api.jquery.com/category/ajax/.当然,作为客户端脚本,JQuery也会遇到跨域访问资源的问题,什么是跨域访问呢?简单来说就是脚本所要访问的资源属于网站外部的资源,脚本所在的位置和资源所在的位置不在同一区域.

最新文章
  • xfce4.8 升级到4.10以后,系统托盘自动居左,应该怎么解决?

    http://d.pr/i/Sm9s 大神支招 --cut-- levn在2012-12-06 19:23:4回答到: 中间加一个分隔符,然后分隔符右键属性里勾选"扩展". levn在2012-12-06 19:24:2回答到: 不对--窗口按钮应该就是扩展的啊-- levn在2012-12-06 19:30:1回答到: 记得以前有一次,窗口开得太多任务栏里的窗口按钮就挤得超出屏幕了,把托盘也挤出去看不见了.后来我不得不新建了一个面板-- zzWinD在2012-12-06 20:10

  • 老罗自如对战后续 密集发声VS缄口不言 老罗自如对战后续 密集发声VS缄口不言

    老罗与王自如的网络对战,似乎并未因为昨晚3小时的激烈讨论而划上圆满的句号.昨日晚间22:00辩论结束后,老罗便扔下王自如匆匆离开.在不到一小时内,将辩论的焦点之一:锤子手机的红屏问题相关的两个视频发布到其微博上,供网友评鉴. 今日上午,老罗继续在其微博紧锣密鼓的发声,"起床后重看了一遍(昨晚的辩论),吵得很难看,没风度,作为企业负责人,这是我的失职,但道理是摆在那里的.""各大数字媒体对 Smartisan T1 屏幕表现的评价,供参考.""王自如教老罗做

  • 淘宝经验:抓住这四点,转化率就再也不用愁了! 淘宝经验:抓住这四点,转化率就再也不用愁了!

    淘宝经验分享之第一点:视觉营销做到位 1.什么是视觉营销? 视觉营销就是配合产品结构,活动安排,时效性等因素的变化对店铺的结构,设计进行实时调整从而在店铺访问深度,用户粘度等方面达到提升.通过运营策划,更深一步的去规划做好店铺,让买家第一感觉就宾至如归! 2.如何做设计? 做设计不仅仅是为了好看,应该从这5点入手:(1)设计风格统一;(2)注重视觉引导;(3)注重用户体验;(4)注重易用性;(5)突出产品;(6)配合运营做好文案;(7)服从命令,思维灵活! 2.设计的作用? 好的店铺设计可以达到

  • 2岁2个月第4周的孩子成长指标 2岁2个月第4周的孩子成长指标

    2岁2个月第4周的孩子成长指标 孩子现在已经有较强的自我意识,明白自己和他人是有区别的,表现在对喜欢的食物或玩具的占有欲强.小朋友来做客,即使你拿出宝宝早就丢弃的玩具,宝宝依旧 不允许别人碰;到别人家看到喜欢的东西,宝宝哭闹着要把它拿回家,不要把这种行为简单地看作是孩子自私,起码这一定是孩子成长的一个进步. 本站阅读配图 能力"加油站" 对听知觉辨别能力差的孩子,可训练孩子闭目倾听环境中的声音,或让孩子戴上耳机听故事,以提高他们对声音的敏感度. 对听觉过滤能力差的孩子,可以让他们在有背

  • 狙击时刻影评 狙击时刻影评

    由宋洋.杨钧丞等人主演的电影<狙击时刻>已经上映,这部电影通过反恐特工的视角,将众多硬汉真枪实弹的战斗演绎的淋漓尽致. "十步杀一人,千里不留行.事了拂衣去,深藏身与名."对于我们普通大众而言,狙击手是类如李白<侠客行>中武功高超.行藏低调的神秘人物.虽然在警匪动作片中常见他们的身影,但以其为主角讲述他们的工作及生活的电影却并不多,而中外联合制作的犯罪题材电影<狙击时刻>则正是把镜头对准了他们,揭秘瞄准器后他们那不为人知的工作和生活. 影片伊始,就是

  • 2014云计算关键词盘点:BATH等入围

    2014年的IT行业随着互联网大时代的变化而迅速变化着,回顾这一年,云计算在各个行业的应用也日益深入.与此同时,从创业企业的快速成长,到针对云计算市场投融资的热潮,再到安全可信,云计算市场也呈现出百花齐放的局面.因此,市场上也喊出了云计算市场BATH一下的口号,而这一口号也隐含了本土的云计算四家代表性企业--百度.阿里巴巴.腾讯.华云数据. 盘点2014年的云计算市场, BATH.融资.可信.价格战等都堪称是年度市场的关键词.下面就让小编一一为您分析. 关键词一:BATH 传统企业在云计算概念出

  • Chrome打开页面上方莫名被遮挡与打开几秒后自动关闭解决方法 Chrome打开页面上方莫名被遮挡与打开几秒后自动关闭解决方法

    Chrome打开页面上方莫名被遮挡与打开几秒后自动关闭解决方法,有碰到这样问题的同学可以一起来参考一下. Google Chrome是小编现在主要使用的浏览器,不过昨天遇到了一个奇怪的显示错误,大部分页面上方被一块三角装的图层挡住了.经过一番努力,倒也发现了问题所在并成功解决.随着Chrome用户增多,这个问题相信不会是个案,故决定把排查问题及解决过程分享给各位.如果你也是Chrome用户并且同样遭遇这个问题,下面的内容会帮到你. 先来看下具体症状吧,用Chrome打开页面后,会出现一个三角形遮

  • 热门搞笑个性签名2015大全 女大十八变越变越随便 热门搞笑个性签名2015大全 女大十八变越变越随便

    我的暑假作业像一个个争宠的妃子迫不及待要求侍寝可我自暑假以来一直勤政爱民心系腾讯和新浪没踏进后宫半步. 1.至于你们扶不扶,反正我是不扶. 2.不在沉默中爆发就在沉默中变态. 3.你给我滚,快马加鞭地滚 4."如果你愿意一层一层一层的剥开...""我不愿意" 5.知道高考为什么在月.号吗?意思就是,录取吧... 6.今天天气真晴好,出门就被狗狗咬 7.同学们别隐身了,50年后,你的头像想亮都亮不了了. 8.紫薇说"尔康.你现在幸福么?"尔康:&q

  • memcache windows 根本安装和测试

    memcache windows 基本安装和测试 一.序言 这里先简单介绍下memcache 缓存在windows 上的安装 以及应用,然后再进行一些简单的测试,客户端用是xmemcached ,因为业界整体效果不错 1.先现在windos 64 位的,我是win8, 参考:http://blog.couchbase.com/memcached-windows-64-bit-pre-release-available,解压到 . f:\memcache\下 2.打开DOS 在文件目录下执行:me

  • 《过劳死》自寻死路快速攻略 《过劳死》自寻死路快速攻略

    1.直接跳下自杀. 2.石块推到右锛

热门推荐
  • 华为荣耀3X获取ROOT权限 华为荣耀3X获取ROOT权限 第一步:下载最新版ROOT精灵工具, 第二步:确保手机通过USB连接电脑 1.在手机里打开usb调试模式 2.然后检查一下手机有没有用数据线连接好电脑,保证手机能和电脑正常连接 第三步:ROOT操作过程 1.安装ROOT精灵,双击运行软件 2.接着点击一键ROOT 3.等待几分钟,当显示ROOT权限有,查看手机上多了一个授权管理软件,手机已经成功ROOT了. 这样你就可以获取ROOT权限,希望这篇华为荣耀3X ROOT教程能够帮助你更好的刷机.
  • 我们应该怎样完善自己的人生呢 我们应该怎样完善自己的人生呢 人生是一段人人知晓归宿的单程旅行.从出生的那一天起,每个人就一天天趋近于归宿,而又无力滞留它.挽留它."万贯家财,买个太阳不下山",永远是一个不可能实现的奢望. 正是人生的这种一次消费的特点,决定了我们从悟事那一刻起,就应当以自己的睿智,去筹划.谋略一生.当然对于已过不惑之年的我,回眸过去的路程,此话又过于凝重,苍桑感多于平淡.每日坐观日头西落,一日尤如"白驹过隙,忽然而已".方才体会到人生一世,宛如一梦.此时才悟出一个沉重的话题:完善人生. 事实上,人的一生从来就
  • 《勇者大冒险》线下专场 海信带你尽情“玩电视” 《勇者大冒险》线下专场 海信带你尽情“玩电视” 近日,海信"快乐家庭快乐游戏"全民游戏体验系列活动最后一站在深圳举办,上百名粉丝前往苏宁易购海信专区体验专属定制的<勇者大冒险>游戏,尽享"玩电视"的乐趣. 为了让粉丝们更好地体验游戏,海信依托线下门店,联合腾讯.小y.欢众.圣剑.爱游戏.北通等游戏和外设合作方,在北京.上海.南京.深圳等城市展开了以"快乐家庭.快乐游戏"为主题的系列游戏体验活动,每一场都人气爆满. 本站中,腾讯为海信玩家特别定制的<勇者大冒险>电视版于今
  • ExtJS5的grid filter改建 ExtJS5的grid filter改建 ExtJS5的grid filter改造 grid控件的检索是前端界面最常见的功能之一. ExtJS5提供了官方的grid通用检索实现:http://dev.sencha.com/ext/5.1.0/examples/kitchensink/#grid-filtering 该实现用了几个子类分别支持不同的检索类型: 各种类型的效果如下: 数字型: 文本型包含检索: 枚举型检索: 日期型检索: 布尔型检索: 最值得称道的是:上述检索的应用,只需要在grid的config中声明引用该plugin,并