jquery从零开始-1.2 使用 jQuery

待我称王封你为后i 2023-07-07 08:23 93阅读 0赞

接上一节 [jQuery从零开始-1.1 认识 jQuery][jQuery_-1.1 _ jQuery]

jQuery 项目 主要包括 jQuery Core （核心库）、 jQuery UI （界面库〉、 Sizzle ( CSS 选择器）、 jQuery Mobile CjQuery 移动版〉和 QUnit C 测试套件） 5 个部分， 参考网址如表 1.1 所示。

![image.png][]

jQuery 2.1.1 版本之后， 全部升级为 jQuery 3.0。第三个版本兼容更广泛的浏览器，提供更优化的代 码。虽然 jQuery 3 将是jQuery 的未来，但是与 jQuery UI 和jQuery  Mobile 还存在兼容性问题。如果需 要支持 IE6-8 浏览器，或者兼容已经开发的项目，建议继续使用最新版本 1.12。

**安装 jQuery **

jQuery 库不需要复杂的安装，只需要把下载的库文件放到站点中，然后导入到页面中即可。 【示例 1 】 导入 jQuery 库文件可以使用相对路径，也可以使用绝对路径，具体情况根据存放jQuery 库文件的位置而定。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery/jquery-3.3.1.min.js"></script>
    </head>
    <body>
    
    <script>
     
    </script>
    </body>
    </html>

**测试 jQuery**

引入 jQuery 库文件之后， 就可以在页面中进行 jQuery 开发了。开发的步骤很简单，在导入 jQuery 库文件的＜script>标签行下面，重新使用＜script>标签定义一个 JavaScript 代码段，然后就可以在＜script> 标签内调用 jQuery 方法，编写 JavaScript 脚本。 【示例 2】 本示例设计在页面初始化完毕后，调用 JavaScript 的 alert()方法与浏览者打个招呼.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery/jquery-3.3.1.min.js"></script>
    </head>
    <body>
    
    <script>
        //在这里用户就可以使用 jQuery 编程了！
     $(function(){
            alert("HELLO,WORLD")
        })
    </script>
    </body>
    </html>

在jQuery 代码中，$是 jQuery 的别名，如$()等效于 jQuery ()。 jQuery ()函数是 jQuery 库文件的接口 函数，所有 jQuery 操作都必须从该接口函数切入。jQuery ()函数相当于页面初始化事件处理函数， 当页 面加载完毕，会执行jQuery ()函数包含的函数， 所以当浏览该页面时， 会执行 alert("您好")，看到弹出的信息提示对话框。

**如果使用jQuery操作DOM文挡，则必须确保在DOM载入完毕后开始执行，应该使用ready事件作为处理HTML文挡的开始。**

$(document).ready(function(){ 
    //JavaScript 或者 jQuery 代码
    }) ;

上面代码的语义是匹配文档中的 document 节点，然后为该节点绑定 ready 事件处理函数。它类似于 JavaScript 的 事件处理函数，不过jQuery 的 ready 事件要先于 onload事件被激活。

为了方便开发， jQuery 框架进一步简化了$（document).ready()方法的写法，直接使用$()方法来表示。

$(function() {
        //JavaScript 或者 jQuery 代码
    })

考虑到页面加载需要一个过程，所有 jQuery代码建议都包含在$()函数中 ， 当然也可以不被包含在$() 函数中，这与 JavaScript 代码应该放在 事件处理函数中的道理是一样的。

今天本节结束，下一节 **jQuery实战案例**

# **老铁，要不点个赞再走可好？么么哒** #

1、点个赞呗，可以让更多的人看到这篇文章，顺便激励下我。

2、老铁们，关注我的原创微信公众号「FUNS社区」，还可访问[FUNS在线社区http://www.htmlfuns.cn][FUNS_http_www.htmlfuns.cn]，专注小白从零开始系列。包括HTML5、css3、javascript、vue涵盖所有前端知识体系，保证让你看完有所收获，不信你打我。后台回复『学习资料』送你一份2020年最新技术资料（超2000G！）现在全部免费给你！包含各类技能的优质学习视频。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng_size_16_color_FFFFFF_t_70 1][]

**作者简介**

作者：大家好，我是FUNS大师兄，工作至今，从一个小白成长为大厂的技术总监，一直想写点什么，种种原因不知什么时候开始，也不知道怎么下手。一路走来，见证了很多Programmer的大起大落，其实程序员这个行业，坚持到最后的才是真大神。我们身处在一个浮躁的社会，不仅爱情如此，连程序开发也是这样。大家都习惯了喜新厌旧，忘记了当初选择的初心。我觉得我是幸运的，当年带我的导师是阿里出来的，本应风光无限，可惜她热爱午后的斜阳，去开了一家咖啡店，听说后来经营不善未果。最好的时光错过了最好的机遇吧。

期间碰到过一些学弟找我，大家都很迷茫，后来我才发现，迷茫这个东西跟你年龄没什么关系，迷茫说到底没有安全感，我们的薪资、家庭、未来等等都是安全感的一部分。我在此也不是为了教导种种，只是分享自己的一路走来的坑，我一直相信一句话，我们所羡慕的生活背后都有我们吃不了的苦。其次是写点自己想写的代码，让自己开心一些吧！

> **转载说明：未获得授权，禁止转载**

[jQuery_-1.1 _ jQuery]: https://blog.csdn.net/zd8693476/article/details/104437100
[image.png]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jvb2suaHRtbGZ1bnMuY24vdXBsb2FkL2ltYWdlLzIwMjAwMjIxLzE1ODIyOTcyODQxMzA5NjIucG5n?x-oss-process=image/format,png
[FUNS_http_www.htmlfuns.cn]: http://www.htmlfuns.cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200225111127939.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200225114905261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng==,size_16,color_FFFFFF,t_70