<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <link rel="stylesheet" href="imooc.css" type="text/css">

    <style>

        input{

            display: block;

            margin: 10px;

            padding:10px;

        }

    </style>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>

<body>

    <h2>子元素筛选选择器</h2>

    <h3>input、text、password、radio、checkbox</h3>

    <h3>submit、image、reset、button、file</h3>

    <div class="left first-div">

        <form>

            <input type="text" value="text类型"/>

            <input type="password" value="password"/>

            <input type="radio"/>

            <input type="checkbox"/>

            <input type="submit" />

            <input type="image" />

            <input type="reset" />

            <input type="button" value="Button" />

            <input type="file" />

        </form>

    </div>

    <script type="text/javascript">

        //查找所有 input, textarea, select 和 button 元素

        //:input 选择器基本上选择所有表单控件

        $(':input').css("border", "1px groove red");

    </script>

    <script type="text/javascript">

        //匹配所有input元素中类型为text的input元素

        $('input:text').css("background", "#A2CD5A");

    </script>

    <script type="text/javascript">

        //匹配所有input元素中类型为password的input元素

        $('input:password').css("background", "yellow");

    </script>

    <script type="text/javascript">

        //匹配所有input元素中的单选按钮,并选中

        $('input:radio').attr('checked','true');

    </script>

    <script type="text/javascript">

        //匹配所有input元素中的复选按钮,并选中

        $('input:checkbox').attr('checked','true');

    </script>

    <script type="text/javascript">

        //匹配所有input元素中的提交的按钮,修改背景颜色

        $('input:submit').css("background", "#C6E2FF");

    </script>

    <script type="text/javascript">

        //匹配所有input元素中的图像类型的元素,修改背景颜色

        $('input:image').css("background", "#F4A460");

    </script>

    <script type="text/javascript">

        //匹配所有input元素中类型为按钮的元素

        $('input:button').css("background", "red");

    </script>

    <script type="text/javascript">

        //匹配所有input元素中类型为file的元素

        $('input:file').css("background", "#CD1076");

    </script>

</body>

</html>

jquery 表单元素选择器的更多相关文章

  1. Jquery | 基础 | 使用 jQuery 表单过滤选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery 表单元素取值与赋值方法总结

    一.普通文本框的赋值与取值 1.1.1赋值 <h2>jQuery 表单元素取值与赋值方法总结</h2> <input type="text" clas ...

  3. JQuery表单元素过滤选择器

    此选择器主要是对所选择的表单元素进行过滤: 选择器 描述 返回 enabled 选择所有的可用的元素 集合元素 disabled 选择所有的不可用的元素 集合元素 checked 选择所有被选中的元素 ...

  4. jQuery选择器之表单元素选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  5. jQuery表单元素非空验证

    <script type="text/javascript">                $(function(){          /************* ...

  6. jQuery选取表单元素

    表单元素选择器 选择器                    说明 :button                 <button>元素和type属性值为button的<input& ...

  7. jQuery使用之（四）处理页面的表单元素

    表单是一个特殊的页面元素,value的值是最受关注的,jQuery提供了强大的val()方法来处理相关的操作. 1.获取表单元素的值. 直接调用val()方法时可以获取选择器的 中的第一个元素的val ...

  8. jQuery获取Select选择的Text(非表单元素)和 Value（表单元素）(转)

    jQuery获取Select选择的Text和Value: 语法解释: . $("#select_id").change(function(){//code...}); //为Sel ...

  9. jQuery操作Form表单元素

    Web开发中常常须要操作表单,form表单元素有select.checkbox.radio.textarea.button.file.text.hidden.password等. 当中checkbox ...

随机推荐

  1. 【软件工具】ImageMagick

    如何安装; 如何检查是否安装成功呢: 如何使用: https://imagemagick.org/index.php     参考 1. 官网: 完

  2. mysq5.7 主主同步

    db01  172.21.0.10 db02  172.21.0.14 一.安装数据库看上一遍博客 修改配置文件  db01  172.21.0.10 [root@VM_0_10_centos mys ...

  3. Kubernetes 使用 Weave Scope 监控集群(十七)

    目录 一.安装 二.使用 Scope 2.1.拓扑结构 2.2.在线操作 2.3.强大的搜索功能 创建 Kubernetes 集群并部署容器化应用只是第一步.一旦集群运行起来,我们需要确保一起正常,所 ...

  4. MySQL5.7的sql脚本导入到MySQL5.5出错解决

    今晚有人让我将他的数据库导入到我的mysql里,执行导入后发现有报错 想了下可能是版本的问题,询问了下,他的数据库是5.7而我的是5.5 他给我提议升级mysql版本,但是我就是不想换版本 那怎么在不 ...

  5. javascript jssdk微信上传一张图片的方法

    javascript jssdk微信上传一张图片的方法 <pre> wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'co ...

  6. JVM 堆内存设置原理

    堆内存设置 原理 JVM堆内存分为2块:Permanent Space 和 Heap Space. Permanent 即 持久代(Permanent Generation),主要存放的是Java类定 ...

  7. 文件和异常练习——python编程从入门到实践

    10-1 Python学习笔记:在文本编辑器中新建一个文件,写几句话来总结一下你至此学习到的python知识,其中每一行都以“In Python you can”打头.将这和文件命名为learning ...

  8. redis源码分析(五)--cluster(集群)结构

    Redis集群 Redis支持集群模式,集群中可以存在多个master,每个master又可以拥有多个slave.数据根据关键字映射到不同的slot,每一个master负责一部分的slots,数据被存 ...

  9. 全栈项目|小书架|微信小程序-点赞功能实现

    微信小程序端的点赞功能其实没什么好介绍的,无非就是调用接口改变点赞状态和点赞数量.需要注意的是取消点赞时的处理,我这里为了减少服务器接口的调用,直接本地存一个变量,修改这里的变量值即可. 由于源码都相 ...

  10. JAVA调用系统命令：python、shell等

    实际项目开发场景中,可能会用到java项目调用系统命令的需求,如调用python或者shell脚本 可以参考如下例子,例子来源于ambari源码: \ambari\ambari-server\src\ ...