js进阶 10-11  表单伪类选择器的作用

一、总结

一句话总结：能想到用伪类选择器来解决问题。如果能一次记住自然是最棒的。

1、表单伪类选择器分为哪两类？

表单元素和表单属性，表单元素例如input，表单属性例如disabled

2、表单属性伪类选择器有哪四种（重要）？

可用的，不可用的，下拉列表选择的，单选复选选中的（就是我一直弄的那个功能）

表单属性伪类选择器

  • ：enabled选择所有可用input元素
  • ：disabled所有禁用的input元素
  • ：selected选择所有被选中的option元素
  • ：checked选择所被选中的表单元素，一般用于radio和checkbox

3、表单标签伪类选择器的作用？

选择表单里面的任何类型的元素，也可以选择显示和隐藏

26 $(':input').css('background','#ccc')

27 $(':button').css('background','green')

4、表单标签伪类选择器有哪些？

所有的表单元素

二、表单伪类选择器的作用

1、相关知识

  • 表单伪类选择器

    • : Input选择所有input元素
    • ：button选择所有type="button"的input元素
    • ：submit选择所有type="submit"的input元素
    • ：reset选择所有type="reset"的input元素
    • ：text选择所有单选文本框
    • ：textarea选择所有多行文本框
    • ：password选择所有密码文本框
    • ：radio选择所有单选按钮
    • ：checkbox选择所有复选框
    • ：image选择所有图像域
    • ：hidden选择所有隐藏域
    • ：file选择所有文件域
  • 表单属性伪类选择器
    • ：enabled选择所有可用input元素
    • ：disabled所有禁用的input元素
    • ：selected选择所有被选中的option元素
    • ：checked选择所被选中的表单元素，一般用于radio和checkbox

2、代码

10-11代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script src="jquery-3.1.1.min.js"></script>

 </head>

 <body>

 <form action="#">

     <p>用户名：<input type="text" name="username"></p>

     <p>密  码：<input type="password" name="password"></p>

     <p>爱  好：<br>

         <input type="radio" name="rad" value="A">新闻<br>

         <input type="radio" name="rad" value="B">小说<br>

         <input type="radio" name="rad" value="C">音乐<br>

     </p>

     <p>上传头像：<input type="file"></p>

     <p>

         <input type="reset" value="重置">

         <input type="submit" value="提交">

         <input type="button" value="按钮1">

         <button type="button">按钮2</button>

     </p>

 </form>

 <script>

     $(':input').css('background','#ccc')

     $(':button').css('background','green')

     $(':submit').css('background','blue')

     $(':text').css('background','#fcc')

     $(':password').css('background','#fcc')

     $(':radio').hide(3000)

     $(':radio').show(3000)

     $(':file').css('background','orange')

 </script>

 </body>

 </html>

10-12代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script src="jquery-3.1.1.min.js"></script>

 </head>

 <body>

 <form action="#">

     <p>用户名：<input type="text" name="username"></p>

     <p>密  码：<input type="password" name="password"></p>

     <p>爱  好：<br>

         <input type="radio" name="rad" value="A" checked="">新闻

         <input type="radio" name="rad" value="B">小说

         <input type="radio" name="rad" value="C">音乐

         <input type="button" class="btn1" value="隐藏单选框">

     </p>

     <p>

         <input type="reset" value="重置" disabled="">

         <input type="submit" value="提交">

     </p>

     <select onchange="selVal()" >

         <option value="列表项1">列表项1</option>

         <option value="列表项2">列表项2</option>

         <option value="列表项3">列表项3</option>

     </select>

 </form>

 <script>

 $(':enabled').css('background','#ccc')

 $(':disabled').css('background','green')

 $('.btn1').click(function(){

     $(':checked').hide()

 })

 function selVal(){

     var str=$(':selected').val()

     alert(str)

 }

 </script>

 </body>

 </html>
 
 
 
0 Links

 
 

js进阶 10-11/12 表单伪类选择器的作用的更多相关文章

  1. js进阶 10-9 -of-type型子元素伪类选择器

    js进阶 10-9 -of-type型子元素伪类选择器 一.总结 一句话总结:三种和first.last等有关的选择器. 1.:first和:first-child和:first-of-type的区别 ...

  2. js进阶 10-10 可见伪类选择器和内容伪类选择器的作用

    js进阶 10-10  可见伪类选择器和内容伪类选择器的作用 一.总结 一句话总结:分组来描述.内容伪类选择器就是  四个  包含.可见的伪类选择器就是可见和不可见.查找功能,也就是内容伪类选择器非常 ...

  3. js 进阶 10 js选择器大全

    js 进阶 10 js选择器大全 一.总结 一句话总结:和css选择器很像 二.JQuery选择器 原生javaScript中,只能使用getELementById().getElementByNam ...

  4. js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）

    js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...

  5. 彻底搞懂CSS伪类选择器：is、not

    本文介绍一下Css伪类:is和:not,并解释一下is.not.matches.any之前的关系 :not The :not() CSS pseudo-class represents element ...

  6. CSS伪类选择器：is、not

    本文介绍一下Css伪类:is和:not,并解释一下is.not.matches.any之前的关系 :not The :not() CSS pseudo-class represents element ...

  7. CSS3新增的伪类选择器

    伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器 其他伪类选择器 1.结构性 ...

  8. JS表单验证类HTML代码实例

    以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...

  9. atitit.Oracle 9 10 11 12新特性attilax总结

    atitit.Oracle 9  10 11  12新特性 1. ORACLE 11G新特性 1 1.1. oracle11G新特性 1 1.2. 审计 1 1.3. 1.   审计简介 1 1.4. ...

随机推荐

  1. ED/EP系列1《简单介绍》

    电子存折(ED:ElectronicDeposit)一种为持卡人进行消费.取现等交易而设计的支持个人识别码(PIN)保护的金融IC卡应用. 它支持圈存.圈提.消费和取现等交易. 电子钱包(EP:Ele ...

  2. 深入理解HTTP协议及原理分析之缓存（3种缓存机制）

    3.2 缓存的实现原理 3.2.1什么是Web缓存 WEB缓存(cache)位于Web服务器和客户端之间. 缓存会根据请求保存输出内容的副本,例如html页面,图片,文件,当下一个请求来到的时候:如果 ...

  3. ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第五篇：MVC整合Ajax

    摘要      本文将从完成“输入数据验证”这个功能出发,逐渐展开ASP.NET MVC与Ajax结合的方法.首先,本文将使用ASP.NET MVC提供的同步方式完成数据验证.而后,将分别结合ASP. ...

  4. Oracle 12C R2 on Linux 7.X Data Guard 搭建文档

    1.查看主机和数据库信息   [oracle@oracle1 ~]$ sqlplus / as sysdba   SQL*Plus: Release 12.2.0.1.0 Production on ...

  5. 基于mpvue的小程序项目搭建的步骤

    mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小 ...

  6. 使用Intent的Flag设置启动參数

    Intent中关于激活Activity的Flag Intent类定义了一批常量,用于配置激活Activity时的相关參数; 在Intent中设置Flag ·调用Intent的setFlags()或ad ...

  7. Altium Designer一些问题

    1,当你重新导入原理图的时候,会提示删除类 2,不要粘贴和赋值pcb中的原件,否则飞线可能会消失

  8. 【AtCoder Beginner Contest 074 C】Sugar Water

    [链接]h在这里写链接 [题意] 让你在杯子里加糖或加水. (4种操作类型) 糖或水之间有一定关系. 糖和水的总量也有限制. 问你糖水浓度的最大时,糖和糖水的量. [题解] 写个dfs就好. 每次有4 ...

  9. xcode 各种项目设置

    1:语言环境设置:项目–>PROJECT–>info–>Locailzation 2 : 手动加入项目依赖 Build Settings–>Search path–>Li ...

  10. ThinkPHP视图查询

    ThinkPHP视图查询 一.总结 1.这里的视图查询和多表查询很像,当然多表查询的话肯定要支持左右链接查询 2.view:视图的使用,关键字是view 3.sql视图功能支持:thinkphp支持视 ...