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>

猜你喜欢

转载自blog.csdn.net/qq_39573741/article/details/84564215