<!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元素

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

    </script>

    <script type="text/javascript">

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

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

    </script>

    <script type="text/javascript">

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

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

    </script>

    <script type="text/javascript">

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

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

    </script>

    <script type="text/javascript">

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

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

    </script>

    <script type="text/javascript">

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

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

    </script>

    <script type="text/javascript">

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

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

    </script>

    <script type="text/javascript">

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

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

    </script>

</body>

</html>

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

  1. jQuery选择器之表单选择器Demo

    测试代码: 09-表单选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  2. jquery选择器之表单选择\表单对象属性

    :input 匹配所有input标签 :text 匹配所有单行文本框 :password 匹配所有密码框 :radio  匹配所有单选扭 :checkbox 匹配所有复选框 :image 匹配所有图像 ...

  3. jquery 表单元素选择器

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

  4. jQuery选择器之表单对象属性过滤选择器Demo

    测试代码: 08-表单对象属性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  5. jQuery操作Form表单元素

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

  6. jQuery中的表单过滤选择器（四、七）：:input、:text、:password、:radio、:checkbox、:file等

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  7. 【jQuery】form表单元素序列化为json对象

    序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head&g ...

  8. jQuery控制form表单元素聚焦

      CreateTime--2017年5月28日08:57:16Author:Marydon jQuery使form表单的第一个文本框聚焦 /** * 使form表单的第一个文本框聚焦 */ func ...

  9. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

随机推荐

  1. Hadoop一些要注意的点

    1.大多小文件的劣处: a. 生成更多的map任务,额外的开销: b. 每个文件都需要守址时间: c. HDFS上namenode需要占用内存空间:

  2. 一步一步学Silverlight 2系列（19）：如何在Silverlight中与HTML DOM交互（上）

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  3. Fleck websocket官方事例

    Fleck websocket官方事例 server: using Fleck;using System;using System.Collections.Generic;using System.L ...

  4. codeforces 414C C. Mashmokh and Reverse Operation(归并排序求逆序对)

    题目链接: C. Mashmokh and Reverse Operation time limit per test 4 seconds memory limit per test 512 mega ...

  5. 洛谷P4316绿豆蛙的归宿——期望

    题目:https://www.luogu.org/problemnew/show/P4316 期望水题,从终点向起点推,因为是DAG,所以拓扑序推过去即可. 代码如下: #include<ios ...

  6. 如何在Centos7上安装&使用docker

    Docker 是一个开源工具,它可以让创建和管理 Linux 容器变得简单.容器就像是轻量级的虚拟机,并且可以以毫秒级的速度来启动或停止.Docker 帮助系统管理员和程序员在容器中开发应用程序,并且 ...

  7. Collection View Programming Guide for iOS---(五)---Incorporating Gesture Support

      Incorporating Gesture Support 结合手势支持 You can add greater interactivity to your collection views th ...

  8. ubuntu下安装vmtool

    这是我遇到这个问题的解决办法-------无法通过vmware的设置安装vmtoll 1.关闭虚拟机2.编辑虚拟机,将CD/DVD选项改成自动检测(而不是之前指向的ubuntuxxx.iso)3.重启 ...

  9. 关于数据库优化2——关于表的连接顺序，和where子句的前后顺序，是否会影响到sql的执行效率问题

    有好多时候,我们常听别人说大表在前,小表在后,包括现在好多百度出来的靠前的答案都有说数据库是从右到左加载的,所以from语句最后关联的那张表会先被处理.如果三表交叉,就选择交叉表来作为基础表.等等一些 ...

  10. 跳马~~~HDU1372

    基础BFS,水过就好~手写队列优化~~ #include <iostream> #include <stdio.h> #include <string.h> #in ...