JavaScript之jquery一

JavaScript是一种脚本语言，而jQuery是一个JavaScript库。jQuery是用来简化JavaScript编程的工具，它提供了一个简洁而强大的API，可以处理DOM操作、事件处理、动画效果、AJAX等常见的网页交互功能。

使用jQuery，开发者可以通过选择器语法来方便地选择和操作HTML元素。通过jQuery的方法，可以实现快速的DOM操作，比如添加、删除、修改元素的属性和样式，以及处理表单的输入和验证。

jQuery还提供了丰富的事件处理功能，可以轻松地绑定和触发各种事件。通过jQuery的动画效果，可以实现平滑的过渡和动态的效果，增强了用户交互的体验。

另外，jQuery还支持AJAX请求，可以通过简单的方法实现数据的异步加载和页面的局部刷新。这使得开发者能够更加高效地处理服务器端返回的数据，实现更加灵活和交互性的网页。

总之，jQuery是JavaScript的一个强大的扩展，它简化了JavaScript编程的复杂性，提供了更简洁、更高效的方式来处理网页交互。因此，jQuery在Web开发中得到了广泛的应用，成为了一个非常重要和流行的工具。

1-初识jquery

jQuery库以其简洁的API和强大的功能深受开发者喜爱，初识jQuery时，一个简单的例子就是使用它来选择HTML元素并对该元素执行某些操作，例如隐藏或显示一个div元素。以下是一个基本的例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Example</title>
  <!-- 引入jQuery库 -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

  <button id="toggleButton">Toggle the box</button>
  <div id="box" style="width: 200px; height: 200px; background-color: #f00;">This is a red box.</div>

  <script>
    // 等待DOM加载完毕后再执行脚本
    $(document).ready(function() {
      // 使用jQuery选择器获取页面上的按钮和div元素
      var $toggleButton = $('#toggleButton');
      var $box = $('#box');

      // 为按钮绑定点击事件处理函数
      $toggleButton.click(function() {
        // 使用jQuery的方法来切换div的可见性
        $box.toggle();
      });
    });
  </script>

</body>
</html>

在这个示例中：

首先引入了jQuery库。
在HTML文档中定义了一个按钮（id为toggleButton）和一个红色的div盒子（id为box）。
当文档准备好（即DOM加载完成）后，使用$(document).ready()函数来确保所有的DOM元素都已经可以被JavaScript访问。
通过$('#toggleButton')和$('#box')选择器分别选取了按钮和div元素，并将它们存储在变量 $toggleButton 和 $box 中。
为$toggleButton绑定了点击事件处理函数，当按钮被点击时，调用$box.toggle()方法，这个方法会根据当前div的显示状态来切换——如果div当前是隐藏的，则显示出来；如果当前是显示的，则隐藏起来。

2-jquery选择器

在jQuery中，选择器用于选取HTML文档中的元素。以下是一些常见jQuery选择器的使用例子：

ID选择器（#id）：根据元素ID选择单个元素。

// 选择ID为"myId"的元素
$("#myId").css("color", "red"); // 将ID为"myId"的元素文本颜色设为红色

类选择器（.class）：根据类名选择所有具有该类名的元素。

// 选择所有类名为"selected"的元素
$(".selected").hide(); // 隐藏所有类名为"selected"的元素

标签选择器（element）：选择所有指定类型的元素。

// 选择所有的段落元素
$("p").text("Hello, world!"); // 给所有段落元素设置文本内容为"Hello, world!"

属性选择器（[attribute]、[attribute=value]）：根据元素的属性或属性值来选择元素。

// 选择所有含有"data-status"属性的元素
$("[data-status]").addClass("highlight");

// 选择所有type属性为"text"的input元素
$("input[type='text']").val(""); // 清空所有类型为text的输入框内容

后代选择器（ancestor descendant）：选择祖先元素下的后代元素。

// 选择所有属于"#content"元素内的"a"标签
$("#content a").on("click", function() {
    console.log("A link within #content was clicked.");
});

并集选择器（selector1, selector2）：同时选择多个选择器所匹配的元素。

// 选择所有段落和所有div元素
$("p, div").each(function() {
    $(this).css("background-color", "lightblue");
}); // 将所有段落和div元素背景色设为浅蓝色

3-jquery操作样式

在jQuery中，操作元素的样式可以非常简单。以下是一个例子，展示如何使用jQuery来更改HTML元素的背景颜色：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery 操作样式示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .my-element {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

<div class="my-element" id="element1">点击我改变颜色</div>
<div class="my-element" id="element2">我也能变色</div>

<script>
$(document).ready(function() {
  // 获取id为element1的元素，并更改其背景颜色
  $('#element1').click(function() {
    $(this).css('background-color', 'green');
  });

  // 获取所有class为my-element的元素，并增加一个内边距
  $('.my-element').css('padding', '20px');

  // 获取id为element2的元素，并淡入淡出更改背景颜色
  $('#element2').click(function() {
    $(this).fadeOut(400, function() {
      $(this).css('background-color', 'red').fadeIn(400);
    });
  });
});
</script>

</body>
</html>

在这个例子中：

使用$('#element1')选择器获取ID为element1的元素，并通过.css()方法设置其背景颜色为绿色。
2. 使用$('.my-element')选择器获取所有类名为my-element的元素，并统一添加内边距。
3. 对于ID为element2的元素，当它被点击时，首先使用.fadeOut()方法进行淡出动画，然后在其完成淡出后（回调函数中）更改背景颜色为红色，最后再使用.fadeIn()方法淡入显示出来。

4-jquery操作class

在jQuery中，操作元素的class非常方便，以下是一些常见的操作类名（class）的例子：

添加一个类：

// 为所有具有"myClass"类的元素添加一个新的类"newClass"
$(".myClass").addClass("newClass");

// 或者针对特定元素添加类
$("#elementId").addClass("highlight");

移除一个类：

// 从所有具有"myClass"和"extraClass"两个类的元素中移除"extraClass"
$(".myClass.extraClass").removeClass("extraClass");

// 或者从特定ID的元素上移除一个类
$("#elementId").removeClass("active");

切换一个类：

// 对所有具有"toggleTarget"类的元素切换"on-off"类的添加或移除
$(".toggleTarget").toggleClass("on-off");

// 或者针对单个元素进行类的切换
$("#elementId").toggleClass("visible hidden");

检查是否包含某个类：

// 检查"#myElement"是否包含"classToCheck"类
if ($("#myElement").hasClass("classToCheck")) {
    console.log("#myElement 包含 classToCheck 类");
} else {
    console.log("#myElement 不包含 classToCheck 类");
}

替换一个类：

// 将所有含有"oldClass"类的元素替换为"newClass"
$(".oldClass").removeClass("oldClass").addClass("newClass");

以上示例演示了如何通过jQuery动态地修改HTML元素的class属性。

5-jquery操作内容

当然，jQuery操作内容是一个非常基础的功能。下面是一个简单的例子，演示如何使用jQuery来修改HTML元素的内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery 操作内容示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="contentArea">点击按钮以更改此内容</div>
<button id="changeContentBtn">点击我来改变内容</button>

<script>
$(document).ready(function() {
  // 绑定点击事件到id为"changeContentBtn"的按钮上
  $('#changeContentBtn').click(function() {
    // 获取id为"contentArea"的div元素
    var contentDiv = $('#contentArea');
    
    // 使用.text()方法修改div的内容
    contentDiv.text('内容已成功被jQuery修改！');

    // 或者，如果要修改的是HTML内容（包括可能存在的标签）
    // 可以使用.html()方法，如下所示：
    // contentDiv.html('<h2>这是新插入的标题</h2><p>内容已被更新。</p>');
  });
});
</script>

</body>
</html>

在这个示例中，当用户点击“点击我来改变内容”按钮时，#contentArea div中的文本内容将被替换为新的字符串“内容已成功被jQuery修改！”。如果您需要插入带有HTML标签的新内容，则可以使用.html()方法。

6-jquery操作属性

在jQuery中，操作元素属性主要通过.attr()和.prop()方法来实现。以下是一些示例：

获取元素属性值：

// 获取ID为"myButton"的按钮元素的"data-custom-attribute"属性值
var customValue = $("#myButton").attr("data-custom-attribute");
console.log(customValue);

设置元素属性值：

// 设置所有class为"selected"的元素的href属性
$(".selected").attr("href", "https://www.example.com");

// 或者针对特定元素设置属性
$("#myLink").attr("target", "_blank"); // 设置链接在新窗口打开

删除元素属性：

// 删除所有class为"removeAttrExample"的元素的"data-remove-me"属性
$(".removeAttrExample").removeAttr("data-remove-me");

// 或者删除单个元素属性
$("#myElement").removeAttr("disabled"); // 去除禁用状态

使用.prop()方法（主要用于处理表单相关的布尔属性）：

// 切换所有复选框是否被选中
$("input[type='checkbox']").prop("checked", function(index, currentValue) {
    return !currentValue; // 如果当前已选中则取消选中，否则选中
});

// 设置某个特定复选框为选中状态
$("#myCheckbox").prop("checked", true);

注意：对于HTML5的布尔属性（如checked、disabled、selected等），推荐使用.prop()方法进行操作，因为它能更好地反映DOM元素的内在状态。而对于非布尔型的标准HTML属性或自定义属性，则通常使用.attr()方法。

7-jquery操作偏移量

在jQuery中，可以使用.offset()和.css('top', value)或.css('left', value)方法来获取或修改元素的偏移量。以下是一个操作元素偏移量的例子：

假设我们有一个<div>元素，并且想要动态地更改其垂直位置（顶部偏移量）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery 操作偏移量示例</title>
  <style>
    #moveableDiv {
      position: relative;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="moveableDiv">可移动的 div</div>
<button id="moveButton">向上移动50px</button>

<script>
$(document).ready(function() {
  // 给按钮绑定点击事件
  $('#moveButton').click(function() {
    // 获取当前元素的偏移量
    var currentOffset = $('#moveableDiv').offset();
    
    // 计算新的顶部偏移量
    var newTop = currentOffset.top - 50;

    // 设置新的顶部偏移量
    $('#moveableDiv').offset({ top: newTop, left: currentOffset.left });
    
    // 或者，仅改变CSS中的'top'属性值：
    // $('#moveableDiv').css('top', newTop + 'px');
  });
});
</script>

</body>
</html>

在这个例子中，当用户点击“向上移动50px”按钮时，具有ID为moveableDiv的<div>元素会向上移动50像素。我们首先通过.offset()获取当前的偏移量，然后计算新的顶部偏移量，最后使用.offset()方法设置新的偏移量。当然，如果元素是相对定位（即position: relative;），也可以直接通过.css('top', value)方法调整顶部偏移量。

8-jquery获取属性

在jQuery中，操作元素属性主要通过.attr()和.prop()方法来实现。以下是一些示例：

获取元素属性值：

// 获取ID为"myButton"的按钮元素的"data-custom-attribute"属性值
var customValue = $("#myButton").attr("data-custom-attribute");
console.log(customValue);

设置元素属性值：

// 设置所有class为"selected"的元素的href属性
$(".selected").attr("href", "https://www.example.com");

// 或者针对特定元素设置属性
$("#myLink").attr("target", "_blank"); // 设置链接在新窗口打开

删除元素属性：

// 删除所有class为"removeAttrExample"的元素的"data-remove-me"属性
$(".removeAttrExample").removeAttr("data-remove-me");

// 或者删除单个元素属性
$("#myElement").removeAttr("disabled"); // 去除禁用状态

使用.prop()方法（主要用于处理表单相关的布尔属性）：

// 切换所有复选框是否被选中
$("input[type='checkbox']").prop("checked", function(index, currentValue) {
    return !currentValue; // 如果当前已选中则取消选中，否则选中
});

// 设置某个特定复选框为选中状态
$("#myCheckbox").prop("checked", true);

9-jquery获取事件

在jQuery中，获取事件通常是指获取元素上绑定的事件处理器。以下是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery 获取事件示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="myButton">点击我</button>

<script>
$(document).ready(function() {
  // 使用jQuery给按钮绑定一个click事件处理函数
  $('#myButton').on('click', function(event) {
    console.log('按钮被点击了');
    
    // 获取当前元素上的所有事件和处理函数（包括原生事件和自定义事件）
    var events = $._data($('#myButton')[0], 'events');
    
    // 输出已绑定到按钮上的'click'事件处理函数
    if (events && events.click) {
      $.each(events.click, function(index, handler) {
        console.log('click事件处理函数：', handler);
      });
    }
  });

  // 假设我们之前已经绑定了另一个click事件处理函数
  $('#myButton').on('click', function(event) {
    console.log('这是第二个click事件处理函数');
  });
});
</script>

</body>
</html>

在这个示例中，我们首先为ID为myButton的按钮绑定了两个不同的点击事件处理函数。然后，在第一个事件处理函数内部，我们使用$._data()方法（这是一个底层的jQuery方法）来获取该按钮元素上所有已绑定事件的数据对象，并进一步查看click事件所绑定的处理函数。

请注意，实际开发中并不推荐频繁这样获取并遍历事件处理函数，这个示例只是为了说明如何查看元素上绑定的事件。在jQuery 1.7之后，官方建议使用.on()和.off()方法管理事件，而不是直接读取或操作事件数据。如果需要解绑事件，可以明确调用.off()方法并传入相应的事件类型和处理函数。

10-jquery案例-选项卡

以下是一个简单的使用jQuery实现选项卡功能的示例代码：

HTML结构：

<div id="tabs">
    <ul class="tab-links">
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>

    <div class="tab-content">
        <div id="tab1" class="tab active">
            Tab 1的内容...
        </div>
        <div id="tab2" class="tab">
            Tab 2的内容...
        </div>
        <div id="tab3" class="tab">
            Tab 3的内容...
        </div>
    </div>
</div>

jQuery代码：

$(document).ready(function() {
    // 获取所有选项卡链接和内容区域
    var tabLinks = $('.tab-links a');
    var tabs = $('.tab-content .tab');

    // 绑定选项卡点击事件
    tabLinks.click(function(e) {
        e.preventDefault(); // 阻止默认的锚点跳转

        // 移除所有激活状态并隐藏所有内容区域
        tabLinks.removeClass('active');
        $(this).addClass('active');
        tabs.removeClass('active');

        // 获取当前点击的选项卡对应的ID，并显示对应的内容区域
        var currentTab = $(this).attr('href');
        $(currentTab).addClass('active');
    });
});

在这个例子中，当用户点击选项卡标题时，对应的选项卡内容会显示出来，同时当前选中的选项卡标题会有样式变化以表示激活状态。初始状态下，第一个选项卡被设置为默认激活。

在实际应用中，可能还需要根据项目需求调整CSS样式来确保选项卡的视觉效果，以及处理其他高级交互逻辑，例如异步加载内容等。

11-jquery案例-鼠标跟随

jQuery实现鼠标跟随效果的案例可以这样编写：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery 鼠标跟随示例</title>
  <style>
    #follower {
      width: 50px;
      height: 50px;
      position: absolute;
      background-color: red;
      border-radius: 50%;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="follower"></div>

<script>
$(document).ready(function() {
  var $follower = $('#follower');

  $(document).on('mousemove', function(event) {
    // 获取鼠标当前位置
    var mouseX = event.clientX;
    var mouseY = event.clientY;

    // 设置跟随元素的位置
    $follower.css({
      left: mouseX - ($follower.outerWidth() / 2), // 让元素中心跟随鼠标位置
      top: mouseY - ($follower.outerHeight() / 2)
    });
  });
});
</script>

</body>
</html>

在这个例子中，我们首先创建了一个具有绝对定位的红色圆形div元素（id为follower），然后使用jQuery的mousemove事件监听文档的鼠标移动。每当鼠标在页面上移动时，事件处理函数会获取鼠标的当前坐标，并根据这些坐标动态更新跟随元素的位置，使其始终位于鼠标光标正下方并居中对齐。

12-jquery动画函数

jQuery的动画函数可以让元素在网页上执行平滑的过渡效果。以下是一个使用.fadeIn()和.fadeOut()动画函数的例子：

HTML结构：

<button id="toggleButton">点击切换</button>
<div id="animatedBox" style="width: 100px; height: 100px; background-color: red; display: none;"></div>

CSS样式（可选，增强显示效果）：

#animatedBox {
    transition: opacity 1s ease-in-out;
}

jQuery代码：

$(document).ready(function() {
    $("#toggleButton").click(function() {
        $("#animatedBox").fadeToggle("slow", function() {
            // 这是动画完成后的回调函数
            console.log('动画已完成');
        });
    });
});

在这个例子中，当用户点击带有id="toggleButton"的按钮时，会触发一个事件处理程序。这个处理程序调用fadeToggle()函数来对id="animatedBox"的元素进行渐隐或渐显动画。动画的持续时间设置为"slow"，这是一个预定义的速度选项，也可以替换成毫秒数，例如 1000 表示1秒钟。动画完成后，会执行回调函数，在控制台打印出一条消息。

通过这段代码，红色的方形元素会在被点击时逐渐淡入或淡出视图，给用户带来平滑的视觉效果。

13-jquery案例-树状菜单

以下是一个使用jQuery实现树状菜单的简单示例，基于HTML、CSS和JavaScript（jQuery库）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 树状菜单示例</title>
  <style>
    ul.tree-menu {
      list-style-type: none;
      padding: 0;
    }
    
    .tree-menu li {
      margin: 5px 0;
      position: relative;
    }
    
    .tree-menu > li:before,
    .tree-menu > li > ul > li:before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #ccc;
      margin-right: 10px;
    }
    
    .tree-menu li > ul {
      display: none;
      margin-left: 20px;
    }
    
    .tree-menu li.open > ul {
      display: block;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // 当点击父级菜单项时展开或折叠子菜单
      $('.tree-menu > li').click(function() {
        $(this).toggleClass('open');
        $(this).children('ul').slideToggle();
      });
    });
  </script>
</head>
<body>

<ul class="tree-menu">
  <li>菜单项1
    <ul>
      <li>子菜单项1.1</li>
      <li>子菜单项1.2
        <ul>
          <li>孙子菜单项1.2.1</li>
          <li>孙子菜单项1.2.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>菜单项2
    <ul>
      <li>子菜单项2.1</li>
      <li>子菜单项2.2</li>
    </ul>
  </li>
</ul>

</body>
</html>

这个例子中，我们创建了一个简单的树状菜单结构，使用CSS来样式化菜单及其节点。然后通过jQuery监听所有顶级菜单项的点击事件，在点击时切换.open类，并使用.slideToggle()方法动态地显示或隐藏子菜单。这样就实现了树状菜单的展开和折叠效果。

14-jquery案例-手风琴

jQuery的动画函数可以让元素在网页上执行平滑的过渡效果。以下是一个使用.fadeIn()和.fadeOut()动画函数的例子：

HTML结构：

<button id="toggleButton">点击切换</button>
<div id="animatedBox" style="width: 100px; height: 100px; background-color: red; display: none;"></div>

CSS样式（可选，增强显示效果）：

#animatedBox {
    transition: opacity 1s ease-in-out;
}

jQuery代码：

$(document).ready(function() {
    $("#toggleButton").click(function() {
        $("#animatedBox").fadeToggle("slow", function() {
            // 这是动画完成后的回调函数
            console.log('动画已完成');
        });
    });
});

通过这段代码，红色的方形元素会在被点击时逐渐淡入或淡出视图，给用户带来平滑的视觉效果。

15-jquery获取元素尺寸

在jQuery中，获取元素尺寸主要包括获取元素的宽度（width）和高度（height）。下面是一个简单的例子：

假设我们有一个HTML元素，例如一个<div>：

<div id="myElement" style="width: 200px; height: 150px; padding: 10px; border: 3px solid black; margin: 20px;">
    这是一个有特定尺寸的div元素。
</div>

要使用jQuery来获取这个元素的内部宽度（包括padding）、内部高度（包括padding）、以及边框和外边距都不包含在内的纯内容区域的宽度和高度，可以这样编写JavaScript代码：

$(document).ready(function() {
    // 获取id为"myElement"的元素
    var $element = $("#myElement");

    // 获取元素的内部宽度（包括padding）
    var innerWidth = $element.innerWidth();
    
    // 获取元素的内部高度（包括padding）
    var innerHeight = $element.innerHeight();

    // 获取元素的内容区域宽度（不包括padding、border和margin）
    var widthWithoutPaddingBorder = $element.width();

    // 获取元素的内容区域高度（不包括padding、border和margin）
    var heightWithoutPaddingBorder = $element.height();

    console.log("Inner Width: " + innerWidth);
    console.log("Inner Height: " + innerHeight);
    console.log("Width (content only): " + widthWithoutPaddingBorder);
    console.log("Height (content only): " + heightWithoutPaddingBorder);
});

当页面加载完成后，这段脚本会输出“myElement”div元素的相关尺寸信息到浏览器控制台。
最后求点赞，求分享，求抱抱…