<!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. read appSettings in configuration file by XElement with xmlns

    https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/concepts/linq/how-to-write-queries- ...

  2. html5--6-67 阶段练习8-弹性三列布局

    html5--6-67 阶段练习8-弹性三列布局 学习要点 运用弹性盒子模型完成一个三列布局,加深对学过知识点的综合应用能力. 了解用百分比设置元素高度的方法. @charset="UTF- ...

  3. Lucene in action 笔记 term vector——针对特定field建立的词频向量空间，不存！不会！影响搜索，其作用是告诉我们搜索结果是“如何”匹配的，用以提供高亮、计算相似度，在VSM模型中评分计算

    摘自:http://makble.com/what-is-term-vector-in-lucene given a document, find all its terms and the posi ...

  4. MultiAutoCompleteTextView

    Activity_mian.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...

  5. VC将同一份代码同时编译为Dll和Exe的方法

    开发中经常遇到这样的情况,需要开发一个某某功能的接口Dll,但是Dll不能直接调试,你至少需要一个Loader 但是Loader和Dll本身不在同一个工程里,虽然都在本机的话并不影响源码级调试,但是总 ...

  6. 一个不当使用fclose引发的异常

    最近服务器上一个后台传输文件的服务,经常会报出异常来,只能强行终止并重启. 昨天刚好有空,现场抓了一下dump,再把程序扔到IDA里看了一下,很快就找出原因了,原来是调用fclose时出错的. 使用C ...

  7. E20180430-hm

    pants n. <英>(紧身的)短裤; <美> 裤子; 喘气( pant的名词复数 ); leggings n. 绑腿; 裹腿; 绷腿; 袜统; redundant adj. ...

  8. git提交历史不显示自己账户的问题

    其实这个问题本身也不大好描述.还是上图好了 问题就如同途中倒数第二次提交.明明就是我提交的,却不显示我的账号.个人页面也不反映这次提交.   后来发现问题所在,要想正确显示,必须要把对这个项目的邮箱设 ...

  9. Codeforces - 474D - Flowers - 构造 - 简单dp

    https://codeforces.com/problemset/problem/474/D 这道题挺好的,思路是这样. 我们要找一个01串,其中0的段要被划分为若干个连续k的0. 我们设想一个长度 ...

  10. 机器学习--DIY笔记与感悟--①K-临近算法（2）

    上一篇博客我手动写了KNN算法,并且之后用手写的算法预测了约会的成功率. 而今天,我在大神博客的指导下调用sklearn这个库来预测图片的内容. 一.前期准备 由于我这里使用的是mac版本,而skle ...