jquery基础之操作节点对象
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>