【jQuery】jQuery基本操作（样式操作内容操作节点操作属性操作节点遍历）

文章目录

- 1、样式操作
- 2、内容操作
- - 2-1 html()
  - 2-2 text()
  - 2-3 val()
- 3、节点操作
- - 3-1 创建
  - 3-2 插入
  - 3-3 删除
  - 3-4 替换
  - 3-5 复制
- 4、属性操作
- 5、节点遍历
- 6、DOM操作

DOM 操作分为三类：

DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()

HTML-DOM：用于处理HTML文档，如document.forms

CSS-DOM：用于操作CSS，如element.style.color=“green”

JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持

jQuery 对 JavaScript 中的 DOM 操作进行了封装：

样式操作
内容及 Value 值操作
节点及节点属性操作
节点遍历

1、样式操作

方法	描述
$(selector).css(“property”, “value”);	设置单个样式
$(selector).css({ “property1”: “value1”, “property2”: “value2” });	设置多个样式
$(selector).css(“property”);	获取样式
$(selector).addClass(“className1 [className2 … classNameN]”);	追加样式
$(selector).removeClass(“className1 [className2 … classNameN]”);	移除样式
$(selector).toggleClass(className, [state]);	切换样式
$(selector).hasClass(“class-name”);	判断样式

toggleClass 如果元素中已经有指定的类，则移除这个类；如果没有，则添加这个类。这个方法可以用于实现一些简单的样式切换效果，例如：显示/隐藏、启用/禁用等。

className: 需要添加或移除的 CSS 类名（一个或多个类名，以空格分隔）。
state (可选): 布尔值（true 或 false），指定是否添加或移除类。true 表示添加类，false 表示移除类。如果省略这个参数，则方法会根据当前元素是否已经有该类来决定是添加还是移除。

// 切换单个类
$(".box").toggleClass("highlight");
// 检查 .box 元素是否具有 highlight 类。如果有则移除，没有则添加

// 切换多个类
$(".box").toggleClass("highlight active");
// 同时切换 highlight 和 active 两个类

// 使用 state 参数
$(".box").toggleClass("highlight", true);  // 总是添加 highlight 类
$(".box").toggleClass("highlight", false); // 总是移除 highlight 类
// 明确地指定是否添加或移除类

应用

// 设置单个样式
$(this).css("border","5px solid #f5f5f5");
// 设置多个样式
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});
// 获取样式
var color = $(".box").css("color");

.text{ padding:10px;}
.content {background-color:#FFFF00;}
.border {border:1px dashed #333;}

// 追加样式
$("h2").mouseover(function() {
    $("p").addClass("content border");
});
// 移除样式
$("h2").mouseout(function() {
    $("p").removeClass("text content");
});
// 切换样式
$("h2").click(function() {
    $("p").toggleClass("content  border");
});
// 判断样式
$("h2").mouseover(function() {
    if(!$("p").hasClass("content")){
        $("p").addClass("content");
    }
});
$("h2").mouseout(function() {
    if($("p").hasClass("content")) {
        $("p").removeClass("content");
    }
});

2、内容操作

2-1 html()

html() 可以对 HTML 代码进行操作，类似于 JS 中的 innerHTML 。使用 html() 可以插入带有HTML标签的文本，因此它可以用来动态生成页面结构。

2-2 text()

text() 方法用于获取或设置被选元素中的纯文本内容。使用 text() 插入的内容会被浏览器解析为纯文本，所有的HTML标签都会被转义成普通的字符显示。

<p id="content">我是一个P标签</p>
<button id="updateContent">html()</button>
<button id="clearContent">text()</button>

<script>
    $(document).ready(function(){
        $('#updateContent').click(function(){
            // html()方法更新内容
            $('#content').html('<h1>我换成了h1标签</h1>');
        });

        $('#clearContent').click(function(){
            // text()方法清空内容并添加纯文本
            $('#content').text('我只替换了内容');
        });
    });
</script>

html() 和 text() 方法的区别

语法格式	参数说明	功能描述
html()	无参数	用于获取第一个匹配元素的HTML内容或文本内容
html(content)	content为元素的HTML内容	用于设置所有匹配元素的HTML内容或文本内容
text()	无参数	用于获取所有匹配元素的文本内容
text(content)	content为元素的文本内容	用于设置所有匹配元素的文本内容

2-3 val()

val() 方法主要用于处理表单元素的值，如 <input>、<textarea> 和 <select> 元素。这个方法可以用来获取这些元素的当前值，也可以用来设置这些元素的新值。

// 获取值
var inputValue = $('#myInput').val();
// 设置值
$('#myInput').val('Hello, world!');

应用场景

// 对于 <input> 元素：可以用来获取或设置文本框、密码框、隐藏域等的值。
// 获取文本框的值
var text = $('input[type="text"]').val();
// 设置文本框的值
$('input[type="text"]').val('新的文本');

// 对于 <textarea> 元素：可以用来获取或设置多行文本框的值。
// 获取多行文本框的值
var textAreaContent = $('textarea').val();
// 设置多行文本框的值
$('textarea').val('新的多行文本');

// 对于 <select> 元素：可以用来获取或设置下拉列表的选定值。
// 获取下拉列表的选定值
var selectedOption = $('select').val();
// 设置下拉列表的选定值
$('select').val('optionValue');

当一个表单控件有多个选项被选中时（例如多选的 <select>），val() 返回的是一个数组。如果想获取或设置复选框或单选按钮的值，需要注意只有当它们被选中时才有效。

// 获取选中的复选框的值
var checkedValues = [];
$('input[type="checkbox"]:checked').each(function() {
    checkedValues.push($(this).val());
});

3、节点操作

3-1 创建

工厂函数$()用于获取或创建节点

$(selector)：通过选择器获取节点

$(element)：把 DOM 节点转化成 jQuery 节点

$(html)：使用 HTML 字符串创建 jQuery 节点

var $newNode  = $("<li></li>");
var $newNode1 = $("<li>你喜欢哪些冬季运动项目？</li>");
var $newNode2 = $("<li title='last'>北京申办冬奥会是再合适不过了！</li>");

3-2 插入

元素内部插入子节点

语法	功能	示例
append(content)	$(A).append(B)表示将B追加到A中	$(" u l ") . a pp e n d ($ newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中	$newNode1.appendTo(“ul”);
prepend(content)	$(A).prepend(B)表示将B前置插入到A中	$(" u l ") . p re p e n d ($ newNode1);
prependTo(content)	$(A).prependTo(B)表示将A前置插入到B中	$newNode1.prependTo(“ul”);

元素外部插入同辈节点

语法	功能	示例
after(content)	$(A).after(B)表示将B插入到A之后	$(" u l ") . a f t er ($ newNode1);
insertAfter(content)	$(A).insertAfter(B)表示将A插入到B之后	$newNode1.insertAfter(“ul”);
before(content)	$(A).before(B)表示将B插入至A之前	$(" u l ") . b e f ore ($ newNode1);
insertBefore(content)	$(A).insertBefore(B)表示将A插入到B之前	$newNode1.insertBefore(“ul”);

appendTo(), prependTo(), insertAfter(), 和 insertBefore() 方法与 append(), prepend(), after(), before() 方法的主要区别在于它们的作用对象不同。

前一组方法是以被操作元素为对象，将其移动或复制到目标位置；

而后一组方法则是以目标位置为对象，在其位置上插入新的内容。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<body>
    <div id="container">
        <h1>原始标题</h1>
        <p id="para1">这是第一个段落。</p>
        <div id="childContainer">
            <p>这是内部容器的第一个段落。</p>
        </div>
    </div>
    <div id="sibling2">这是另一个兄弟元素。</div>
    <script>
        $(document).ready(function() {
            // 在内部插入子节点
            $('#container').append('<p>这是追加到容器末尾的新段落。</p>');
            $('#childContainer').prepend('<p>这是插入到内部容器开头的新段落。</p>');

            // 在外部插入同辈节点
            $('#para1').after('<p>这是插入到第一个段落之后的新段落。</p>');
            $('#container').before('<div>这是插入到容器之前的兄弟元素。</div>');
        });
    </script>
</body>

$(document).ready(function() {
    // 创建一些新的元素
    var newPara = $('<p>这是追加到容器末尾的新段落。</p>');
    var newPara2 = $('<p>这是插入到内部容器开头的新段落。</p>');
    var newDiv = $('<div>这是插入到第一个段落之后的新段落。</div>');
    var newDiv2 = $('<div>这是插入到容器之前的兄弟元素。</div>');
    // 使用 appendTo 方法
    newPara.appendTo('#container');
    // 使用 prependTo 方法
    newPara2.prependTo('#childContainer');
    // 使用 insertAfter 方法
    newDiv.insertAfter('#para1');
    // 使用 insertBefore 方法
    newDiv2.insertBefore('#container');
});

这是插入到容器之前的兄弟元素。
原始标题
这是第一个段落。
这是插入到第一个段落之后的新段落。
这是插入到内部容器开头的新段落。
这是内部容器的第一个段落。
这是追加到容器末尾的新段落。
这是另一个兄弟元素。

3-3 删除

jQuery 提供了三种删除节点的方法

remove()：删除整个节点

empty()：清空节点内容

detach()：删除整个节点，保留元素的绑定事件、附加的数据

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="container">
    <h1>标题</h1>
    <p id="para1">这是第一个段落。</p>
    <div id="childContainer">
        <p>这是内部容器的第一个段落。</p>
        <button id="btnRemove">删除内部容器</button>
        <button id="btnEmpty">清空内部容器</button>
        <button id="btnDetach">分离内部容器</button>
    </div>
</div>

<script>
    $(document).ready(function() {
        // 为按钮绑定点击事件
        $('#btnRemove').click(function() {
            $('#childContainer').remove();
            console.log("使用 remove() 删除 #childContainer 后的 DOM:");
            console.log($('#container').html());
        });

        $('#btnEmpty').click(function() {
            $('#childContainer').empty();
            console.log("使用 empty() 清空 #childContainer 后的 DOM:");
            console.log($('#container').html());
        });

        $('#btnDetach').click(function() {
            var detached = $('#childContainer').detach();
            console.log("使用 detach() 分离 #childContainer 后的 DOM:");
            console.log($('#container').html());
            // 重新附加到另一个位置作为演示
            detached.appendTo('#container');
            console.log("重新附加到 #container 后的 DOM:");
            console.log($('#container').html());
        });
    });
</script>

结果

remove()	empty()	detach()
删除内部容器	清空内部容器	分离内部容器


`#childContainer` 及其所有子元素都将被移除	`#childContainer` 的所有子元素将被清空，但 `#childContainer` 本身仍然存在	`#childContainer` 将被从当前位置移除，但其事件处理程序和数据会被保留下来。

3-4 替换

replaceWith() 和 replaceAll() 用于替换某个节点

var $newNode1 = $("<li>你喜欢哪些冬季运动项目？</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);

$($newNode1).replaceAll(".gameList li:eq(2)");

3-5 复制

clone() 用于复制某个节点

语法：$(selector).clone([includeEvents]);

参数 ture 或 flase, true 复制事件处理，flase 反之

$(".gameList li:eq(1)").click(function(){
    $(this).clone(true).appendTo(".gameList");
})
$(".gameList li:eq(2)").click(function(){
    $(this).clone(false).appendTo(".gameList");
})

4、属性操作

操作	描述
attr()	获取与设置元素属性
removeAttr()	删除元素属性

<body>
    <img id="myImage" src="image.jpg" alt="Example Image" />
    <button id="changeSrc">更换图片</button>
    <button id="removeAlt">移除属性</button>
    <script>
        $(document).ready(function(){
            // 当点击改变图片源按钮时
            $('#changeSrc').click(function(){
                // 改变图片的src属性
                $('#myImage').attr('src', 'new_image.jpg');
            });

            // 当点击移除alt文本按钮时
            $('#removeAlt').click(function(){
                // 移除图片的alt属性
                $('#myImage').removeAttr('alt');
            });
        });
    </script>
</body>

5、节点遍历

遍历子元素	描述	示例
children()	获取所有子元素(不含孙子元素)	$(“section”).children();
遍历同辈元素	描述	示例
next([expr])	获取紧邻匹配元素之后的元素	$(“section”).next()
prev([expr])	获取紧邻匹配元素之前的元素	$(“section”).prev()
slibings([expr])	获取位于匹配元素前面和后面的所有同辈元素	$(“section”).siblings()
遍历前辈元素	描述	示例
parent()	获取元素的父级元素	$(“section”).parent()
parents()	获取元素的祖先元素	$(“section”).parents()

其他遍历方法	描述
each(function)	迭代 jQuery 对象，为每个匹配的元素执行一个函数。
end()	结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态
eq(index)	根据索引定位匹配元素
filter(selector\|function)	根据选择器或函数定位匹配元素
find(selector\|element)	获取当前匹配元素集中每个元素的后代，按选择器、jQuery 对象或元素进行筛选
first()	获取第一个元素

each() 方法允许遍历一个 jQuery 对象集合（通常是由选择器选取的一组元素），或者遍历一个普通的 JavaScript 对象或数组。each() 方法接受一个函数作为参数，该函数会在每个成员上执行。

$(selector).each(function(index, element) {
    // 代码
});

index 是当前元素在集合中的索引位置（从 0 开始）。
element 是当前的 DOM 元素，可以使用 $(this) 或 element 访问。

$.each(collection, function(index, value) {
    // 代码
});

collection 可以是数组或对象。
如果 collection 是数组，那么 index 就是数组中当前元素的索引，而 value 是该索引对应的值。
如果 collection 是对象，那么 index 就是对象属性的键名，而 value 是与该键名关联的属性值。

// 遍历数组
var numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, value) {
    console.log("Index: " + index + ", Value: " + value);
});
// 遍历对象
var person = {name: "John", age: 30, city: "New York"};
$.each(person, function(key, value) {
    console.log("Key: " + key + ", Value: " + value);
});

举例：遍历页面中所有的 <li> 元素，并将每个元素的索引和文本内容打印到浏览器的控制台。

<!-- each(function) -->
<ul>
    <li>foo</li>
    <li>bar</li>
</ul>
<script>
    // 选择列表项并遍历
    $("li").each(function(index) {
        console.log(index + ": " + $(this).text());
    });
</script>

JavaScript 写法

var listItems = document.querySelectorAll('li'); // 获取所有 <li> 元素
listItems.forEach(function(item, index) { // 遍历这些元素
    console.log(index + ": " + item.textContent); // 输出索引和文本内容
});

<!-- end() -->
<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<script>
    // 选择所有的<li>元素
    var allItems = $('#myList li');
    // 在所有<li>元素上做一些事情
    allItems.css('color', 'blue');
    // 选择第一个<li>元素并做些事情
    allItems.first().css('fontWeight', 'bold').end()
		.css('text-decoration', 'underline'); // 回到了所有<li>元素的状态 
</script>

<!-- eq(index) -->
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<script> 
	$("li").eq(2 ).css("background-color", "red"); // list item 3变化
    $("li").eq(-2).css("background-color", "red"); // list item 4变化
    $ "li").eq(5 ).css("background-color", "red"); // 无变化
</script>

<!-- filter(selector) -->
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
    <li>list item 6</li>
</ul>
<script>
    // 偶数项变化
    $("li").filter(":nth-child(2n)").css("background-color", "red");
</script>

<!-- find(selector) -->
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>

<script>
    $("p").find("span").css("color", "red"); // Hello good 字体变化
</script>

<!-- first() -->
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
</ul>
<script>
	$("li").first().css("background-color", "red"); // list item 1变化
</script>

6、DOM操作

操作	描述
css()	设置或返回匹配元素的样式属性
height([value])	设置或返回匹配元素的高度
width([value])	设置或返回匹配元素的宽度
offset([value])	返回以像素为单位的top和left坐标。仅对可见元素有效
offsetParent()	返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素
position()	返回第一个匹配元素相对于父元素的位置
scrollLeft([position])	参数可选。设置或返回匹配元素相对滚动条左侧的偏移
scrollTop([position])	参数可选。设置或返回匹配元素相对滚动条顶