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

2020-02-21 16:00:41来源:爱站网 阅读 ()

新老客户大回馈,云服务器低至5折

表单在我们开发程序的时候是很常使用的,我们通常要根据对象属性进行匹配,接下来爱站技术频道为大家带来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表单对象属性过滤选择器实例详解已经有所了解了,学会这些技巧咱们在操作中就不怕出现失误了。


原文链接:https://js.aizhan.com/develop/JavaScript/11677.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:鼠标滑过出现预览的大图提示效果

下一篇:jQuery实现的放大镜效果示例