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. NOIP2014 寻找道路

    2.寻找道路 (road.cpp/c/pas) [问题描述] 在有向图G中,每条边的长度均为1,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 1.路径上的所有点的出边所指 ...

  2. 1.2CPU和GPU的设计区别

    CPU和GPU之所以大不相同,是由于其设计目标的不同,它们分别针对了两种不同的应用场景.CPU需要很强的通用性来处理各种不同的数据类型,同时又要逻辑判断又会引入大量的分支跳转和中断的处理.这些都使得C ...

  3. acm-字符串整理

    一.后缀数组 #define maxn 200015 int wa[maxn],wb[maxn],wv[maxn],WS[maxn]; int len, sa[maxn] ; inline void ...

  4. openstack api users list get token get servers

    curl -i \  -H "Content-Type: application/json" \  -d '{ "auth": {    "ident ...

  5. Android实例-利用WebBrowser实现浏览器(XE8+小米2)

    结果: 1.网络好的情况下,打开很快,很流畅. 2.地址栏真心不好使,如果真要做应用,这块必须自己优化一下. 实例代码: unit Unit1; interface uses System.SysUt ...

  6. A Tour of Go Errors

    An error is anything that can describe itself as an error string. The idea is captured by the predef ...

  7. [C语言 - 11] 语言编译执行

    使用gcc编译器 1.预编译 gcc -E Hello.c -o Hello.i 2.汇编 gcc -S Hello.i -o Hello.s   3.编译 gcc -c Hello.s -o Hel ...

  8. jquery-ui 之Sortable详解

    <div class="aaa"> <ul id="sortable"> <li id="test">I ...

  9. Web- 一些标签样式

    网上找来的.有点用 1.只有下划线的文本框:<input style="border:0;border-bottom:1 solid black;background:;"& ...

  10. ECshop数据库的访问统计和管理员日志的清空

    ECshop是个不错的系统,但是它有一定漏洞,若是访问量巨大的话,大量的访问统计代码会存入数据库的ecs_stats表中,甚至几天就可以达到几百兆,严重的网站直接就崩溃了.数据备份的时候也有很多不便, ...