jQuery-DOM操作-内容操作、属性操作-通用属性操作、属性操作-class属性操作
jQuery-DOM操作-内容操作
1.html():获取/设置元素的标签体内容<a><font>内容</font></a> -- > <font>内容</font>
2.text():获取/设置元素的标签体纯文本内容<a><font>内容</font></a> -- > 内容
3.val():获取/设置元素的value属性值
01-DOM操作-属性操作-内容操作.html页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01-Dom操作_内容操作</title> <script src="../js/jquery-3.6.1.min.js"></script> <script> $(function () { // 获取myinput 的value值 //var value = $("#myinput").val(); //alert(value); //$("#myinput").val("李四"); // 获取mydiv的标签体内容 //var html = $("#mydiv").html(); //alert(html); //$("#mydiv").html("<p>aaaa</p>"); // 获取mydiv文本内容 //var text = $("#mydiv").text(); //alert(text); $("#mydiv").text("bbb"); }); </script> </head> <body> <input id="myinput" type="text" name="username" value="张三"><br> <div id="mydiv"><p><a href="#">标题标签</a></p></div> </body> </html>
属性操作-通用属性操作
1.通用属性操作
1.attr():获取/设置元素的属性
2.removeAttr():删除元素
3.prop():获取/设置元素的属性
4.removeProp():删除元素
attr和prop区别？
1.如果操作的是元素的固有属性，则建议使用prop
2.如果操作的是元素自定义的属性，则建议使用attr
02-DOM操作-属性操作-通用属性操作.html页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM操作-属性操作-通用属性操作</title> <script src="../js/jquery-3.6.1.min.js"></script> <style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } div.visible{ display: none; } </style> <script type="text/javascript"> $(function () { //获取北京节点的name属性值 var name = $("#bj").attr("name"); //alert(name); //设置北京节点的name属性的值为dabeijing $("#bj").attr("name","dabeijing"); //新增北京节点的discription属性 属性值是didu $("#bj").attr("discription","didu"); //删除北京节点的name属性并检验name属性是否存在 $("#bj").removeAttr("name"); //获得hobby的的选中状态 var checked = $("#hobby").prop("checked"); alert(checked); //var checked = $("#hobby").attr("checked"); //获取不到，弹出undefined }); </script> </head> <body> <ul> <li id="bj" name="beijing" xxx="yyy">北京</li> <li id="tj" name="tianjin">天津</li> </ul> <input type="checkbox" id="hobby"/> </body> </html>
属性操作-class属性操作
1.addClass():添加class属性值
2.removeClass():删除class属性值
3.toggleClass():切换class属性
toggleClass():切换class属性
判断如果元素对象上存在class="one"，则将属性值one删除掉。如果元素对象上不存在"class=one"，则添加
4.css():
03-DOM操作-属性操作-class属性操作.html页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DOM操作-属性操作-class属性操作</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="../js/jquery-3.6.1.min.js"></script> <style type="text/css"> .one{ width: 200px; height: 140px; margin: 20px; background: red; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 40px; height: 40px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 40px; height: 40px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } /*待用的样式*/ .second{ width: 300px; height: 340px; margin: 20px; background: yellow; border: pink 3px dotted; float:left; font-size: 22px; font-family:Roman; } </style> <script type="text/javascript"> $(function () { //<input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/> $("#b1").click(function () { $("#one").prop("class","second"); }); //<input type="button" value=" addClass" id="b2"/> $("#b2").click(function () { $("#one").addClass("second"); }); //<input type="button" value="removeClass" id="b3"/> $("#b3").click(function () { $("#one").removeClass("second"); }); //<input type="button" value=" 切换样式" id="b4"/> $("#b4").click(function () { $("#one").toggleClass("second"); }); //<input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/> $("#b5").click(function () { var backgroundColor = $("#one").css("backgroundColor"); alert(backgroundColor); }); //<input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/> $("#b6").click(function () { $("#one").css("backgroundColor","green"); }); }); </script> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/> <input type="button" value=" addClass" id="b2"/> <input type="button" value="removeClass" id="b3"/> <input type="button" value=" 切换样式" id="b4"/> <input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/> <input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/> <h1>有一种奇迹叫坚持</h1> <h2>自信源于努力</h2> <div id="one"> id为one </div> <div id="two" class="mini" > id为two class是 mini <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div> </div> <span class="spanone"> span </span> </body> </html>
