jquery有哪四种表单过滤器?

jQuery 提供了四种表单过滤器,分别在是否可以用、是否选定来进行表单字段的筛选过滤。

名称说明解释
:enabled

匹配所有可用元素

查找所有可用的input元素:
$("input:enabled")
:disabled匹配所有不可用元素查找所有不可用的input元素:
$("input:disabled")
:checked匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)查找所有选中的复选框元素:
$("input:checked")
:selected匹配所有选中的option元素查找所有选中的选项元素:
$("select option:selected")

示例:

<!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">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>表单对象属性过滤选择器</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />  
 
  <script type="text/javascript">
      $(function(){
//          <button id="btn1">对表单内 可用input 赋值操作.</button>
          $("#btn1").click(function(){
              $("input:enabled").val("可用的");
          });
//          <button id="btn2">对表单内 不可用input 赋值操作.</button>
          $("#btn2").click(function(){
              $("input:disabled").val("不可用");
          });
//          <button id="btn3">获取多选框选中的个数.</button>
          $("#btn3").click(function(){
              var count = $("input[type='checkbox'][name='newsletter']:checked").length;
              alert(count);
          });
//              <button id="btn4">获取下拉框选中的内容.</button>
          $("#btn4").click(function(){
              //如果有value值,val()函数就获得value的值,如果没有就获得text的值
              $(":selected").each(function(){
                  var text = $(this).val();
                  alert(text);
              });
          });
      })
  </script>

</head>
<body>
  <h3> 表单对象属性过滤选择器.</h3>
    <button type="reset">重置所有表单元素</button>
    <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">
    点击下列按钮时先自动重置页面
    </label>    
    <br /><br />
  <button id="btn1">对表单内 可用input 赋值操作.</button>
  <button id="btn2">对表单内 不可用input 赋值操作.</button>
  <button id="btn3">获取多选框选中的个数.</button>
  <button id="btn4">获取下拉框选中的内容.</button>
 
  <br /><br />
    
     可用元素:<input name="add" value="可用文本框"/>  <br/>
     不可用元素:<input name="email" disabled value="不可用文本框"/><br/>
     可用元素: <input name="che" value="可用文本框" /><br/>
     不可用元素:<input name="name" 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 id="checkboxDivId"></div>

     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     下拉列表1:<br/>
    <select name="test" multiple="multiple" style="height:100px">
        <option>浙江</option>
        <option selected        <option>北京</option>
        <option selected        <option>广州</option>
        <option>湖北</option>
    </select>
    
     <br/><br/>
     下拉列表2:<br/>
     <select name="test2" >
    <option>浙江</option>
    <option>湖南</option>
    <option selected    <option>天津</option>
    <option>广州</option>
    <option>湖北</option>
    </select>
    <br/><br/>

     <div id="selectDivId"></div>



</body>
</html>
Image placeholder
前端答疑
未设置
  40人点赞

没有讨论,发表一下自己的看法吧

推荐文章
jquery表单过滤器有哪些?

jquery表单过滤器有哪些?jQuery提供了四种表单过滤器,分别在是否可以用、是否选定来进行表单字段的筛选过滤。:enabled:选取所有可用元素:disabled:选取所有不可用元素:check

jquery有几种选择器?

jquery有几种选择器?很多种,大概归纳为9种。1、基本的有id、标签、类、通配符选择器:#id element .class *2、层次选择器:ancestordescendant parent>

jquery有哪些常用事件?

jquery有哪些常用事件?1、$(document).ready()$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。它和

jquery中有哪几种类型的选择器?

jQuery选择器一、基本选择器基本选择器是jQuery中最常用也是最简单的选择器,它通过元素的id、class和标签名等来查找DOM元素。1、ID选择器#id描述:根据给定的id匹配一个元素,返回单

jquery有什么用?

一经推出便大受网站建设人员的欢迎,目前基本上已经成为主流的JavaScript语言库,很多网站开发用人单位招聘时都会要求掌握jQuery,使用jQuery不仅能够将原本需要很多JavaScript码才

jquery基本过滤选择器有哪些?

jquery基本过滤选择器:1、first()或者:first选取第一个元素//选择第一个div元素 $('div:first') $('div').first()2、last()或者:last选取最

jquery内容过滤选择器有哪些?

:contains(text):empty:has(seletor):parent先写几个DOM元素的HTML结构:JohnResign GeorgeMartin MalcomJohnSinclair

jquery可见性过滤选择器有哪些?

jQuery的可见性选择器是根据元素的可见和不可见状态来选择相对应的元素。主要有两个:过滤器名jQuery语法说明返回:hidden$(':hidden')选取所有不可见元素集合元素:visible$

jquery表单选择器有哪些?

jquery表单选择器有哪些?jquery虽然可以使用常规选择器来对表单的元素进行定位,但有时还是不能满足开发者灵活多变的需求。所以,jQuery为表单提供了专用的选择器。:input:选取所有inp

jquery和jquery ui的区别?

jquery和jqueryui的区别?区别有:1、jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。 2、jQueryUI则是在jQuery的基础上,利用jQuery的扩展性,

从缓存穿透聊到布隆过滤器

缓存现在在web领域应用广泛,相信大部分开发人员都会用到,然而你遇见过缓存穿透吗? 什么是缓存穿透? 缓存穿透是指查询一个根本不存在的数据,缓存层和存储层都不会命中,但是出于容错的考虑,如果从存储层查

jquery如何判断是否是ie浏览器?

jquery如何判断是否是ie浏览器?在写页面的时候,会遇到浏览器兼容问题,在这个浏览器中可以使用,但在其他浏览器中却不能很好的显示。以下就是判断浏览器的方法,从而更好的区分代码,使得页面正常浏览。f

jQuery遍历方法有哪些?

jQuery遍历方法有哪些?jquery遍历方法有对象遍历和函数调用两种方式。一、jQuery对象遍历语法:$(集合).each(function(index,item){ //index索引 //i

基于jquery开发的UI框架有哪些?

基于jquery开发的UI框架有哪些?1、国产jQueryUI框架(jUI)DWZDWZ富客户端框架(jQueryRIAframework),是中国人自己开发的基于jQuery实现的AjaxRIA开源

有哪些常用jQuery UI框架?

jqueryUI框架1、国产jQueryUI框架(jUI)DWZDWZ富客户端框架(jQueryRIAframework),是中国人自己开发的基于jQuery实现的AjaxRIA开源框架.设计目标是简

程序员有话说:开发人员提升自己的四种方式

开发人员之间所谓的不同“级别”的界线是模糊 的。如果你问高级开发人员、开发经理或技术总监:“初学者、初级、中级和高级之间的区别是什么?”那么很有可能他们会给你截然不同的意见。由于存在各种各样的意见,因

一个解决方案 四种架构 英特尔oneAPI来了

面向不断扩展的多元化计算需求,英特尔提出了全新的产品和技术战略,扎根于六大技术支柱——制程和封装,架构,内存和存储,互连,安全,软件。英特尔将通过横跨这六大技术的全方位计算创新,驱动计算性能的指数级提

使用 jQuery 触发 Vue 事件

时间一长老是忘记这行代码的写法,今天特地记上一笔,方便今后查阅 js文件如下document.save.dispatchEvent(newEvent('无此事件'))//触发不存在的事件不会报错 do

jquery和vue的区别是什么?

jquery和vue的区别是什么?●jquery是直接操作DOM;使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作;和原生的js区别只在于可以更方便的选取和操作DOM对象;数据和界面

vuejs和jquery的区别是什么?

vuejs和jquery的区别1、jQuery首先要获取到dom对象,然后对dom对象进行进行值的修改等操作2、Vue是首先把值和js对象进行绑定,然后修改js对象的值,Vue框架就会自动把dom的值

vue和jquery之间有什么区别?

首先我们来了解一下jquery和vue是什么?Vue是什么?Vue.js是一个前端JavaScript框架,用于构建用户界面。它是开源的。当使用其他JavaScript库时,它还可以用作集成工具。它本

vue与jquery的区别是什么?

vue与jquery的区别是什么?vue和jquey的对比:jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DO

innerHTML与jquery里的html()区别?

innerHTML与jquery里的html()区别?●html()可以设置tbody、tr这些只读标签,而innerHTML在低版本IE下不行;jQuery的html()做了些容错处理,原生的Dom

jquery ajaxError()方法怎么用?

jqueryajaxError()方法怎么用?ajaxError()方法规定AJAX请求失败时运行的函数。注意:自jQuery版本1.8起,该方法只被附加到文档。语法:$(document).ajax

jquery中deferred对象是什么?

jquery中deferred对象是什么?Deferred是JQuery的一个延迟对象,意思是函数延迟到某个点才开始执行,改变执行状态的方法有两个(成功:resolve和失败:reject),分别对应