<!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. bzoj3462: DZY Loves Math II

    状态很差脑子不清醒了,柿子一直在推错.... ... 不难发现这个题实际上是一个完全背包 问题在于n太大了,相应的有质数的数量不会超过7个 假设要求sigema(1~plen)i pi*ci=n 的方 ...

  2. 底层并发APIs_源自objc.io

    本文由webfrogs译自objc.io,原文作者Daniel Eggert.   小引 本篇英文原文所发布的站点objc.io是一个专门为iOS和OS X开发者提供的深入讨论技术的平台,文章含金量很 ...

  3. codeforces 690D1 D1. The Wall (easy)(dfs)

    题目链接: D1. The Wall (easy) time limit per test 0.5 seconds memory limit per test 256 megabytes input ...

  4. SPOJ：Decreasing Number of Visible Box（不错的，背包？贪心？）

    Shadowman loves to collect box but his roommates woogieman and itman don't like box and so shadowman ...

  5. 【Codeforces 762A】 k-th divisor

    [题目链接] 点击打开链接 [算法] 我们知道,一个数的因子是成对出现的,一半小于等于sqrt(N),一半大于sqrt(N),因此,我们可以从 2..sqrt(N)枚举因子 [代码] #include ...

  6. 关于GitHub的DNS基础设施，你了解吗？

    在 GitHub,我们最近从头改进了 DNS.这包括了我们如何与外部 DNS 提供商交互以及我们如何在内部向我们的主机提供记录.为此,我们必须设计和构建一个新的 DNS 基础设施,它可以随着 GitH ...

  7. CentOS6.6详细安装教程（图文教程）

    CentOS 6.x最新版本为CentOS 6.6,下面介绍CentOS 6.6的具体安装配置过程,需要的朋友可以参考下说明: Centos6.6 下载地址:thunder://QUFodHRwOi8 ...

  8. UI：动画

    参考 UIView 层级管理.触摸.检测手机是否横屏.调整设备的方向 动画:为了提高用户的体验 View层的动画.UIlayer层的动画.UIView改变视图效果.UIlayer的绘图框架 #prag ...

  9. 出现"Unable to instantiate Action,xxxxx, defined for 'login' in namespace '/' xxxxx 解决办法

    转自:https://blog.csdn.net/heroful/article/details/17261169 问题原因: 在MyEclipse 利用SSH框架写程序,运行时出现 " U ...

  10. Jmeter学习之While Controller

    参考 https://www.cnblogs.com/richered/p/8404641.html https://blog.csdn.net/rwang99/article/details/511 ...