Selectors-Form

Posted on Edited on In Views: Disqus:

 

一、:button Selector

找出形態是button的元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <form action="">
        <input type="button" value="input button">
    </form>
    <button>button</button>
    <script>
        $(":button").css("background-color", "red");
    </script>
</body>
</html>

 

二、:checkbox Selector

找出形態是checkbox的元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>

    <form action="">
        <input type="checkbox">
    </form>
    <script>
        $("form input:checkbox")
          .wrap("<span></span>")
          .parent()
          .css({
              background: "yellow",
              border: "3px red solid"
          });
    </script>
</body>
</html>

 

三、:checked Selector

找尋被check的元素。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>checked demo</title>
    <style>
        div {
            color: red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <form>
        <p>
            <input type="checkbox" name="newsletter" value="Hourly" checked="checked">

            <input type="checkbox" name="newsletter" value="Daily">
            <input type="checkbox" name="newsletter" value="Weekly">

            <input type="checkbox" name="newsletter" value="Monthly" checked>
            <input type="checkbox" name="newsletter" value="Yearly">
        </p>
    </form>
    <div></div>

    <script>
        var countChecked = function () {
            var n = $("input:checked").length;
            $("div").text(n + (n === 1 ? " is" : " are") + " checked!");
        };
        countChecked();

        $("input[type=checkbox]").on("click", countChecked);
    </script>

</body>
</html>

 

四、:disabled Selector

找尋disabled的元素。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>disabled demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <form>
        <input name="email" disabled="disabled">
        <input name="id">
    </form>

    <script>
        $("input:disabled").val("this is it");
    </script>

</body>
</html>

 

五、:enabled Selector

找尋enabled的元素。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>enabled demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <form>
        <input name="email" disabled="disabled">
        <input name="id">
    </form>

    <script>
        $("input:enabled").val("this is it");
    </script>

</body>
</html>

 

六、:file Selector

找尋input的形態是file的元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>
    <form action="">
        <input type="file">
    </form>
    <script>
        $(":file").css("background", "yellow");
    </script>
</body>
</html>

 

七、:focus Selector

請參考Selectors-Basic Filter的第五項。

 

八、:image Selector

找尋input的形態是image的元素。

 

九、:input Selector

找尋所有input的形態的元素。

 

十、:password Selector

找尋input的形態是password的元素。

 

十一、:radio Selector

找尋input的形態是radio的元素。

 

十二、:reset Selector

找尋input的形態是reset的元素。

 

十三、:selected Selector

找尋被select的元素。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>selected demo</title>
    <style>
        div {
            color: red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <select name="garden" multiple="multiple">
        <option>Flowers</option>
        <option selected="selected">Shrubs</option>
        <option>Trees</option>
        <option selected="selected">Bushes</option>
        <option>Grass</option>
        <option>Dirt</option>
    </select>
    <div></div>

    <script>
        $("select")
          .change(function () {
              var str = "";
              $("select option:selected").each(function () {
                  str += $(this).text() + " ";
              });
              $("div").text(str);
          })
          .trigger("change");
    </script>

</body>
</html>

 

十四、:submit Selector

找尋input的形態是submit的元素。

 

十五、:text Selector

找尋input的形態是text的元素。