【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');

posted @ 2023-07-06 15:07 Chimengmeng 阅读(10) 评论(0) 编辑收藏举报

刷新页面返回顶部

Dream-Z

Hope Your Life Is Worth It !

【15.0】前端基础jQuery之进阶

【15.0】前端基础jQuery之进阶

【一】操作标签

【1】操作类

（1）JS版本

classList.add() 方法

classList.remove() 方法

classList.contains() 方法

classList.toggle() 方法

（2）jQuery版本

addClass() 方法

removeClass() 方法

hasClass() 方法

toggleClass() 方法

【2】CSS

【二】jQuery操作CSS

（2）添加 CSS 类名：

（2）移除 CSS 类名：

（3）切换 CSS 类名：

（4）设置 CSS 属性：

（5）获取 CSS 属性：

【三】jQuery链式操作

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

【2】jQuery链式操作

【四】jQuery位置操作

【1】.offset()：

【2】.position()：

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

【4】.offsetParent()：

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

【五】jQuery尺寸操作

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

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

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

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

【六】jQuery文本操作

（1）JS版本

1. innerText

2. innerHTML

（2）jQuery版本

1. .text()

2. .html()

3. .val()

4. .append()

5. .prepend()

6. .after()

7. .before()

【七】jQuery属性操作

【1】JavaScript版本

（1）setAttribute(attributeName, attributeValue):

（2）getAttribute(attributeName):

（3）removeAttribute(attributeName):

【2】jQuery版本

（1）attr(name, value):

（2）attr(name):

（3）removeAttr(name):

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

【1】获取属性值：

【2】设置属性值：

【3】小结

【九】jQuery文档处理

【1】JavaScript

（1）createElement(tagName)：

（2）appendChild(node)：

【2】jQuery

（1）$(selector)：

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

（3）$(selector).append(content)：

（4）$(selector).appendTo():

（5）$(selector).insertAfter(target)

（6）$(selector).insertBefore(content)

（7）$(selector).before(content)

（8）$(selector).after(content)

（9）$(selector).remove(content)

（10）$(selector).empty(content)

【补充】

（1）.html():

（2）.text():

`classList.add()` 方法

`classList.remove()` 方法

`classList.contains()` 方法

`classList.toggle()` 方法

`addClass()` 方法

`removeClass()` 方法

`hasClass()` 方法

`toggleClass()` 方法

【1】`.offset()`：

【2】`.position()`：

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

【4】`.offsetParent()`：

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

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

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

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

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

1. `.text()`

2. `.html()`

3. `.val()`

4. `.append()`

5. `.prepend()`

6. `.after()`

7. `.before()`

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

（2）`getAttribute(attributeName)`:

（3）`removeAttribute(attributeName)`:

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

（2）`attr(name)`:

（3）`removeAttr(name)`:

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

（1）`createElement(tagName)`：

（2）`appendChild(node)`：

（1）`$(selector)`：

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

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

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

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

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

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

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

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

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

（1）`.html()`:

（2）`.text()`:

（3）`.val()`: