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 相关文章推荐
js清理Word格式示例代码
Feb 13 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
angular directive的简单使用总结
May 24 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
详解如何使用Node.js实现热重载页面
May 06 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
php 删除cookie和浏览器重定向
2009/03/16 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
jquery 双色表格实现代码
2009/12/08 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
vue插件实现v-model功能
2018/09/10 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
简述Python中的面向对象编程的概念
2015/04/27 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
简单的Python人脸识别系统
2020/07/14 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
Java编程面试题
2016/04/04 面试题
玩具公司的创业计划书
2013/12/31 职场文书
大学生实习思想汇报
2014/01/12 职场文书
员工薪酬福利制度
2014/01/17 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
python 命令行传参方法总结
2021/05/25 Python
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL