1、jQuery的表单对象属性过滤选择器
2、代码
<!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>jQuery的表单对象属性过滤选择器</title> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ //1.对表单内可用input赋值操作 $("#btn1").click(function(){ //使所有的可用的单行文本框的value值变为尚硅谷 //alert($(":text:enabled").val()); $(":text:enabled").val("尚硅谷"); }); //2.对表单内不可用input赋值操作 $("#btn2").click(function(){ $(":text:disabled").val("www.atguigu.com"); }); //3.获取多选框选中的个数 $("#btn3").click(function(){ var num = $(":checkbox[name='newsletter']:checked").length; alert(num); }); //4.获取多选框选中的内容 $("#btn4").click(function(){ var cont = ""; $(":checkbox[name='newsletter']:checked").each(function(){ cont += this.value + " "; }); alert(cont); }); //5.获取下拉框选中的内容 $("#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 对象 var cont = ""; $("select :selected").each(function(){ cont += this.value + " "; }); alert(cont); }); }) </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> <option>天津</option> <option>广州</option> <option>湖北</option> </select><br> <textarea rows="" cols=""></textarea> </form> </body> </html>
3、原始页面
4、案例1
5、案例2
6、案例3
7、案例4
8、案例5
相关推荐
主要介绍了jquery表单对象属性过滤选择器,实例分析了jQuery选择器的相关使用技巧,需要的朋友可以参考下
尚硅谷_佟刚_jQuery_表单元素过滤选择器【】11.尚硅谷_佟刚_jQuery_第一天小结【】12.尚硅谷_佟刚_jQuery_选择器的练习【】13.尚硅谷_佟刚_jQuery_创建节点及插入节点【】14.尚硅谷_ 资源太大,传百度网盘了,链接在...
本文实例讲述了jQuery表单对象属性过滤选择器。分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2-11<...
日期选择器:jquery datepicker的使用 日期选择器:jquery datepicker的使用 日期选择器:jquery datepicker的使用
尚硅谷关于jQuery学习的教学课件,有需要的可以下载参考(*^▽^*)
尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程
本文实例讲述了jQuery表单域属性过滤器用法。分享给大家供大家参考。具体分析如下: 表单内包含各种各样的表单域,使用表单域属性选择器可以很好的获取已被选中的单选按钮,复选框以及列表项,也可以根据是否可用从...
看完“最全面的jQuery基础知识”文件包,你就能详细了解jQuery的代码规则。 文件包更是你进行jQuery开发的参考手册。 ... ...6、表单对象属性过滤选择器 //不用加双引号的选择器 $(document) $(this)
jquery表单验证框架:jquery.validate.zip 附:中文API 文档
按照过滤规则的不同,我们通常把jQuery过滤选择器分为:基本过滤、属性过滤、内容过滤、子元素过滤、表单对象属性过滤、可见性过滤等。今天我们主要学习一下其中的“基本过滤选择器”。 一、:first 选
jquery缩写 4:基本选择器1 5:基本选择器2 6:基本选择器3 7:基本选择器4 8:层次选择器1 9:层次选择器2 10:层次选择器3 11:层次选择器4 12:过滤选择器1 13:过滤选择器2 14:过滤选择器3 15:过滤选择器4 16:过滤选择器5 ...
第十节:jQuery速成 - 表单对象的获取 第十一节:jQuery速成 - 元素属性的设置与移除 第二章:进阶篇 - 对象的筛选 第十二节:jQuery速成 - 过滤 第十三节:jQuery速成 - 查找 第十四节:jQuery速成 - 串联 第三章:...
简单的JQuery表单过滤器演示,对初学者应该有帮组!
jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 jQuery 理念: 写得少, 做得多....强大的选择器 出色的 DOM 操作的封装 可靠的事件处理机制 完善的 Ajax 出色的浏览器兼容性 链式操作方式 ……
其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种 –> <title>使用jQuery基本过滤选择器</title> &...
主要介绍了JQuery中属性过滤选择器用法,实例分析了jQuery属性过滤选择器的相关使用技巧,需要的朋友可以参考下
jQuery第4天知识点:jQuery节点操作、jQuery特殊属性操作、jQuery事件机制.zip
jQuery 3.1 标准课程第二章 选择器表单对象属性选择器