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 相关文章推荐
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
React组件的三种写法总结
Jan 12 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
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
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
php 全文搜索和替换的实现代码
2008/07/29 PHP
php escape URL编码
2008/12/10 PHP
PHP Socket 编程
2010/04/09 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
神经网络python源码分享
2017/12/15 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
基于keras中的回调函数用法说明
2020/06/17 Python
Python3开发环境搭建详细教程
2020/06/18 Python
is_file和file_exists效率比较
2021/03/14 PHP
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
异步传递消息系统的作用
2016/05/01 面试题
电子商务专业学生的自我鉴定
2013/11/28 职场文书
升国旗仪式主持词
2014/03/19 职场文书
汽车专业求职信
2014/06/05 职场文书
绿色环保标语
2014/06/12 职场文书
无犯罪记录证明
2014/09/19 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
地道战观后感500字
2015/06/04 职场文书
工作年限证明范本
2015/06/15 职场文书