位置:首页 » 教程 » 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 给孩子驱虫.平时养成良好的卫生习惯. 晚餐吃得过饱 晚餐吃得过饱,或者临睡前加餐,不仅影响营养素吸收,而且增加胃肠道的负担.因为入睡时,胃肠道里还积存着大量没有被消化的食物,整个消化系统就不得不"加夜班&

  • 大寒节气话寒潮 大寒节气话寒潮

    大寒时节,天气寒冷,寒潮南下频繁.寒潮和强冷空气通常带来的大风.降温天气,是我国冬半年主要的灾害性天气.寒潮大风对沿海地区威胁很大,如1969 年4月21日-25日那次的寒潮,强风袭击渤海.黄海以及河北.山东.河南等省,陆地风力7-8级,海上风力8-10级.此时正值天文大潮,寒潮爆发造成了渤海湾.莱洲湾几十年来罕见的风暴潮.在山东北岸一带,海水上涨了3米以上,冲毁海堤50多千米,海水倒灌30-40千米. 寒潮带来的雨雪和冰冻天气对交通运输危害不小.如1987年11月下旬的一次寒潮过程,使哈尔滨.

  • cctype 头文件定义函数实例

    cctype 头文件所包含的函数主要用来测试字符值,以下是随便找的一个表,但是对于初学者来说,怎么用呢,自己上机操作解决,后两个返回的是int型,确实很意外,强制转换一下,很简单. isalnum(c) 假如c是字母或数字,则为true isalpah(c) 假如c是字母,则为true iscntrl(c) 假如c是控制字符,则为true isdigit(c) 假如c是数字,则为true isgraph(c) 假如c不是空格,则为true islower(c) 假如c是小写字母,则为true i

  • win7旗舰版32位下载 风火林山GHOST安装教程 win7旗舰版32位下载 风火林山GHOST安装教程

    今天为大家带来风火林山GHOST WIN7 SP1 X86 官方旗舰版 V2014.11(32位)下载及安装教程.该版本依据官方windows7旗舰版64位作为母盘进行制作. 点击下载风火林山win7旗舰版32位 该版本主要更新 * 更新了系统补丁和Office2007 3in1所有补丁到2014-11(可通过微软漏洞扫描和卫士漏洞扫描) * 升级Internet Explorer为IE9 * 增加数款驱动的支持,支持最新的H67 H77 Z77等主板 * 腾讯QQ更新至6.5官方最新版 * 更

  • 线上营销对线下行动效果的监测(下) 线上营销对线下行动效果的监测(下)

    [正文] 上回文[线上营销对线下行动效果的监测(上)]我们说到了线上营销对线下行动效果影响中的两类:awareness和preference,本回我们继续另外两类:Leads和Purchase.监测这两类比起awareness和preference的难度就要大许多了.下面写的,都是我所知的.但我所知有限,也许业界还有更好的解决方法,所以希望朋友们在文后不吝赐教. 追踪购买意向(Leads) 追踪购买意向一般有两种方法,一种是线上追踪,即让受众在你的网上直接提交对产品的咨询或购买意愿:另外一种则是

  • SOK多彩吸顶灯,营造梦幻家居 SOK多彩吸顶灯,营造梦幻家居

    近年来,LED吸顶灯以其节能环保.独特设计的优势而逐渐走俏市场.独具时尚元素的LED吸顶灯,成为装饰家居的潮流元素.SOK电工系列的LED吸顶灯,不同风格,只为懂得生活享受的你. LED吸顶灯是选择LED为光源的一种吸顶灯,它安装在房间内部,由于灯具上部较平,紧靠屋顶安装,像是吸附在屋顶上,所以称为LED吸顶灯.SOK作为广东锦力电器有限公司旗下的中高端品牌,主打节能时尚家居照明产品,简约,精致,古典,优雅是SOK照明电气LED吸顶灯的特点. 活泼可爱 SOK新款的LED吸顶灯,融进了时尚卡通的

  • 怎么设置让win7系统的电脑快速启动? 怎么设置让win7系统的电脑快速启动?

    Windows系统刚开始运行飞快,随着使用时间的增加就会导致效率越来越低.想要保持自己的windows7系统一直运行如飞并非是难事,就看小编我是如何做的吧 方法/步骤 1.首先,打开windows7开始菜单在搜索程序框中输入"msconfig"命令 2.打开系统配置窗口后找到"引导"选项(英文系统是Boot).点击"高级选项"此时就可以看到我们将要修改的设置项了 3.勾选"处理器数"和"最大内存",看到你的

  • 前期,自定义佳能的风格文件,拍出更好的直出片 前期,自定义佳能的风格文件,拍出更好的直出片

    机内直出一直是很多摄影师的追求,拍摄风光摄影虽然不像婚礼摄影师,活动摄影师那样重视直出,不过能在相机的液晶屏后看到更好的直出效果也是很有参考价值的. 什么是样式文件? 佳能的风格文件 Picture Style 文件结尾是 pf/pf2/pf3就是佳能的一个解决方法,一般的佳能单反都有以下几种默认内置的样式: 标准 Standard 风光 Landscape 人像 Portrait 中性 Neutral 可靠 Faithful 黑白 Monochrome 佳能官方还另外提供了8种样式: 影棚人像

  • php 判断变量类型程序代码详解

    在php中检查变量类型的方法很简单,利用gettype()函数就可返回当前变量类型的了,下面我来给各位朋友详细介绍如何利用gettype函数检查变量类型,有需要了解的朋友可参考. string gettype ( mixed $var ) 返回 PHP 变量的类型 var. 例 代码如下 复制代码 <?php function get_type($var) { if(is_object($var)) return get_class($var); if(is_null($var)) return

  • javascript iframe 父窗口和子窗口实现代码

    一.父窗口调用iframe子窗口方法 1.html语法:<iframe name="myframe" src="child.html"></iframe> 2.父窗口调用子窗口:myframe.window.functionname(); 3.子窗品调用父窗口:parent.functionname(); 简单地说,也就是在子窗口中调用的变量或函数前加个parent.就行 4.父窗口页面源码: 复制代码 代码如下: <html>

热门推荐
  • 孕妇喝蔬果汁的好处 孕妇喝蔬果汁的好处 苹果中的胶质和微量元素铬能保持血糖的稳定,还能有效地降低胆固醇;苹果中富含粗纤维,可促进肠胃蠕动,协助人体顺利排出废物,减少有害物质对皮肤的危害. 孕妇喝蔬果汁的好处 孕妇是可以喝蔬果汁的,而且孕妇喝还有很大的好处.蔬果汁中含有大量的维生素.纤维素,可补充水分和养分,刺激肠胃蠕动,缩短有害物质在体内停留的时间.芬兰研究人员在研究中发现,经常喝新鲜蔬果汁和酸奶,或者吃乳酪的妇女发生泌尿道感染的可能性低于一般人.研究人员发现如果妇女每天至少喝一杯新鲜果汁,不管是新鲜的榨汁,还是浓缩的果汁,也不管其中
  • 厨房装修一定要知道的33条 厨房装修一定要知道的33条 厨房装修一定要知道的33条,下面是本站小编给您们一一讲解: 厨房是日常生活使用频率很高的一个地方,这里就像是一个大工厂的生产线,做饭的时候需要各个部门"协调配合",使用体验怎么样全看"配合"得如何了.那么,厨房里要怎么样才能配合得好呢?下面这些厨房装修要知道的事一定不能忽略. 一.厨房装修你要知道的事之厨房电器 1.如果把消毒柜,烤箱什么的都嵌入到橱柜中,这些电器四周的柜壁最好贴上铝箔纸,要不连四壁也一起烤了,减少橱柜使用寿命. 2.可以在操作台上面放一盏壁灯,瓦数
  • [TL-WR840N]无线路由器如何映射服务器到外网? [TL-WR840N]无线路由器如何映射服务器到外网? [TL-WR840N]无线路由器如何映射服务器到外网?下面一聚教程小编就来为各位介绍一下吧,希望文章能够为各位同学带来帮助. 使用路由器后,Internet用户无法访问到局域网内的主机,因此不能访问内网搭建的Web.FTP.Mail等服务器.虚拟服务器功能可以实现将内网的服务器映射到Internet,从而实现服务器对外开放. 本文指导TL-WR840N的虚拟服务器功能应用和设置方法. 某小型企业需要将网页服务器对外网开放.通过虚拟服务器功能实现该需求.用户网络参数如下: 服务器类型 外部端口 内
  • 辣妈商城怎么添加收货地址 辣妈商城怎么添加收货地址 1)首先先打开[辣妈商城],进去之后点击[我的],接着点击[地址管理]. 2)然后点击[添加新地址],最后输入地址信息点击[保存]就可以了.