$选择器--是如何将DOM封装成jquery对象

jacklove

发布时间：2018-06-11 23:01:29

2575人浏览过

来源于php中文网

原创

前言：说到jquery不得不说的就是强大的jquery的选择器功能啦。该功能很强大，还单独分离出来sizzle模块供只需用到选择器功能的朋友使用。（该篇先不说jquery选择器的强大功能，先说说jquery是如何将DOM元素封装成jquery对象的）

一、Dom对象和jquery对象

测试

运行结果：

从中我们就可以看出区别了，$()把dom对象封装成jquery对象，而dom对象也就保存在jquery[0]中，这也就是为什么我们说的把jquery对象转化成dom对象只需用jquery[0]或者jquery.get(0)了。

二、模拟jquery--根据id，封装jquery对象

这里先简化一下，看看封装jquery对象的一部分过程

测试

②输出结果:（火狐浏览器上打开的）

这里需要注意的是，chrome浏览器在显示上有会些不同

jquery显示的是类数组对象形态。

③、解析

对于上面代码有很多看不明白的朋友建议看一下我前面写的文章【jquery源码】开始学习源码之前需要解决的一些问题。

正则匹配我是直接复制了源码中的正则，可以输出该正则处理后的结果来看看。

a0.dev

专为移动端应用开发设计的AI编程平台

下载

三、模拟jquery--根据标签名，封装jquery对象

直接上代码


 
    测试1
    测试2
    测试3
    测试4

输出结果：

这里只是单纯的模拟，jq处理起来远远没有那么简单，jquery还进行了大量的判断（下面的文章会继续说这个问题）。还可以在jquery对象中发现prevObject属性，该属性保存的是上一级的查找对象。看看下面的例子就能明白了。



 
    测试1
    测试2
    测试3
    测试4

本文讲解了$选择器--是如何将DOM封装成jquery对象，更多相关内容请关注php中文网。

相关推荐：

css3动画导航栏3D

requests库的基本使用

前端调用微信支付接口

AJAX请求返回数据后，如何正确处理数据渲染？

如何确保页面中的弹窗在不同设备上都能居中显示？

频繁的DOM操作导致渲染卡顿，如何批量处理DOM操作？

在循环中创建DOM元素，如何改进代码以提高性能？

Vue 2和Vue 3的性能差异是什么？

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：原生js组件化开发简单轮播图实例代码下一篇：关于面向对象设计的相关讲解

作者最新文章

仿站小工具的使用教程

2018-07-11 14:04

用好anyproxy提高公众号文章采集效率详解

2018-07-07 17:50

PHP 闭包获取外部变量和global关键字声明变量的区别讲解

2018-07-07 17:51

linux下的php-fpm参数配置介绍与参数优化说明详解

2018-07-07 17:53

php实现签到功能的方法实例分析详解

2018-07-07 17:54

解决Linux下php-fpm进程过多导致内存耗尽问题详解

2018-07-07 17:55

php实现签到功能的方法实例分析de详解

2018-07-07 17:56

php操作zip在不解压缩包的情况下显示压缩包中的图片相关讲解

2018-07-07 17:57

Laravel 5.5中为响应请求提供的可响应接口的详解

2018-07-07 17:58

laravel5 使用try catch的实例讲解

2018-07-07 18:01

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

Golang gRPC 服务开发与Protobuf实战

本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践，涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC（Unary/Server/Client/Bidirectional）、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例，帮助学习者掌握使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系，适用于微服务与内部系统通信场景。

2026.01.15

公务员递补名单公布时间公务员递补要求

公务员递补名单公布时间不固定，通常在面试前，由招录单位（如国家知识产权局、海关等）发布，依据是原入围考生放弃资格，会按笔试成绩从高到低递补，递补考生需按公告要求限时确认并提交材料，及时参加面试/体检等后续环节。要求核心是按招录单位公告及时响应、提交材料（确认书、资格复审材料）并准时参加面试。

2026.01.15

公务员调剂条件 2026调剂公告时间

(一)符合拟调剂职位所要求的资格条件。 (二)公共科目笔试成绩同时达到拟调剂职位和原报考职位的合格分数线，且考试类别相同。拟调剂职位设置了专业科目笔试条件的，专业科目笔试成绩还须同时达到合格分数线，且考试类别相同。 (三)未进入原报考职位面试人员名单。

2026.01.15

国考成绩查询入口国考分数公布时间2026

笔试成绩查询入口已开通，考生可登录国家公务员局中央机关及其直属机构2026年度考试录用公务员专题网站http://bm.scs.gov.cn/pp/gkweb/core/web/ui/business/examResult/written_result.html，查询笔试成绩和合格分数线，点击“笔试成绩查询”按钮，凭借身份证及准考证进行查询。

2026.01.15