1. 文本操作 1.1 text()// 取得所有匹配元素的内容，jQuery对象.text()。DOM对象.innerText() text(val)// 设置所有匹配元素的内容 <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" 1.2 html()// 取得所有元素的html内容，jQuery对象.html()。DOM对象.innerHTML() 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([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="button" value="提交"> </div> </form> <script src="jquery-3.4.1.min.js"></script> <script> $(':button').click(function () { var $d1Eles = $('#d1'); var $d2Eles = $('#d2'); if ($d1Eles.val().length === 0) { $d1Eles.siblings('.error').text('账号不能为空') } if ($d2Eles.val().length === 0) { $d2Eles.siblings('.error').text('密码不能为空') } }); </script> </body> </html>
day79-jQuery-文本操作
猜你喜欢
转载自www.cnblogs.com/python-daxiong/p/12460561.html
今日推荐
周排行