jQuery - 堃K

jQuery安装方式

有三种方式可以安装 jQuery：

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

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

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

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

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

npm install jquery

jQuery引入方式

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

jQuery选择器

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$('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() 方法的示例：

修改单个样式属性：

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

修改多个样式属性：

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

获取样式属性的值：

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

注意事项：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

创建新节点

$(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 都用于在页面加载完成后执行代码，但它们有一些差异。

执行时机：

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

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

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

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

单击事件 (click event)：

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

双击事件 (double click event)：

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

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

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

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

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

输入框值改变事件 (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");