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

jquery 学习之一 对象访问

日期:2011-10-01 阅读:1num
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也会遇到跨域访问资源的问题,什么是跨域访问呢?简单来说就是脚本所要访问的资源属于网站外部的资源,脚本所在的位置和资源所在的位置不在同一区域.

最新文章
  • 【品途晨讯】饿了么战略投资黄太吉,将共建外卖生态;奥飞娱乐拟增募资45亿投向IP资源项目

    饿了么战略投资黄太吉,将共建外卖生态 近日,黄太吉宣布获得饿了么战略投资,投资后双方将在食品安全.餐饮供应链等方面深度合作,共建一个外卖生态. 此次黄太吉与饿了么达成合作,将有利于黄太吉充分利用饿了么的平台优势,推动黄太吉在外卖品牌.安全作业.餐饮内容.前端产能以及市场营销的能力. 据了解,战略投资后,饿了么将独家发售黄太吉旗下及其代理的所有品牌的产品,加强对白领人群的餐饮供给,在饿了么平台上食品安全频受争议之时,利用黄太吉的品牌优势起到巩固饿了么在白领外卖领域的地位. 幻视 VR 游戏获千万元

  • 哪位兄台出闲置 iPad 的

    型号 >= ipad2 就行,给家里人用,便宜点就好 wechat : nellace ,邮箱: inellace #gmail --cut-- qa52666在2016-05-09 07:12:02回答到: 同样想收. minglei在2016-05-09 07:12:02回答到: iPad4 是否需要? minglei在2016-05-09 07:12:02回答到: @qa52666 同上. iamzcd在2016-05-09 07:12:02回答到: 今晚发布会啊, 说不定旧款会降价 ne

  • 百度卫士如何给电脑加速? 百度卫士如何给电脑加速?

    百度卫士是我们都非常熟悉的安全杀毒软件,不过,除了这个基本功能之外,百度卫士还是一个很好的电脑管家软件.今天,小编就跟大家分享一下使用百度卫士给电脑加速的方法.我们从13个与百度卫士电脑加速有关的问题入手,让大家对百度卫士电脑加速功能有一个全面的了解! 百度卫士加速圈 问:什么是加速圈? 百度卫士的加速圈是一个让用户直观便捷地了解电脑运行状态,进行加速操作的窗口. 加速圈:通过左侧"加速圈" 可以直观地看到当前电脑状态和资源占用情况. 网速监控:通过右侧"网速监控"

  • DNS专题(11)---配置Windows DNS服务器③ DNS专题(11)---配置Windows DNS服务器③

    3.不允许递归 不要把"DisableRecursion"选项与"Forwarders"选项卡中相似的设置混淆,该选项控制将要接受的查询类型. 启用不允许递归以后,此DNS服务器就象一个根服务器,仅接收迭代查询,缺省情况下windows 2000 DNS服务器配置成接受递归查询. 4.绑定辅服务器 该选项不影响两个windows 2000 DNS服务器之间域区传送的执行,如果有一个到BIND服务器或查不出的服务器的域区传送,将强迫使用一个低效但很完全的域区传送.该选

  • 10种天份决定孩子不同未来 10种天份决定孩子不同未来

    10种天份决定孩子不同未来 身体运动智力包括平衡.协调.敏捷.力量.速度.灵活性等特殊的身体技巧以及对外界或自身刺激反应的能力.在无声电影的时代,卓别林正是靠着出色的身体运动智力在电影史上留下了不朽的足迹.运动员.外科医生.赛车手也是这种智力的佼佼者.德国<经济周刊>日前列举出10种不同智力,从事各行各业的人们正是由于其中某一项或某几项智力特别突出才取得成功的. 一.数学智力 指抽象思维和得出逻辑结论的能力.数学智力高的人清楚事物和数字数量之间的关联和规律.例如爱因斯坦,他通过相对论使人们对空

  • 世上之事,太过难缠;世上之人,喜欢纠缠 世上之事,太过难缠;世上之人,喜欢纠缠

    1 有的人把你的心都掏走了,你还假装不疼,因为你爱! 2 朋友也好,恋人也罢,你若不真心对我,我何必真心待你. 3 我态度好坏,取决于你怎么对我. 4 时间在走,年龄在长,懂得的多了,看透的多了,快乐越来越少了. 5 我疯过,傻过,执着过,坚持过,我爱过,到最后我还是我!我不好, 但全世界只有一个我. 6 珍惜也好,不珍惜也罢.如果哪一天你把我弄丢了,我不会让你再找到我. 7 世上之事,太过难缠;世上之人,喜欢纠缠. 8 看不清,一种轻松,一份安宁.何况,人生看不惯的东西真多,看清,看懂,全是自

  • DynEd是什么? DynEd是什么?

    DynEd是什么?戴耐德软件学习英语教程 DynEd软件中有遍及全球的英语培训合作伙伴和专业的语言教练. 通过对大脑语言学习过程的研究,DynEd总结出一套合理有效的学习方法,可以加速英语语言学习的进程.基于对语言习得规律理解,实现听说领先,带动读写,DynEd课程全程管理学生的学习进程,实时调整课程并指导学生使用最佳方法进行学习. 戴耐德软件学习英语特点: 适用于从儿童到成人各个年龄阶段的学习者数据分析(Analytics): 提供学生学习情况与习惯的分析报告,便于教师针对性辅导;对教学效果及

  • 使用攻略新鲜出炉 助你瞬间用好Coremail邮件APP 使用攻略新鲜出炉 助你瞬间用好Coremail邮件APP

    移动互联网正在改变改变我们的生活方式和工作方式,越来越多员工使用移动设备办公,并且使用APP收发邮件."我和同事们使用移动设备办公,逐渐成为一种习惯.偶尔就算在办公室,也会使用APP写信.查看联系和安排日程",黄工说移动互联网让他的工作.生活变得更加快捷和有趣! 今天,小编即将介绍的这款邮件APP,也是一款能让你享受办公乐趣.帮你提供工作效率的产品,不妨来看看: 操作容易,才叫高逼格 市面上某品牌邮件APP号称:一键完成邮箱设置,已经被认为很逼格.但是,小编今天介绍的Coremail邮

  • 辐射4普雷斯顿隐藏任务详解分享 辐射4普雷斯顿隐藏任务详解分享

    辐射4的这一款游戏各位玩家们是早已经去畅玩了吧,今天小编给大家带来的是辐射4普雷斯顿隐藏任务解析,那么各位还不清楚的玩家们,下面就跟小编一起来看看这隐藏任务吧. 给各位辐射4的玩家们来详细的解析分享一下普雷斯顿的隐藏任务. 解析分享: 任务会触发黑人死亡剧情不过是在获得perk之后才会接到,黑人死了之后能招募独立堡老奶 详细见图 好了,以上的信息就是小编给各位辐射4的这一款游戏里面的玩家们带来的详细的普雷斯顿的隐藏任务解析分享的全部内容了,各位看到这里的玩家们,小编相信你们现在是非常的了解了吧,

  • 关于查询Document Library时使用ListItemCollectionPosition的有关问题

    关于查询Document Library时使用ListItemCollectionPosition的问题 我在查询Document Library所有Items时用了row limit, 代码如下: public List<SPListItemCollection> QuerySPListOrSPDocumentLibrary(SPList spList, bool isRecursive, uint rowLimited, SPFolder queryFolder) { List<SP

热门推荐