一、JQuery 介绍

jQuery简介

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

jQuery分为三个大版本：1.x 2.x 3.x。

3.x 不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.6.0

jQuery主要功能

HTML元素选取与操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM 遍历和修改
Ajax
Utilities

jQuery 的使用

CDN方式

常用的CDN有很多，根据自己公司的需求来进行选择

本地加载

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="./jquery-3.6.0.min.js" charset="utf-8"></script>
  </head>
  <body>
  </body>
</html>
复制代码

使用 jQuery

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="./jquery-3.6.0.min.js" charset="utf-8"></script>
  </head>
  <body>
     <div class="container">
       <p class="name">Hello jQuery</p>
     </div>
     <script type="text/javascript">
       $('.name').html("Hello jQuery")
     </script>
  </body>
</html>
复制代码

二、DOM属性

.addClass()

为每个匹配的元素添加指定的样式类名

值得注意的是这个方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上。

对所有匹配的元素可以一次添加多个用空格隔开的样式类名, 像这样：

$("p").addClass("myClass yourClass");
复制代码

.addClass() 方法允许我们通过传递一个用来设置样式类名的函数。

$("ul li:last").addClass(function(index) {
  return "item-" + index;
});
复制代码

addClass还可以接受第二个参数，下面是使用例子

<!DOCTYPE html>
<html>
<head>
  <style>
  div { background: white; }
  .red { background: red; }
  .red.green { background: green; }
  </style>
  <script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
 
 <div>This div should be white</div>
 <div class="red">This div will be green because it now has the "green" and "red" classes.
   It would be red if the addClass function failed.</div>
 <div>This div should be white</div>
 <p>There are zero green divs</p>
 
<script>
  $("div").addClass(function(index, currentClass) {
    var addedClass;
    if ( currentClass === "red" ) {
      addedClass = "green";
      $("p").text("There is one green div");
    }
 
    return addedClass;
  });
</script>
 
</body>
</html>
复制代码

.removeClass()

移除集合中每个匹配元素上一个，多个或全部样式。

如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除。如果没有样式名作为参数，那么所有的样式类将被移除。

从所有匹配的每个元素中同时移除多个用空格隔开的样式类，像这样:

$('p').removeClass('myClass yourClass')
复制代码

这个方法通常和 .addClass() 一起使用用来切换元素的样式, 像这样：

$('p').removeClass('myClass noClass').addClass('yourClass');
复制代码

这里从所有段落删除 myClass 和 noClass 样式类, 然后 yourClass 样式被添加。

removeClass() 方法允许我们指定一个函数作为参数，返回将要被删除的样式。

$('li:last').removeClass(function() {
  return $(this).prev().attr('class');
});
复制代码

.toggleClass()

在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。

$('#foo').toggleClass(className, addOrRemove);
复制代码

等价于

if (addOrRemove) {
    $('#foo').addClass(className);
}
else {
    $('#foo').removeClass(className);
}
复制代码

.hasClass()

确定任何一个匹配元素是否有被分配给定的（样式）类。

如果匹配元素上有指定的样式，那么.hasClass() 方法将返回 true ，即使元素上可能还有其他样式。举个例子, 给上文的HTML加上下面的代码将返回 true：

<div id="mydiv" class="foo bar"></div>
$('#mydiv').hasClass('foo')
复制代码

jQuery 编程 | 01 - jQuery 基础