jQuery：DOM和CSS的操作
1 属性函数
attr( "属性" ); 获得元素的属性值
attr( "属性" , "新值" ); 修改元素的属性值
attr( 样式参数 ) ：样式参数可以写成json格式
<body> <button id="btn1">点我试试</button> <hr> <img src="img/1.jpg" title="美女大图" width="300"> <script src="js/jquery-3.4.1.min.js"></script> <script> $("#btn1").click(function(){ $("img").attr("src","img/2.jpg"); $("img").attr("title","高清无码"); $("img").attr( {width:"200",height:"200"} ); }); </script> </body>
val() ; 获得表单元素中的value值
val("x") 修改表单元素中的value值
html(); 获得元素中的内容（标签+文本）
html("x") 修改元素中的内容（标签+文本）
text(); 获得元素中的文本
text("x") 修改元素中的文本
<button>试试</button> <hr> <input id="username"> <div> <h1><i>中国加油！</i></h1> </div> <script src="js/jquery-3.4.1.min.js"></script> <script> $("button").click(function(){ //alert($("input").val()); //input框中的值 //$("input").val("哈哈哈"); //修改input框中的值 //alert( $("div").html() ); //获得div中的内容（包含标签信息） //alert( $("div").text() ); //获得div中的内容（不包含标签信息，只包含文本内容） $("div").text("祖国万岁！"); //修改div中的内容（全部内容都覆盖） }); </script>
2 样式函数
css( "属性"); 获得该属性值
css( "属性","值"); 设置属性的值
css( { json} ); 设置多个属性的值
<style> div{ width: 150px; height: 150px; background-color: #000; } </style> <body> <button>试试</button> <hr> <div></div> <script src="js/jquery-3.4.1.min.js"></script> <script> $("button").click(function(){ //var w = $("div").css("width"); // 获取css属性，width的值 //1.一个键值对 //$("div").css("background-color","pink"); //2.链式编程 //$("div").css("background- color","pink").css("borderradius","50%"); //3.json为参数 $("div").css({ opacity:"0.4", background:"orange", borderRadius:"50%" } ); }); </script> </body>
width(); 获得元素的宽度
width( number ); 修改元素的宽度
height(); 获得元素的高度
height( number ); 修改元素的高度
<style> div{ width: 150px; height: 150px; background-color: #000; } </style> <body> <button>试试</button> <hr> <div></div> <script src="js/jquery-3.4.1.min.js"></script> <script> $("button").click(function(){ var w = $("div").width(); // （无参）获取宽度 var h = $("div").height();// （无参）获取高度 // alert("宽:"+w+"px，高:"+h+"px"); $("div").width("300"); // （传参）修改宽度 $("div").height("300"); //（传参）修改高度 }); </script> </body>
3 类样式函数
addClass(); 为元素添加类样式
removeClass(); 将元素的类样式移除
toggleClass(); 样式的切换（有->无，无->有）
<style> div{ width: 100px; height: 100px; background-color: #000; } .a{ background: palevioletred; border-radius: 50%; } .b{ border:5px dashed darkcyan; opacity: 0.6; } .cn{ background: #000; color:#FFF; font-family: 字魂49号-逍遥行书; } </style> <body> <button id="btn1">试试</button> <button id="btn2">取消透明度</button> <button id="btn3">样式切换</button> <hr> <div></div> <h1>中华人民共和国，万岁！</h1> <script src="js/jquery-3.4.1.min.js"></script> <script> $("#btn1").click(function(){ // $("div").addClass("a"); $("div").addClass("a b"); }); $("#btn2").click(function(){ $("div").removeClass("b"); }); $("#btn3").click(function(){ $("h1").toggleClass("cn"); }); </script> </body>
4 节点操作
创建节点
工厂函数$()用于获取或创建节点
插入节点
插入子节点
| 语法 | 功能 |
| append(content) | $(A).append(B)表示将B追加到A中，如：$("ul").append($newNode1); |
| appendTo(content) | $(A).appendTo(B)表示把A追加到B中，如： $newNode1.appendTo("ul"); |
| prepend(content) | $(A). prepend (B)表示将B前置插入到A中，如：$("ul"). prepend ($newNode1); |
| prependTo(content) | $(A). prependTo (B)表示将A前置插入到B中，如：$newNode1. prependTo ("ul"); |
插入同辈节点
| 语法 | 功能 |
| after(content) | $(A).after (B)表示将B插入到A之后，如：$("ul").after($newNode1); |
| insertAfter(content) | $(A). insertAfter (B)表示将A插入到B之后，如： $newNode1.insertAfter("ul"); |
| before(content) | $(A). before (B)表示将B插入至A之前，如： $("ul").before($newNode1); |
| insertBefore(content) | $(A). insertBefore (B)表示将A插入到B之前，如： $newNode1.insertBefore("ul"); |
替换节点
replaceWith()
replaceAll()
复制节点
clone()
删除节点
remove()删除整个节点
empty()清空节点内容
<input> <button id="test">测试</button> <ul> <li>Java入门到跑路</li> <li>貂蝉往事</li> <li>东京热不热</li> </ul> <script src="js/jquery-3.4.1.min.js"></script> <script> $("#test").click(function(){ var bookname = $("input").val(); var newli = $("<li>"+bookname+"</li>"); //通过工厂函数，创建新的li节点 /*添加子节点*/ //$("ul").append(newli); // newli添加到ul后面 //newli.appendTo("ul"); // newli添加到ul后面 //$("ul").prepend(newli); // newli添加到ul前面 //newli.prependTo("ul"); /*添加同辈节点*/ //$("li:last").after( newli ); // newli添加到最后的li的后面 //newli.insertAfter("li:last"); //$("li:last").before(newli); //newli添加到最后的li的前面 //newli.insertBefore("li:last"); /*替换节点*/ //$("li:eq(1)").replaceWith(newli); // 将第二个li替换成newli //newli.replaceAll( "li:eq(1)" ); /*复制节点*/ //$("li:first").clone().insertAfter("li:last"); // 复制第一个li，并插入到最后一个li的后面 /*删除节点*/ //$("li:eq(1)").empty(); // 清空了节点上的文本（节点并没有消失） $("li:eq(1)").remove(); //删除节点 }); </script>
