jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、: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 type="text/javascript" src="js/jquery-1.11.3.js"></script><style type="text/css">body{font-family: "Microsoft YaHei"}.cGreen{background-color: #4CA902}.cPink{background-color: #ED4A9F}.cBlue{background-color: #0092E7}.cCyan{background-color: #01A6A2}.cYellow{background-color: #DCA112}.cRed{background-color: #B7103B}.cPurple{background-color: #792F7C}.cBlack{background-color: #110F10}.hide{display: none;}</style><script type="text/javascript">/* 所谓表单对象属性过滤选择器：就是过滤表单对象的属性，例如：:enabled：选取所有可用元素。<input name="id">一类的普通input标签；就是可用的。:disabled：选取所有不可用的元素。<input name="email" disabled="disabled" />被强制声明为不可用的input标签。:checked：选取所有被选中的元素框。input:checked：input所有type为type="checkbox"；并且已经被选中：checked="checked":selected：选取所有被选中的选项列表。<select><option value="1">Flowers</option><option value="2" selected="selected">Gardens</option><option value="3">Trees</option></select>|<option value="2" selected="selected">Gardens</option>*/$(document).ready(function() {// <input type="button" id="btn1" value=":enabled选取所有可用的单行文本input元素">/* 注意这里是过滤两次，才行！先从所有中过滤出text纯文本的单行框:text；再从其中过滤出所有的可用的enabled的元素。*/$("#btn1").click(function() {// 首先通过表单过滤选择，选择出type为text的input标签console.log($(":text:enabled"));$(":text:enabled").addClass("cBlack");});// <input type="button" id="btn2" value=":disabled选取所有不可用的单行文本input元素">/* 注意这里是过滤两次，才行！先从所有中过滤出text纯文本的单行框:text；再从其中过滤出所有的可用的disabled的元素。disabled其实很像readonly的元素。*/$("#btn2").click(function() {// 首先通过表单过滤选择，选择出type为text的input标签console.log($(":text:disabled"));$(":text:disabled").addClass("cBlack");});// <input type="button" id="btn3" value=":checked请先选择，然后选取所有被选中的单选、多选元素">$("#btn3").click(function() {// 选中全篇所有checked。// console.log($(":checked"));// $(":checked").addClass("cBlack");// 通过基本选择出input然后通过表单对象属性过滤，只选中为input的checked。$("input:checked").each(function(index, obj) {// obj为DOM对象console.log("index = "+index+", 值为："+$(obj).val());});});// <input type="button" id="btn4" value="设置 中国 被选中">/* 怎么设置一个值被选中呢？如果是radio(单选框)，则只需要把radio的值设置为，我们需要选中的属性就行了！*/$("#btn4").click(function() {/* 注意：这里的值要设置为[]数组的形式；但是因为是radio单选框的原因，只能放一个值。$(":radio[name='country']").val(["chn", "usa"]);如果设置多个的话，单选框会选中数组中的最后一个值。<因为这里只有一个radio，所以可以使用:radio全篇查询。但是如果当前页面有多个单选框的话，可能就要用div来分块，通过#div1:radio来获得了！>*/// 首先通过表单对象属性过滤选择出radio$(":radio[name='country']").val(["chn"]);                });// <input type="button" id="btn5" value="设置第一个select选中  编译原理">/* 总结一下html中的三种选中框：标准单选框：input type="radio" name="" value="" 同一组name相同标准复选框：input type="checkbox" name="" value="" 同一组name相同select框：单选形式<select><option></option><option></option>... ...</select>复选形式<select multiple="multiple"><option></option><option></option>... ...</select>          select框没有特殊声明：multiple="multiple"的时候，都是单选框，特殊声明了之后才是复选框。选择都是[]，但是select因为可以声明多选，单选。有区别所以其中单选的时候，[]可以省略，但是建议保留[]方便记忆。标准单选框，复选框都是选中都是：checked。select框选中是：selected。*/$("#btn5").click(function() {// 首先先获取第一个select，因为整篇有多个select。// $("select:first").val("编译原理");// 首先通过基本选择出select$("select:first").val(["编译原理"]);});// <input type="button" id="btn6" value="设置第二个select选中  软件工程和数据库原理">$("#btn6").click(function() {// 整篇只有两个select，选择最后一个select// 首先通过基本选择出select               $("select:last").val(["软件工程", "数据库原理"]);});// <input type="button" id="btn7" value="选取所有没有被选中的单选、多选元素">$("#btn7").click(function() {// 获取没有被选中的单选、多选选项// 首先通过表单对象属性过滤选择出radio，通过表单对象属性过滤选择出checkbox$(":radio:not(:checked), :checkbox:not(:checked)").each(function(i, obj) {console.log($(this).val());});});// <input type="button" id="btn8" value=":selected选取所有被选中的select下拉列表的option选项元素">$("#btn8").click(function() {// 因为是select下嵌套option，所以要后代选择或者使用子元素选择！// 首先通过基本选择出select，再通过层级选择出option，再通过基本过滤选择not()，再通过表单对象属性过滤选择出:checked$("select option:not(:selected)").each(function(i, obj) {console.log($(obj).val());});});});</script></head><body><input type="text" name="text1" value="可用单行文本输入框"><input type="text" name="text2" value="不可用单行文本输入框" disabled="disabled"><select><option>软件工程</option><option>编译原理</option><option>数据库原理</option></select><select multiple="multiple"><option>软件工程</option><option>编译原理</option><option>数据库原理</option></select><br><br><input type="radio" name="country" value="chn">中国<input type="radio" name="country" value="usa">美国&nbsp;&nbsp;<input type="checkbox" name="language" value="Java">Java<input type="checkbox" name="language" value="IOS">IOS<input type="checkbox" name="language" value="Android">Android<br><br><hr><input type="button" id="btn1" value=":enabled选取所有可用的单行文本input元素"><input type="button" id="btn2" value=":disabled选取所有不可用的单行文本input元素"><input type="button" id="btn3" value=":checked请先选择，然后选取所有被选中的单选、多选元素"><input type="button" id="btn4" value="设置 中国 被选中"><input type="button" id="btn5" value="设置第一个select选中  编译原理"><input type="button" id="btn6" value="设置第二个select选中  软件工程和数据库原理"><input type="button" id="btn7" value="选取所有没有被选中的单选、多选元素"><input type="button" id="btn8" value=":selected选取所有被选中的select下拉列表的option选项元素"></body>
</html>

转载于:https://www.cnblogs.com/mzywucai/p/11053378.html

jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected...相关推荐

jQuery表单对象属性过滤选择器
jQuery表单对象属性过滤选择器 <div id="p1" attr="p1"><input type="text" i ...
jquery的选择器之-表单对象属性过滤选择器
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html><head><meta charset= ...
jquery表单对象属性选择器:enabled、:disabled、:checked、:selected
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery表单对象属性选择器 jquery表单对象属性选择器,包括:enabled.:disabled.:checked.:s ...
jquery属性过滤选择器[attr=value]、[attr!=value]、[attr^=value]、[attr$=value]、[attr*=value]、[attr|=value]
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery属性过滤选择器 jquery属性过滤选择器,包括[attr].[attr=value].[attr!=value]. ...
jQuery前端开发学习指南(11)——jQuery属性过滤选择器
版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 属性过滤选择器概述属性过滤选择器用于根据元素的属性来匹配元素. [attribute] 匹配 ...
Jquery选择器之可见性选择器、属性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素,可见性选择器介绍如下在可见性选择器中,需要注意选择器:hidden,他不仅包括样式属性display为"none", ...
jQuery属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素. [attribute] 选取用次属性的元素 [attribute=value] 选取属性值为value的元素 [attribute ...
黑马day16 jqueryamp;属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取对应的元素 1.[attribute] 使用方法: $("div[id]") ; 返回值集合元素说明:匹配包括给定属性的元素. ...
抓取html表单验证码,如何在jquery中利用表单获取短信验证码
如何在jquery中利用表单获取短信验证码发布时间:2021-02-18 15:42:54 来源:亿速云阅读:88 作者:Leah 这期内容当中小编将会给大家带来有关如何在jquery中利用表单获 ...

jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected...

jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected...相关推荐

最新文章

热门文章