JavaScript之jquery一

已于 2024-02-08 10:28:55 修改
阅读量964 收藏 12
点赞数 30
分类专栏： 前端 HTML css js 文章标签： javascript jquery 开发语言
于 2024-02-08 10:27:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74242675/article/details/136076868
版权

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>

在这个示例中：

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

2-jquery选择器

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

  1. ID选择器（#id）：根据元素ID选择单个元素。
// 选择ID为"myId"的元素
$("#myId").css("color", "red"); // 将ID为"myId"的元素文本颜色设为红色
  1. 类选择器（.class）：根据类名选择所有具有该类名的元素。
// 选择所有类名为"selected"的元素
$(".selected").hide(); // 隐藏所有类名为"selected"的元素
  1. 标签选择器（element）：选择所有指定类型的元素。
// 选择所有的段落元素
$("p").text("Hello, world!"); // 给所有段落元素设置文本内容为"Hello, world!"
  1. 属性选择器（[attribute]、[attribute=value]）：根据元素的属性或属性值来选择元素。
// 选择所有含有"data-status"属性的元素
$("[data-status]").addClass("highlight");

// 选择所有type属性为"text"的input元素
$("input[type='text']").val(""); // 清空所有类型为text的输入框内容
  1. 后代选择器（ancestor descendant）：选择祖先元素下的后代元素。
// 选择所有属于"#content"元素内的"a"标签
$("#content a").on("click", function() {
    console.log("A link within #content was clicked.");
});
  1. 并集选择器（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）的例子：

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

// 或者针对特定元素添加类
$("#elementId").addClass("highlight");
  1. 移除一个类：
// 从所有具有"myClass"和"extraClass"两个类的元素中移除"extraClass"
$(".myClass.extraClass").removeClass("extraClass");

// 或者从特定ID的元素上移除一个类
$("#elementId").removeClass("active");
  1. 切换一个类：
// 对所有具有"toggleTarget"类的元素切换"on-off"类的添加或移除
$(".toggleTarget").toggleClass("on-off");

// 或者针对单个元素进行类的切换
$("#elementId").toggleClass("visible hidden");
  1. 检查是否包含某个类：
// 检查"#myElement"是否包含"classToCheck"类
if ($("#myElement").hasClass("classToCheck")) {
    console.log("#myElement 包含 classToCheck 类");
} else {
    console.log("#myElement 不包含 classToCheck 类");
}
  1. 替换一个类：
// 将所有含有"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()方法来实现。以下是一些示例：

  1. 获取元素属性值：
// 获取ID为"myButton"的按钮元素的"data-custom-attribute"属性值
var customValue = $("#myButton").attr("data-custom-attribute");
console.log(customValue);
  1. 设置元素属性值：
// 设置所有class为"selected"的元素的href属性
$(".selected").attr("href", "https://www.example.com");

// 或者针对特定元素设置属性
$("#myLink").attr("target", "_blank"); // 设置链接在新窗口打开
  1. 删除元素属性：
// 删除所有class为"removeAttrExample"的元素的"data-remove-me"属性
$(".removeAttrExample").removeAttr("data-remove-me");

// 或者删除单个元素属性
$("#myElement").removeAttr("disabled"); // 去除禁用状态
  1. 使用.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()方法来实现。以下是一些示例：

  1. 获取元素属性值：
// 获取ID为"myButton"的按钮元素的"data-custom-attribute"属性值
var customValue = $("#myButton").attr("data-custom-attribute");
console.log(customValue);
  1. 设置元素属性值：
// 设置所有class为"selected"的元素的href属性
$(".selected").attr("href", "https://www.example.com");

// 或者针对特定元素设置属性
$("#myLink").attr("target", "_blank"); // 设置链接在新窗口打开
  1. 删除元素属性：
// 删除所有class为"removeAttrExample"的元素的"data-remove-me"属性
$(".removeAttrExample").removeAttr("data-remove-me");

// 或者删除单个元素属性
$("#myElement").removeAttr("disabled"); // 去除禁用状态
  1. 使用.prop()方法（主要用于处理表单相关的布尔属性）：
// 切换所有复选框是否被选中
$("input[type='checkbox']").prop("checked", function(index, currentValue) {
    return !currentValue; // 如果当前已选中则取消选中，否则选中
});

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

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

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('动画已完成');
        });
    });
});

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

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

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元素的相关尺寸信息到浏览器控制台。
最后求点赞，求分享，求抱抱…

m0_74242675
关注
  • 30
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript&jQuery;交互式Web前端开发
04-04
通过将编程理论与用来演示JavaScript和jQuery如何被应用于流行站点之上的示例相结合，《JavaScript&jQuery;交互式Web前端开发》将教会您如何让网站更具交互性、吸引性、可用性。很快，您就能够像一名程序员那样去...
JavaScript与jQuery
INTJ
07-26 1783
JavaScript与jQuery
JavaScript和jQuery的关系？
m0_73874527的博客
06-06 1157
功能：集合Ajax技术开发出来的js库，封装js和Ajax的功能，提供函数接口，简化js的操作。javascript是脚本语言的基础，Jquery是在javascript的基础上开发出来的框架，也就是。说jquery能够实现的功能，都是可以通过javascript实现的，jquery就是为了方便开发。JavaScript是网页编程语言，而jQuery是一个基于js编写的框架。jQuery是目前最流行的js插件库，是js的封装，升级产品。4.jquery就是要用更少的代码，漂亮的完成更多的功能。
JavaScript——jQuery
Scccc_的博客
03-10 3458
JavaScript学习笔记
JavaScript和jQuery的关系
m0_73852362的博客
04-11 2075
jQuery 则是 JavaScript 的一个代码库（或习惯性叫类库），它将一些在 JavaScript 开发中经常用到的功能集合起来，以方便开发者直接使用，而不需要再用原生 JavaScript 语句写大量代码，同时可在不同浏览器间实现一致的效果。是当前最流行的 JavaScript 库之一。jquery基于JavaScript语言，封装JavaScript的原生方法，提供了简便的函数接口，简化了JS的操作。jquery封装JavaScript的原生方法，提供了简便的函数接口，简化了JS的操作。
JavaScriptJQuery_jQuery简介
热门推荐
JiuMeilove的博客
06-24 2万+
仓库:可以把很多东西放入这个仓库里面,找到东西只需要到仓库里查找到就可以了JavaScript:即library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate,hide,show,比如获取元素等简单理解:就是一个js文件,里面对原生js代码进行了封装,存放到里面,这样我们可以快速高效的使用这些封装好的功能了. 比如jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)这些库都是对原生JavaScr
JavaScript+jQuery程序设计 --基础编程题及参考答案
m0_74293254的博客
06-11 689
求其中最大的值和最小的值分别是多少,最大的值和最小的值在数组中的位置序号分别是多少？C、使用Javascript代码，实现点击【全不选】按钮，取消选中所有的复选框。D、使用Javascript代码，实现点击【反选】按钮，实现复选框的反选效果。B、使用Javascript代码，实现点击【全选】按钮，选中所有的复选框。、有一个数组 var arr1=[30,14,21,13,8,9]1、使用javaScript循环语句，打印9*9乘法表 (A、使用HTML实现如下网页界面。2、按照要求完成如下任务。
web前端javascript+jquery知识点总结
weixin_44924238的博客
02-15 9708
1.Javascript 语法.用途 javascript 在前端网页中占有非常重要的地位，可以用于验证表单，制作特效等功能，它是一种描述语言，也是一种基于对象（Object）和事件驱动并具有安全性的脚本语言 ...
javascript,jQuery,vue的区别
WYFTJX1314的博客
05-19 2059
1.javaScript是运行在浏览器端的脚本语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互，JavaScript是浏览器解释执行的。 2.jQuery就是javascript中的一个函数库，一个js文件，是把js中比较复杂的东西封装成一个库，能够让人们在开发过程中尽可能的少写多做。 3.Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架。Vue的核心库只关注视图层，
Bootstrap‘s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4
若有所执，必有所成，心之所向，必显光芒
01-20 1325
Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4
【002JavaScript - 测试 jQuery】使用jQuery进行JavaScript测试
燃正科技
06-08 2578
【代码】【002JavaScript - 测试 jQuery】使用jQuery进行JavaScript测试。
JavaScript和jquery实战手册
04-26
JavaScript和jquery实战手册
五、JavaScript-jQuery
08-04
5.JavaScript-jQuery
JavaScript和jQuery实战手册原书第2版
06-27
JavaScript和jQuery实战手册原书第2版.mobi，完美版本，亚马逊上自费下载的电子版。
精通Javascript+jQuery全套.txt
09-25
精通Javascript+jQuery全套 前端必备技能，助你快速掌握js
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 371
注释很详细，直接上代码……
bpmn-js推荐几款常用的插件
飞云先生
04-30 157
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
遍历JavaScript对象（字典）
weixin_45596561的博客
05-01 352
遍历JavaScript对象（字典）是编程中常见的需求。for...in循环提供了最直接的方式，但在某些情况下可能需要额外的检查。与forEach结合使用提供了另一种遍历方式，特别是在您使用现代JavaScript版本时。根据您的具体需求和偏好，可以选择最适合您的遍历方法。
表格隔行变色
weixin_54339833的博客
05-02 410
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
javascript+jquery配套源码
12-30
下面是一个简单的JavaScript和jQuery的配套源码示例： ```javascript // JavaScript function changeBackgroundColor() { document.getElementById('myDiv').style.backgroundColor = 'yellow'; } // jQuery $...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值