jQuery Selectors(选择器)的使用(九、表单对象属性篇)

网络编程 2024/11/16 佚名

3 2 1

本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。
本篇讲解：:enabled,:disabled,:checked,:selected的用法。
您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com
由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！
运行后，需要刷新下，加载下jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jQuery-Selectors-9</title>  <style type="text/css"> .div {     width:95%;     margin-left:15px;     margin-top:15px;     margin-right:15px;     padding-left:5px;     padding-top:5px;     padding-bottom:5px;     background-color:#ccc;     border:#999 1px solid;     line-height:30px;     font-size:13px;     font-family:微软雅黑; } .blue{color:Blue;} .green{color:Green;} .button{border:green 1px solid;width:100px;} .xiaobiao{ font-weight:bold;} .red_test{background-color:red; color:White; width:300px; height:30px;} .li_test{border:#000 1px solid;} </style> </head> <body>  jQuery-Selectors(选择器)的使用(九、表单对象属性篇) 本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及很深，我的学习方法：先入门，后进阶！ 本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。 本篇讲解：:enabled,:disabled,:checked,:selected的用法。 您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com  由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！ 您可以到jQuery官网来学习更多的有关jQuery知识。 <strong>版权所有：code-cat 博客:http://www.cnblogs.com/bynet 转载请保留原作者、出处和版权信息！</strong>   在IE6、IE7、火狐下测试过了，效果都能实现。   1. :enabled用法 定义：匹配所有可用元素 返回值：Array&lt;Element> 实例：将ID为"div_a1"的DIV中所有可用的input元素的背景色改为红色 代码： $("#div_a1 input:enabled").css("background-color","red"); //点击按钮一将执行这句代码  DIV ID="div_a1"  span ID="span_a1"  <input type="text" value="input text" /> <input type="text" value="input text 不可用" disabled="disabled" /> <input type="text" value="input text" /> <input type="password" value="123123" /> <input type="reset" value="reset 不可用" disabled="disabled" /> <input type="submit" value="submit" /> <textarea rows="2" cols="10">texteara<"button" id="btn_1" value="按钮一" class="button" />     2. :disabled用法 定义：匹配所有不可用元素 返回值：Array&lt;Element> 实例：将ID为"div_b1"的DIV中所有不可用的input元素的背景色改为红色 代码： $("#div_b1 input:disabled").css("background-color","red"); //点击按钮二将执行这句代码  DIV ID="div_b1"  span ID="span_b1"  <input type="text" value="input text" /> <input type="text" value="input text 不可用" disabled="disabled" /> <input type="text" value="input text" /> <input type="password" value="123123" /> <input type="reset" value="reset 不可用" disabled="disabled" /> <input type="submit" value="submit" /> <textarea rows="2" cols="10">texteara<"button" id="btn_2" value="按钮二" class="button" />     3. :checked用法 定义：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) 返回值：Array&lt;Element> 实例：将ID为"div_c1"的DIV中所有包含选中状态复选框的元素背景色改为红色 代码： $("#div_c1 :has(input[type='checkbox']:checked)").css("background-color","red"); //点击按钮三将执行这句代码  DIV ID="div_c1"  span ID="span_c1" <input type="checkbox" checked="checked" />   DIV id="div_c1_1" <input type="checkbox" />   DIV id="div_c1_2" <input type="checkbox" checked="checked" />   DIV id="div_c1_3" <input type="checkbox" />   DIV id="div_c1_4" <input type="radio" checked="checked" />  <input type="reset" value="reset 不可用" disabled="disabled" /> <input type="submit" value="submit" /> <input type="button" id="btn_3" value="按钮三" class="button" />   <strong>注意：:has(selector)用法参见内容篇&可见性篇第3点， [type='checkbox']用法参见属性篇第2点。</strong>   4. :selected用法 定义：匹配所有选中的option元素 返回值：Array&lt;Element> 实例：将ID为"div_d1"的DIV中所有select元素中选中的option元素的text值写入div_d1_1中 代码： var SelectedText=$("#div_d1 :selected"); //点击按钮四将执行这句代码  DIV ID="div_d1"  span ID="span_d1" <select> <option>span option1</option> <option selected="selected">span option2</option> <option>span option3</option> </select>  <select> <option>div select1</option> <option selected="selected">div C#</option> <option>div VB</option> <option>div jQuery</option> </select>&nbsp; <select> <option>div select2</option> <option>div Apple</option> <option>div Inter</option> <option selected="selected">div Google</option> </select>&nbsp; <select> <option>div select3</option> <option>div U.S.A.</option> <option>div U.K.</option> <option selected="selected">div China</option> </select>  DIV id="div_d1_1"  <input type="button" id="btn_4" value="按钮四" class="button" />   <strong>注意：append(content)指向某元素内部追加content，在以后的章节中会有讲解，敬请关注。</strong>  </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
文件打包下载http://xiazai.jb51.net/200912/yuanma/jQuery-Selectors-9-bynet.rar

jQuery,Selectors,表单对象属性

标签：

jQuery,Selectors,表单对象属性

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

桃源资源网 Design By www.nqtax.com

评论“jQuery Selectors(选择器)的使用(九、表单对象属性篇)”

jQuery Selectors(选择器)的使用(九、表单对象属性篇)

暂无“jQuery Selectors(选择器)的使用(九、表单对象属性篇)”评论...

www.nqtax.com 桃源资源网

19,905影音资源

44,626技术资源

1,817软件资源

378,645站长资源

jQuery Selectors(选择器)的使用(九、表单对象属性篇)

jQuery,Selectors,表单对象属性

javascript 数组使用方法汇总

用jquery ajax获取网站Alexa排名的代码

评论“jQuery Selectors(选择器)的使用(九、表单对象属性篇)”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

jQuery Selectors(选择器)的使用(九、表单对象属性篇)

jQuery,Selectors,表单对象属性

javascript 数组使用方法汇总

用jquery ajax获取网站Alexa排名的代码

评论“jQuery Selectors(选择器)的使用(九、表单对象属性篇)”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存