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. Java SAX DefaultHandler

    The org.xml.sax.helpers.DefaultHandler class is the base class for "listeners" in SAX 2.0. ...

  2. soliworks三维机柜布局(三)绘制电气线路图

    三维机柜布局中的自动布线是根据线路图中的电气连接属性布的.

  3. [OC Foundation框架 - 13] NSValue

    NSNumber能够包装基本数据类型称为OC对象,是因为继承了NSValue 包装结构体成OC对象 1.自带结构体 void value() { CGPoint point = CGPointMake ...

  4. [置顶] HTML语义和前端架构

    关于语义学 语义学是研究符号和意义之间的关系以及它们表示的内容.在语言学中,则主要是研究符号(例如单词,短语或者语音)在语言中所表达的意义.而在前端开发时,语义学则更多的关注HTML元素,属性以及它的 ...

  5. XML操作之Linq to Xml

    需要引用的命名空间:   using System.Xml.Linq; 常用的类:XDocument.XElement.XAttribute 创建 XDocument对象. XDocument.Loa ...

  6. Spring Framework 5.0.0.M3中文文档 翻译记录 Part I. Spring框架概览1-2.2

    Part I. Spring框架概览 The Spring Framework is a lightweight solution and a potential one-stop-shop for ...

  7. view 与layer

      文章出处:http://blog.csdn.net/iukey 一.添加 Quartz Core 框架 要使用 Quartz Core 框架,你需要将其添加到你的工程中 . 然后  #import ...

  8. android获取mac地址方法

    http://www.cnblogs.com/xioapingguo/p/4037513.html 网上找的,记录一下 public static String getMacAdress(){ Wif ...

  9. 【50】了解new和delete的合理替换时机

    1.有时候,我们替换掉编译器提供的new或者delete.首先思考,为什么想要替换?下面是三个常见理由: a.用来检测运用上的错误,超额分配一些内存,再额外的空间放置一些内存: b.为了强化效能,编译 ...

  10. New Features in C# 3.0, 4.0 and 5.0 (英文差的免入)

    What’s New in C# 3.0   Language Integrated Query(LINQ) - LINQ enables queries to be written in C# pr ...