建設(shè)實(shí)業(yè)公司網(wǎng)站設(shè)計(jì)模板互聯(lián)網(wǎng)推廣項(xiàng)目
jquery操作節(jié)點(diǎn)（元素）對(duì)象
捕獲-DOM操作，獲取內(nèi)容，值
?????????獲取內(nèi)容：1.text（）獲取元素的文本內(nèi)容
?? ??? ??? ? ?? ??? ??? ?2.html（）獲取元素的文檔內(nèi)容
?? ??? ??? ? ?? ??? ??? ?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("文本內(nèi)容："+$("div-1").text())console.log("文檔內(nèi)容："+$("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">打印文本框內(nèi)容</button><input type="text" name="user" id="input-1" abc="abc"/></body>
</html>
設(shè)置-DOM操作，設(shè)置內(nèi)容，值
????????1.text("文本內(nèi)容")設(shè)置文本內(nèi)容
?? ??? ? 2.html("文檔內(nèi)容")設(shè)置文檔內(nèi)容
?? ??? ? 3.val("value值")?? ?設(shè)置表單控件的值
?? ??? ? 4attr("屬性名","屬性值")設(shè)置自定義屬性
?? ??? ?? 5.prop("屬性名"，"屬性值")設(shè)置固有屬性
<!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">點(diǎn)擊設(shè)置文本內(nèi)容</button><button id="btn2">點(diǎn)擊設(shè)置文檔內(nèi)容</button> <br /><input type="text" name="user" id="input-1" /> <br /><button id="btn3">點(diǎn)擊設(shè)置文本框內(nèi)容</button><p id="p1">段落二</p><button id="btn4">點(diǎn)擊設(shè)置屬性abc為123</button><input type="checkbox" id="ckbox" /><button id="btn5">點(diǎn)擊選中</button></body>
</html>
練習(xí)實(shí)現(xiàn)計(jì)算器
<!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(){//實(shí)現(xiàn)計(jì)算器工程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.在元素內(nèi)部添加子元素
?? ??? ??? ? append（）元素內(nèi)部結(jié)尾處追加
?? ??? ??? ? prepend()在元素首部插入
2.在元素外部添加同級(jí)元素
?? ??? ??? ? * 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;'>尾部?jī)?nèi)容1</span>"var element2="<span style='color:blue;'>尾部?jī)?nèi)容2</span>"
// $("p").append("<span style='color:red;'>尾部?jī)?nèi)容</span>")//可以一次追加多個(gè)元素，元素之間用，隔開$("#pid").append(element1,element2)})$("#btn2").click(function(){$("p").prepend("<span style='color:red;'>首部?jī)?nèi)容</span>")})$("#btn3").click(function(){$("p").before("<span style='color:red;'>前內(nèi)容</span>")})$("#btn4").click(function(){$("p").after("<span style='color:red;'>后內(nèi)容</span>")})})</script></head><body><p id="pid">段落內(nèi)容</p><button id="btn1">點(diǎn)擊尾部追加內(nèi)容</button><button id="btn2">點(diǎn)擊首部追加內(nèi)容</button><button id="btn3">點(diǎn)擊在p前添加內(nèi)容</button><button id="btn4">點(diǎn)擊在p后添加內(nèi)容</button></body>
</html>
刪除元素
1.remove（）刪除被選元素及其子元素
?? ??? ??? ? 另一種用法：可以接收一個(gè)參數(shù)，允許對(duì)被刪除的元素進(jìn)行過濾，?????????????????????????????? 參數(shù)可以是任何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">點(diǎn)擊刪除div及其子元素</button><button id="btn2">點(diǎn)擊清空div</button><button id="btn3">點(diǎn)擊刪除pp</button></body>
</html>
操作css類
1.addClass（）向被選元素添加一個(gè)或多個(gè)類
2.removeClass（）向被選元素刪除一個(gè)或多個(gè)類
3.toggleClass（）對(duì)被選元素的類進(jìn)行添加、刪除的操作
?4.css（）設(shè)置或獲取樣式
<!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(){
// 多個(gè)類中間用空格隔開$("div:first").addClass("important blue")})$("#btn2").click(function(){
// 多個(gè)類中間用空格隔開$("div:first").removeClass("important blue")})$("#btn3").click(function(){
// 多個(gè)類中間用空格隔開$("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">點(diǎn)擊向第一個(gè)div添加類</button><button id="btn2">點(diǎn)擊向第一個(gè)div移除</button><button id="btn3">點(diǎn)擊向第2個(gè)div添加或移除</button></body>
</html>
css（）
1.只填寫一個(gè)參數(shù)，參數(shù)為樣式名時(shí)，獲取樣式的值
?? ??? ? * $("#p1").css("color")獲取id屬性為p1的元素文字顏色是什么。
2.傳入兩個(gè)參數(shù)，第一個(gè)樣式名，第二個(gè)樣式值
3.傳入多組樣式名樣式值，可以同時(shí)為元素添加多個(gè)樣式
<!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;">這是第一個(gè)段落</p><p style="background-color: blue;">這是第二個(gè)段落</p><p style="background-color: green;">這是第三個(gè)段落</p><button id="btn1">點(diǎn)擊獲取第一個(gè)段落的背景顏色</button><button id="btn2">點(diǎn)擊將第二個(gè)段落的背景顏色設(shè)置為黃色</button><button id="btn3">點(diǎn)擊將第三個(gè)段落的背景顏色設(shè)置為灰色并且將文字大小改為30px</button></body>
</html>
?盒模型尺寸
???????????????????? 1.width()
?? ??? ??? ??? ??? ? 2.height()
?? ??? ??? ??? ??? ? 元素自身寬高
?? ??? ??? ??? ??? ? 3.innerWidth()
?? ??? ??? ??? ??? ? 4.innerHeight()
?? ??? ??? ??? ??? ? 元素內(nèi)填充+自身的寬高
?? ??? ??? ??? ??? ? 5.outerWidth()
?? ??? ??? ??? ??? ? 6outerHeight()
?? ??? ??? ??? ??? ? 元素邊框+內(nèi)填充+自身的寬高
?? ??? ??? ??? ??? ? 7.outerWidth(true)
?? ??? ??? ??? ??? ? 8.outerHeight(true)
?? ??? ??? ??? ??? ? 元素外填充+元素邊框+內(nèi)填充+自身的寬高
<!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;/*內(nèi)填充可以設(shè)置四個(gè)方向的內(nèi)填充，方向?yàn)樯嫌蚁伦?/padding: 20px 10px 40px 30px;/*外填充可以設(shè)置四個(gè)方向的值,方向與內(nèi)填充相同*/margin: 10px 50px 20px 100px;}</style></head><body><div id="div1"></div><button id="btn1">點(diǎn)擊獲取寬高</button><p></p></body></html>