javascript ecmascript 【3.0】前端基础jQuery之进阶

【一】操作标签

【1】操作类

(1)JS版本

[1]classList.add() 方法

用于向元素添加一个或多个类名。

如果指定的类名已存在，则不会添加。

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

[2]classList.remove() 方法

用于从元素移除一个或多个类名。

如果指定的类名不存在，则不会发生任何操作。

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

[3]classList.contains() 方法

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

if (element.classList.contains("class1")) {

// 包含 class1 类名的处理逻辑

} else {

// 不包含 class1 类名的处理逻辑

}

[4]classList.toggle() 方法

用于在元素的类名中切换指定的类名。

如果类名不存在，则添加类名；如果类名已存在，则移除类名。

element.classList.toggle("class");

(2)jQuery版本

[1]addClass() 方法

用于向元素添加一个或多个类名。

如果指定的类名已存在，则不会添加。

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

[2]removeClass() 方法

用于从元素移除一个或多个类名。

如果指定的类名不存在，则不会发生任何操作。

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

[3]hasClass() 方法

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

if ($(element).hasClass("class1")) {

// 包含 class1 类名的处理逻辑

} else {

// 不包含 class1 类名的处理逻辑

}

[4]toggleClass() 方法

用于在元素的类名中切换指定的类名。

如果类名不存在，则添加类名；如果类名已存在，则移除类名。

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

【2】CSS

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

1111

2222

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

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

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

【二】jQuery操作CSS

【1】添加 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提供了一系列常用的位置操作方法，可以用来获取或设置元素的位置信息。

【1】.offset()

相对于浏览器窗口

用于获取或设置元素相对于文档的偏移值。

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

【2】.position()

相对于父标签

用于获取元素相对于其最近的具有定位(positioned)祖先元素的偏移值。

返回一个包含 left 和 top 属性的对象，表示元素相对于定位祖先的位置。

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

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

用于获取或设置元素的滚动条的垂直或水平偏移值。

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

// 位置操作

// 获取左侧滚动条距离顶端的位移量

$(window).scrollTop()

// 实时监测距离

$(window).scroll(function () {

if($(window).scrollTop() > 600){

alert('超过600了 架不住了')

}

})

【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 = "

New HTML content

需要注意的是，使用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("

New HTML content

(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("Appended content");

(5) .prepend()

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

$(".my-element").prepend("Prepended content");

(6).after()

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

$(".my-element").after("

(7) .before()

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

$(".my-element").before("

【七】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 库中用于获取或设置元素属性值的一种方法。

// 获取标签属性的时候 针对动态属性 尤其是复选框 不建议使用attr()

prop('checked') 结果是布尔值

prop('checked',false) 动态设置

【1】获取属性值

(1)语法

$(selector).prop(propertyName)

(2)功能

该方法用于获取指定元素的属性值。

selector 是一个选择器，用于选取目标元素；propertyName 是要获取的属性名。

(3)示例

// 获取单选框的选中状态

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】设置属性值

(1)语法

$(selector).prop(propertyName, value)

(2)功能

该方法用于设置指定元素的属性值。

selector 是一个选择器，用于选取目标元素；propertyName 是要设置的属性名；value 是要设置的属性值。

(3)示例

// 设置单选框为选中状态

$('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'); // 选取页面上所有的

元素

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

内部头部追加

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

[1]语法

$(selector).prepend(content);

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

[2]示例一：插入单个内容

$('div').prepend('

This is a new paragraph.

上述示例会在页面上的所有