一、Jquery入门（超详）

时间：2024-11-18 12:07:21

请添加图片描述

文章目录

  • 前言
  • 一、Jquery是什么？
  • 二、配置 jQuery 环境
  • 三、jQuery 语法
    • 3.1 文档就绪函数
    • 3.2 编写我们的第一个 jQuery 程序
  • 四、 jQuery 代码风格
  • 五、 jQuery 对象和 DOM 对象
    • 5.1 DOM 对象
    • 5.2 jQuery 对象
    • 5.3 jQuery 对象和 DOM 对象之间的相互转换
      • 5.3.1 jQuery 对象转换为 DOM 对象
      • 5.3.2 DOM 对象转换为 jQuery 对象
  • 六、 解决 jQuery 和其他库的冲突
  • 总结

前言

本文将带领大家了解 jQuery 的定义，它有什么作用，我们为什么要学它，以及如何使用它，它的语法是什么，最后对比了 jQuery 对象和 DOM 对象的区别。

一、Jquery是什么？

我们可以简单的理解为 jQuery 是一个 JavaScript 函数库。jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

它有如下的优势：

  • 轻量级
  • 强大的选择器
  • 出色的 DOM 操作的封装
  • 可靠的事件机制
  • 完善的 ajax
  • 不污染*变量。
  • 出色的浏览器兼容性。
  • 链式操作方式。
  • 隐式迭代。
  • 行为层与结构层的分离。
  • 丰富的插件支持。
  • 完善的文档。
  • 开源。

二、配置 jQuery 环境

进入 jQuery 的官方网站 /,可以下载最新的 jQuery 文件到本地，然后再引入到项目即可。官方网站如下所示：
在这里插入图片描述
引入代码示例：

<head>
  <script type="text/javascript" src=""></script>
</head>
  • 1
  • 2
  • 3

注意：这里的路径位置，请大家根据实际的情况自行调整。另外官方网站有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读），请大家根据自己的需要自行选择下载。

当然如果我们不想把 jQuery 下载到本地，也可以使用 Google 的 CDN 或者使用 Microsoft 的 CDN：

使用 Google 的 CDN：
Google CDN 国内已经无法访问，以下内容仅作演示。

<head>
  <script
    type="text/javascript"
    src="/ajax/libs
/jquery/1.4.0/"
  ></script>
</head>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

使用 Microsoft 的 CDN：

<head>
  <script
    type="text/javascript"
    src="/ajax/jquery
/jquery-1."
  ></script>
</head>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

三、jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：

$(selector).action();
  • 1
  • 美元符号 $ 定义 jQuery。
  • 选择符（selector）“查询”和“查找” HTML 元素。
  • jQuery 的 action() 执行对元素的操作。

另外需要注意的是：在 jQuery 库中 $ 符号就是 jQuery 的一个简写形式，例如 KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲lw") 和 jQuery("….ajax 和 是等价的，如果没有特别说明，程序中的 $ 符号都是 jQuery 的一个简写形式。

3.1 文档就绪函数

所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

});

// 可以简写成

$(funciton(){

});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

  • 试图隐藏一个不存在的元素。
  • 获得未完全加载的图像的大小。

上面的这段代码其实有点类似于传统 JavaScript 中的 方法，不过它们还是有一些区别的，简单对比如下所示：

$(doucment).ready()
执行时机 必须等待网页中所有的内容加载完毕后才能执行（包括图片） 网页中所有 DOM 结构绘制完毕后就执行，可能 DOM 元素关联的东西并没有加载完
编写个数 不能同时编写多个。 能同时编写多个。

编写个数的意思就是：

 = function () {
  alert("test1");
};
 = function () {
  alert("test2");
};
//结果只会输出 test2。
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
$(document).ready(function () {
  alert("test1");
});
$(document).ready(function () {
  alert("test2");
});
//结果两次都输出
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

3.2 编写我们的第一个 jQuery 程序

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!-- Microsoft  的 CDN 的方式加载jQuery -->
    <head>
        <script
                type="text/javascript"
                src="/ajax/jquery/jquery-1."
        ></script>
    </head>
</head>
<body>
<script type="text/javascript">
    //等待dom元素加载完毕
    $(document).ready(function () {
        //弹出一个框:显示hello world
        alert("hello world");
    });
</script>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

请添加图片描述

四、 jQuery 代码风格

良好的代码风格使得代码更加具有可读性，适当的注释代码，对于日后代码的维护也是非常有利的。来看个例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
        <script type="text/javascript" src="/ajax/jquery/jquery-1."></script>
  </head>
  <body>
    <div class="box">
      <ul class="menu">
        <li class="level1">
          <a href="#">春天</a>
          <ul class="level2">
            <li>春意盎然</li>
            <li>春意盎然</li>
            <li>春意盎然</li>
            <li>春意盎然</li>
          </ul>
        </li>
        <li class="level1">
          <a href="#">夏天</a>
          <ul class="level2">
            <li>夏日炎炎</li>
            <li>夏日炎炎</li>
            <li>夏日炎炎</li>
            <li>夏日炎炎</li>
          </ul>
        </li>
        <li class="level1">
          <a href="#">秋天</a>
          <ul class="level2">
            <li>秋高气爽</li>
            <li>秋高气爽</li>
            <li>秋高气爽</li>
            <li>秋高气爽</li>
          </ul>
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      //等待dom元素加载完毕
      $(document).ready(function () {
        $(".level1>a").click(function () {
          $(this)
            .addClass("current")
            .next()
            .show()
            .parent()
            .siblings()
            .children("a")
            .removeClass("current")
            .next()
            .hide();
          return false;
        });
      });
    </script>
  </body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59

代码很简单，我们没有加入 css 样式这些，主要还是讲解 jQuery，运行效果为：
请添加图片描述
简单解释一下这段代码，当鼠标点击到 a 标签的时候给其添加一个名为 current 的 class，然后调用 next() 和 show() 将其后面的元素显示出来，然后调用 parent()、siblings()、children(“a”) 将它的父辈的同辈元素的内部的子元素 a 都去掉一个名为 current 的 class (removeClass(“current”))，并且将紧邻它们后面的元素都隐藏。

这就是 jQuery 的强大的链式操作，一行代码就完成了我们导航栏的功能，大家可以试着去写一下原生的 JavaScript 代码，看看需要写多少行，这也就是我们 jQuery 的魅力所在。当然上面的那些方法看不懂也没关系，后面都会讲解的。不过为了进一步改善代码的可读性和可维护性，推荐一种写法：

$(document).ready(function () {
  $(".level1>a").click(function () {
    $(this)
      .addClass("current") //给当前元素添加"current"样式
      .next()
      .show() //下一个元素显示
      .parent()
      .siblings()
      .children("a")
      .removeClass("current") //父元素的同辈元素的子元素a移除"current"样式
      .next()
      .hide(); //它们的下一个元素隐藏
    return false;
  });
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

也就是说适当的换行和添加注释可以让我们对代码作用一目了然，增加代码的可读性，便于日后的维护，提高开发效率。

五、 jQuery 对象和 DOM 对象

5.1 DOM 对象

DOM （Document Object Model）对象，也就是我们经常说的文档对象模型，每一份 DOM 都可以表示成一棵 DOM 树：
在这里插入图片描述
比如这样的一段代码：

<h1></h1>
<p></p>
<ul>
  <li></li>
</ul>
  • 1
  • 2
  • 3
  • 4
  • 5

h1,p,ul 以及 li 标签都是 DOM 元素节点，我们可以通过 JavaScript 中的 ()，() 等来获取元素节点，像这样获取的 DOM 元素就是 DOM 对象，DOM 对象可以使用 JavaScript 中的方法，比如：

var domObj = ("id"); //获取DOM对象
var objHtml = ; //使用JavaScript中的属性innerHTML
  • 1
  • 2

5.2 jQuery 对象

jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的，如果一个对象是 jQuery 对象，那么它就可以使用 jQuery 里的方法，比如：

$("#xnm").html(); //获取id为syl的元素内的html代码，html()是jQuery中的方法
  • 1

这段代码等同于：

("xnm").innerHTML;
  • 1

在 jQuery 对象中无法使用 DOM 对象中的任何方法，例如 $(“#xnm”).innerHTML; 之类的写法是错的，可以使用 $(“#xnm”).html(); 之类的 jQuery 方法来代替，同样的道理，DOM 对象也不能使用 jQuery 里的方法，例如:(“xnm”).html();也是会报错的。

注：用 #id 作为选择符取得的是 jQuery 对象而并非 (“id”); 所得到的 DOM 对象，两者并不等价。我们一定要从开始就树立这样的一个观念：jQuery 对象和 DOM 对象是有区别的，它们并不是等价的。

5.3 jQuery 对象和 DOM 对象之间的相互转换

在讲解 jQuery 对象和 DOM 对象之间的相互转换之前，我们先约定好定义变量的风格，如果获取的是 jQuery 对象，那么我们在变量前面加上 $ 符号，例如：

var $test = jQuery 对象;
  • 1

如果获取的是 DOM 对象：

var test = DOM 对象;
  • 1

注：这里加个$只是为了区分变量是 jQuery 对象还是 DOM 对象并不是说所有使用 jQuery 的代码中变量声明都需要只是为了区分变量是jQuery对象还是DOM对象并不是说所有使用jQuery的代码中变量声明都需要。

5.3.1 jQuery 对象转换为 DOM 对象

我们前面说过 jQuery 对象不能使用 DOM 中的方法，但是如果我们又不得不使用 DOM 中的方法呢？比如：对 jQuery 对象所提供的方法不熟悉或者忘了但是知道 DOM 中的方法，自己又很懒不想去查 jQuery 手册或者 jQuery 本身就没有封装我们想要使用的方法。有以下的两种处理方法：

  • [index]:jQuery 对象是一个类似数组的对象，可以通过 [index] 的方法得到对应的 DOM 对象，比如：
var $cr = $("#cr"); //jQuery 对象
var cr = $cr[0]; //DOM 对象
  • 1
  • 2
  • 通过 get(index) 方法得到相应的 DOM 对象，比如：
var $cr = $("#cr"); //jQuery 对象
var cr = $cr.get(0); //DOM 对象
  • 1
  • 2

5.3.2 DOM 对象转换为 jQuery 对象

对于一个 DOM 对象，只需要用 $() 把 DOM 对象包装起来，就可以获得一个 jQuery 对象了，比如：

var cr = ("cr"); //DOM 对象
var $cr = $(cr); //jQuery 对象
  • 1
  • 2

注：这里再次强调一次，DOM 对象才能使用 DOM 中的方法，jQuery 对象不可以使用 DOM 中的方法，但 jQuery 对象提供了一套更加完善的工具用于操作 DOM，在后面的学习中，我们都会为大家一一的进行讲解。我们平时用到的 jQuery 对象都是通过 () 函数制造出来的，()函数制造出来的，() 函数就是一个 jQuery 对象的制造工厂。

下面我们来看个例子：

DOM 方式判断复选框是否被选中：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="/ajax/jquery/jquery-1."></script>
  </head>
  <body>
    <input type="checkbox" id="cr" /><label for="cr">我已阅读协议</label>
    <script type="text/javascript">
      //等待dom元素加载完毕
      $(document).ready(function () {
        var $cr = $("#cr"); //jQuery对象
        var cr = $cr[0]; //DOM对象，或者$cr.get(0)
        $cr.click(function () {
          if () {
            //DOM方式判断
            alert("你已同意本协议");
          }
        });
      });
    </script>
  </body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

jQuery 方式判断复选框是否被选中：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="/ajax/jquery/jquery-1."></script>
  </head>
  <body>
    <input type="checkbox" id="cr" /><label for="cr">我已阅读协议</label>
    <script type="text/javascript">
      //等待dom元素加载完毕
      $(document).ready(function () {
        var $cr = $("#cr");
        $cr.click(function () {
          if ($cr.is(":checked")) {
            alert("你已同意本协议");
          }
        });
      });
    </script>
  </body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

注：上面的例子简单的演示了 DOM 对象和 jQuery 对象的不同，但是最终的运行效果是一样的。

六、 解决 jQuery 和其他库的冲突

jQuery 使用 $ 符号作为 jQuery 的简写。如果其他 JavaScript 框架也使用符号作为jQuery的简写。如果其他JavaScript框架也使用 符号作为简写怎么办？

其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。

jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。当然，我们仍然可以通过全名替代简写的方式来使用 jQuery：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    <script type="text/javascript" src="/ajax/jquery/jquery-1."></script>
    </head>
    <body>
        <p>这是一个段落。</p>
        <button>点我</button>
        <script type="text/javascript">
            //等待dom元素加载完毕
            $.noConflict();
            jQuery(document).ready(function() {
                jQuery("button").click(function() {
                    jQuery("p").text("jQuery 仍然在工作!");
                });
            });
        </script>
    </body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

我们也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，我们可以把它存入变量，以供稍后使用：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="/ajax/jquery/jquery-1."></script>
  </head>
  <body>
    <p>这是一个段落。</p>
    <button>点我</button>
    <script type="text/javascript">
      //等待dom元素加载完毕
      var jq = $.noConflict();
      jq(document).ready(function () {
        jq("button").click(function () {
          jq("p").text("jQuery 仍然在工作!");
        });
      });
    </script>
  </body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

如果你的 jQuery 代码块使用$ 简写，并且您不愿意改变这个快捷方式，那么您可以把简写，并且您不愿意改变这个快捷方式，那么您可以把 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了，而在函数外，依旧不得不使用 “jQuery”：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3."></script>
  </head>
  <body>
    <p>这是一个段落。</p>
    <button>点我</button>
    <script type="text/javascript">
      //等待dom元素加载完毕
      $.noConflict();
      jQuery(document).ready(function ($) {
        $("button").click(function () {
          $("p").text("jQuery 仍然在工作!");
        });
      });
    </script>
  </body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

总结

本文主要初步熟悉了 jQuery 的定义以及语法，并且完成了第一个 jQuery 例子的编写，下一节将讲解 jQuery 选择器的内容。

相关文章