前端基础之jQuery进阶

合集 - 前端炒米粉(25)
1.前端基础之前端知识引入2.前端基础之HTTP协议介绍3.前端基础之HTML基础4.前端基础之HTML进阶5.前端基础之CSS基础6.前端基础之CSS选择器7.前端基础之CSS基本属性8.前端基础之CSS浮动和定位方式9.CSS小练习10.前端基础之JavaScript引入11.前端基础之JavaScript的数据类型12.前端基础之JavaScript数组13.前端基础之JavaScript运算符14.前端基础之JavaScript流程控制15.前端基础之JavaScript函数16.前端基础之JavaScript对象17.前端基础之JavaScriptDOM和BOM18.前端基础之原生js事件绑定案例19.前端基础之jQuery引入20.前端基础之jQuery基础
21.前端基础之jQuery进阶
22.前端基础之jQuery事件23.前端基础之jQuery重要补充24.前端框架之Bootstrap25.前端补充：url编码
收起

jQuery操作标签

1、类class操作

（1）原生js（DOMclass属性操作）

① 添加类名（classList.add()）

  • 您可以使用classList.add()方法向元素添加一个类名。
// 获取元素
var element = document.getElementById('myElement');
 
// 添加类名
element.classList.add('newClass');

② 移除类名（classList.remove()）

  • 您可以使用classList.remove()方法从元素中移除一个类名。
// 获取元素
var element = document.getElementById('myElement');
 
// 移除类名
element.classList.remove('oldClass');

③ 切换类名（classList.toggle()）

  • 您可以使用classList.toggle()方法来切换一个类名的存在状态。
    • 如果类名存在，则移除它；
    • 如果不存在，则添加它。
// 获取元素
var element = document.getElementById('myElement');
 
// 切换类名
element.classList.toggle('active');

④ 检查是否包含某个类名（classList.contains()）

  • 您可以使用classList.contains()方法检查一个元素是否包含特定的类名，返回一个布尔值。
// 获取元素
var element = document.getElementById('myElement');
 
// 检查是否包含类名
if (element.classList.contains('myClass')) {
    // 包含类名的操作
}

（2）jQuery class属性操作

① 添加类名（addClass()）

  • 用于向元素添加一个或多个类名。如果指定的类名已存在，则不会添加。
$(element).addClass("class1 class2");

② 移除类名（removeClass()）

  • 用于从元素移除一个或多个类名。如果指定的类名不存在，则不会发生任何操作。
$(element).removeClass("class1 class2");

③ 切换类名（toggleClass()）

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

    • 如果类名不存在，则添加类名；

    • 如果类名已存在，则移除类名。

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

④ 检查是否包含某个类名（hasClass()）

  • 用于检查元素是否包含指定的类名，返回一个布尔值。
if ($(element).hasClass("class1")) {
    // 包含 class1 类名的处理逻辑
} else {
    // 不包含 class1 类名的处理逻辑
}

（3）总结

js版本                            jQuery版本
classList.add()                   addClass()
classList.remove()				  removeClass()
classList.contains()			  hasClass()
classList.toggle()				  toggleClass()

2、样式css操作

（1）语法

标签.css('属性','样式')
 
// 选择了div标签并将它们的文本颜色设置为绿色。
$("div").css("color", "green");

（2）链式操作

① jQuery链式操作

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

html：
<p>JavaScript</p>
<p>jQuery</p>

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

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

② python中类似于jQuery中的链式操作

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

（3）总结

链式操作的本质：jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法。

类似python的对象链式操作，也可以连续操作对象

3、标签的位置操作

（1）offset()

offset() 是 jQuery 中用于获取匹配元素在文档中的偏移（offset）坐标的方法。这个方法返回一个包含 top 和 left 属性的对象，这些属性表示元素相对于文档的偏移位置。

语法：

$(selector).offset()

示例：

假设有一个 <div> 元素如下：

<div id="myDiv">Hello, World!</div>

你可以使用 offset() 方法来获取该 <div> 元素相对于文档的偏移位置：

var offset = $("#myDiv").offset();
console.log("Top: " + offset.top + ", Left: " + offset.left);

返回值：

offset() 方法返回一个对象，该对象包含两个属性：

  • top：表示元素顶部边缘相对于文档顶部的偏移量。
  • left：表示元素左侧边缘相对于文档左侧的偏移量。

注意事项：

  • offset() 方法返回的是相对于文档的偏移位置，而不是相对于父级元素的位置。
  • 如果你需要相对于父级元素的偏移位置，可以使用 position() 方法。

（2）position()

position() 是 jQuery 中用于获取匹配元素相对于父级元素的偏移位置的方法。与 offset() 方法返回元素相对于文档的偏移位置不同，position() 方法返回元素相对于最近的已定位祖先元素的偏移位置。

语法：

$(selector).position()

示例：

假设有以下 HTML 结构：

<div id="parent" style="position: relative;">
    <div id="child">Hello, World!</div>
</div>

你可以使用 position() 方法来获取子元素相对于父元素的偏移位置：

var position = $("#child").position();
console.log("Top: " + position.top + ", Left: " + position.left);

返回值：

position() 方法返回一个对象，该对象包含两个属性：

  • top：表示元素顶部边缘相对于父元素顶部的偏移量。
  • left：表示元素左侧边缘相对于父元素左侧的偏移量。

注意事项：

  • position() 方法返回的是相对于最近的已定位祖先元素的偏移位置。
  • 如果元素的祖先元素都没有定位（position 属性为 relative、absolute、fixed 或 sticky），position() 方法将返回相对于文档的偏移位置。

（3）scrollTop()

scrollTop() 是 jQuery 中用于获取或设置匹配元素的垂直滚动条偏移量的方法。这个方法适用于包含滚动条的元素，如窗口或包含滚动条的 <div> 元素。

获取垂直滚动条的偏移量：

var scrollOffset = $(selector).scrollTop();

设置垂直滚动条的偏移量：

$(selector).scrollTop(value);
  • selector：要操作的元素选择器。
  • value：可选，要设置的垂直滚动条的偏移量值。

示例：

假设有一个包含滚动条的 <div> 元素：

<div id="scrollableDiv" style="height: 200px; overflow: auto;">
    <!-- 大量内容 -->
</div>

你可以使用 scrollTop() 方法来获取或设置该元素的垂直滚动条偏移量：

// 获取垂直滚动条的偏移量
var scrollOffset = $("#scrollableDiv").scrollTop();
console.log("垂直滚动条偏移量：" + scrollOffset);
 
// 设置垂直滚动条的偏移量为 100px
$("#scrollableDiv").scrollTop(100);

返回值：

  • 当不提供参数时，scrollTop() 方法返回匹配元素的当前垂直滚动条偏移量。
  • 当提供参数时，scrollTop() 方法设置匹配元素的垂直滚动条偏移量为指定值，并返回 jQuery 对象以支持链式调用。

scrollTop() 方法常用于控制滚动条位置，特别是在处理滚动事件时或需要通过编程方式滚动元素时。

（4）scrollLeft()

scrollLeft() 是 jQuery 中用于获取或设置匹配元素的水平滚动条偏移量的方法。这个方法适用于包含水平滚动条的元素，如窗口或包含水平滚动条的 <div> 元素。

获取水平滚动条的偏移量：

var scrollOffset = $(selector).scrollLeft();

设置水平滚动条的偏移量：

$(selector).scrollLeft(value);
  • selector：要操作的元素选择器。
  • value：可选，要设置的水平滚动条的偏移量值。

示例：

假设有一个包含水平滚动条的 <div> 元素：

<div id="scrollableDiv" style="width: 200px; overflow: auto;">
    <!-- 大量内容 -->
</div>

你可以使用 scrollLeft() 方法来获取或设置该元素的水平滚动条偏移量：

// 获取水平滚动条的偏移量
var scrollOffset = $("#scrollableDiv").scrollLeft();
console.log("水平滚动条偏移量：" + scrollOffset);
 
// 设置水平滚动条的偏移量为 50px
$("#scrollableDiv").scrollLeft(50);

返回值：

  • 当不提供参数时，scrollLeft() 方法返回匹配元素的当前水平滚动条偏移量。
  • 当提供参数时，scrollLeft() 方法设置匹配元素的水平滚动条偏移量为指定值，并返回 jQuery 对象以支持链式调用。

scrollLeft() 方法通常用于控制水平滚动条位置，特别是在处理水平滚动事件时或需要通过编程方式滚动元素时。

# 位置操作
 
 
$(window).scrollTop()  # 控制页面上下滚动的偏移量
0
$(window).scrollTop()
398.6666564941406
 
w.fn.init {0: Window, length: 1}

（5）总结

offset()       // 获取该标签相对于浏览器窗口的位置参数
position()     // 获取该标签相对于父标签的位置参数 
scrollTop()    // 获取或设置匹配元素的垂直滚动条偏移量
scrollLeft()   // 获取或设置匹配元素的水平滚动条偏移量
 
// 括号内不加参数就是获取
$(window).scrollTop()    // 获取当前(竖)滑动条与浏览器顶部的位置
$(window).scrollLeft()   // 获取当前(横)滑动条与浏览器左部的位置距离
 
// 加了参数就是设置
$(window).scrollTop(0)  
$(window).scrollTop(500)  // 跳到距离浏览器顶部500的位置
$(window).scrollLeft(500) // 跳到距离浏览器左侧500的位置   
           
 
4.尺寸:
   
# 尺寸
$('p').height()  # 文本的高度
20
$('p').width()  # 文本的宽度
850
$('p').innerHeight()  # 文本+padding
26
$('p').innerWidth()
854
$('p').outerHeight()  # 文本+padding+border
26
$('p').outerWidth()
854

4、尺寸操作

（1）.height() 和 .width()

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

（2）.innerHeight() 和 .innerWidth()

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

（3）.outerHeight() 和 .outerWidth()

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

（4）.outerHeight(true) 和 .outerWidth(true)

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

（5）总结

$('p').height()             //获取p标签文本高度
$('p').width()				//获取p标签文本宽度
$('p').innerHeight()        //获取p标签文本+padding高
$('p').innerWidth()         //获取p标签文本+padding宽
$('p').outerHeight()        //获取p标签文本+padding+border高
$('p').outerwidth()         //获取p标签文本+padding+border宽

5、文本操作

js方法 jQuery方法 作用
.innerText .text() 不填参数为获取文本，填写为设置文本
.innerHTML .html() 不填参数为获取html文档，填写为设置html文档
.value .val() 不填参数为获取用户输入的内容，填写为设置用户输入的内容

（1）js操作标签内部文本

① innerText

  • innerText属性用于设置或返回指定元素中的文本内容，不包括HTML标记。

  • 当使用innerText属性时，所有HTML标记都将被视为纯文本并被直接显示在页面上。

  • 这意味着如果在innerText中包含HTML标记，那么标记将被作为普通文本显示而不会被解析。

  • 此外，innerText属性是只读的，即使尝试修改该属性的值也不会有任何效果。

使用示例：

<div id="myElement">This is <strong>bold</strong> text.</div>
<script>
   var element = document.getElementById("myElement");
   console.log(element.innerText); // 输出："This is bold text."
   element.innerText = "Updated text"; // 尝试修改innerText但不会生效
</script>

② innerHTML

  • innerHTML属性用于设置或返回指定元素的HTML内容，可以包含HTML标记和文本。
  • 与innerText不同，使用innerHTML属性时，所有HTML标记都会被解析并在页面上正确渲染。
    • 这意味着可以通过innerHTML属性来添加、修改或删除HTML元素及其属性。
  • 需要注意的是，innerHTML属性可以导致代码注入攻击，因此使用时需谨慎验证并过滤用户输入。

使用示例：

<div id="myElement">This is <strong>bold</strong> text.</div>
<script>
   var element = document.getElementById("myElement");
   console.log(element.innerHTML); // 输出："This is <strong>bold</strong> text."
   element.innerHTML = "Updated <em>text</em>"; // 修改innerHTML会动态更新页面中的内容
</script>

③ 总结

  • innerText用于操作元素中的纯文本内容，不解析HTML标记，且是只读属性。
  • innerHTML用于操作元素中的HTML内容，可以包含HTML标记

（2）jQuery操作标签内部文本

① .text()

  • 获取文本内容：
var text = $(".my-element").text();
console.log(text);
  • 设置文本内容：
$(".my-element").text("New text content");

② .html()

  • 获取HTML内容：
var html = $(".my-element").html();
console.log(html);
  • 设置HTML内容：
$(".my-element").html("<p>New HTML content</p>");

③ .val()

  • 获取表单元素的值：
var value = $("#my-input").val();
console.log(value);
 
// 获取input标签内的文件
// 先获取标签对象，再用标签对象去取文件
$("#my-input")[0].files[0];
  • 设置表单元素的值：
$("#my-input").val("New value");

④ .append()

  • 在每个匹配元素内部末尾插入内容：
$(".my-element").append("<span>Appended content</span>");

⑤ .prepend()

  • 在每个匹配元素内部开头插入内容：
$(".my-element").prepend("<span>Prepended content</span>");

⑥ .after()

  • 在每个匹配元素之后插入内容：
$(".my-element").after("<div>Content after</div>");

⑦ .before()

  • 在每个匹配元素之前插入内容：
$(".my-element").before("<div>Content before</div>");

6、获取值操作

（1）原生js获取文本数据（.value）

标签.value                    // 获取标签的value值
标签.value = ''               // 将标签的value值清空
标签.value = 'df'             // 将标签的value值设置df

（2）jQuery获取文本数据（.val）

$('标签').val()               // 获取标签的value值
$('标签').val('')             // 将标签的value值清空
$('标签').val('df')           // 将标签的value值设置df

（3）获取文件数据

js：fileEle.files[0]         // 获取文件数据，要加索引[0],第一个才是文件数据
jQuery：$('标签')[0].files[0] // 转换标签对象再索取

ps：牢记dom对象和jQuery对象的转换

​

7、属性操作

js方法 jQuery方法 作用
setAttribute() attr(name,value) 设置/更改属性
getAttribute() attr(name) 获取属性
removeAttribute() removeAttr(name) 移除属性

ps：在用变量存储对象的时候，js中推荐使用xxxEle，而在jQuery中推荐使用$xxxEle

（1）jQuery普通属性操作

$pEle.attr('id')                //获取id的属性
$pEle.attr('class','c1')        //更改class属性为c1
$pEle.attr('password','123')    //自定义属性也可以更改
$pEle.removeAttr('password')    //删除password属性

（2）针对checked的特殊方法 prop()

.prop() 是 jQuery 中用于获取或设置元素属性值的方法。它通常用于处理元素的属性，例如复选框的 checked radio option属性、输入框的 disabled 属性等。如果在判断是否选中时，用attr时无法正确获取。则需要使用.prop()。

语法:

$(selector).prop(propertyName);
$(selector).prop(propertyName, value);
  • propertyName 是要获取或设置的属性名称。
  • value 是要设置的属性值。

示例:

// 获取复选框的 checked 属性值
var isChecked = $("#myCheckbox").prop("checked");  // 返回true/false
 
// 自定义设置输入框的 disabled 属性为 true
$("#myInput").prop("disabled", true);

在上述示例中，第一个示例演示了如何使用 .prop() 方法获取复选框的 checked 属性值，而第二个示例演示了如何将输入框的 disabled 属性设置为 true。

.prop() 方法通常用于处理元素的固有属性，而不是普通的属性。

（3）总结

  • 对于标签上有的能够看到的属性和自定义属性用attr
  • 对于返回布尔值比如checkbox radio option是否被选中用prop

（4）补充

① 隐藏标签 .hide()

hide() 是 jQuery 中用于隐藏元素的方法。使用 hide() 方法可以将匹配的元素设置为不可见。

语法:

$(selector).hide(speed, callback);
  • speed 参数可选，指定隐藏的速度，可以是毫秒数或预定义的字符串值（如 "slow" 或 "fast"）。
  • callback 参数可选，指定隐藏完成后要执行的回调函数。

示例:

// 隐藏id为"myElement"的元素
$("#myElement").hide();
 
// 慢速隐藏id为"myElement"的元素
$("#myElement").hide("slow");
 
// 在隐藏完成后执行回调函数
$("#myElement").hide(1000, function(){
    console.log("Element is now hidden");
});

在上述示例中，hide() 方法用于隐藏指定的元素。您可以选择设置隐藏的速度，也可以在隐藏完成后执行回调函数。

② 显示标签 .show()

.show() 是 jQuery 中用于显示隐藏的元素的方法。当元素使用 .hide() 方法隐藏后，可以使用 .show() 方法将其重新显示。

语法:

$(selector).show();
$(selector).show(speed);
$(selector).show(speed, callback);
  • speed 参数可选，用于设置显示动画的速度，可以是毫秒数或预定义的字符串值（如 "slow"、"fast"）。
  • callback 参数可选，是在显示动画完成后执行的回调函数。

示例:

// 显示隐藏的元素
$("#myElement").show();
 
// 以 "slow" 速度显示元素
$("#myElement").show("slow");
 
// 以自定义速度显示元素，并在动画完成后执行回调函数
$("#myElement").show(1000, function() {
    console.log("Element has been shown.");
});

在上述示例中，第一个示例演示了如何使用 .show() 方法简单地显示一个隐藏的元素，第二个示例展示了如何以 "slow" 速度显示元素，第三个示例演示了如何以自定义速度显示元素，并在动画完成后执行回调函数。

8、文档处理

（1）JavaScript使用

① createElement()

在 JavaScript 中，document.createElement(tagName) 是用于创建一个指定标签名的新 HTML 元素的方法。这个方法通常用于动态地创建新的元素，然后可以将这些元素添加到文档中的指定位置。

下面是一个简单的示例，演示如何使用 document.createElement(tagName) 方法创建一个新的 <div> 元素，并将其添加到文档中：

// 创建一个新的 <div> 元素
var newDiv = document.createElement("div");
 
// 设置新创建的 <div> 元素的文本内容
newDiv.textContent = "This is a new div element.";
 
// 将新创建的 <div> 元素添加到文档中的 body 元素中
document.body.appendChild(newDiv);

在上面的示例中，我们首先使用 document.createElement("div") 创建了一个新的 <div> 元素，然后设置了这个元素的文本内容，最后使用 appendChild() 方法将这个新创建的 <div> 元素添加到文档中的 <body> 元素中。

这个方法在动态生成内容、处理表单数据、实现动态交互等方面非常有用。

② appendChile()

appendChild() 方法是用于将一个新的子节点添加到指定父节点的方法。在 JavaScript 中，这个方法通常用于将一个新创建的元素添加到文档中的指定位置。

下面是一个简单的示例，演示如何使用 appendChild() 方法将一个新创建的 <div> 元素添加到文档中的 <body> 元素中：

// 创建一个新的 <div> 元素
var newDiv = document.createElement("div");
 
// 设置新创建的 <div> 元素的文本内容
newDiv.textContent = "This is a new div element.";
 
// 将新创建的 <div> 元素添加到文档中的 body 元素中
document.body.appendChild(newDiv);

在上面的示例中，我们首先创建了一个新的 <div> 元素，然后设置了这个元素的文本内容，最后使用 appendChild() 方法将这个新创建的 <div> 元素添加到文档中的 <body> 元素中。

appendChild() 方法是用于将一个子节点添加到指定父节点的最常用方法之一。

（2）jQuery使用

① $(selector)

  • 使用选择器来选取匹配的元素，并返回一个jQuery对象。
    • 可以通过该对象执行各种操作。
var elements = $('p'); // 选取页面上所有的 <p> 元素

② $(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"。

③ $(selector).append(content)

内部尾部追加

  • 将指定的内容追加到每个匹配元素的末尾。
    • 可以用来向元素中插入新的内容。
$('div').append('<p>This is a new paragraph.</p>');

④ $(selector).appendTo()

目标元素内部尾部追加

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

语法

$(currentElement).appendTo(targetElement);

  • currentElement：

    • 要插入的当前元素，可以是 HTML 字符串、DOM 元素、或者其他 jQuery 对象。

  • targetElement：

    • 目标元素，表示要将当前元素插入到该元素内部的末尾位置。

示例

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

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

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

⑤ $(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"。

⑥ $(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> 元素之前。

⑦ $(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"。

⑧ $(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> 元素之后。

⑨ $(selector).remove(content)

  • 用于删除选中的元素以及其子元素。

语法

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

示例

$('p').remove();

  • 上述示例会删除页面上所有的 <p> 元素及其子元素。

  • 该方法会移除与选择器匹配的元素，并且将其从文档中删除。

    • 如果提供了 content 参数，则只有与该参数内容匹配的元素才会被删除。

  • 如果想要从文档中移除多个不同的元素，可以使用多个选择器或者多次调用 remove() 方法来实现。例如：

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

  • 上述示例会移除具有 class1 和 class2 类名的所有元素。

  • 请注意，使用 remove() 方法会从文档中永久删除元素，而不仅仅是隐藏它们。

    • 所以在使用该方法之前，请确保已经不再需要这些元素，因为无法恢复已删除的元素。

⑩ $(selector).empty(content)

  • 用于清空选中元素的所有子元素。

语法

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

示例

$('div').empty();

  • 上述示例会清空上所有 <div> 元素的子元素。

  • 该方法将会移除所选元素的所有子元素，但会保留自身。

    • 如果提供了 content 参数，则只有与该参数内容匹配的子元素才会被清空。

  • 与 remove() 方法不同的是，empty() 方法仅清空元素的子元素，而不会将元素本身从文档中删除。

  • 如果想同时清空多个不同元素的子元素，可以使用多个选择器或者多次调用 empty() 方法来实现。例如：

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

（3）总结

# 文档处理
'''
js                                jQuery
createElement()                   $('<p>')
appendChile()                     append()
'''
let $pEle = $('<p>')
$pEle.text('快速上车')
$pEle.attr('id','d1')
$('#d1').append($pEle)  # 内部尾部追加
$('#d1').appendTo($('#d1')
 
$('#d1').prepend($pEle)  # 内部头部追加
$('#d1').prependTo($('#d1')
                   
$('#d2').after($pEle)  # 放在某个标签后面
$pEle.insertAfter($('#d1')) 
                   
$('#d1').before($pEle)  # 放在某个标签后面
$pEle.insertBefore($('#d2')) 
 
$('#d1').remove()  # 将标签从DOM树中删除
$('#d1').empty()  # 清空标签内部所有的内容
posted @   Xiao0101  阅读(18)  评论(0)  编辑  收藏  举报
相关博文：
· 前端基础之jQuery重要补充
· 前端基础之JavaScriptDOM和BOM
· 【3.0】前端基础jQuery之进阶
· 【15.0】前端基础jQuery之进阶
· jQuery 小结
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示

目录