JQuery选择器案例

来源:互联网 发布:软件服务器加防御 编辑:程序博客网 时间:2024/05/22 13:55

jQuery选择器之id选择器

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <style>    div {        width: 100px;        height: 90px;        float: left;        padding: 5px;        margin: 5px;        background-color: #EEEEEE;    }    </style>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body>        <div id="aaron">        <p>id="aaron"</p>        <p>选中</p>    </div>    <div id="imooc">        <p>id="imooc"</p>        <p>jQuery选中</p>    </div>    <div id="imooc">        <p>id="imooc"</p>        <p>jQuery未选中</p>    </div>    <script type="text/javascript">       //通过原生方法处理        var div = document.getElementById('aaron');        div.style.border = "3px solid blue";    </script>    <script type="text/javascript">        //通过jQuery直接传入id        //id的唯一,只选择到了第一个匹配的id为imooc的div节点        $('#imooc').css("border", "3px solid red");    </script></body></html>

jQuery选择器之类选择器

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <style>        div {            width: 100px;            height: 90px;            float: left;            padding: 5px;            margin: 5px;            background-color: #EEEEEE;        }    </style>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script></head><body>        <div class="aaron">        <p>class="aaron"</p>        <p>选中</p>    </div>        <div class="aaron">        <p>class="aaron"</p>        <p>选中</p>    </div>    <div class="imooc">        <p>class="imooc"</p>        <p>jQuery选中</p>    </div>    <div class="imooc">        <p>class="imooc"</p>        <p>jQuery选中</p>    </div>    <script type="text/javascript">        //通过原生方法处理        //样式是可以多选的,所以得到的是一个合集        //需要通过循环给合集中每一个元素修改样式        var divs = document.getElementsByClassName('aaron');        for (var i = 0; i < divs.length; i++) {            divs[i].style.border = "3px solid blue";        }    </script>    <script type="text/javascript">        //通过jQuery直接传入class        //class选择器可以选择多个元素        $('.imooc').css("border", "3px solid red");    </script></body></html>

jQuery选择器之元素选择器

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <style>    div {        width: 100px;        height: 90px;        float: left;        padding: 5px;        margin: 5px;        background-color: #EEEEEE;    }    </style>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script></head><body>    <div class="aaron">        <p>class="aaron"</p>        <p>选中</p>    </div>    <div class="aaron">        <p>class="aaron"</p>        <p>选中</p>    </div>    <div class="imooc">        <p>class="imooc"</p>        <p>jQuery选中</p>    </div>    <div class="imooc">        <p>class="imooc"</p>        <p>jQuery选中</p>    </div>    <script type="text/javascript">    //通过原生方法处理    //获取到所有的节点标记名为div的元素    //给每一个div加上蓝色的边框    var divs = document.getElementsByTagName('div');    for (var i = 0; i < divs.length; i++) {        divs[i].style.border = "3px solid blue";    }    </script>    <script type="text/javascript">    //通过jQuery直接传入标签名p    //标签是可以多个的,所以得到的同样也是一个合集    $("p").css("border", "3px solid red");    </script></body></html>

jQuery选择器之全选择器(*选择器)

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <style>    div {        width: 100px;        height: 90px;        float: left;        padding: 5px;        margin: 5px;        background-color: #EEEEEE;    }    </style>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body>    <div class="aaron">        <p>class="aaron"</p>        <p>选中</p>    </div>    <div class="aaron">        <p>class="aaron"</p>        <p>选中</p>    </div>    <div class="imooc">        <p>class="imooc"</p>        <p>jQuery选中</p>    </div>    <div class="imooc">        <p>class="imooc"</p>        <p>jQuery选中</p>    </div>    <script type="text/javascript">        //获取页面中所有的元素        var elements1 = document.getElementsByTagName('*');    </script>    <script type="text/javascript">        //获取页面中所有的元素        var elements2 = $("*")  ;        //原生与jQuery方法比较        //===表示数据和类型都相等        if(elements2.length === elements1.length){           elements2.css("border","1px solid red");        }    </script></body></html>

jQuery选择器之层级选择器

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <link rel="stylesheet" href="imooc.css" type="text/css">    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body>    <h2>子选择器与后代选择器</h2>    <div class="left">        <div class="aaron">            <p>div下的第一个p元素</p>        </div>        <div class="aaron">            <p>div下的第一个p元素</p>        </div>    </div>    <div class="right">        <div class="imooc">            <article>                <p>div下的article下的p元素</p>            </article>        </div>        <div class="imooc">            <article>                <p>div下的article下的p元素</p>            </article>        </div>    </div>    <script type="text/javascript">        //子选择器        //$('div > p') 选择所有div元素里面的子元素P        $('div > p').css("border", "5px groove red");    </script>    <script type="text/javascript">        //后代选择器        //$('div  p') 选择所有div元素里面的p元素        $('div p').css("border", "9px groove green");    </script>    <h2>相邻兄弟选择器与一般兄弟选择器</h2>    <div class="bottom">        <div>兄弟节点div, +~选择器不能向前选择</div>        <span class="prev">选择器span元素</span>        <div>span后第一个兄弟节点div</div>        <div>兄弟节点div            <div class="small">子元素div</div>        </div>        <span>兄弟节点span,不可选</span>        <div>兄弟节点div</div>    </div>    <script type="text/javascript">        //相邻兄弟选择器        //选取prev后面的第一个的div兄弟节点        $(".prev + div").css("border", "3px groove blue");    </script>    <script type="text/javascript">        //一般相邻选择器        //选取prev后面的所有的div兄弟节点        $(".prev ~ div").css("border", "3px groove blue");    </script></body></html>

jQuery选择器之基本筛选选择器

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <link rel="stylesheet" href="imooc.css" type="text/css">    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body>    <h2>基本筛选器</h2>    <h3>:first/:last/:even/:odd</h3>    <div class="left">        <div class="div">            <p>div:first</p>            <p>:even</p>        </div>        <div class="div">            <p>:odd</p>        </div>        <div class="div">            <p>:even</p>        </div>        <div class="div">            <p>:odd</p>        </div>        <div class="div">            <p>:even</p>        </div>        <div class="div">            <p>div:last</p>            <p>:odd</p>        </div>    </div>    <script type="text/javascript">    //找到第一个div    $(".div:first").css("color", "#CD00CD");    </script>    <script type="text/javascript">    //找到最后一个div    $(".div:last").css("color", "#CD00CD");    </script>    <script type="text/javascript">    //:even 选择所引值为偶数的元素,从 0 开始计数    $(".div:even").css("border", "3px groove red");    </script>    <script type="text/javascript">    //:odd 选择所引值为奇数的元素,从 0 开始计数    $(".div:odd").css("border", "3px groove blue");    </script>    <h3>:eq/:gt/:lt</h3>    <div class="left">        <div class="aaron">            <p>:lt(3)</p>        </div>        <div class="aaron">            <p>:lt(3)</p>        </div>        <div class="aaron">            <p>:eq(2)</p>        </div>        <div class="aaron">        </div>        <div class="aaron">            <p>:gt(3)</p>        </div>        <div class="aaron">            <p>:gt(3)</p>        </div>    </div>    <script type="text/javascript">    //:eq    //选择单个    $(".aaron:eq(2)").css("border", "3px groove blue");    </script>    <script type="text/javascript">    //:gt 选择匹配集合中所有索引值大于给定index参数的元素    $(".aaron:gt(3)").css("border", "3px groove blue");    </script>     <script type="text/javascript">    //:lt 选择匹配集合中所有索引值小于给定index参数的元素    //与:gt相反    $(".aaron:lt(2)").css("color", "#CD00CD");    </script>    <h3>:not</h3>    <div class="left">        <div>            <input type="checkbox" name="a" />            <p>Aaron</p>        </div>        <div>            <input type="checkbox" name="b" />            <p>慕课</p>        </div>        <div>            <input type="checkbox" name="c" checked="checked" />            <p>其他</p>        </div>    </div>    <script type="text/javascript">        //:not 选择所有元素去除不匹配给定的选择器的元素        //选中所有紧接着没有checked属性的input元素后的p元素,赋予颜色        $("input:not(:checked) + p").css("background-color", "#CD00CD");    </script></body></html>

jQuery选择器之内容筛选选择器

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <link rel="stylesheet" href="imooc.css" type="text/css">    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body>    <h2>内容筛选器</h2>    <h3>:contains/:has</h3>    <div class="left">        <div class="div">            <p>:contains</p>        </div>        <div class="div">            <p>:contains</p>        </div>        <div class="div">            <p>                <span>:has</span>            </p>        </div>        <div class="div">            <p>:contains</p>        </div>    </div>    <script type="text/javascript">        //查找所有class='div'中DOM元素中包含"contains"的元素节点        //并且设置颜色        $(".div:contains(':contains')").css("color", "#CD00CD");    </script>    <script type="text/javascript">        //查找所有class='div'中DOM元素中包含"span"的元素节点        //并且设置颜色        $(".div:has(span)").css("color", "blue");    </script>    <h3>:parent/:empty</h3>    <div class="left">        <div class="aaron">            <a>:parent</a>        </div>        <div class="aaron">            <a>:parent</a>        </div>        <div class="aaron">            <a>:parent</a>        </div>        <div class="aaron">            <a></a>        </div>    </div>    <script type="text/javascript">       //选择所有包含子元素或者文本的a元素       //增加一个蓝色的边框       $("a:parent").css("border", "3px groove blue");    </script>    <script type="text/javascript">       //找到a元素下面的所有空节点(没有子元素)       //增加一段文本与边框       $("a:empty").text(":empty").css("border", "3px groove red");     </script></body></html>

jQuery选择器之可见性筛选选择器

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <link rel="stylesheet" href="imooc.css" type="text/css">    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body>    <h2>可见性筛选选择器</h2>    <h3>:visible/:hidden</h3>    <div class="left">        <div class="div">            <a>display</a>            <p id="div1" style="display:none;">display</p>        </div>        <div class="div">            <a>width</a>            <a>height</a>            <p id="div2" style="width:0;height:0">width/height</p>        </div>        <div class="div">            <a>visibility</a>            <a>opacity</a>            <p id="div3" style="visibility:hidden;opacity:0">visibility</p>        </div>    </div>    <p id="show"></p>    <script type="text/javascript">        function show (ele) {            if (ele instanceof jQuery) {                $("#show").append('元素的长度的 = ' + ele.length)            } else {                alert(ele+' 不是jQuery对象')            }        }    </script>    <script type="text/javascript">        //查找id = div1的DOM元素,是否可见        show( $('#div1:visible') );    </script>    <script type="text/javascript">        //查找id = div2的DOM元素,是否可见        show($('#div2:visible'))    </script>    <script type="text/javascript">        //查找id = div3的DOM元素,是否可见        show( $('#div3:visible') );    </script>    <script type="text/javascript">        //查找id = div1的DOM元素,是否隐藏        show( $('#div1:hidden') );    </script>    <script type="text/javascript">        //查找id = div2的DOM元素,是否隐藏        show( $('#div2:hidden') );    </script>    <script type="text/javascript">        //查找id = div3的DOM元素,是否隐藏        show( $('#div3:hidden') );    </script></body></html>

jQuery选择器之属性筛选选择器

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <link rel="stylesheet" href="imooc.css" type="text/css">    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body>    <h2>属性筛选选择器</h2>    <h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>    <div class="left" testattr="true" >        <div class="div" testattr="true" name='p1'>            <a>[att=val]</a>        </div>        <div class="div" testattr="true" p2>            <a>[att]</a>        </div>        <div class="div" testattr="true" name="-">            <a>[att|=val]</a>        </div>        <div class="div" testattr="true" name="a b">            <a>[att~=val]</a>        </div>    </div>    <script type="text/javascript">         //查找所有div中,属性name=p1的div元素         $('div[name=p1]').css("border", "3px groove red");     </script>    <script type="text/javascript">        //查找所有div中,有属性p2的div元素        $('div[p2]').css("border", "3px groove blue");     </script>    <script type="text/javascript">        //查找所有div中,有属性name中的值只包含一个连字符“-”的div元素        $('div[name != "-"]').css("border", "3px groove #00FF00");     </script>    <script type="text/javascript">        //查找所有div中,有属性name中的值包含一个连字符“空”和“a”的div元素        $('div[name~="a"]').css("border", "3px groove #668B8B");     </script>    <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>    <div class="left" testattr="true" >        <div class="div" testattr="true"  name='imooc-aaorn'>            <a>[att^=val]</a>        </div>        <div class="div" testattr="true"  name='aaorn-imooc'>            <a>[att$=val]</a>        </div>        <div class="div" testattr="true"  name="attr-test-selector">            <a>[att*=val]</a>        </div>        <div class="div" name="a b">            <a>[att!=val]</a>        </div>    </div>    <script type="text/javascript">         //查找所有div中,属性name的值是用imooc开头的         $('div[name$=imooc]').css("border", "3px groove red");     </script>    <script type="text/javascript">         //查找所有div中,属性name的值是用imooc结尾的         $('div[name^=imooc]').css("border", "3px groove blue");     </script>    <script type="text/javascript">        //查找所有div中,有属性name中的值包含一个test字符串的div元素        $('div[name*="test"]').css("border", "3px groove #00FF00");     </script>    <script type="text/javascript">        //查找所有div中,有属性testattr中的值没有包含"true"的div        $('div[testattr!="true"]').css("border", "3px groove #668B8B");     </script></body></html>

jQuery选择器之子元素筛选选择器

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <link rel="stylesheet" href="imooc.css" type="text/css">    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body>    <h2>子元素筛选选择器</h2>    <h3>:first-child、:last-child、:only-child</h3>    <div class="left first-div">        <div class="div">            <a>:first-child</a>            <a>第二个元素</a>            <a>:last-child</a>        </div>        <div class="div">            <a>:first-child</a>        </div>        <div class="div">            <a>:first-child</a>            <a>第二个元素</a>            <a>:last-child</a>        </div>    </div>    <script type="text/javascript">        //查找class="first-div"下的第一个a元素        //针对所有父级下的第一个        $('.first-div a:first-child').css("color", "#CD00CD");    </script>    <script type="text/javascript">        //查找class="first-div"下的最后一个a元素        //针对所有父级下的最后一个        //如果只有一个元素的话,last也是第一个元素        $('.first-div a:last-child').css("color", "red");    </script>    <script type="text/javascript">        //查找class="first-div"下的只有一个子元素的a元素        $('.first-div a:only-child').css("color", "green");    </script>    <h3>:nth-child、:nth-last-child</h3>    <div class="left last-div">        <div class="div">            <a>:first-child</a>            <a>第二个元素</a>            <a>第三个元素</a>            <a>:last-child</a>        </div>        <div class="div">            <a>:first-child</a>            <a>第二个元素</a>        </div>        <div class="div">            <a>:first-child</a>            <a>第二个元素</a>            <a>第三个元素</a>            <a>:last-child</a>        </div>    </div>    <script type="text/javascript">        //查找class="last-div"下的第二个a元素        $('.last-div a:nth-child(2)').css("color", "#CD00CD");    </script>    <script type="text/javascript">        //查找class="last-div"下的倒数第二个a元素        $('.last-div a:nth-last-child(2)').css("color", "red");    </script></body></html>

jQuery选择器之表单元素选择器

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <link rel="stylesheet" href="imooc.css" type="text/css">    <style>         input{            display: block;            margin: 10px;            padding:10px;        }    </style>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body>    <h2>子元素筛选选择器</h2>    <h3>input、text、password、radio、checkbox</h3>    <h3>submit、image、reset、button、file</h3>    <div class="left first-div">        <form>            <input type="text" value="text类型"/>            <input type="password" value="password"/>            <input type="radio"/>             <input type="checkbox"/>            <input type="submit" />            <input type="image" />            <input type="reset" />            <input type="button" value="Button" />            <input type="file" />        </form>    </div>    <script type="text/javascript">        //查找所有 input, textarea, select 和 button 元素        //:input 选择器基本上选择所有表单控件        $(':input').css("border", "3px groove blue");     </script>    <script type="text/javascript">        //匹配所有input元素中类型为text的input元素        $('input:text').css("background", "#A2CD5A");    </script>    <script type="text/javascript">        //匹配所有input元素中类型为password的input元素        $('input:password').css("background", "yellow");    </script>    <script type="text/javascript">        //匹配所有input元素中的单选按钮,并选中        $('input:radio').attr('checked','true');    </script>    <script type="text/javascript">        //匹配所有input元素中的复选按钮,并选中        $('input:checkbox').attr('checked','true');     </script>    <script type="text/javascript">        //匹配所有input元素中的提交的按钮,修改背景颜色        $('input:submit').css("background", "#C6E2FF");    </script>    <script type="text/javascript">        //匹配所有input元素中的图像类型的元素,修改背景颜色         $('input:image').css("background", "#F4A460");    </script>    <script type="text/javascript">        //匹配所有input元素中类型为按钮的元素         $('input:button').css("background", "red");    </script>    <script type="text/javascript">        //匹配所有input元素中类型为file的元素         $('input:file').css("background", "#CD1076");    </script></body></html>

jQuery选择器之表单对象属性筛选选择器

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <link rel="stylesheet" href="imooc.css" type="text/css">    <style>    input {        display: block;        margin: 10px;        padding: 10px;    }    </style>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body>    <h2>子元素筛选选择器</h2>    <h3>enabled、disabled</h3>    <form>        <input type="text" value="未设置disabled" />        <input type="text" value="设置disabled" disabled="disabled" />        <input type="text" value="未设置disabled" />    </form>    <script type="text/javascript">        //查找所有input所有可用的(未被禁用的元素)input元素。        $('input:enabled').css("border", "2px groove red");    </script>    <script type="text/javascript">        //查找所有input所有不可用的(被禁用的元素)input元素。        $('input:disabled').css("border", "2px groove blue");    </script>    <h3>checked、selected</h3>    <form>        <input type="checkbox" checked="checked">        <input type="checkbox">        <input type="radio" checked>               <input type="radio">        <select name="garden" multiple="multiple">            <option>imooc</option>            <option selected="selected">慕课网</option>            <option>aaron</option>            <option selected="selected">博客园</option>          </select>    </form>    <script type="text/javascript">         //查找所有input所有勾选的元素(单选框,复选框)         //移除input的checked属性        $('input:checked').removeAttr('checked')    </script>    <script type="text/javascript">         //查找所有option元素中,有selected属性被选中的选项         //移除option的selected属性        $('option:selected').removeAttr('selected')    </script></body></html>

jQuery选择器之特殊选择器this

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <link rel="stylesheet" href="imooc.css" type="text/css">    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body>    <h2>特殊选择器this</h2>    <p id="test1">点击测试:通过原生DOM处理</p>    <p id="test2">点击测试:通过原生jQuery处理</p>    <script type="text/javascript">        var p1 = document.getElementById('test1')        p1.addEventListener('click',function(){            //直接通过dom的方法改变颜色            this.style.color = "red";         },false);    </script>    <script type="text/javascript">        $('#test2').click(function(){            //通过包装成jQuery对象改变颜色            $(this).css('color','blue');        })    </script></body></html>

综合案例

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>jQuery标签切换效果</title>    <link rel="stylesheet" href="imooc.css" type="text/css">    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body><!--代码部分begin--><div id="menu">    <!--tag标题-->    <div id="menu_female">        <h3>女装</h3>        <div class="tag" style="display: block;">            <dl>                <dd>                    <p>第一类</p>                    <a>1.衬衫</a>                    <a>2.T恤</a>                    <a>3.雪纺衫</a>                    <a>4.针织衫</a>                    <a>5.短外套</a>                    <a>6.卫衣</a>                    <a>7.小西裤</a>                    <a>8.风衣</a>                    <a>9.吊带背心</a>                    <a>10.连衣裙</a>                    <a name="setColor">11.蕾丝连衣裙</a>                    <a>12.复古连衣裙</a>                    <a>13.印花连衣裙</a>                    <a>14.真丝连衣裙</a>                    <a>更多</a>                </dd>            </dl>        </div>        <div class="tag_More" style="display:block">            <dl>                <dd>                    <p>第二类</p>                    <a>1.背带裤</a>                    <a>2.哈伦裤</a>                    <a>3.牛仔裤</a>                    <a>4.休闲裤</a>                    <a>5.小脚裤</a>                    <a>6.西装裤</a>                    <a>7.打底裤</a>                    <a>8.阔脚裤</a>                    <a>9.短裤</a>                    <a>10.马甲/背心</a>                    <a>11.羽绒服</a>                    <a>12.棉服</a>                    <a>13.夹克</a>                    <a>14.POLO衫</a>                    <a>更多</a>                </dd>            </dl>        </div>>    </div>    <div id="menu_con">        <h3>男装</h3>        <div class="tag" style="display:block">            <dl>                <dd>                    <p>第一类</p>                    <a>1.衬衫</a>                    <a>2.T恤</a>                    <a>3.牛仔裤</a>                    <a>4.休闲裤</a>                    <a>5.短裤</a>                    <a>6.针织衫</a>                    <a>7.西服</a>                    <a>8.西裤</a>                    <a>9.嘻哈裤</a>                    <a>10.西服套装</a>                    <a>11.马甲/背心</a>                    <a name="setColor">12.羽绒服</a>                    <a>13.棉服</a>                    <a>14.夹克</a>                    <p>更多</p>                </dd>            </dl>        </div>        <div class="tag_More" style="display:block">            <dl>                <dd>                    <p>第二类</p>                    <a>1.衬衫</a>                    <a>2.T恤</a>                    <a>3.牛仔裤</a>                    <a name='setColor'>4.休闲裤</a>                    <a>5.短裤</a>                    <a>6.针织衫</a>                    <a>7.西服</a>                    <a>8.西裤</a>                    <a>9.嘻哈裤</a>                    <a>10.西服套装</a>                    <a>11.马甲/背心</a>                    <a>12.羽绒服</a>                    <a>13.棉服</a>                    <a>14.夹克</a>                    <p>更多</p>                </dd>            </dl>        </div>>    </div></div><script type="text/javascript">    //找到男装下第一类衣服中的第一个p元素,并改变颜色    //可以通过子类选择器  p:first-child 筛选出第一个p元素    $("#menu_con div.tag dd > p:first-child").css('color','#9932CC');</script><script type="text/javascript">    //找到男装下第一类衣服把a元素从顺序1-4加上颜色    //可以通过基本筛选器lt,选择匹配集合中所有索引值小于给定index参数的元素    //注意了index是从0开始计算,所以选在1-4,为对应的index就是4   $("#menu_con div.tag dd :eq(0)> a:lt(4) ").css('color','red');</script><script type="text/javascript">    //找到男装所有a元素中属性名name="setColor"的元素,并设置颜色    //这里用的属性选择器[attribute='value']选择指定属性是给定值的元素   $("#menu_con a[name=setColor]").css('color','blue');</script><script type="text/javascript">    //不分男女,选中第一类衣服中第9个a元素,并改变颜色    //这里用了nth-child 选择的他们所有父元素的第n个子元素    $('#menu div.tag dd a:nth-child(10)').css('color','#66CD00');</script><script type="text/javascript">    //找到女装下第一类衣服,把a元素中包含文字"更多"的节点,改变颜色    $("#menu_female div.tag a:contains('更多')").css('color','#C71585');</script></body></html>
1 0