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 相关文章推荐
JavaScript的面向对象(二)
Nov 09 Javascript
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
JS中Attr的用法详解
Oct 09 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
React 高阶组件HOC用法归纳
Jun 13 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
NO3第三帝国留言簿制作过程
2006/10/09 PHP
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
python线程池的实现实例
2013/11/18 Python
python实现excel读写数据
2021/03/02 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
详解Python3 基本数据类型
2019/04/19 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
Python tkinter实现日期选择器
2021/02/22 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
买房子个人收入证明
2014/01/16 职场文书
酒店端午节促销方案
2014/02/18 职场文书
团委竞选演讲稿
2014/04/24 职场文书
校园安全标语
2014/06/07 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
孝女彩金观后感
2015/06/10 职场文书
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android