位置:首页 » 教程 » 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也会遇到跨域访问资源的问题,什么是跨域访问呢?简单来说就是脚本所要访问的资源属于网站外部的资源,脚本所在的位置和资源所在的位置不在同一区域.

最新文章
  • 唱吧名字怎么添加个性表情? 唱吧名字怎么添加个性表情?

    1)登录手机QQ打开聊天窗口,点开屏幕下端的加号,打开"表情",再到"emoji"如下图所示: 2)输入你想要添加的表情,不用发送,然后在输入框中复制,如下图所示: 3)登陆唱吧,点击左下角那个三个横的按钮,然后再点击"我",如下图所示: 4)进入的页面点击我的主页;点击右下角的"修改资料" 5)打开"艺名"那里粘贴上刚刚复制的表情,点击保存后,你的表情就会在艺名那里显出来了,对比一下没有添加表情的,是不是

  • 沪江小D日语翻译单词怎么发音 沪江小D日语翻译单词怎么发音

    沪江小D日语翻译单词怎么发音 在搜索出来的单词后,会看到单词旁边有个小喇叭,点击小喇叭上就可以发出单词的读音了.

  • 单眼皮怎么画眼线 单眼皮怎么画眼线

    单眼皮的美眉们伤不起啊,每次参加约会或者是面试工作的时候就烦恼了,不知道怎么化妆.那么单眼皮怎么画眼线会好点呢,编者教你怎么做. 本站阅读配图 许多单眼皮女生总觉得眼妆没什么可化的,实际上单眼皮的眼妆是很有讲究的哦.不用去羡慕双眼皮的MM,单眼皮MM妆效别有一番风味.快来一起掌握化妆技巧吧,画出惊艳的一笔! 画眼线要在睫毛根部,而且单眼皮的女生没必要把眼睛画大,在下眼角处画点高光粉就行啦 下眼线只画在后眼角就行咯,不要全部画完. 画睫毛膏要自然,不要化成蚂蚁腿咯.不要太长,单眼皮很长睫毛的话很怪

  • 方便面的起源 方便面的起源

    如今,方便面已遍布全世界,成为人们生活中不可缺少的食品. 1956年,因事业失败而使全部财产荡尽无遗的安滕百福(日清食品株式会社的缔造者)开始要兴办新的事业.他的脑海中浮现的是战后黑市的货摊边,为买一碗拉面而排成长蛇形的队列.认为所有生活文化之根本均在于食的安藤百福决心开发符合新时代的食品.他在开发之际设定了五个条件:1必须简便;2必须可口.有营养;3必须能在常温下长期存放;4必须卫生;5必须廉价. 本站阅读配图 安藤百福脑海中浮现着的在寒风中吃面条的人们脸上露出的满足表情,促成了确定加工面条的

  • 纯javascript实现自动发送邮件

    描述: 此JavaScript将帮助你的电子邮件的人.只要按一下电子邮件,有人!和JavaScript会要求的电子邮件地址,主题,等等然后你,新的邮件,是向你打开了. <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function mailsome1(){ who=prompt("Enter recipient's email address: ","[email protected]

  • 网站编辑求职信范文

    尊敬的先生/小姐: 您好!我从报纸上看到贵公司的 招聘 信息,我对网页编辑一职很感兴趣. 我现在是出版社的在职编辑,从1998年获得硕士学位后至今,一直在出版社担任编辑工作.两年以来,对出版社编辑的工作已经有了相当的了解和熟悉.经过出版者工作协会的正规 培训 和两年的工作经验,我相信我有能力担当贵公司所要求的网页编辑任务. 我对计算机有着非常浓厚的兴趣.我能熟练使用FrontPage和DreamWeaver.PhoteShop等网页制作工具.本人自己做了一个个人主页,日访问量已经达到了100人左

  • linux中cPanel主机面板安装SSL证书实现HTTPS网址访问例子 linux中cPanel主机面板安装SSL证书实现HTTPS网址访问例子

    SSL证书是数字证书的一种,类似于驾驶证.护照和营业执照的电子副本.因为配置在服务器上,也称为SSL服务器证书了,今天我们来看cPanel主机面板安装SSL证书实现HTTPS网址访问例子 SSL证书 SSL证书通过在客户端浏览器和Web服务器之间建立一条SSL安全通道(Secure socket layer(SSL)安全协议是由Netscape Communication公司设计开发.该安全协议主要用来提供对用户和服务器的认证:对传送的数据进行加密和隐藏:确保数据在传送中不被改变,即数据的完整性

  • SEO工作者眼里的谷歌和百度

    80后的我们不像现代的孩子那么幸福,出生之后什么都有了,我们玩的是弹子.泥巴,跳的是绳子.房子,做的是家务活--还记得高中那会,很多同学在网吧彻夜不归,班主任中途拦截的情景.那时我不明白,网吧有什么好的,我还是读我的书,做爸爸妈妈眼里的好孩子,老师眼里的好学生.自从大学见识网络的第一天起,就深深的沉醉其中,可惜事与愿违,申报的信息技术专业录取分数线比一本还要高,彻底打破了读网络技术的梦想.直到现在,杭州seo已经在网络打拼了2年之久,可以说从大学一毕业开始就混在网络,从刚开始的游戏.编程.ps等

  • 最大不能示意的数

    最大不能表示的数 最大不能表示的数 1. 对于两个数A,B,如果A,B互质,那么Ax+By (x>=0 && y>=0) 最大的不能表示的数为AB-A-B,且不能表示数的个数为:(A-1)(B-1)/2 2. 对于3个数: 定理一: 设a,b,c为正整数,(a,b,c)=1,x,y,z为非负整数,ax+by+cz所不能表出的最大整数为M,那么当 c > ab/(a,b)^2 - a/(a,b) - b/(a,b) 时,M = ab/(a,b) + c(a,b) - a -

  • 路由器bbr的web兑现 路由器bbr的web兑现

    路由器bbr的web实现

热门推荐
  • GOT7《REWIND》中文歌词 GOT7《REWIND》中文歌词 本站音乐知识配图 GOT7<REWIND>中文歌词 作词:Ars/주찬양/Command Freaks 作曲:Ars/주찬양 예뻐도 너무 예뻐 漂亮也太漂亮了 난 숨 못 참겠어 我忍不住叹息 Oh 넌 머리부터 허리 to the oh从头开始腰to the 다리까지 다 腿为止 全部 그래 난 너를 보고 있어 是的 我在看着你 보고 있어도 보고 싶어 就算看着也还想看 계속 난 너만 보고 싶어 我一直只想看着你 Rewind Rewind Rewind Rewind Rewind
  • 电脑前吃午餐的危害 电脑前吃午餐的危害 午餐可以说是白领一族放松的时间,许多人喜欢在电脑前一边看视频,一边吃午餐.事实上,这种做法很可能会导致肥胖.今天小编就来教大家减肥又健康的午餐吃法. 1. 不在电脑前吃午餐 不少人在吃午餐时依然坐在电脑屏幕前,这一习惯没办法让身体得到适当的舒展,而且更容易导致肥胖.白领中午休息的时间很短,一般只有半小时到两个小时.许多人并没有充分地利用起来,宁可缩短吃饭时间聊天或睡觉. 在电脑前吃午餐容易让你在不知不觉间吃得又快又多.吃饭速度过快容易给胃肠道带来负担,不利于机体对食物营养的消化吸收,从而影响到下
  • 黄牛是小米模式最大的罩门吗? 黄牛是小米模式最大的罩门吗? 导语:传统硬件最大的罩门就是渠道,而小米卖硬件模式的最大罩门不是渠道,小米卖硬件模式的最大罩门是能否持续生产爆品. 文/金错刀(微信公众号ijincuodao) "像幽灵般潜行于林间,轻轻拨开挡路的树枝,竭力不让脚步发出一点儿声音,连呼吸都必须小心翼翼:他必须小心,因为林中到处都有与他一样潜行的猎人,如果他发现了别的生命,能做的只有一件事:开枪消灭之." 这是科幻小说<三体>的一段文字,也是目前最炙手可热的科技公司小米的某种写照. 雷军曾推荐高管必看<三体>,对