龚哥哥 - 山里男儿 爱生活、做自己！
jQuery的基本选择器使用
发表于 2015-8-31 | 前端

废话不多说，直接上代码，将所有 赋值到一个 html 文件中即可测试，// 表示注释

jquery-1.8.3.min.js 这个jQuery 下载地址，

下载地址：http://code.jquery.com/jquery-1.8.3.min.js

<!DOCTYPE html
<html>
    <head>
        <meta charset="UTF-8" />
        <title>jQuery 属性选择器</title>
        <script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            //$(document).ready(function() { 会选中全部
            $(document).ready(function() {
                //点击 button 按钮就会调用
                $('button').click(function() {
                    //$('#dd').css('color', '#F00');
                    //$('.cc').css('font-size', '38px');  //单个

                    //同时选作多个设置颜色
                    //$('#dd, .cc').css('color', '#0ff');

                    //会选择 ul 下的所有子元素，多级
                    //$('.ul span').css('color', '#F00');

                    //只会选择 ul 下的子元素，孙元素不会被选中
                    //$('.ul > span').css('color', '#F00');

                    //选作 class iia 紧的挨着的下一个元素
                    //$('.iia + li').css('color', '#F00').css('font-size', '38px');

                    //下面有两个iib 这样子的话，就会选中两个，最后一个和跟最后一个键紧挨着的一个
                    //$('.iib + li').css('color', '#F00');
                    //当选择下一个紧挨着的一个元素不存在时，则不会生效
                    //$('#iic + li').css('color', '#F00');

                    //意思class iia 下面的所有子 li 元素。逗号，则不一样的元素
                    //$('.iia ~ li,p').css('color', '#F00');

                    // 选中html标签中 属性为 id 的所有元素
                    //$('[id]').css('color', '#F00');

                    // 选中html标签中 属性为 for 的所有元素
                    //$('[for]').css('color', '#F00');

                    // 选中html标签中 属性为 asdf 的所有元素，可以应用于自定义属性
                    //$('[asdf]').css('color', '#F00');

                    //选中属性 for 等于 aaa 的所有元素
                    //$('[for="aaa"]').css('color', '#F00');

                    //选中 class 属性值为 php 的所有元素
                    //$('[class="php"]').css('color', '#F00');

                    //选中 class 不为 php 的元素。
                    //$('[class != "php"]').css('color', '#F00');

                    //选中 class 为 i 字母开头的元素
                    //$('[class ^= "i"]').css('color', '#F00');

                    //选中 class 以 b 字母结束的元素
                    //$('[class $= "b"]').css('color', '#F00');

                    //选中 class 包含 f 字母的所有元素
                    //$('[class *= "f"]').css('color', '#F00');

                    //选中 标签中必须包含 class 和 id 属性等于 iic 的元素
                    //$('[class][id = "iic"]').css('color', '#F00');

                    //选中标签中同时包含 class 属性值为 gege 和 id 属性值为 gg 的元素
                    //$('[class = "gege"][id = "gg"]').css('color', '#F00');

                    //选中 class ul，中间的空格表示下一及，后代选择器，下 class 的值为 iid 和 id 值为 bod 的元素
                    $('.ul [class = "iid"][id = "bod"]').css('color', '#F00');
                });
            });

        </script>
    </head>
    <body>
        <button>按钮 1</button>
        <button>按钮 2</button>
        <div id="dd">div dd</div>
        <div class="cc">div cc</div>
        <div class="cc">div cc2</div>

        <ul class="ul">
        <span>你是我的uuuullll</span>
            <li class="iia" id="good">苹果手机aagood 2</li>
            <li class="iib">安卓手机12bbb</li>
            <li class="iibf">软件开发2bbb</li>
            <li id="iic" class="php" asdf="fff">程序员2ccc</li>
            <p>p看看 ppp</p>
            <span>
                <li class="iid" id="bod" for="ccc">嘻嘻嘻嘻</li>
                <li id="good">哈哈哈哈哈good 2</li>
            </span>
        <li class="df">l滴滴滴滴
            <span>spspsp</span>
        </li>
        </ul>
        <label for="aaa" class="gege" id="gg">l乐乐乐乐</label>
        <li class="iid" id="bod" for="ccc">嘻嘻嘻嘻2222222</li>
    </body>
</html>

发表评论：
TOP