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

本文实例讲述了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表单操作总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 表单
, 选择器
, 过滤
对象属性
表单选择器、jquery表单选择器、form表单日期选择器、jq表单选择器、css表单选择器,以便于您获取更多的相关知识。

时间: 2024-12-24 08:36:10

jQuery表单对象属性过滤选择器实例详解_jquery的相关文章

jquery表单对象属性过滤选择器实例分析_jquery

本文实例讲述了jquery表单对象属性过滤选择器用法.分享给大家供大家参考.具体分析如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

jquery表单对象属性过滤选择器用法

  本文实例讲述了jquery表单对象属性过滤选择器用法.分享给大家供大家参考.具体分析如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

jQuery使用$.ajax进行即时验证实例详解_jquery

本文实例讲述了jQuery使用$.ajax进行即时验证的方法.分享给大家供大家参考,具体如下: 这里实现使用jQuery和一般处理程序即时验证用户录入的学号是否重复,当光标离开输入框即给出提示. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddStudent.aspx.cs" Inherits="AddStudent" %> <!DOCTY

jquery+ajax实现注册实时验证实例详解_jquery

本文实例讲述了jquery+ajax实现注册实时验证.分享给大家供大家参考,具体如下: 当我们注册一个用户时,会实时提示该用户的信息是否可用,这就是ajax的应用,很久以前就看过这个实现了,今天又看了一遍,给记录下来O(∩_∩)O哈! 先介绍下ajax中$.get,由于$.post用法和$.get大同小异就不再介绍了: 这是一个简单的 GET 请求功能以取代复杂 $.ajax .请求成功时可调用回调函数.如果需要在出错时执行函数,请使用 $.ajax. 复制代码 代码如下: $(selector

jquery表单插件Autotab使用方法详解_jquery

Autotab也是一款功能专一的表单插件,它提供了自动跳格的功能,当用户输入的字符数一旦超过已定义的最大长度,则会根据事先设置的目标自动跳转到相应元素上,省却了 用户按[Tab]键的麻烦.最典型的应用就是输入IP地址.软件激活码等地方了,我们做的web项目中也有很多地方可以用到这插件,对于提高用户体验还是很有帮助的. 使用时需要引入jquery.autotab.js,下载地址:点击进入下载页面 <html> <head> <title> New Document <

jQuery表单美化插件jqTransform使用详解_jquery

jQuery Form表单美化插件jqTransform,非常实用的jQuery插件,自动把你整个Form表单进行美化处理,包括SELECT下拉框.文本框.单选.复选框.按钮等,当然不支持input file文件选择框,这个可以参照我们之前的input file选择框美化教程进行改造,在浏览器兼容方面,兼容 ie 6+, safari 2+, firefox 2+,插件还是很不错的,使用起来也很简单,推荐学习和使用. 使用方法: 1.加载jQuery和插件 <script type="te

jQuery选择器全集详解_jquery

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率.本文配合截图.代码和简单的概括对所有jQuery选择器进行 了介绍,也列举出了一些需要注意和区分的地方. 一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(fu

SQL Server 树形表非循环递归查询的实例详解_MsSql

很多人可能想要查询整个树形表关联的内容都会通过循环递归来查...事实上在微软在SQL2005或以上版本就能用别的语法进行查询,下面是示例. --通过子节点查询父节点 WITH TREE AS( SELECT * FROM Areas WHERE id = 6 -- 要查询的子 id UNION ALL SELECT Areas.* FROM Areas, TREE WHERE TREE.PId = Areas.Id ) SELECT Area FROM TREE --通过父节点查询子节点 WIT

SQL Server 树形表非循环递归查询的实例详解

很多人可能想要查询整个树形表关联的内容都会通过循环递归来查...事实上在微软在SQL2005或以上版本就能用别的语法进行查询,下面是示例. --通过子节点查询父节点 WITH TREE AS( SELECT * FROM Areas WHERE id = 6 -- 要查询的子 id UNION ALL SELECT Areas.* FROM Areas, TREE WHERE TREE.PId = Areas.Id ) SELECT Area FROM TREE --通过父节点查询子节点 WIT