1. 文本操作 1.1 注意DOM对象.innerText是查找内容，DOM对象.innerText=val是设置内容。innerText不是函数。 jQuery对象.text() // 获取内容，注意text()是函数 jQuery对象.text(val) // 设置内容，因为text()是函数，所以要在()里面填写要设置的内容。 <div id="d1"> <div>divdiv</div> <a href="">aa</a> <h1>hihi</h1> </div> $('#d1').text(); //结果： " divdiv aa hihi " $('#d1').text('asdf'); //结果是对象Object [ div#d1 ]。$('#d1').text();//结果是"asdf" $('#d1').text(''); //清空文本
1.2 注意DOM对象.innerHTML是查找HTML内容，DOM对象.innerHTML=val是设置HTML内容。innerHTML不是函数。 jQuery对象.html() // 取得所有元素的html内容 jQuery对象.html(val) // 设置所有元素的html内容 $('#d1').html(); //结果： " <div>divdiv</div> <a href="">aa</a> <h1>hihi</h1> " $('#d1').html('<p>p标签</p>'); //结果是Object [ div#d1 ] $('#d1').html(); //"<p>p标签</p>" 1.3 值： val() // 取得第一个匹配元素的当前值 val(val) // 设置所有匹配元素的值。val(''); //清空值 val([val1, val2]) // 设置多选的checkbox、多选select的值 示例： <input type="checkbox" value="basketball" name="hobby">篮球 <input type="checkbox" value="football" name="hobby">足球 <label for="c1">女</label> <input type="radio" name="gender" id="c1" value="0"> <label for="c2">男</label> <input type="radio" name="gender" id="c2" value="1"> <select multiple id="s1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> 获取值： 注意：checkbox 和 radio需要加上:checked才能获取选择的值。否则，只能默认获取第一个值。 $("input[name='gender']:checked").val() //结果是"0" select选择了值之后，通过.val()就可以获取当前值。如果不选择，.val()获取的是第一个值。 $('#s1').val(); //结果是"1" 设置值： $("[name='hobby']").val(['basketball', 'football']); $("#s1").val(["1", "2"]) 示例：登录校验： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>登录校验</title> <style> .error { color: red; } </style> </head> <body> <form action=""> <div> <label for="d1">账号</label> <input type="text" id="d1" name="username"> <span class="error"></span> </div> <div> <label for="d2">密码</label> <input type="password" id="d2" name="password"> <span class="error"></span> </div> <div> <input type="submit" value="提交"> </div> </form> <script src="jquery-3.4.1.min.js"></script> <script> $(':submit').click(function () { var $d1Eles = $('#d1'); var $d2Eles = $('#d2'); if ($d1Eles.val().trim().length === 0) { $d1Eles.siblings('.error').text('账号不能为空'); return false;//空，不能提交，页面就无法刷新 } if ($d2Eles.val().trim().length === 0) { $d2Eles.siblings('.error').text('密码不能为空'); return false; } }); </script> </body> </html>