<!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. bzoj5406: Gift

    全程膜拜 码得都要一样了.. 对于这种数列置换的可以理解成多个环,而对于一个大小为d的环把顺序弄对要做d-1次 总起来就是n-环数的次数 加上暴力30pt到手啦 假如题目没有限制,那就是第一类斯特林数 ...

  2. HDU3045 Picnic Cows —— 斜率优化DP

    题目链接:https://vjudge.net/problem/HDU-3045 Picnic Cows Time Limit: 8000/4000 MS (Java/Others)    Memor ...

  3. POJ1321 棋盘问题 —— DFS回溯

    题目链接:http://poj.org/problem?id=1321 棋盘问题 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions ...

  4. html5--6-2 CSS语法

    html5--6-2 CSS语法 实例 学习要点 掌握引入外部样式表方法 插入样式的三种方法 内联样式表(行内) 内部样式表(style中) 外部样式表 创建一个外部样式表 在head中使用link元 ...

  5. POJ1113:Wall (凸包：求最小的多边形，到所有点的距离大于大于L)

    Once upon a time there was a greedy King who ordered his chief Architect to build a wall around the ...

  6. bzoj3191卡牌游戏——概率DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3191 不用在意每个人的编号,只需看他们相对于庄家的位置即可: 所以设计状态f[i][j]为还 ...

  7. UVa 1642 Magical GCD (暴力+数论)

    题意:给出一个长度在 100 000 以内的正整数序列,大小不超过 10^ 12.求一个连续子序列,使得在所有的连续子序列中, 它们的GCD值乘以它们的长度最大. 析:暴力枚举右端点,然后在枚举左端点 ...

  8. （水题）洛谷 - P1003 - 铺地毯

    https://www.luogu.org/problemnew/show/P1003 一开始觉得是用树套树来区间修改单点查询,但是发现空间不够开. 看了题解发现这个是静态的问题,而且只问一个点的结果 ...

  9. P1228-重叠的图像

    一道很水的topsort,唉?怎么交了14遍...(某人用我的代码刚好卡过,我怎么过不去...[鄙视][鄙视][鄙视]) #include <bits/stdc++.h> using na ...

  10. noip 2018 Day2 T1 旅行

    暴力删边,暴力枚举 #include <bits/stdc++.h> using namespace std; #define MAXM 5010 inline int read() { ...