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. android NDK 实用学习(四)-类缓存

    1,为什么需要类缓存: 答:由于频繁的查找类及类成员变量需要很大的时间与空间开销,可参考如下文章: http://www.ibm.com/developerworks/cn/java/j-jni/ h ...

  2. 洛谷 P2279 03湖南 消防局的设立

    2016-05-30 16:18:17 题目链接: 洛谷 P2279 03湖南 消防局的设立 题目大意: 给定一棵树,选定一个节点的集合,使得所有点都与集合中的点的距离在2以内 解法1: 贪心 首先D ...

  3. Java类的生命周期详解

    引言 最近有位细心的朋友在阅读笔者的文章时,对java类的生命周期问题有一些疑惑,笔者打开百度搜了一下相关的问题,看到网上的资料很少有把这个问题讲明白的,主要是因为目前国内java方面的教材大多只是告 ...

  4. 40个Java集合面试问题和答案

    Java集合框架为Java编程语言的基础,也是Java面试中很重要的一个知识点.这里,我列出了一些关于Java集合的重要问题和答案. 另外,码农网之前也整理过一篇关于Java集合面试题的文章:大公司最 ...

  5. PopupWindow 问题集锦

    1.响应返回键/响应键盘事件(onKeyListener) 最近在做PopupWindow, 发现使用PopupWindow一出现,不会响应popup外面的事件,经过资料查找,发现有两种方法可以响应外 ...

  6. <转>HTML中的table转为excel

    转换html 中的table 为excel,firefox浏览器支持,代码如下 <%@ page language="java" contentType="text ...

  7. sts中从svn导入maven项目

    1.创建资源库 2.导入项目作为本地项目 3.将子module从本地导入(默认情况下,只会将主pom所在的工程导入)

  8. React中的Statics对象

    statics 对象允许你定义静态的方法,这些静态的方法可以在组件类上调用.例如 var MyComponent = React.createClass({ statics: { customMeth ...

  9. Oracle中的AS和IS

    Oracle中的AS和IS是ORACLE为了方便而设置的同义词基本上没有不同 . 使用规则: 1.在创建存储过程(PROCEDURE)/函数(FUNCTION),以及自定义类型(TPYE)和包(PAC ...

  10. 文件控制列表命令setfacl和getfacl的使用

    一 需求 有以下需求,通过setfacl命令实现 一组用户可写可读可执行,一组用户可写可执行,另一组用户只可读 linux rwx oracle wx uplook r 二 解决 第一步 添加六个用户 ...