码迷,mamicode.com
首页 > Web开发 > 详细

Jquery | 基础 | 使用 jQuery 表单过滤选择器

时间:2018-10-08 21:38:31      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:lte   图片   sel   oct   transform   orm   log   总数   round   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title> 使用 jQuery 表单过滤选择器 </title>
    <script language="javascript" type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <style type="text/css">
        body {
            font-size: 12px;
            text-align: center
        }

        form {
            width: 241px
        }

        textarea,
        select,
        input,
        span {
            display: none
        }

        .btn {
            border: #666 1px solid;
            padding: 2px;
            width: 60px;
            filter: progid:DXImageTransform.Microsoft. Gradient(GradientType=0, StartColorStr=#ffffff,
                EndColorStr=#ECE9D8);
        }

        .txt {
            border: #666 1px solid;
            padding: 3px
        }

        .img {
            padding: 2px;
            border: solid 1px #ccc
        }

        .div {
            border: solid 1px #ccc;
            background-color: #eee;
            padding: 5px
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //重置页面
            $("#btn0").click(function () {
                window.location.reload();
            })
            // 显示 Input 类型元素的总数量
            $("#btn1").click(function () {
                $("#form1 div").html(" 表单共找出 Input 类型元素 :" + $("#form1 :input").length);
                $("#form1 div").addClass("div");
            })
            // 显示所有文本框对象
            $("#btn2").click(function () {
                $("#form1 :text").show(3000);
            })
            // 显示所有密码框对象
            $("#btn3").click(function () {
                $("#form1 :password").show(3000);
            })
            // 显示所有单选按钮对象
            $("#btn4").click(function () {
                $("#form1 :radio").show(3000);
                $("#form1 #Span1").show(3000);
            })
            // 显示所有复选框对象
            $("#btn5").click(function () {
                $("#form1 :checkbox").show(3000);
                $("#form1 #Span2").show(3000);
            })
            $("#btn6").click(function () {
                // 显示所有提交按钮对象
                $("#form1 :submit").show(3000);
            })
            $("#btn7").click(function () {
                // 显示所有图片域对象
                $("#form1 :image").show(3000);
            })
            $("#btn8").click(function () {
                // 显示所有重置按钮对象
                $("#form1 :reset").show(3000);

            })
            $("#btn9").click(function () {
                // 显示所有按钮对象
                $("#form1 :button").show(3000);
            })
            $("#btn10").click(function () {
                // 显示所有文件域对象
                $("#form1 :file").show(3000);
            })
        })



    </script>
</head>

<body>
    <form id="form1">
        <textarea class="txt"> TextArea</textarea>
        <select>
            <option value="0"> Item 0</option>
        </select>
        <input type="text" value="Text" class="txt" />
        <input type="password" value="PassWord" class="txt" />
        <input type="radio" /><span id="Span1"> Radio</span>
        <input type="checkbox" />
        <span id="Span2"> CheckBox</span>
        <input type="submit" value="Submit" class="btn" />
        <input type="image" title="Image" src="Images/logo.gif" class="img" />
        <input type="reset" value="Reset" class="btn" />
        <input type="button" value="Button" class="btn" />
        <input type="file" title="File" class="txt" />
        <div id="divShow"></div>
    </form>

    <button id="btn0">重置</button> <br/>
    <button id="btn1">显示 Input 类型元素的总数量<button> <br/>
    <button id="btn2">显示所有文本框对象</button> <br/>
    <button id="btn3">显示所有密码框对象</button> <br/>
    <button id="btn4">显示所有单选按钮对象</button> <br/>
    <button id="btn5">显示所有复选框对象</button> <br/>
    <button id="btn6">显示所有提交按钮对象<button> <br/>
    <button id="btn7">显示所有图片域对象</button> <br/>
    <button id="btn8">显示所有重置按钮对象</button> <br/>
    <button id="btn9">显示所有按钮对象</button> <br/>
    <button id="btn10">显示所有文件域对象 </button> <br/>

</body>

</html>

  

Jquery | 基础 | 使用 jQuery 表单过滤选择器

标签:lte   图片   sel   oct   transform   orm   log   总数   round   

原文地址:https://www.cnblogs.com/jj81/p/9757123.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!