当前位置：首页 > news >正文

jquery基础之操作节点对象

news 2026/2/10 12:19:04

jquery操作节点（元素）对象

捕获-DOM操作，获取内容，值

         获取内容：1.text（）获取元素的文本内容
                      2.html（）获取元素的文档内容
                      3.val（）获取元素的value属性
                      4.attr（）获取元素自定义的DOm属性(声明出来的就能获取)
                      5.prop（）获取元素的固有属性（无论声明不声明都能获取）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){console.log("文本内容："+$("div-1").text())console.log("文档内容："+$("div-1").html())$("#btn1").click(function(){console.log($("#input-1").val())})console.log($("#input-1").attr("name"))console.log($("#input-1").attr("disabled"))console.log($("#input-1").prop("value"))console.log("attr获取："+$("#input-1").attr("abc"))console.log("prop获取abc："+$("#input-1").prop("abc"))})</script><body><div id="div-1"><p id="pid" style="color: red;">红色段落</p></div><button id="btn1">打印文本框内容</button><input type="text" name="user" id="input-1" abc="abc"/></body>
</html>

设置-DOM操作，设置内容，值

        1.text("文本内容")设置文本内容
       2.html("文档内容")设置文档内容
       3.val("value值")   设置表单控件的值
       4attr("属性名","属性值")设置自定义属性
          5.prop("属性名"，"属性值")设置固有属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){$("p").text("<p style='color:red;'>红色文字</p>")})$("#btn2").click(function(){$("p").html("<p style='color:red;'>红色文字</p>")})$("#btn3").click(function(){$("#input-1").val("20")})$("#btn4").click(function(){$("#p1").attr("abc",123)})$("#btn5").click(function(){$("#ckbox").prop("checked",true)})})</script></head><body><p>段落</p><button id="btn1">点击设置文本内容</button><button id="btn2">点击设置文档内容</button> <br /><input type="text" name="user" id="input-1" /> <br /><button id="btn3">点击设置文本框内容</button><p id="p1">段落二</p><button id="btn4">点击设置属性abc为123</button><input type="checkbox" id="ckbox" /><button id="btn5">点击选中</button></body>
</html>

练习实现计算器

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){//实现计算器工程var input='';var s=0;$("button").click(function(){s=$(this).text()console.log(s);if(s!="ac"&&s!="="){$("#inp1").val(input+=s)}else if(s=="ac"){input=''$("#inp1").val(" ")}else{input=$("#inp1").val()if(input!=''){$("#inp1").val(eval(input))}}})})</script><style type="text/css">button{width: 50px;height: 70px;}input{width: 220px;}</style></head><body><input type="text"  id="inp1"  /><br /><table border="1" whidth="200px" height="300px"><tr><td><button >7</button></td><td><button >8</button></td><td><button >9</button></td><td><button >+</button></td></tr><tr><td><button >4</button></td><td><button >5</button></td><td><button >6</button></td><td><button >-</button></td></tr><tr><td><button >1</button></td><td><button >2</button></td><td><button >3</button></td><td><button >*</button></td></tr><tr><td><button >ac</button></td><td><button >0</button></td><td><button >=</button></td><td><button >/</button></td></tr></table></body>
</html>

添加元素

1.在元素内部添加子元素
append（）元素内部结尾处追加
prepend()在元素首部插入

2.在元素外部添加同级元素
* after()在元素之后插入
* before()在元素之前插入

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){var element1="<span style='color:green;'>尾部内容1</span>"var element2="<span style='color:blue;'>尾部内容2</span>"
//				$("p").append("<span style='color:red;'>尾部内容</span>")//可以一次追加多个元素，元素之间用，隔开$("#pid").append(element1,element2)})$("#btn2").click(function(){$("p").prepend("<span style='color:red;'>首部内容</span>")})$("#btn3").click(function(){$("p").before("<span style='color:red;'>前内容</span>")})$("#btn4").click(function(){$("p").after("<span style='color:red;'>后内容</span>")})})</script></head><body><p id="pid">段落内容</p><button id="btn1">点击尾部追加内容</button><button id="btn2">点击首部追加内容</button><button id="btn3">点击在p前添加内容</button><button id="btn4">点击在p后添加内容</button></body>
</html>

删除元素

1.remove（）删除被选元素及其子元素
另一种用法：可以接收一个参数，允许对被删除的元素进行过滤，参数可以是任何jquery选择器语法
$("p").remove(".pp")删除所有含有class属性是pp的元素

2.empty（）从被选元素中删除子元素

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){$("#div-1").remove()})$("#btn2").click(function(){$("#div-1").empty()})$("#btn3").click(function(){
//				$(".pp").remove() 删除所有class属性为pp的元素
//$("p.pp").remove()		删除p元素中所有class属性为pp的元素$("p").remove(".pp")})})</script></head><body><div id="div-1" style="border: 1px solid #000000;width: 150px;height: 150px;"><p class="pp">1段</p><p class="pp">2段</p><p>3段</p></div><button id="btn1">点击删除div及其子元素</button><button id="btn2">点击清空div</button><button id="btn3">点击删除pp</button></body>
</html>

操作css类

1.addClass（）向被选元素添加一个或多个类

2.removeClass（）向被选元素删除一个或多个类

3.toggleClass（）对被选元素的类进行添加、删除的操作

4.css（）设置或获取样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){
//			多个类中间用空格隔开$("div:first").addClass("important blue")})$("#btn2").click(function(){
//			多个类中间用空格隔开$("div:first").removeClass("important blue")})$("#btn3").click(function(){
//			多个类中间用空格隔开$("div:last").toggleClass("important blue")})})</script><style type="text/css">.important{font-weight: bold;font-size: xx-large;}.blue{color: blue;}</style></head><body><div>这是一些文本</div><div>这是一些文本</div><button id="btn1">点击向第一个div添加类</button><button id="btn2">点击向第一个div移除</button><button id="btn3">点击向第2个div添加或移除</button></body>
</html>

css（）

1.只填写一个参数，参数为样式名时，获取样式的值
* $("#p1").css("color")获取id属性为p1的元素文字颜色是什么。

2.传入两个参数，第一个样式名，第二个样式值

3.传入多组样式名样式值，可以同时为元素添加多个样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){alert($("p:first").css("background-color"))})$("#btn2").click(function(){$("p:eq(1)").css("background-color","yellow")})$("#btn3").click(function(){$("p:eq(2)").css({"backgroundColor":"gray","fontSize":"30px"})})})</script></head><body><p style="background-color: red;">这是第一个段落</p><p style="background-color: blue;">这是第二个段落</p><p style="background-color: green;">这是第三个段落</p><button id="btn1">点击获取第一个段落的背景颜色</button><button id="btn2">点击将第二个段落的背景颜色设置为黄色</button><button id="btn3">点击将第三个段落的背景颜色设置为灰色并且将文字大小改为30px</button></body>
</html>

盒模型尺寸

                     1.width()
                   2.height()
                   元素自身宽高
                   3.innerWidth()
                   4.innerHeight()
                   元素内填充+自身的宽高
                   5.outerWidth()
                   6outerHeight()
                   元素边框+内填充+自身的宽高
                   7.outerWidth(true)
                   8.outerHeight(true)
                   元素外填充+元素边框+内填充+自身的宽高

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {$("#btn1").click(function() {var ptxt = "";ptxt += "div的width:" + $("#div1").width() + "<br\>"ptxt += "div的height:" + $("#div1").height() + "<br\>"ptxt += "div的innerwidth:" + $("#div1").innerWidth() + "<br\>"ptxt += "div的innerheight:" + $("#div1").innerHeight() + "<br\>"ptxt += "div的outwidth:" + $("#div1").outerWidth() + "<br\>"ptxt += "div的outheight:" + $("#div1").outerHeight() + "<br\>"ptxt += "div的outwidth:true" + $("#div1").outerWidth(true) + "<br\>"ptxt += "div的outheight:true" + $("#div1").outerHeight(true) + "<br\>"$("p").html(ptxt)})})</script><style type="text/css">#div1 {border: 5px solid blue;background-color: aqua;width: 300px;height: 100px;/*内填充可以设置四个方向的內填充，方向为上右下左*/padding: 20px 10px 40px 30px;/*外填充可以设置四个方向的值,方向与内填充相同*/margin: 10px 50px 20px 100px;}</style></head><body><div id="div1"></div><button id="btn1">点击获取宽高</button><p></p></body></html>

jquery基础之操作节点对象

jquery操作节点（元素）对象

练习实现计算器

相关文章：

jquery基础之操作节点对象

对于Java的深入理解及其特点--面试

Linux GPSD的使用

ArrayList无参构造添加元素源码解读

手写简易 Spring（二）

排列问题DFS入门

【每日一题Day159】LC1638统计只差一个字符的子串数目 | 枚举

【07 Metadata and VendorTag】

Golang中Model的使用

交友项目【基础环境搭建】

入职时，公司要求自己带电脑，每月给100元补贴，如果不接受就不能入职！

20道经典Redis面试题

十分钟带你看懂接口测试，2023最全超大型接口测试攻略

【设计模式】创建型-单例模式

Python 练习六

「SQL面试题库」 No_22 员工奖金

瞒不住了，Prefetch 就是一个大谎言

这个时候了，你还不会不知道JavaMail API吧

JavaScript var let区别

Thinkphp 6.0容器和依赖注入

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

【大模型RAG】Docker 一键部署 Milvus 完整攻略

生成 Git SSH 证书

跨链模式：多链互操作架构与性能扩展方案

Spring Boot面试题精选汇总

自然语言处理——Transformer

JavaScript基础-API 和 Web API

Go语言多线程问题

Redis：现代应用开发的高效内存数据存储利器

多模态图像修复系统：基于深度学习的图片修复实现