jQuery选择器之表单对象属性过滤选择器Demo-阿里云开发者社区

开发者社区> 技术小哥哥> 正文

jQuery选择器之表单对象属性过滤选择器Demo

简介:
+关注继续查看

测试代码:

08-表单对象属性过滤选择器.html

复制代码
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5  <title>08-表单对象属性过滤选择器.html</title>
  6  <!--   引入jQuery -->
  7  <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
  8  <script src="./script/assist.js" type="text/javascript"></script>
  9  <link rel="stylesheet" type="text/css" href="./css/style.css" />  
 10  
 11   <script type="text/javascript">
 12       $(document).ready(function(){
 13           //<button id="btn1">对表单内 可用input 赋值操作.</button>
 14           $("#btn1").click(function(){
 15                   $("input:enabled").val("李冠男")
 16           });
 17           
 18           //<button id="btn2">对表单内 不可用input 赋值操作.</button>
 19           $("#btn2").click(function(){
 20                   $("input:disabled").val("小强");
 21           });
 22           
 23           //<button id="btn3">获取多选框选中的个数.</button>
 24           $("#btn3").click(function(){
 25               alert( $("input:checked").length)
 26                 
 27           });
 28           
 29           //<button id="btn4">获取下拉框选中的内容.</button>
 30           $("#btn4").click(function(){
 31                   /**
 32                    * 1:要遍历的元素的角标
 33                    * 
 34                    * 2:遍历出来的对应的dom
 35                    */
 36                   $("select>option:selected").each(function(index,docxml){
 37                     //dom 不熟悉
 38                     //alert(docxml.value);
 39                      alert($(docxml).text());
 40                       
 41                 })
 42           });
 43           
 44     });
 45   </script>
 46 
 47 </head>
 48 <body>
 49   <h3> 表单对象属性过滤选择器.</h3>
 50    <form id="form1" action="#">
 51     <button type="reset">重置所有表单元素</button>
 52     <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>    
 53     <br /><br />
 54   <button id="btn1">对表单内 可用input 赋值操作.</button>
 55   <button id="btn2">对表单内 不可用input 赋值操作.</button>
 56   <button id="btn3">获取多选框选中的个数.</button>
 57   <button id="btn4">获取下拉框选中的内容.</button>
 58  
 59 
 60  
 61   <br /><br />
 62     
 63      可用元素:<input name="add" value="可用文本框" />  <br/>
 64      不可用元素:<input name="email" disabled="disabled" value="不可用文本框"/><br/>
 65      可用元素: <input name="che" value="可用文本框" /><br/>
 66      不可用元素:<input name="name" disabled="disabled"  value="不可用文本框"/><br/>
 67      <br/>
 68      多选框:<br/>
 69      <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
 70      <input type="checkbox" name="newsletter" value="test2" />test2
 71      <input type="checkbox" name="newsletter" value="test3" />test3
 72      <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
 73      <input type="checkbox" name="newsletter" value="test5" />test5
 74      <div></div>
 75 
 76      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 77      下拉列表1:<br/>
 78     <select name="test" multiple="multiple" style="height:100px">
 79         <option>浙江</option>
 80         <option selected="selected" value="湖南">hunan</option>
 81         <option>北京</option>
 82         <option selected="selected" value="天津">tianj</option>
 83         <option>广州</option>
 84         <option>湖北</option>
 85     </select>
 86     
 87      <br/><br/>
 88      下拉列表2:<br/>
 89      <select name="test2" >
 90     <option>浙江</option>
 91     <option>湖南</option>
 92     <option selected="selected" value="北京">beijing</option>
 93     <option>天津</option>
 94     <option >广州</option>
 95     <option>湖北</option>
 96     </select>
 97     <br/><br/>
 98 
 99      <div></div>
100   </form>
101 
102 
103 
104 <!-- Resources from http://down.liehuo.net -->
105 </body>
106 </html>
复制代码

 


本文转自SummerChill博客园博客,原文链接:http://www.cnblogs.com/DreamDrive/p/5780082.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
全面入门jQuery最佳实践(二)-jQuery的属性与样式
1 .attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。如:在img元素中,src就是元素的特性,用来标记图片的地址。
966 0
性能测试工具选择策略——仿真度对比测评分析报告
基于 AI 的软件自动化测试工具的特征介绍
692 0
javaWeb初识 ServletContext全局对象,过滤器,监听器
ServletContext全局对象: import javax.servlet.ServletConfig; import javax.servlet.ServletContext; import javax.
679 0
jQuery EasyUI API 中文文档 - 属性表格(PropertyGrid)
PropertyGrid 属性表格 扩展自 $.fn.datagrid.defaults,用 $.fn.propertygrid.defaults 重写了 defaults。 依赖 datagrid 用法 1. 1. $('#pg').propertygrid({   2.     url:'propertygrid_data.json',   3.     showGroup:true 4. });  特性 其特性扩展自 datagrid,下列是为 propertygrid 增加的特性。
842 0
可显示Android设备选择列表,并进入指定Android设备Console的Shell脚本
      如果PC上连接多部Android设备(包括Android模拟器),在进入Console时还需要使用adb -s deviceid shell。
1012 0
1970
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载