jQuery表单对象属性过滤选择器实例详解


Posted in Javascript onSeptember 13, 2016

本文实例讲述了jQuery表单对象属性过滤选择器。分享给大家供大家参考,具体如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2-11</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  //重置表单元素
  $(":reset").click(function(){
    setTimeout(function() {
      countChecked();
      $("select").change();
    },0);
  });
  //对表单内 可用input 赋值操作.
  $('#btn1').click(function(){
    $("#form1 input:enabled").val("这里变化了!");
    return false;
  })
  //对表单内 不可用input 赋值操作.
  $('#btn2').click(function(){
    $("#form1 input:disabled").val("这里变化了!");
    return false;
  })
  //使用:checked选择器,来操作多选框.
  $(":checkbox").click(countChecked);
  function countChecked() {
    var n = $("input:checked").length;
    $("div").eq(0).html("<strong>有"+n+" 个被选中!</strong>");
  }
  countChecked();//进入页面就调用.
  //使用:selected选择器,来操作下拉列表.
  $("select").change(function () {
    var str = "";
    $("select :selected").each(function () {
      str += $(this).text() + ",";
    });
    $("div").eq(1).html("<strong>你选中的是:"+str+"</strong>");
  }).trigger('change');
  // trigger('change') 在这里的意思是:
  // select加载后,马上执行onchange.
  // 也可以用.change()代替.
});
//]]>
</script>
</head>
<body>
<h3> 表单对象属性过滤选择器.</h3>
<form id="form1" action="#">
  <button type="reset">重置所有表单元素</button>
  <br />
  <br />
  <button id="btn1">对表单内 可用input 赋值操作.</button>
  <button id="btn2">对表单内 不可用input 赋值操作.</button>
  <br />
  <br />
  可用元素:
  <input name="add" value="可用文本框"/>
  <br/>
  不可用元素:
  <input name="email" disabled="disabled" value="不可用文本框"/>
  <br/>
  可用元素:
  <input name="che" value="可用文本框" />
  <br/>
  不可用元素:
  <input name="name" disabled="disabled" value="不可用文本框"/>
  <br/>
  <br/>
  多选框:<br/>
  <input type="checkbox" name="newsletter" checked="checked" value="test1" />
  test1
  <input type="checkbox" name="newsletter" value="test2" />
  test2
  <input type="checkbox" name="newsletter" value="test3" />
  test3
  <input type="checkbox" name="newsletter" checked="checked" value="test4" />
  test4
  <input type="checkbox" name="newsletter" value="test5" />
  test5
  <div></div>
  <br/>
  <br/>
  下拉列表1:<br/>
  <select name="test" multiple="multiple" style="height:100px">
    <option>浙江</option>
    <option selected="selected">湖南</option>
    <option>北京</option>
    <option selected="selected">天津</option>
    <option>广东</option>
    <option>湖北</option>
  </select>
  <br/>
  <br/>
  下拉列表2:<br/>
  <select name="test2" >
    <option>浙江</option>
    <option>湖南</option>
    <option selected="selected">北京</option>
    <option>天津</option>
    <option>广州</option>
    <option>湖北</option>
  </select>
  <br/>
  <br/>
  <div></div>
</form>
</body>
</html>

运行效果图如下:

jQuery表单对象属性过滤选择器实例详解

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
详解vue后台系统登录态管理
Apr 02 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 Javascript
jQuery实现的放大镜效果示例
Sep 13 #Javascript
jQuery实现的简单拖拽功能示例
Sep 13 #Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 #Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 #Javascript
JS实现页面数据无限加载
Sep 13 #Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 #Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 #Javascript
You might like
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
Destoon模板制作简明教程
2014/06/20 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
Python中几种操作字符串的方法的介绍
2015/04/09 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
浅谈flask源码之请求过程
2018/07/26 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
团工委书记自荐书范文
2013/12/17 职场文书
个人实习生的自我评价
2014/02/16 职场文书
21岁生日感言
2014/02/27 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
大学学生会辞职信
2015/05/13 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
介绍一下28个JS常用数组方法
2022/05/06 Javascript