【15.0】前端基础jQuery之进阶

Chimengmeng

于 2023-07-06 15:08:00 发布

阅读量95

点赞数

文章标签：前端 jquery javascript ecmascript

本文链接：https://blog.csdn.net/Chimengmeng/article/details/131588737

版权

【15.0】前端基础jQuery之进阶

【一】操作标签

【1】操作类

(1)JS版本

`classList.add()` 方法

用于向元素添加一个或多个类名。
- 如果指定的类名已存在，则不会添加。
示例：

element.classList.add("class1", "class2");

`classList.remove()` 方法

用于从元素移除一个或多个类名。
- 如果指定的类名不存在，则不会发生任何操作。
示例：

element.classList.remove("class1", "class2");

`classList.contains()` 方法

用于检查元素是否包含指定的类名，返回一个布尔值。
示例：

if (element.classList.contains("class1")) {
    // 包含 class1 类名的处理逻辑
} else {
    // 不包含 class1 类名的处理逻辑
}

`classList.toggle()` 方法

用于在元素的类名中切换指定的类名。
- 如果类名不存在，则添加类名；
- 如果类名已存在，则移除类名。
示例：

element.classList.toggle("class");

(2)jQuery版本

`addClass()` 方法

用于向元素添加一个或多个类名。
- 如果指定的类名已存在，则不会添加。
示例：

$(element).addClass("class1 class2");

`removeClass()` 方法

用于从元素移除一个或多个类名。
- 如果指定的类名不存在，则不会发生任何操作。
示例：

$(element).removeClass("class1 class2");

`hasClass()` 方法

用于检查元素是否包含指定的类名，返回一个布尔值。
示例：

if ($(element).hasClass("class1")) {
    // 包含 class1 类名的处理逻辑
} else {
    // 不包含 class1 类名的处理逻辑
}

`toggleClass()` 方法

用于在元素的类名中切换指定的类名。
- 如果类名不存在，则添加类名；
- 如果类名已存在，则移除类名。
示例：

$(element).toggleClass("class");

【2】CSS

jQuery的链式操作，使用jQuery可以做到一行代码操作很多标签

<p>1111</p>
<p>2222</p>

一行代码将第一个标签变成红色，第二个标签变成绿色

$('p').first().css('color','red').next().css('color','green')

jQuery对象调用jQuery方法，返回的是jQuery对象，可以继续调用

【二】jQuery操作CSS

(2)添加 CSS 类名：

您可以使用 addClass() 方法来添加一个或多个 CSS 类到元素中。
例如，$("#myElement").addClass("myClass"); 将在具有 id 为 "myElement" 的元素上添加 "myClass" 类。

(2)移除 CSS 类名：

您可以使用 removeClass() 方法来从元素中移除一个或多个 CSS 类。
例如，$("#myElement").removeClass("myClass"); 将从具有 id 为 "myElement" 的元素中移除 "myClass" 类。

(3)切换 CSS 类名：

您可以使用 toggleClass() 方法来在元素上切换一个或多个 CSS 类。
如果元素已经具有该类，则该方法会将其移除；否则，它会添加该类。
例如，$("#myElement").toggleClass("myClass"); 将在具有 id 为 "myElement" 的元素上切换 "myClass" 类。

(4)设置 CSS 属性：

您可以使用 css() 方法来设置元素的 CSS 属性。
该方法接受两个参数，第一个参数是要设置的 CSS 属性名称，第二个参数是属性的值。
例如，$("#myElement").css("color", "red"); 将将具有 id 为 "myElement" 的元素的颜色设置为红色。

(5)获取 CSS 属性：

您可以使用 css() 方法来获取元素的 CSS 属性值。
该方法接受一个参数，即要获取的 CSS 属性名称。
例如，var color = $("#myElement").css("color"); 将返回具有 id 为 "myElement" 的元素的颜色值。

【三】jQuery链式操作

【1】Python代码解释链式操作本质

class MyClass(object):
    def func1(self):
        print('func1')
        return self
    
    def func2(self):
        print('func2')
        return self
    
obj = MyClass()
obj.func1().func2()

这段代码是一个 Python 类的示例，其中定义了一个名为 MyClass 的类。
- 该类中包含两个方法 func1 和 func2，这两个方法都打印出一些信息，并返回 self，即当前对象的引用。
然后创建了一个 MyClass 的实例 obj。
- 接着使用链式操作方式调用了 func1 方法和 func2 方法，并将它们打印出来。
执行以上代码的结果将会是：

func1
func2

通过链式操作的方式，可以连续调用对象的多个方法，而无需在每次调用方法后重新引用对象。
- 在这个示例中，func1 方法被调用后返回了 self，即当前对象的引用，然后就可以直接在返回的对象上调用 func2 方法。

【2】jQuery链式操作

jQuery链式操作是指在使用jQuery库进行 DOM 操作时，可以通过将多个方法调用以点号符号"." 连接起来，形成一个链式的方法调用序列。
这种方式可以简化代码，提高代码的可读性和可维护性。
链式操作的基本原理是每个方法都返回当前对象的引用，这样就可以直接在返回对象上继续调用其他方法。
以下是链式操作的示例：

$(".myClass")  // 选择所有 class 为 myClass 的元素
    .css("color", "red")  // 设置选中元素的字体颜色为红色
    .addClass("highlight")  // 添加一个名为 highlight 的 CSS 类
    .fadeIn(100);  // 渐显选中元素，动画效果持续1秒

在上面的代码中，首先通过 $ 符号选择了所有类名为 myClass 的元素。
- 然后连续调用了 css、addClass 和 fadeIn 方法，每个方法都在前一个方法的返回对象(即选中的元素集合)上执行操作。

【四】jQuery位置操作

jQuery提供了一系列常用的位置操作方法，可以用来获取或设置元素的位置信息。下面是一些常见的jQuery位置操作方法：

【1】`.offset()`：

相对于浏览器窗口

用于获取或设置元素相对于文档的偏移值。
- 如果不传递任何参数，则返回一个包含 left 和 top 属性的对象，表示元素相对于文档左上角的位置。
- 如果传递参数，可以设置元素的偏移值。

【2】`.position()`：

相对于父标签

用于获取元素相对于其最近的具有定位(positioned)祖先元素的偏移值。
- 返回一个包含 left 和 top 属性的对象，表示元素相对于定位祖先的位置。

【3】`.scrollTop()` 和 `.scrollLeft()`：

不加参数就是获取，加参数就是设置值

用于获取或设置元素的滚动条的垂直或水平偏移值。
- .scrollTop() 返回或设置元素垂直方向的滚动条偏移值
- .scrollLeft() 返回或设置元素水平方向的滚动条偏移值。

【4】`.offsetParent()`：

用于获取元素的最近的具有定位(positioned)祖先元素。
- 定位祖先是指设置了位置属性(position)为 relative、absolute 或 fixed 的祖先元素。

【5】`.height()` 和 `.width()`：

用于获取或设置元素的高度和宽度。
- .height() 返回或设置元素的内容区域的高度
- .width() 返回或设置元素的内容区域的宽度。

【五】jQuery尺寸操作

【1】`.height()` 和 `.width()`：

这两个方法用于获取或设置元素的高度和宽度。
- 如果不传递参数，它们分别返回元素的内容区域的高度和宽度。
- 如果传递一个数字作为参数，可以设置元素的高度和宽度。

【2】`.innerHeight()` 和 `.innerWidth()`：

这两个方法用于获取元素的内部高度和宽度，包括内容区域和内边距(padding)。
- 它们返回的值不包括边框和外边距。

【3】`.outerHeight()` 和 `.outerWidth()`：

这两个方法用于获取元素的外部高度和宽度，包括内容区域、内边距和边框，但不包括外边距。
- 可以通过传递一个布尔值参数来指定是否包括边框，默认为false。

【4】`.outerHeight(true)` 和 `.outerWidth(true)`：

这两个方法用于获取元素的完整的外部高度和宽度，包括内容区域、内边距、边框和外边距。

【六】jQuery文本操作

(1)JS版本

1. innerText

innerText属性用于获取或设置指定元素及其所有后代元素的文本内容，会自动忽略HTML标签。
示例：

var element = document.getElementById("my-element");
var text = element.innerText;
console.log(text);  // 输出元素的文本内容

element.innerText = "New text content";  // 设置元素的文本内容

2. innerHTML

innerHTML属性用于获取或设置指定元素的HTML内容，包括HTML标签。
示例：

var element = document.getElementById("my-element");
var html = element.innerHTML;
console.log(html);  // 输出元素的HTML内容

element.innerHTML = "<p>New HTML content</p>";  // 设置元素的HTML内容

需要注意的是，使用innerHTML属性时需要小心防止XSS(跨站脚本攻击)，确保插入的HTML代码是可信的。

(2)jQuery版本

1. `.text()`

获取文本内容：

var text = $(".my-element").text();
console.log(text);

设置文本内容：

$(".my-element").text("New text content");

2. `.html()`

获取HTML内容：

var html = $(".my-element").html();
console.log(html);

设置HTML内容：

$(".my-element").html("<p>New HTML content</p>");

3. `.val()`

获取表单元素的值：

var value = $("#my-input").val();
console.log(value);

// 获取input标签内的文件
// 先获取标签对象，再用标签对象去取文件
$("#my-input")[0].files[0];

设置表单元素的值：

$("#my-input").val("New value");

4. `.append()`

在每个匹配元素内部末尾插入内容：

$(".my-element").append("<span>Appended content</span>");

5. `.prepend()`

在每个匹配元素内部开头插入内容：

$(".my-element").prepend("<span>Prepended content</span>");

6. `.after()`

在每个匹配元素之后插入内容：

$(".my-element").after("<div>Content after</div>");

7. `.before()`

在每个匹配元素之前插入内容：

$(".my-element").before("<div>Content before</div>");

【七】jQuery属性操作

在用变量存储对象的时候
JS中推荐使用
xxxEle
标签对象

jQuery中推荐使用
$xxxEle
jQuery对象

【1】JavaScript版本

(1)`setAttribute(attributeName, attributeValue)`:

通过该方法可以设置元素的属性值。
- 将属性名称和属性值作为参数传递给该方法，即可设置指定元素的属性值。
示例：

// 设置元素的属性值
element.setAttribute('attribute', 'value');

(2)`getAttribute(attributeName)`:

通过该方法可以获取元素的属性值。
- 传入属性名称作为参数，即可获取指定元素的属性值。
示例：

// 获取元素的属性值
var value = element.getAttribute('attribute');

(3)`removeAttribute(attributeName)`:

通过该方法可以移除元素的属性。
- 传入属性名称作为参数，即可移除指定元素的属性。
示例：

// 移除元素的属性
element.removeAttribute('attribute');

【2】jQuery版本

(1)`attr(name, value)`:

使用该方法可以设置元素的属性值。
- 将属性名称和属性值作为参数传递给该方法，即可设置指定元素的属性值。
示例：

// 设置元素的属性值
$('.my-element').attr('attribute', 'value');

(2)`attr(name)`:

使用该方法可以获取元素的属性值。
- 传入属性名称作为参数，即可获取指定元素的属性值。
示例：

// 获取元素的属性值
var value = $('.my-element').attr('attribute');

(3)`removeAttr(name)`:

使用该方法可以移除元素的属性。
- 传入属性名称作为参数，即可移除指定元素的属性。
示例：

// 移除元素的属性
$('.my-element').removeAttr('attribute');

【八】针对checked的特殊方法`prop`

对于标签上有的能看到的属性和自定义属性用attr

对于返回布尔值，比如checkbox、radio、option是否被选中用prop

.prop() 方法是 jQuery 库中用于获取或设置元素属性值的一种方法。

【1】获取属性值：

语法：
- $(selector).prop(propertyName)
功能：
- 该方法用于获取指定元素的属性值。
  - selector 是一个选择器，用于选取目标元素；
  - propertyName 是要获取的属性名。

示例：

// 获取单选框的选中状态
var isChecked = $('input[type="radio"]').prop("checked");
console.log(isChecked);  // 返回 true 或 false

// 获取复选框的选中状态
var isChecked = $('input[type="checkbox"]').prop("checked");
console.log(isChecked);  // 返回 true 或 false

【2】设置属性值：

语法：
- $(selector).prop(propertyName, value)
功能：
- 该方法用于设置指定元素的属性值。
  - selector 是一个选择器，用于选取目标元素；
  - propertyName 是要设置的属性名；
  - value 是要设置的属性值。

示例：

// 设置单选框为选中状态
$('input[type="radio"]').prop("checked", true);

// 设置复选框为未选中状态
$('input[type="checkbox"]').prop("checked", false);

【3】小结

需要注意的是，在实际使用时，
- selector 应该根据具体情况指定合适的选择器来选取目标元素。
- 例如，可以使用类名、ID、标签名或其他属性等作为选择器来选取所需的元素。
总结起来
- .prop() 方法可以帮助您获取或设置目标元素的属性值，无论是获取复选框或单选框的选中状态还是设置它们的状态。
- 记得根据具体需求使用合适的选择器选取目标元素，然后调用 .prop() 方法来操作属性值。

【九】jQuery文档处理

【1】JavaScript

(1)`createElement(tagName)`：

创建一个指定标签名的元素节点，并返回该节点对象。
- 可以用来动态创建新的元素。
示例：

var newDiv = document.createElement('div');

(2)`appendChild(node)`：

将一个节点添加为另一个节点的子节点。
- 可以用来将新创建的元素添加到文档中的某个元素内部。
示例：

var parentElement = document.getElementById('parent');
parentElement.appendChild(newDiv);

【2】jQuery

(1)`$(selector)`：

使用选择器来选取匹配的元素，并返回一个jQuery对象。
- 可以通过该对象执行各种操作。
示例：

var elements = $('p'); // 选取页面上所有的 <p> 元素

(2)`$(selector).prepend(content)`

内部头部追加

用于在目标元素的内部开头位置插入内容。
语法：

$(selector).prepend(content);

其中：

selector：选择器，表示要选中的目标元素。
content：要插入的内容，可以是 HTML 字符串、DOM 元素、或者其他 jQuery 对象。

示例：

$('div').prepend('<p>This is a new paragraph.</p>');

上述示例会在页面上的所有 <div> 元素内部的开头位置插入一个新的 <p> 元素。

该方法将给定内容(content)插入到每个匹配元素的子元素列表的开头位置，使其成为子元素列表中的第一个元素。

如果要插入多个内容，可以通过链式调用来连续进行 prepend 操作。例如：

$('div').prepend('<p>Paragraph 1</p>').prepend('<p>Paragraph 2</p>');

上述示例会先在每个 <div> 元素内部的开头位置插入 "Paragraph 1"，然后再在开头位置插入 "Paragraph 2"。

请根据具体需求选择适合的方法来操作文档并达到预期的效果。

(3)`$(selector).append(content)`：

内部尾部追加

将指定的内容追加到每个匹配元素的末尾。
- 可以用来向元素中插入新的内容。
示例：

$('div').append('<p>This is a new paragraph.</p>');

(4)`$(selector).appendTo()`:

目标元素内部尾部追加

用于将当前元素插入到目标元素内部末尾的方法。
语法：

$(currentElement).appendTo(targetElement);

其中：

currentElement：
- 要插入的当前元素，可以是 HTML 字符串、DOM 元素、或者其他 jQuery 对象。
targetElement：
- 目标元素，表示要将当前元素插入到该元素内部的末尾位置。

示例：

$('<p>This is a new paragraph.</p>').appendTo('div');

上述示例将一个新创建的 <p> 元素插入到页面上所有的 <div> 元素内部的末尾。

该方法的作用相当于 targetElement.append(currentElement)，只是调换了插入顺序，使得使用链式方法时可以更加流畅地构建操作。

(5)`$(selector).insertAfter(target)`

将目标元素插入到指定目标元素的后面。

用于将目标元素插入到指定目标元素的后面。
语法：

$(selector).insertAfter(target);

其中：

selector：选择器，表示要选中的目标元素。
target：目标元素，可以是选择器、DOM 元素或者 jQuery 对象，表示要将目标元素插入到它后面。

示例：

$('<p>This is a new paragraph.</p>').insertAfter('div');

上述示例会在页面上的所有 <div> 元素后面插入一个新的 <p> 元素。
该方法将目标元素插入到指定目标元素的后面，使其成为同级的下一个元素。
如果要插入多个目标元素，可以通过链式调用来连续进行 insertAfter 操作。例如：

$('<p>Paragraph 1</p>').insertAfter('div').insertAfter('span');

上述示例会先在每个 <div> 元素后面插入 "Paragraph 1"，然后再在每个 <span> 元素后面插入 "Paragraph 1"。

(6)`$(selector).insertBefore(content)`

用于将选中的元素插入到目标元素的前面。
语法：

$(content).insertBefore(selector);

其中：

selector：选择器，表示目标元素。
content：要插入的内容，可以是 HTML 字符串、DOM 元素或者 jQuery 对象。

示例：

$('<p>Insert this paragraph</p>').insertBefore('div');

上述示例会将一个新的 <p> 元素插入到页面上的所有 <div> 元素之前。
该方法会将选中的元素插入到目标元素之前，成为同级的上一个元素。
- 插入的内容可以是文本、HTML 元素或者其他 DOM 元素。
如果要在多个目标元素前插入相同的元素，可以通过链式调用来连续进行插入操作。例如：

$('<p>Paragraph 1</p>').insertBefore('div').insertBefore('span');

上述示例会先将 "Paragraph 1" 插入每个 <div> 元素之前，然后再将 "Paragraph 1" 插入每个 <span> 元素之前。

(7)`$(selector).before(content)`

用于在目标元素前面插入内容。
语法：

$(selector).before(content);

其中：

selector：选择器，表示要选中的目标元素。
content：要插入的内容，可以是 HTML 字符串、DOM 元素或者 jQuery 对象。

示例：

$('<p>This is a new paragraph.</p>').before('div');

上述示例会在页面上的所有 <div> 元素之前插入一个新的 <p> 元素。
该方法将内容插入到目标元素的前面，成为同级的上一个元素。
- 插入的内容可以是文本、HTML 元素或者其他 DOM 元素。
如果要在多个目标元素前插入相同的内容，可以通过链式调用来连续进行插入操作。例如：

$('<p>Paragraph 1</p>').before('div').before('span');

上述示例会先在每个 <div> 元素前插入 "Paragraph 1"
- 然后再在每个 <span> 元素前插入 "Paragraph 1"。

(8)`$(selector).after(content)`

用于将选中的元素插入到目标元素的后面。
语法：

$(content).insertAfter(selector);

其中：

selector：选择器，表示目标元素。
content：要插入的内容，可以是 HTML 字符串、DOM 元素或者 jQuery 对象。

示例：

$('<p>Insert this paragraph</p>').insertAfter('div');

上述示例会将一个新的 <p> 元素插入到页面上的所有 <div> 元素之后。
该方法会将选中的元素插入到目标元素之后，成为同级的下一个元素。
- 插入的内容可以是文本、HTML 元素或者其他 DOM 元素。
如果要在多个目标元素后插入相同的元素，可以通过链式调用来连续进行插入操作。例如：

$('<p>Paragraph 1</p>').insertAfter('div').insertAfter('span');

上述示例会先将 "Paragraph 1" 插入每个 <div> 元素之后，然后再将 "Paragraph 1" 插入每个 <span> 元素之后。

(9)`$(selector).remove(content)`

用于删除选中的元素以及其子元素。
语法：

$(selector).remove(content);

其中：

selector：选择器，表示目标元素。
content：可选参数，表示要过滤的内容，只有与指定内容匹配的元素会被删除。可以是一个选择器、字符串或者 DOM 元素。

示例：

$('p').remove();

上述示例会删除页面上所有的 <p> 元素及其子元素。
该方法会移除与选择器匹配的元素，并且将其从文档中删除。
- 如果提供了 content 参数，则只有与该参数内容匹配的元素才会被删除。
如果想要从文档中移除多个不同的元素，可以使用多个选择器或者多次调用 remove() 方法来实现。例如：

$('.class1, .class2').remove();

上述示例会移除具有 class1 和 class2 类名的所有元素。
请注意，使用 remove() 方法会从文档中永久删除元素，而不仅仅是隐藏它们。
- 所以在使用该方法之前，请确保已经不再需要这些元素，因为无法恢复已删除的元素。

(10)`$(selector).empty(content)`

用于清空选中元素的所有子元素。
语法：

$(selector).empty(content);

其中：

selector：选择器，表示目标元素。
content：选参数，表示要过滤的内容，只有与指定内容匹配的子元素会被清空。可以是一个选择器、字符串或者 DOM 元素。

示例：

$('div').empty();

上述示例会清空上所有 <div> 元素的子元素。
该方法将会移除所选元素的所有子元素，但会保留自身。
- 如果提供了 content 参数，则只有与该参数内容匹配的子元素才会被清空。
与 remove() 方法不同的是，empty() 方法仅清空元素的子元素，而不会将元素本身从文档中删除。
如果想同时清空多个不同元素的子元素，可以使用多个选择器或者多次调用 empty() 方法来实现。例如：

$('.class1, .class2').empty();

上述示例会清空所有具有 class1 和 class2 类名的元素的子元素。
请注意，使用 empty() 方法只会清空元素的子元素，元素本身仍然存在于文档中。

【补充】

(1)`.html()`:

语法:
- $(selector).html()
功能:
- 获取或设置元素的 HTML 内容。如果不提供参数，则返回第一个匹配元素的 HTML 内容；
- 如果提供参数，则将指定的 HTML 内容设置给所有匹配元素。

示例:

// 获取元素的 HTML 内容
var htmlContent = $('h1').html();

// 设置元素的 HTML 内容
$('div').html('<p>This is a paragraph.</p>');

(2)`.text()`:

语法:
- $(selector).text()
功能:
- 获取或设置元素的文本内容。如果不提供参数，则返回第一个匹配元素的文本内容；
- 如果提供参数，则将指定的文本内容设置给所有匹配元素。

示例:

// 获取元素的文本内容
var textContent = $('p').text();

// 设置元素的文本内容
$('div').text('This is some text.');

(3)`.val()`:

语法:
- $(selector).val()
功能:
- 获取或设置表单元素的值。
- 如果不提供参数，则返回第一个匹配元素的值；
- 如果提供参数，则将指定的值设置给所有匹配元素。

示例:

// 获取输入框的值
var inputValue = $('input[type="text"]').val();

// 设置输入框的值
$('input[type="text"]').val('New Value');

Chimengmeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【15.0】前端基础jQuery之进阶

【15.0】前端基础jQuery之进阶【一】操作标签【1】操作类(1)JS版本classList.add() 方法用于向元素添加一个或多个类名。如果指定的类名已存在，则不会添加。示例：element.classList.add("class1", "class2");classList.remove() 方法用于从元素移除一个或多个类名。如果指定的类名不存在，...
复制链接

扫一扫