1、DOM操作
1.1 操作内容
| 方法 | 描述 |
| text() | 获取/设置元素的标签体纯文本内容 |
| html() | 获取/设置元素的标签体超文本内容 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>操作内容</title> <style> div{ width: 200px; height: 50px; border: 1px solid red; margin: 5px; } </style> <script src="js/jquery-3.4.1.js"></script> <script> $(function(){ $("#d1").html("<a href='#'>链接</a>"); $("#d2").text("<a href='#'>链接</a>") console.log($("#d3").html()); console.log($("#d3").text()); }); </script> </head> <body> <div id="d1"></div> <div id="d2"></div> <div id="d3"><a href="">111</a></div> <div id="d4"><a href="">111</a></div> </body> </html>
1.2 操作属性
| 方法 | 描述 | 对比 |
| val() | 获取/设置元素的value属性值 | 相当于：js对象.value |
| attr() | 获取/设置元素的属性 | 相当于：js对象.setAttribute() / js对象.getAttribute() |
| removeAttr() | 删除属性 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>操作属性</title> <script src="js/jquery-3.4.1.js"></script> <script> $(function() { // 文本框value属性 console.log($("#username").val()); console.log($("#username").attr('value')); // 添加属性--获取属性 $("#username").attr("class", "user"); console.log($("#username").attr("class")); // 修改属性 $("#username").attr("class", "u"); console.log($("#username").attr("class")); // 删除属性 $("#username").removeAttr("class"); console.log($("#username").attr("class")); }); </script> </head> <body> <form action="#" method="get"> 姓名 <input type="text" name="username" id="username" value="德玛西亚" /> <br /> 爱好 <input id="hobby" type="checkbox" name="hobby" value="perm" checked="checked">烫头<br /> <input type="reset" value="清空按钮" /> <input type="submit" value="提交按钮" /><br /> </form> </body> </html>
1.3 操作样式
| 方法 | 描述 |
| css() | 获取/设置样式 |
| addClass() | 添加class属性值 |
| removeClass() | 删除class属性值 |
| toggleClass() | 切换class属性，有则删除，没有则添加 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>操作样式</title> <script src="js/jquery-3.4.1.js"></script> <style> .red{ color: red; } .blue{ color: blue; } .pink{ color: hotpink; } </style> <script> $(function(){ // 设置样式 $("ul li").css("background-color","aqua") // 添加class属性 $("li:last").addClass("blue"); // 删除class属性 $("li:first").removeClass(); // 切换属性 $("li").toggleClass("pink"); }); </script> </head> <body> <ul> <li class="red">1</li> <li>2</li> <li class="pink">3</li> <li>4</li> <li>5</li> </ul> </body> </html>
1.4 操作元素(节点操作)
| 方法 | 描述 |
| append() | 在父标签中将子标签放在最后一个位置 |
| prepend() | 在父标签中将子标签放在第一个位置 |
| appendTo() | 例如：A.appendTo(B)，将A追加到B元素后 |
| prependTo() | 例如：A.prependTo(B)，将A添加到B元素前 |
| after() | 在该元素后面添加 |
| before() | 在改元素前面添加 |
| wrap() | 给该元素添加父元素 |
| unwrap() | 去掉该元素的父元素 |
| empty() | 清空子元素 |
| remove() | 删除自己 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>操作元素</title> <script src="js/jquery-3.4.1.js"></script> <script> $(function(){ // append() $("ul").append("<li>666</li>"); // prepend() $("ul").prepend("<li>000</li>"); // appendTo() $("#li3").appendTo("#li1") // prependTo() $("#li5").prependTo("#li1") // after() $("ul").after("<div id='cls1'>777</div>") // before() $("ul").before("<div><span>-1-1-1</span></div>") // wrap() $("#cls1").wrap("<div class='cls'></div>") // unwrap() $("div span").unwrap() // empty() $("ul").empty() // remove() $("ul").remove() }); </script> </head> <body> <ul> <li id="li1">111</li> <li>222</li> <li id="li3">333</li> <li>444</li> <li id="li5">555</li> </ul> </body> </html>
2、事件绑定
jQuery的事件与js的事件的功能和作用一样，只是在使用语法上稍微有些差异。
2.1 jQ事件绑定语法
jQ对象.事件函数(function(){})
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQ事件绑定</title> <script src="js/jquery-3.4.1.js"></script> <script> $(function(){ $(".btn").click(function(){ let vl = $(this).val(); console.log(vl) }) }); </script> </head> <body> <input type="button" value="按钮1" class="btn"> <br> <input type="button" value="按钮2" class="btn"> <br> </body> </html>
2.2 常见事件
2.2.1 点击事件
| 事件 | 描述 |
| click() | 单击事件 |
| dblclick() | 双击事件 |
2.2.2 焦点事件
| 事件 | 描述 |
| blur() | 失去焦点 |
| focus() | 元素获得焦点 |
2.2.3 鼠标事件
| 事件 | 描述 |
| mousedown() | 鼠标按钮被按下 |
| mouseup() | 鼠标按键被松开 |
| mousemove() | 鼠标被移动 |
| mouseover() | 鼠标移到某元素之上 |
| mouseout() | 鼠标从某元素移开 |
2.2.4 键盘事件
| 事件 | 描述 |
| keydown() | 某个键盘按键被按下 |
| keyup() | 某个键盘按键被松开 |
| keypress() | 某个键盘按键被按下并松开 |
2.2.5 改变事件
| 事件 | 描述 |
| change() | 域的内容被改变 |
2.2.6 表单事件
| 事件 | 描述 |
| submit() | 提交按钮被点击 |
2.2.7 事件切换
| 事件 | 描述 |
| hover([over,]out) | 鼠标移入执行over函数，鼠标移出执行out函数 |
2.3 注册验证
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册验证</title> <script src="js/jquery-3.4.1.js"></script> <script> $(function(){ let userFlag = false; let pwdFlag = false; let phoneFlag = false; $("input[name='username']").change(function(){ // console.log($(this).val()) let uname = $(this).val(); let uReg = /^[a-zA-Z].{5,7}$/; if(uReg.test(uname)){ $("#u1").html("✔").css("color","green"); userFlag = true; } else{ $("#u1").html("✘").css("color","red"); userFlag = false; } }); $("input[name='password']").change(function(){ // console.log($(this).val()) let pwd = $(this).val(); let pwdReg = /^[a-zA-Z0-9]{6,8}$/; if(pwdReg.test(pwd)){ $("#p1").html("✔").css("color","green"); pwdFlag = true; } else{ $("#p1").html("✘").css("color","red"); pwdFlag = false; } }); $("input[name='phone']").change(function(){ // console.log($(this).val()) let phone = $(this).val(); let pReg = /^[1][3-9][0-9]{9}$/; if(pReg.test(phone)){ $("#ph1").html("✔").css("color","green"); phoneFlag = true; } else{ $("#ph1").html("✘").css("color","red"); phoneFlag = false; } }); $("form").submit(function(){ if(userFlag && pwdFlag && phoneFlag){ return true; } else{ return false; } }) }); </script> </head> <body> <form action=""> 账号：<input type="text" name="username" /><span id="u1"></span><br /> 密码：<input type="password" name="password" /><span id="p1"></span><br /> 手机：<input type="tel" name="phone" /><span id="ph1"></span><br /> <input type="submit" value="注册" /> </form> </body> </html>
