jQuery 是一个简洁而快速的 JavaScript 库, 可用于简化事件处理, html 文档遍历, Ajax 交互和动画, 以便快速开发网站. jQuery 简化了 HTML 的客户端脚本, 从而简化了 web 2.0 应用程序的开发.
jQuery 提供了四种表单过滤器, 分别在是否可以用, 是否选定来进行表单字段的筛选过滤.
:enabled: 选取所有可用元素
:disabled: 选取所有不可用元素
:checked: 选取所有被选中的元素, 单选和复选字段
:selected: 选取所有被选中的元素, 下拉列表
示例:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <HTML>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Untitled Document</title>
- <script type="text/javascript" src="jquery-1.7.2.js"></script>
- <script type="text/javascript">
- $(function(){
- $("#btn1").click(function(){
- // 使所有的可用的单行文本框的 value 值变为 尚硅谷
- alert($(":text:enabled").val());
- $(":text:enabled").val("西游记");
- });
- $("#btn2").click(function(){
- $(":text:disabled").val("www.xiyouji.com");
- });
- $("#btn3").click(function(){
- var num =
- $(":checkbox[name='newsletter']:checked").length;
- alert(num);
- });
- $("#btn5").click(function(){
- // 实际被选择的不是 select, 而是 select 的 option 子节点
- // 所以要加一个 空格.
- //var len = $("select :selected").length
- //alert(len);
- // 因为 $("select :selected") 选择的是一个数组
- // 当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了.
- //alert($("select :selected").val());
- //jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在
- // 得到的 DOM 对象, 而不是一个 jQuery 对象
- $("select :selected").each(function(){
- alert(this.value);
- });
- });
- $("#btn4").click(function(){
- $(":checkbox[name='newsletter']:checked").each(function(){
- alert(this.value);
- });
- });
- })
- </script>
- </head>
- <body>
- <h3 > 表单对象属性过滤选择器 </h3>
- <button id="btn1"> 对表单内 可用 input 赋值操作.</button>
- <button id="btn2"> 对表单内 不可用 input 赋值操作.</button><br /><br />
- <button id="btn3"> 获取多选框选中的个数.</button>
- <button id="btn4"> 获取多选框选中的内容.</button><br /><br />
- <button id="btn5"> 获取下拉框选中的内容.</button><br /><br />
- <form id="form1" action="#">
- 可用元素: <input name="add" value="可用文本框 1"/><br>
- 不可用元素: <input name="email" disabled="true" value="不可用文本框"/><br>
- 可用元素: <input name="che" value="可用文本框 2"/><br>
- 不可用元素: <input name="name" disabled="true" 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
- <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>
- </select>
- <textarea rows=""cols=""></textarea>
- </form>
- </body>
- </HTML>
来源: http://www.css88.com/qa/jquery/15427.html