JQuery_DOM通用属性操作和JQuery_DOM class属性操作
JQuery_DOM通用属性操作
1.attr(): 获取/设置元素的属性
2.removeAttr() ：删除属性
3.prop()：获取/设置元素的属性
4.removeProp()：删除属性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>获取属性</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="../js/jquery-3.3.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); }); </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>
JQuery_DOM class属性操作
addClass():添加class属性值
removeClass()：删除class属性值
toggleClass()：切换class属性
toggleClass("one")：
判断如果元素对象上存在class="one"，则将属性值one删除掉。如果元素对象上不存在class="one"，则添加
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>样式操作</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="../js/jquery-3.3.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 colors = $("#one").css("backgroundColor"); alert(colors) }); //<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>
