表单过滤选择器
1. 可用元素选择器
语法: :enabled 获得可用元素
2. 不可用元素选择器
语法: :disabled 获得不可用元素
3. 选中选择器
语法: :checked 获得单选/复选框选中的元素
4. 选中选择器
语法: :selected 获得下拉框选中的元素
<!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: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } #job{ margin: 20px; } #edu{ margin-top:-70px; } </style> <script type="text/javascript"> $(function () { //<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/> $("#b1").click(function () { $("input[type='text']:enabled").val("aaa"); }); //<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/> $("#b2").click(function () { $("input[type='text']:disabled").val("aaa"); }); //<input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/> $("#b3").click(function () { var length = $("input[type='checkbox']:checked").length; alert(length); }); //<input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/> $("#b4").click(function () { var length = $("select>option:selected").length; alert(length); }); }); </script> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/> <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/> <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/> <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/> <br><br> <input type="text" value="不可用值1" disabled="disabled"> <input type="text" value="可用值1" > <input type="text" value="不可用值2" disabled="disabled"> <input type="text" value="可用值2" > <br><br> <input type="checkbox" name="items" value="美容" >美容 <input type="checkbox" name="items" value="IT" >IT <input type="checkbox" name="items" value="金融" >金融 <input type="checkbox" name="items" value="管理" >管理 <br><br> <input type="radio" name="sex" value="男" >男 <input type="radio" name="sex" value="女" >女 <br><br> <select name="job" id="job" multiple="multiple" size=4> <option>程序员</option> <option>中级程序员</option> <option>高级程序员</option> <option>系统分析师</option> </select> <select name="edu" id="edu"> <option>本科</option> <option>博士</option> <option>硕士</option> <option>大专</option> </select> <br/> <div id="two" class="mini" > id为two class是 mini div <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> </body> </html>
DOM内容操作
内容操作:
1、html():获取/设置元素的标签体内容 <a><font>内容</font></a> ——> <font>内容</font>
2、text():获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> ——> 内容
3、val():获取/设置元素的value属性值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.3.1.min.js"></script> <script> $(function () { // 获取myinput 的value值 var value = $("#myinput").val(); alert(value); //设置value属性值 $("#myinput").val("李四"); // 获取mydiv的标签体内容 var html = $("#mydiv").html(); alert(html); //设置html属性值 $("#mydiv").html("<p>aaaa</p>"); // 获取mydiv文本内容 var text = $("#mydiv").text(); alert(text); //设置text属性值 $("#mydiv").text("bbbb"); }); </script> </head> <body> <input id="myinput" type="text" name="username" value="张三" /><br /> <div id="mydiv"><p><a href="#">标题标签</a></p></div> </body> </html>
标签:JQuery,DOM,text,元素,选择器,length,font,class From: https://www.cnblogs.com/xjw12345/p/16601238.html