博客列表 >jquery属性选择器

jquery属性选择器

空城的博客
空城的博客原创
2019年04月06日 09:38:291953浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery属性选择器</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script>
        //$('input[属性名]')       选择含有某个属性值的元素
        //$('input[attr=value]')  选择属性值等于某个值的元素
        //$('input[attr!=value]') 选择属性值不等于某个值的元素
        //$('input[attr^=value]') 选择属性值开头等于某个值的元素
        //$('input[attr$=value]') 选择属性值结尾等于某个值的元素
        //$('input[attr*=value]') 选择属性值结尾等于某个值的元素
        //$('attSel[1] attSel[2] attSel[3]') 多重选择器,要求同时满足才能选择上

        $(document).ready(function(){
            $('input[type]').css('background','red');
            $('input[type=password]').css('background','blue');
            $('input[name!=hhe]').css('background','#ccc');
            $('input[name^=t]').css('background','pink');
            $('input[name$=e]').css('background','black');
            $('input[type*=pa]').css('background','green');
            $('input[type*=pa] input[name*=hhh]').css('background','gray');
        })
    </script>
</head>
<body>
    <form action="">
        <input type="text" name="hhe"><br/>
        <input type="password" name="thja"><br/>
        <input type="password" name="hhh"><br/>
        <input ><br/>
        <input type="text"><br/>
    </form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议