jQuery对象

当用$符号包裹一个CSS风格选择器的时候,你得到一个jQuery对象。

var heading = $('h1');

jQuery对象是对DOM ELement封装过后的数组。注意,无论选择器匹配了多个或者零个元素,jQuery对象都不再是false。意味着你只能够用jQuery对象的.length属性来判断选择器是否选中了元素。

if ($('h1')) {
//do something
}

如果我想要得到页面中第一个匹配的元素呢?

var headings = $('h1');
var firstHeading = headings.eq(0);

.eq(0)返回第一个匹配元素的jQuery对象。如果你想要原生的DOM对象,你可以

var headings = $('h1');
firstHeadingElem = headings.get(0);

或者

var firstHeadingElem = $('h1')[0];

鉴于jQuery对象和DOM对象是有区别的,所以在命名的时候最好是区分好两者,可以使用$符号前缀来表示jQuery对象:

var elem = document.getElementById('exmaple');
var $elem = $('#example');

另外需要记住的是,由于每次调用$()的时候,都会在内存中生成新的独立的jQuery对象,所以,「Not all jQuery Objects created equally.」

var $heading1 = $('h1');
var $heading2 = $('h1'); alert($heading1 === $heading2); //false

即使两个jQuery对象的内容是相同的,也不意味这他们是同一个对象(物理地址不一样)。

但是,可以获取到他们都包含着的相同的DOM对象:

var $logo1 = $('#logo');
var logoElem1 = $logo1.get(0); var $logo2 = $('#logo');
var logoElem2 = $logo2.get(0); alert(logoElem1 === logoElem2); //true

最后,jQuery对象不是「活」的。jQuery对象生成的时候,它成为了一个封装过的选择器匹配结果的「快照」。也就是说,在jQuery对象生成后,对相关元素做出了改变不会反映到jQuery对象上。

var $p = $('p');

在$p声明之后,对页面p元素的作出任何修改(remove、update)都不会影响到$p这个jQuery对象。如果想要更新这个jQuery呢?可以重新生成一个:

$p = $('p');

读jQuery官方文档:jQuery对象的更多相关文章

  1. 读BeautifulSoup官方文档之与bs有关的对象和属性(1)

    自从10号又是5天没更, 是, 我再一次断更... 原因是朋友在搞python, 老问我问题, 我python也是很久没碰了, 于是为了解决他的问题, 我只能重新开始研究python, 为了快速找回感 ...

  2. 读vue-cli3 官方文档的一些学习记录

    原来一直以为vue@cli3 就是创建模板的工具,读了官方文档才知道原来这么有用,不少配置让我长见识了 Prefetch 懒加载配置 懒加载相信大家都是知道的,使用Import() 语法就可以在需要的 ...

  3. 读jQuery官方文档:$(document).ready()与避免冲突

    $(document).ready() 通常你想在DOM结构加载完毕之后才执行相关脚本.使用原生JavaScript,你可能调用window.onload = function() { ... }, ...

  4. 读jQuery官方文档:数据方法与辅助方法

    数据方法 有时候你可能想要在元素上面储存数据.由于浏览器兼容性问题,用原生JavaScript处理元素上的数据可能会造成内存溢出,jQuery可以帮你自动处理这些问题: //储存和取出元素数据 $(' ...

  5. 读jQuery官方文档:样式

    样式 使用jQuery,无论是设置或者获取元素样式都十分简便. // 支持驼峰式和分割线式,两种方式等价(原生JavaScript只支持驼峰式) $('h1').css('fontSize'); $( ...

  6. 读jQuery官方文档:遍历

    遍历 jQuery的快捷遍历方法可以快速定位到想要的元素.查找祖先元素 html<div class="grandparent"> <div class=&quo ...

  7. 读BeautifulSoup官方文档之与bs有关的对象和属性(3)

    上一节说到.string的条件很苛刻, 如果某个tag里面包含了超过一个children, 就会返回None, 但是这里提供另外一种方式 .strings, 它返回的是一个generator, 比如对 ...

  8. 读BeautifulSoup官方文档之与bs有关的对象和属性(2)

    上一节说到tag, 这里接着讲, tag有个属性叫做string, tag.string其实就是我们要掌握的四个对象中的第二个 ---- NavigableString,  它代表的是该tag内的te ...

  9. 读BeautifulSoup官方文档之html树的搜索(1)

    之前介绍了有关的四个对象以及他们的属性, 但是一般情况下要在杂乱的html中提取我们所需的tag(tag中包含的信息)是比较复杂的, 现在我们可以来看看到底有些什么搜索的方法. 最主要的两个方法当然是 ...

随机推荐

  1. IComparer接口与

    IComparable比较接口,继承此接口可对lis<T>调用sort进行排序 或者调用sort时可以为sort方法提供继承了IComparer的比较器

  2. Hive基础介绍

    HIVE结构 Hive 是建立在 Hadoop 上的数据仓库基础构架.它提供了一系列的工具,可以用来进行数据提取转化加载(ETL),这是一种可以存储.查询和分析存储在 Hadoop 中的大规模数据的机 ...

  3. BNUOJ-26580 Software Bugs KMP匹配,维护

    题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=26580 题意:给一个模式串,然后m个匹配串,要求删掉匹配串中的所有存在的模式串,使得余下的 ...

  4. 使用PHP输出中文JSON字符串

    PHP 和 JavaScript 交互其实很方便,PHP 原生也提供了对 JSON 格式的支持.主要包括 JSON 编码和解码两个函数: 代码如下: json_endoce: http://cn.ph ...

  5. [置顶] Objective-C ,ios,iphone开发基础:protocol 协议(委托,代理)的声明

    协议是为了弥补Objective-c中类只能单继承的缺陷,在Objective-c2.0之前当一个类遵循一个协议的时候,必须在类中实现协议的所有方法,在Objective-c2.0之后协议中的方法就有 ...

  6. [威客任务]¥800.00 JS实现网站联动三级选项

    任务地址:http://task.zhubajie.com/3275832/ 具体要求: 要求1) 选单样式参照附件2) 点击第一个选项内容后,跳出第二个选项栏位,并自动更新选项内容3) 点击第二个选 ...

  7. svn 如何解决冲突

    项目中,往往不止你一人开发,多人开发,难免会有代码的冲突.彼此间谁也不能保证不会修改同个文件.如果修改了同个方法的内容.这时提交到svn是会提示代码冲突的. 当然,冲突是可控的,但不能避免.每次写代码 ...

  8. ASP.Net Core-依赖注入IoC

    一.Ioc IoC全称Inverse of Control,控制反转. 类库和框架的不同之处在于,类库是实现某种单一功能的API,框架是针对一个任务把这些单一功能串联起来形成一个完整的流程,这个流程在 ...

  9. 从零开始学android开发-查看sqlite数据库

    C:\Users\Administrator>cd E:\ProSoft\adt-bundle-windows-x86-20140321\sdk\platform-tools

  10. Android 访问权限设置记录-存档留着有用!

    Android开发应用程序时,如果应用程序需要访问网络权限,需要在 AndroidManifest.xml 中加入以下代码: <uses-permission android:name=”and ...