【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 p p e n d ( ("ul").append( ("ul").append(newNode1); |
| appendTo(content) | $(A).appendTo(B)表示把A追加到B中 | $newNode1.appendTo(“ul”); |
| prepend(content) | $(A).prepend(B)表示将B前置插入到A中 | ( " u l " ) . p r e p e n d ( ("ul").prepend( ("ul").prepend(newNode1); |
| prependTo(content) | $(A).prependTo(B)表示将A前置插入到B中 | $newNode1.prependTo(“ul”); |
元素外部插入同辈节点
| 语法 | 功能 | 示例 |
|---|---|---|
| after(content) | $(A).after(B)表示将B插入到A之后 | ( " u l " ) . a f t e r ( ("ul").after( ("ul").after(newNode1); |
| insertAfter(content) | $(A).insertAfter(B)表示将A插入到B之后 | $newNode1.insertAfter(“ul”); |
| before(content) | $(A).before(B)表示将B插入至A之前 | ( " u l " ) . b e f o r e ( ("ul").before( ("ul").before(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]) | 参数可选。设置或返回匹配元素相对滚动条顶 |
原文地址:https://blog.csdn.net/m0_66584716/article/details/142958607
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.kler.cn/a/349666.html 如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.kler.cn/a/349666.html 如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！