黄子涵

第1章　jQuery开发入门

1.1　jQuery 概述

1.1.1　认识 jQuery

jQuery 是由美国人 John Resig 于 2006 年创建的一个开源项目，随着被人们熟知，越来越多的程序高手加入其中，完善并壮大其项目内容，如今已发展成为集 JavaScript、CSS、DOM、Ajax 于一体的强大框架体系。它的主旨是：以更少的代码，实现更多的功能（Write less，do more）。

1.1.2　jQuery 基本功能

  1. 访问和操作 DOM 元素
    使用 jQuery 库，可以很方便地获取和修改页面中的某元素，无论是删除、移动还是复制某元素，jQuery 都提供了一整套方便、快捷的方法，既减少了代码的编写，又大大提高了用户对页面的体验度。
  1. 控制页面样式
    通过引入 jQuery，程序开发人员可以很便捷地控制页面的 CSS 文件。浏览器对页面文件的兼容性，一直以来都是页面开发者最为头痛的事，而使用 jQuery 操作页面的样式却可以很好地兼容各种浏览器。
  1. 对页面事件的处理
    引入 jQuery 库后，可以使页面的表现层与功能开发分离，开发者更多地专注于程序的逻辑与功效；页面设计者侧重于页面的优化与用户体验。然后，通过事件绑定机制，可以很轻松地实现二者的结合。
  1. 大量插件在页面中的运用
    在引入 jQuery 库后，还可以使用大量的插件来完善页面的功能和效果，如表单插件、UI 插件，这些插件的使用极大地丰富了页的展示效果，使原来使用 JavaScript 代码遥不可及的功能通过插件的引入而轻松地实现。
  1. 与 Ajax 技术的完美结合
    Ajax 的异步读取服务器数据的方法，极大地方便了程序的开发，加深了用户的页面体验度；而引入 jQuery 库后，不仅完善了原有的功能，而且减少了代码的书写，通过其内部对象或函数，加上几行代码就可以实现复杂的功能。

1.1.3　搭建 jQuery 开发环境

  1. 下载 jQuery 文件库
    在 jQuery 的官方网站（http://jquery.com） 中，下载最新版本的 jQuery 文件库，其网站页面如下图所示。

image

在网站中，选择大小为 24KB 的压缩包，单击 Download（下载）按钮，便可以将最新版的 jQuery 框架下载到本地。

image

  1. 引入jQuery文件库
    下载完 jQuery 框架文件后，并不需要任何安装，仅需要使用＜script＞文件导入标记，将 jQuery 框架文件 jquery-3.6.0.min.js 导入页面中即可。假设该文件下载后保存在项目文件夹中，那么，在页面的＜head＞＜/head＞中加入如下代码：
<!DOCTYPE html>
<html lang="zh">
    <head>
        <title>引入 jQuery 文件库</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script language="javascript" type="text/javascript" src="./jquery-3.6.0.min.js"></script>
    </head>
    <body>
    
    </body>
</html>

在页面的头部分，加入上述代码后，便完成了 jQuery 框架的引入，就可以开始我们的 jQuery 之旅了。

1.1.4　编写第一个简单的 jQuery 应用

首先，我们来编写一个简单的程序，参见下面的示例。

示例1-1　编写第一个简单的 jQuery 程序

（1）功能描述

在页面加载时，弹出一个模式对话框，显示“您好，欢迎来到黄子涵世界”字样，单击“确定”按钮后关闭该窗口。

（2）实现代码

新建一个 HTML 文件 1-1.html，加入如代码清单 1-1 所示的代码。

代码清单1-1　第一个简单的 jQuery 应用
<!DOCTYPE html>
<html lang="zh">
    <head>
        <title>第一个简单的 jQuery 应用</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script language="javascript" type="text/javascript" src="./jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                alert('您好，欢迎来到黄子涵的世界');
            })
        </script>
    </head>
    <body>
    
    </body>
</html>

在上述两段代码中，有一段如下的代码：

$(document).ready(function() {
            // 程序段
})

该段代码类似于传统的JavaScript代码：

window.onload = function() {
                // 程序段
}

虽然上述两段代码在功能上可以互换，但它们之间又有许多区别：

  • 执行时间不同：$(document).ready在页面框架下载完毕后就执行；而 window.onload 必须在页面全部加载完毕（包含图片下载）后才能执行。很明显，前者的执行效率高于后者。
  • 执行数量不同：$(document).ready可以重复写多个，并且每次执行结果不同；而window.onload 尽管可以执行多个，但仅输出最后一个执行结果，无法完成多个结果的输出。
  • $(document).ready(function(){}) 可以简写成 $(function(){})，因此与下面的代码是等价的。
$(document).ready(function() {
                // 程序段
})

等价于

$(function() {
    // 程序段
})
（3）页面效果

image

1.1.5　jQuery 程序的代码风格

  1. “$”美元符的使用
    在 jQuery 程序中，使用最多的莫过于“$”美元符了，无论是页面元素的选择、功能函数的前缀，都必须使用该符号，可以说它是 jQuery 程序的标志。
  1. 事件操作链接式书写
    在编写页面某元素事件时，jQuery 程序可以使用链接式的方式编写该元素的所有事件。为了更好地说明该书写方法的使用，我们通过一个示例加以阐述。

示例 1-2　jQuery 事件的链式写法

（1）功能描述

在页面中，有一个＜div＞标记，在该标记内，包含二个＜div＞标记，一个为主题，另一个为内容，页面首次加载时，被包含的内容＜div＞标记是不可见的，当用户单击主题＜div＞标记时，改变自身的背景色，并将内容＜div＞标记显示出来。

（2）实现代码

新建一个 HTML 文件，加入如代码清单 1-2 所示的代码。

代码清单1-2　jQuery 事件的链式写法
<!DOCTYPE html>
<html lang="zh">
    <head>
        <title>jQuery 事件的链式写法</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script language="javascript" type="text/javascript" src="./jquery-3.6.0.min.js"></script>
        <style type="text/css">
            .hzhFrame {
                width: 260px;
                border: solid 1px #666;
                font-size: 10pt;
            }
            .hzhTitle {
                background-color: #eee;
                padding: 5px;
            }
            .hzhContent {
                padding: 5px;
                display: none;
            }
            .hzhColor {
                background-color: red;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $(".hzhTitle").click(function() {
                    $(this).addClass("hzhColor").next(".hzhContent").css("display", "block");
                });
            });
        </script>
    </head>
    <body>
        <div class="hzhFrame">
            <div class="hzhTitle">黄子涵</div>
            <div class="hzhContent">
                <a href="#">黄子涵一号链接</a><br/>
                <a href="#">黄子涵二号链接</a><br/>
                <a href="#">黄子涵三号链接</a>
            </div>
        </div>
    </body>
</html>

image

1.2　jQuery 的简单应用

1.2.1　jQuery 访问 DOM 对象

1.2.2　jQuery 控制 DOM 对象

1.2.3　jQuery 控制页面 CSS

1.3　本章小结

posted @   黄子涵  阅读(146)  评论(0)  编辑  收藏  举报
相关博文：
· 《jQuery权威指南》笔记目录
· 第12章 库
· jquery知识
· jQuery笔记
· 1 jQuery 介绍
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示