jQuery

jQuery简介

  1. 简化 DOM 操作：jQuery 提供了简单而强大的选择器，可以轻松地选取 HTML 元素，并对其进行操作。通过使用 jQuery 的方法，可以轻松地操纵元素的属性、样式、内容等。

  2. 事件处理：jQuery 简化了事件处理的过程。可以使用 jQuery 的事件绑定方法来附加事件处理程序，例如点击、鼠标移入移出、表单提交等。这使得处理用户交互变得更加简单和可靠。

  3. 动画效果：jQuery 提供了丰富的动画效果和过渡效果，可以轻松地实现元素的淡入淡出、滑动、展开折叠等效果。这些动画效果可以增强用户体验，并使网页更加生动和吸引人。

  4. AJAX 请求：jQuery 提供了简化的 AJAX 方法，使得发送异步 HTTP 请求变得更加简单。可以使用 jQuery 的 AJAX 方法从服务器获取数据，而无需手动处理 XMLHttpRequest 对象和回调函数。

  5. 跨浏览器兼容性：jQuery 解决了不同浏览器之间的兼容性问题。它提供了一致的 API，可以在各种浏览器上以相同的方式运行，从而简化了开发过程。

  6. 插件生态系统：jQuery 拥有一个庞大的插件生态系统，提供了各种各样的插件和扩展，用于解决特定的问题或添加特定的功能。这些插件可以快速扩展 jQuery 的功能，并为开发人员提供更多选择和灵活性。

jQuery安装方式

有三种方式可以安装 jQuery：

  1. 下载并引入：可以从 jQuery 的官方网站（https://jquery.com/）下载 jQuery 的压缩版本（通常是 .min.js 文件），然后将其引入到 HTML 文件中。

<script src="jquery.min.js"></script>

  1. 使用 CDN：可以使用托管在 CDN（内容分发网络）上的 jQuery 文件。这样可以通过在 HTML 文件中引入 CDN 上的 jQuery 文件来加载 jQuery。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  1. 包管理工具：如果正在使用包管理工具（如 npm、Yarn），可以使用该工具来安装 jQuery。然后，可以将 jQuery 作为模块导入到项目中。

npm install jquery

jQuery引入方式

一般来说，将 jQuery 引入的位置放在页面的 <head> 标签中靠前的位置是比较常见的做法。这样可以确保在其他 JavaScript 代码中使用 jQuery 之前，jQuery 已经被加载和解析。

jQuery选择器

以下是一些常用的 jQuery 选择器及其对应的代码示例：

  1. 元素选择器：通过元素名称选择元素。

    $('div') // 选择所有的 <div> 元素

  2. ID 选择器：通过元素的 ID 属性选择元素。

    $('#myElement') // 选择 ID 为 "myElement" 的元素

  3. 类选择器：通过元素的类名选择元素。

    $('.myClass') // 选择类名为 "myClass" 的元素

  4. 属性选择器：通过元素的属性选择元素。

    $('[name="email"]') // 选择具有 name 属性且值为 "email" 的元素

  5. 后代选择器：选择元素的后代元素。

    $('ul li') // 选择所有 <ul> 元素中的 <li> 元素

  6. 子元素选择器：选择元素的直接子元素。

    $('ul > li') // 选择所有 <ul> 元素的直接子元素 <li>

  7. 同级选择器：选择元素的同级元素。

    $('li + li') // 选择所有紧接在 <li> 元素后面的同级 <li> 元素

  8. 过滤选择器：根据特定条件过滤元素。

    $('li:first') // 选择第一个 <li> 元素
    $('li:last') // 选择最后一个 <li> 元素
    $('li:even') // 选择索引为偶数的 <li> 元素
    $('li:odd') // 选择索引为奇数的 <li> 元素
    $('li:eq(2)') // 选择索引为 2 的 <li> 元素

这些是一些常见的 jQuery 选择器，可以根据需要选择特定的元素或元素集合。通过结合使用选择器和其他 jQuery 方法，可以对选中的元素进行操作、绑定事件等。请根据实际需求选择适当的选择器，并在 jQuery 代码中使用它们。

jQuery CSS设置

使用 css() 方法来修改元素的 CSS 样式。该方法接受一个对象作为参数，其中键是要修改的 CSS 属性，值是要设置的样式值。

以下是一些常见的使用 css() 方法的示例：

  1. 修改单个样式属性：

    $('p').css('color', 'red'); // 将所有 <p> 元素的文本颜色设置为红色

  2. 修改多个样式属性：

    $('div').css({
      'color': 'blue',
      'font-size': '18px',
      'background-color': 'yellow'
    }); // 将所有 <div> 元素的文本颜色设置为蓝色，字体大小为18像素，背景颜色为黄色

  3. 获取样式属性的值：

    var fontSize = $('p').css('font-size'); // 获取第一个 <p> 元素的字体大小

注意事项：

  • 使用 css() 方法时，可以通过传递一个对象来设置多个样式属性，或者通过传递两个参数来设置单个样式属性。

  • 如果要获取样式属性的值，可以调用 css() 方法并传递属性名称作为参数。

  • css() 方法也可以用于获取和设置其他计算样式属性，例如宽度、高度、位置等。

文档处理

  1. append()：将指定的内容追加到目标元素的末尾。

// 在 <ul> 元素的末尾追加一个新的 <li> 元素
$('<li>New item</li>').appendTo('ul');

  1. prepend()：将指定的内容插入到目标元素的开头。

// 在 <ul> 元素的开头插入一个新的 <li> 元素
$('<li>New item</li>').prependTo('ul');

  1. after()：在目标元素之后插入指定的内容。

// 在 <div> 元素之后插入一个新的 <p> 元素
$('<p>New paragraph</p>').insertAfter('div');

  1. before()：在目标元素之前插入指定的内容。

// 在 <div> 元素之前插入一个新的 <p> 元素
$('<p>New paragraph</p>').insertBefore('div');

  1. prependTo()：将当前元素插入到目标元素的开头。

// 将当前选中的元素插入到 <ul> 元素的开头
$('.item').prependTo('ul');

  1. appendTo()：将当前元素追加到目标元素的末尾。

// 将当前选中的元素追加到 <ul> 元素的末尾
$('.item').appendTo('ul');

创建新节点

  1. $(html, attributes)：通过传递 HTML 字符串和属性对象创建一个新的 jQuery 对象，并可以为新节点添加类名。

// 创建一个带有类名的 <div> 元素
const $div = $('<div>', {
  class: 'myClass'
});
​
// 创建一个带有多个类名的 <p> 元素
const $paragraph = $('<p>', {
  class: 'myClass1 myClass2'
});
​
// 创建一个带有类名和其他属性的 <a> 元素
const $link = $('<a>', {
  class: 'myLink',
  href: 'https://example.com',
  target: '_blank'
});

事件

jQuery 中，可以使用 $(document).ready() 方法来在文档加载完毕后执行代码。$(document).ready() 是一个事件处理方法，它会在文档的 DOM 结构完全加载并解析之后触发。

以下是使用 $(document).ready() 的示例代码：

$(document).ready(function() {
  // 在文档加载完毕后执行的代码
  // 可以在这里执行各种操作，例如选择元素、绑定事件等
  // 例如：
  $('button').click(function() {
    alert('按钮被点击了！');
  });
});

在上面的示例中，$(document).ready() 方法包含一个匿名函数作为参数，该函数中包含了需要在文档加载完毕后执行的代码。在这个例子中，当文档加载完毕后，会选择所有的按钮元素，并为其绑定一个点击事件处理程序，当按钮被点击时会弹出一个提示框。

另外，为了简化代码，可以使用 $() 缩写代替 $(document).ready()。以下是等效的示例代码：

$(function() {
  // 在文档加载完毕后执行的代码
  // 可以在这里执行各种操作，例如选择元素、绑定事件等
});

无论是使用 $() 还是 $(document).ready()，它们都实现了相同的功能，即在文档加载完毕后执行指定的代码。这样可以确保代码在访问和操作 DOM 元素之前，这些元素已经完全加载和解析。

注意：$(document).ready() 和 window.onload 都用于在页面加载完成后执行代码，但它们有一些差异。

  1. 执行时机：

    • $(document).ready()：当文档的 DOM 结构加载完成并解析后，就会触发。

    • window.onload：当整个页面，包括图片和其他资源都加载完成后，才会触发。

  2. 多次调用：

    • $(document).ready()：可以在页面上多次调用，每次调用都会添加一个新的处理函数。这样，多个处理函数将按照添加的顺序依次执行。

    • window.onload：只能在页面上调用一次。如果多次调用 window.onload，只有最后一个调用会生效。

  3. 执行顺序：

    • $(document).ready()：按照添加处理函数的顺序依次执行。

    • window.onload：只有当整个页面加载完成后，才会执行。

  4. 包含的内容：

    • $(document).ready()：只等待文档的 DOM 结构加载完成，不包括其他资源，如图片等。

    • window.onload：等待整个页面及其所有资源加载完成，包括图片等。

因此，如果只需要在文档的 DOM 结构加载完成后执行代码，可以使用 $(document).ready()，它比 window.onload 更早触发，且可以多次调用。如果需要确保整个页面及其所有资源都加载完成后再执行代码，可以使用 window.onload。

可以使用 .on() 方法来为元素绑定事件处理程序。以下是一些常见的事件操作示例：

  1. 单击事件 (click event)：

// 为按钮绑定单击事件处理程序
$('button').on('click', function() {
  // 在单击按钮时执行的代码
});

  1. 双击事件 (double click event)：

// 为元素绑定双击事件处理程序
$('div').on('dblclick', function() {
  // 在双击元素时执行的代码
});

  1. 鼠标移入事件 (mouse enter event)：

// 为元素绑定鼠标移入事件处理程序
$('img').on('mouseenter', function() {
  // 当鼠标移入元素时执行的代码
});

  1. 鼠标移出事件 (mouse leave event)：

// 为元素绑定鼠标移出事件处理程序
$('img').on('mouseleave', function() {
  // 当鼠标移出元素时执行的代码
});

  1. 输入框值改变事件 (input change event)：

// 为输入框绑定值改变事件处理程序
$('input').on('change', function() {
  // 当输入框的值发生改变时执行的代码
});

在这些示例中，我们使用了 .on() 方法来为选定的元素绑定不同类型的事件。回调函数中的代码将在事件发生时执行。

你还可以使用其他的事件类型，如 keydown、keyup、submit 等，具体取决于你的需求。可以根据需要将事件绑定到任何选择器选中的元素上。

另外，你还可以使用 .off() 方法来解除绑定的事件处理程序，例如：

// 解除按钮的单击事件处理程序
$('button').off('click');

这将移除按钮的单击事件处理程序，使其不再触发。

  • .mouseenter()：绑定鼠标进入事件的处理程序。

$("button").mouseenter(function() {
  // 处理鼠标进入事件的逻辑
});

  • .mouseleave()：绑定鼠标离开事件的处理程序。

$("button").mouseleave(function() {
  // 处理鼠标离开事件的逻辑
});

  • .keydown()：绑定按键按下事件的处理程序。

$("input").keydown(function(event) {
  // 处理按键按下事件的逻辑
  // 可以通过 event 对象获取按下的键值、按键的修饰键等信息
});

  • .submit()：绑定表单提交事件的处理程序。

$("form").submit(function(event) {
  // 处理表单提交事件的逻辑
  // 可以通过 event 对象阻止默认的表单提交行为
});

这只是一小部分 jQuery 提供的事件绑定方法，还有更多方法可用于处理不同类型的事件。可以根据具体需求选择合适的方法来绑定事件处理程序。

效果

  • .show()：显示被选元素。

$("div").show();

  • .hide()：隐藏被选元素。

$("div").hide();

  • .toggle()：在显示和隐藏状态之间切换被选元素。

$("div").toggle();

  • .slideDown()：通过垂直滑动方式显示被选元素。

$("div").slideDown();

  • .slideUp()：通过垂直滑动方式隐藏被选元素。

$("div").slideUp();

  • .slideToggle()：在显示和隐藏状态之间通过垂直滑动方式切换被选元素。

$("div").slideToggle();

  • .fadeIn()：通过淡入效果显示被选元素。

$("div").fadeIn();

  • .fadeOut()：通过淡出效果隐藏被选元素。

$("div").fadeOut();

  • .fadeToggle()：在显示和隐藏状态之间通过淡入淡出效果切换被选元素。

$("div").fadeToggle();

这些方法都可以接受参数来指定动画的速度、回调函数等。例如：

$("div").slideDown(500, function() {
  // 动画完成后的回调函数
});

属性

  • .attr(attributeName)：获取被选元素的指定属性值。

var href = $("a").attr("href");

  • .attr(attributeName, value)：设置被选元素的指定属性值。

$("img").attr("src", "image.jpg");

  • .removeAttr(attributeName)：移除被选元素的指定属性。

$("a").removeAttr("target");

  • .addClass(className)：向被选元素添加一个或多个类。

$("div").addClass("highlight");

  • .removeClass(className)：从被选元素移除一个或多个类。

$("div").removeClass("highlight");

  • .toggleClass(className)：在被选元素的类之间切换。

$("div").toggleClass("highlight");

  • .html()：获取被选元素的HTML内容。

var htmlContent = $("div").html();

  • .html(htmlString)：设置被选元素的HTML内容。

$("div").html("<p>This is a paragraph.</p>");

  • .text()：获取被选元素的纯文本内容。

var textContent = $("div").text();

  • .text(textString)：设置被选元素的纯文本内容。

$("div").text("This is a paragraph.");

  • .val()：获取表单元素的值。

var inputValue = $("input").val();

  • .val(value)：设置表单元素的值。

$("input").val("John Doe");
 
posted on 2023-06-30 13:51  堃K  阅读(21)  评论(0)  编辑  收藏  举报
Copyright © 2024 堃K
Powered by .NET 9.0 on Kubernetes Powered By: 博客园