<!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. 使用清华源进行pip install

    pypi 镜像使用帮助 pypi 镜像每 5 分钟同步一次. 临时使用 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple some-pac ...

  2. 在使用Hanlp配置自定义词典时遇到的问题

    要使用hanlp加载自定义词典可以通过修改配置文件hanlp.properties来实现.要注意的点是: 1. root根路径的配置: hanlp.properties中配置如下: #本配置文件中的路 ...

  3. 删除lvm时出现"Logical volume contains a filesystem in use"

    问题描述: k8s环境中需要重新创建lvm:/dev/mapper/test-vg-test-storage,该lvm挂载在/data/prometheus下面,在删除出现"Logical ...

  4. [转帖]8个最佳Docker容器监控工具，收藏了

    8个最佳Docker容器监控工具,收藏了 https://www.sohu.com/a/341156793_100159565?spm=smpc.author.fd-d.9.1574127778732 ...

  5. spring框架是怎么样通过properties来获得对象的?

    首先我们要知道java获得对象的方式有四种: 1.通过new语句实例化一个对象. 2.通过反射机制创建对象. 3.通过clone()方法创建对象 3.通过反序列化的方式创建对象 在spring框架中, ...

  6. Word 插入目录详细教程 -- 视频教程(6)

    >> 视频教程链接:B站,速度快,清晰 更多关于插入目录的方法,参看:Word插入目录系列 未完 ...... 点击访问原文(进入后根据右侧标签,快速定位到本文)

  7. BJFU—214基于链式存储结构的图书信息表的创建和输出

    #include<stdio.h>#include<stdlib.h>#define MAX 100 typedef struct bNode{ double no; char ...

  8. Python 入门(1)：hello world 到流程控制

    1.hello world 在D:\python\目录下新建文件hello.txt,编写代码如下 print("hello world!") 修改后缀名为.py,执行hello.p ...

  9. LeetCode 5216. 统计元音字母序列的数目（Java）DP

    5216. 统计元音字母序列的数目 给你一个整数 n,请你帮忙统计一下我们可以按下述规则形成多少个长度为 n 的字符串: 字符串中的每个字符都应当是小写元音字母('a', 'e', 'i', 'o', ...

  10. Java-手动搭建SSH（maven版）

    创建maven项目 把maven项目变为动态网站,步骤如下: 项目结构图如下: 开始搭建spring+springmvc+Hibernate项目 环境版本就不多说了,直接贴出pom.xml文件 < ...