1. 程式人生 > >jquery學習-屬性選擇器

jquery學習-屬性選擇器

2.)jquery 屬性選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
    <input type="text" value="username">
    <input type="text" value="useremail">
    <input type="text" value="nodeing_useremail">
    <input type="text" value="useremail_nodeing">
    <input type="password">
    <script>
        $(function () {
            // $('input[value]').css('border','1px solid red')
            //查詢有value屬性的input元素,再設定它css樣式。

            // $('input[value=username]').css('border','1px solid green');
            //查詢value=username的input元素,再設定它css樣式。

            $('input[value*=email]').css('border','1px solid red');
            //查詢value屬性裡面包含email這幾個字元input元素,再設定它css樣式。(*表示包含)

            $('input[value^=nodeing]').css('border','1px solid blue');
            //查詢value屬性裡面以nodeing開頭的input元素,再設定它css樣式。(^表示以什麼開頭)

            $('input[value$=name]').css('border','1px solid green');
            //查詢value屬性裡面以name結尾的input元素,再設定它css樣式。($表示以什麼結尾)
        });

        //注:這裡的$(function () {}); 等價於: window.onload = function(){};
    </script>
</body>
</html>