0

0

简洁掌握jQuery:核心jQuery

王林

王林

发布时间:2023-09-04 19:49:07

|

819人浏览过

|

来源于php中文网

原创

简洁掌握jquery:核心jquery

jQuery 背后的基本概念

虽然 jQuery API 中存在一些概念上的变化(例如 $.ajax 等函数),但 jQuery 背后的中心概念是“查找某事,做某事”。更具体地说,从 HTML 文档中选择 DOM 元素,然后使用 jQuery 方法对它们执行某些操作。这是大局概念。

为了深入理解这个概念,请思考下面的代码。




    
        
        
        
        
        
    


请注意,在此 HTML 文档中,我们使用 jQuery 来选择 DOM 元素 ()。选择某些内容后,我们然后通过调用 jQuery 方法 text()attr()appendTo() 来对选择执行一些操作。

text 方法在包装的 元素上调用,并将该元素的显示文本设置为“jQuery”。 attr 调用将 href 属性设置为 jQuery 网站。

领会“找到某事,做某事”的基本概念对于 jQuery 开发人员的进步至关重要。


概念、概念背后、jQuery 背后

虽然选择某事和做某事是 jQuery 背后的核心概念,但我想扩展这个概念以包括创建一些东西。因此,jQuery 背后的概念可以扩展到包括首先创建新的东西,选择它,然后用它做一些事情。我们可以称之为 jQuery 背后的概念、概念背后的概念。

我想要说明的是,您不会只选择 DOM 中已有的内容。对于 grok 来说,另外一点很重要,那就是 jQuery 可用于创建新的 DOM 元素,然后对这些元素执行某些操作。

在下面的代码示例中,我们创建一个不在 DOM 中的新 元素。一旦创建,它就会被选择并进行操作。




    
        
        
    


这里要掌握的关键概念是,我们正在动态创建 元素,然后对其进行操作,就像它已经在 DOM 中一样。


jQuery 需要 HTML 才能在标准模式或接近标准模式下运行

当浏览器以怪异模式呈现 HTML 页面时,存在 jQuery 方法无法正常工作的已知问题。确保当您使用 jQuery 时,浏览器通过使用有效的文档类型以标准模式或几乎标准模式解释 HTML。

为了确保正确的功能,本书中的代码示例使用 HTML 5 文档类型。



等待 DOM 准备就绪

当 DOM 加载并可用于操作时,jQuery 会触发名为 ready 的自定义事件。操作 DOM 的代码可以在此事件的处理程序中运行。这是 jQuery 使用中常见的模式。

Asp+Ajax(Jquery)实用例子
Asp+Ajax(Jquery)实用例子

Ajax是目前比较流行的网站建设技术,尤其作为网站建设者来说,掌握它十分有必要,如果用原生Javascript开发则比较困难,还好有强大的Jquery加持,开发则变的十分简单和容易。

下载

以下示例展示了正在使用的此自定义事件的三个​​编码示例。




    
        
        
    

    


请记住,您可以根据需要将任意数量的 ready() 事件附加到文档中。你不只限于一个。它们按照添加的顺序执行。


浏览器窗口完全加载时执行 jQuery 代码

通常,我们不想等待 window.onload 事件。这就是使用像 ready() 这样的自定义事件的要点,该事件将在窗口加载之前、DOM 准备好被遍历和操作之后执行代码。

然而,有时我们确实想等待。虽然自定义 ready() 事件非常适合在 DOM 可用后执行代码,但我们也可以使用 jQuery 在整个网页(包括所有资源)完全加载后执行代码。

这可以通过将加载事件处理程序附加到 window 对象来完成。 jQuery 提供了 load() 事件方法,可用于在窗口完全加载后调用函数。下面,我提供了 load() 事件方法的使用示例。




    
        
        
    

    



在包含 jQuery 之前包含所有 CSS 文件

从 jQuery 1.3 开始,该库不再保证在触发自定义 ready() 事件之前加载所有 CSS 文件。由于 jQuery 1.3 中的这一更改,您应该始终在任何 jQuery 代码之前包含所有 CSS 文件。这将确保浏览器在转向 HTML 文档中稍后包含的 JavaScript 之前已解析 CSS。当然,当浏览器解析 JavaScript 时,通过 CSS 引用的图像可能会也可能不会下载。


使用 jQuery 的托管版本

将 jQuery 嵌入网页时,大多数人选择下载源代码并从个人域/主机链接到它。但是,还有其他选项需要其他人为您托管 jQuery 代码。

Google 托管了多个版本的 jQuery 源代码,目的是供任何人使用。这实际上非常方便。在下面的代码示例中,我使用 元素来包含由 Google 托管的 jQuery 的缩小版本。


Google 还托管了多个以前版本的 jQuery 源代码,并且对于每个版本,都提供了缩小版和非缩小版变体。我建议在开发过程中使用非缩小变体,因为在处理非缩小代码时调试错误总是更容易。

使用 Google 托管版本的 jQuery 的一个好处是它可靠、快速并且可以缓存。


不使用 Ready() 解析 DOM 时执行 jQuery 代码

并不完全需要自定义 ready() 事件。如果您的 JavaScript 代码不影响 DOM,您可以将其包含在 HTML 文档中的任何位置。这意味着如果您的 JavaScript 代码不依赖于完整的 DOM,您可以完全避免 ready() 事件。

现在大多数 JavaScript,尤其是 jQuery 代码,都会涉及到操作 DOM。这意味着 DOM 必须由浏览器完全解析才能进行操作。这就是为什么开发人员几年来一直陷在 window.onload 过山车上的原因。

为了避免对 DOM 操作的代码使用 ready() 事件,您只需将代码放在 HTML 文档中的

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

54

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

40

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

50

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

12

2026.01.31

漫画防走失登陆入口大全
漫画防走失登陆入口大全

2026最新漫画防走失登录入口合集,汇总多个稳定可用网址,助你畅享高清无广告漫画阅读体验。阅读专题下面的文章了解更多详细内容。

13

2026.01.31

php多线程怎么实现
php多线程怎么实现

PHP本身不支持原生多线程,但可通过扩展如pthreads、Swoole或结合多进程、协程等方式实现并发处理。阅读专题下面的文章了解更多详细内容。

1

2026.01.31

php如何运行环境
php如何运行环境

本合集详细介绍PHP运行环境的搭建与配置方法,涵盖Windows、Linux及Mac系统下的安装步骤、常见问题及解决方案。阅读专题下面的文章了解更多详细内容。

0

2026.01.31

php环境变量如何设置
php环境变量如何设置

本合集详细讲解PHP环境变量的设置方法,涵盖Windows、Linux及常见服务器环境配置技巧,助你快速掌握环境变量的正确配置。阅读专题下面的文章了解更多详细内容。

0

2026.01.31

php图片如何上传
php图片如何上传

本合集涵盖PHP图片上传的核心方法、安全处理及常见问题解决方案,适合初学者与进阶开发者。阅读专题下面的文章了解更多详细内容。

2

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 5.2万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 10万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号