jQuery选择器

时间：2017-02-27 19:28:26 阅读：181 评论：0 收藏：0 [点我收藏+]

（重新捡起jQuery）

基本选择器

基本选择器语法
选择器	功能描述	返回值
#id	根据给定的ID匹配一个元素	单个元素
element	根据给定的元素名称匹配所有元素	元素集合
.class	根据给定的类匹配元素	元素集合
*	匹配所有元素	元素集合
selector1，selector2	将每一个选择器匹配到的元素合并后一起返回	元素集合

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery基本选择器</title>
    <meta charset="utf-8" />
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body {
            font-size:12px;text-align:center
        }
        .clsFrame {
            width:65px;height:100px
        }
        .clsFrame div, span {
            display:none;float:left;width:65px;height:65px;border:1px solid #00ffff;margin:8px
        }
    </style>
    <script type="text/javascript">
        //id选择器
        $(function() {
            $("#divOne").css("display", "block");
        })
        //元素名匹配元素
        $(function () {
            $("div span").css("display", "block");
        })
        //类匹配元素
        $(function () {
            $(".clsFrame .clsOne").css("display", "block");
        })
        //匹配所有元素
        $(function () {
            $("*").css("display", "block");
        })
        //合并匹配的元素
        $(function () {
            $("#divOne,span").css("display", "block");
        })
    </script>
</head>
<body>
    <div class="clsFrame">
        <div id="divOne">ID</div>
        <div class="clsOne">CLASS</div>
        <span>Span</span>
    </div>
</body>
</html>

例子：

层次选择器

层次选择器语法
选择器	功能描述	返回值
ancestor descendant	根据祖先元素匹配所有的后代元素	元素集合
parent>child	根据父元素匹配所有的子元素	元素集合
prev+next	匹配所有紧接在prev元素后的相邻元素	元素集合
prev~siblings	匹配prev元素之后的所有兄弟元素	元素集合

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery层次选择器</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body {
            font-size:12px;text-align:center
        }
        div,span {
            float:left;border:1px solid #ff0000;margin:8px;display:none
        }
        .clsFraA{
            width:65px;height:65px
        }
        .clsFraP {
            width:45px;height:45px;background-color:#ffd800
        }
        .clsFraC {
            width:25px;height:25px;background-color:#0026ff
        }
    </style>
    <script type="text/javascript">
        //匹配后代元素
        $(function () {
            $("#divMid").css("display", "block");
            $("div span").css("display", "block");
        })
        //匹配子元素
        $(function () {
            $("#divMid").css("display", "block");
            $("div>span").css("display", "block");
        })
        //匹配后面元素
        $(function () {
            $("#divMid+div").css("display", "block");
            $("#divMid").next().css("display", "block");
        })
        //匹配所有后面的元素
        $(function () {
            $("#divMid~div").css("display", "block");
            $("#divMid").nextAll().css("display", "block");
        })
    </script>
</head>
<body>
    <div class="clsFraA">Left</div>
    <div class="clsFraA" id="divMid">
        <span class="clsFraP" id="Span1">
            <span class="clsFraC" id="Span2"></span>
        </span>
    </div>
    <div class="clsFraA">Right_1</div>
    <div class="clsFraA">Right_2</div>
</body>
</html>

例子：

简单过滤选择器
选择器	功能描述	返回值
first() 或 :first	获取第一个元素	单个元素
last() 或 :last	获取最后一个元素	单个元素
:not(selector)	获取除给定选择器外的所有元素	元素集合
:even	获取所有索引值为偶数的元素，索引号从0开始	元素集合
:odd	获取所有索引值为奇数的元素。索引号从0开始	元素集合
:eq(index)	获取指定索引值的元素，索引号从0开始	单个元素
:gt(index)	获取所有大于给定索引值的元素，索引号从0开始	元素集合
:lt(index)	获取所有小于给定索引值的元素，索引号从0开始	元素集合
:header	获取所有标题类型的元素，如h1，h2......	元素集合
:animated	获取正在执行动画效果的元素	元素集合

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery简单过滤选择器</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body {
            font-size:12px;text-align:center;
        }
        div {
            width:241px;height:83px;border:1px,solid,#ff0000;
        }
        h1 {
            font-size:13px;
        }
        ul {
            list-style-type:none;padding:0px;
        }
        .DefClass, .NotClass {
            width:60px;height:23px;
            line-height:23px;float:left;
            border-top:1px solid #ffd800;
            border-bottom:1px solid #4cff00;
        }
        .GetFocus {
            width:58px;border:1px solid #808080;
            background-color:#ff6a00;
        }
        #spnMove {
            width:238px;height:30px;line-height:30px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //增加第一个元素类别
            $("li").first().addClass("GetFocus");
            $("li:first").addClass("GetFocus");
            //增加最后一个元素类别
            $("li:last").addClass("GetFocus");
            $("li").last().addClass("GetFocus");
            //增加除去所有给定选择器匹配的元素类别
            $("li:not(.NotClass)").addClass("GetFocus");
            //增加所有索引值为偶数的元素类别
            $("li:even").addClass("GetFocus");
            //增加所有索引值为基数的元素类别
            $("li:odd").addClass("GetFocus");
            //增加一个给定索引值的元素类别
            $("li:eq(6)").addClass("GetFocus");
            //增加所有大于给定索引值的元素类别
            $("li:gt(4)").addClass("GetFocus");
            //增加所有小于给定索引值的元素类别
            $("li:lt(4)").addClass("GetFocus");
            //增加标题类元素类别
            $("div h1").css("width", "248").css("height","30");
            $(":header").addClass("GetFocus");
            //增加动画效果元素类别
            animateIt();
            $("#spnMove:animated").addClass("GetFocus");
        })
        function animateIt() {
            $("#spnMove").slideToggle("slow", animateIt);
        }
    </script>
</head>
<body>
    <div>
        <h1>基本过滤选择器</h1>
        <ul>
            <li class="DefClass">item 0</li>
            <li class="DefClass">item 1</li>
            <li class="DefClass">item 2</li>
            <li class="DefClass">item 3</li>
            <li class="NotClass">item 4</li>
            <li class="DefClass">item 5</li>
            <li class="DefClass">item 6</li>
            <li class="DefClass">item 7</li>
        </ul>
        <span id="spnMove">Span Move</span>
    </div>
</body>
</html>

例子：

内容过滤选择器
选择器	功能描述	返回值
:contains(text)	获取包含给定文本的元素	元素集合
:empty	获取所有不包含元素或文本的空元素	元素集合
:has(selector)	获取含有选择器所匹配的元素	元素集合
:parent	获取含有子元素或者文本的元素	元素集合

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>使用jQuery内容过滤选择器</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body {
            font-size:12px;text-align:center;
        }
        div {
            float:left;border:1px solid #ff0000;margin:8px;
            width:56px;height:56px;display:none;
        }
        span {
            float:left;border:1px solid #ff0000;margin:8px;
            width:30px;height:30px;background-color:#b6ff00;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            //显示包含给定文本的元素
            $("div:contains(‘K‘)").css("display", "block");
            //显示所有空元素
            $("div:empty").css("display", "block");
            //显示含有选择器所匹配的元素
            $("div:has(span)").css("display", "block");
            //显示含有子元素或者文本的元素
            $("div:parent").css("display", "block");
        })
    </script>
</head>
<body>
    <div>AKEKE</div>
    <div><span></span></div>
    <div>Akeke</div>
    <div></div>
</body>
</html>

例子：

可见性选择器
选择器	功能描述	返回值
:hidden	获取所有不可见元素，或者type为hidden的元素	元素集合
:visible	获取所有可见元素	元素集合

这个不多加练习了

属性过滤选择器语法
选择器	功能描述	返回值
[attribute]	获取包含给定属性的元素	元素集合
[attribute=value]	获取等于给定的属性是某个特定值的元素	元素集合
[attribute!=value]	获取不等于给定的属性是某个特定值的元素	元素集合
[attribute^=value]	获取给定的属性是以某些值开头的元素	元素集合
[attribute$=value]	获取给定的属性是以某些值结尾的元素	元素集合
[attribute*=value]	获取给定的属性是为包含某些值的元素	元素集合
[selector1][selector2][selectorN]	获取满足多个条件的复合属性的元素	元素集合

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>属性过滤选择器</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body {
            font-size:12px;text-align:center;
        }
        div {
            float:left;border:1px solid #000000;margin:8px;
            width:75px;height:75px;display:none;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //显示所有含有ID属性的元素
            $("div[id]").show(1000);
            //显示title属性值为A的元素
            $("div[title=A]").show(1000);
            //显示title属性值不是A的元素
            $("div[title!=A]").show(2000);
            //显示所有属性title的值以A开头的元素
            $("div[title^=A]").show(1000);
            //显示所有属性title的值以C结尾的元素
            $("div[title$=C]").show(1000);
            //显示所有属性title值中含有B的元素，且显示属性id值是divAB的元素
            $("div[title*=B][id=divAB]").show();
        })
    </script>
</head>
<body>
    <div id="divID">ID</div>
    <div title="A">Title A</div>
    <div id="divAB" title="AB">ID<br />Title AB</div>
    <div title="ABC">Title ABC</div>
</body>
</html>

例子：

子元素过滤选择器语法
选择器	功能描述	返回值
:nth-child(eq\|even\|odd\|index)	获取每个父元素下的特定位置元素，索引号从1开始	元素集合
:first-child	获取每个父元素下的第一个子元素	元素集合
:last-child	获取每个父元素下的最后一个子元素	元素集合
:only-child	获取每个父元素下的仅有的一个子元素	元素集合

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>子元素过滤选择器语法</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body {
            font-size:12px;text-align:center;
        }
        ul {
            width:241px;list-style-type:none;padding:0px;
        }
        ul li{
             height:23px;width:60px;line-height:23px;
             float:left;border-top:1px solid #4cff00;
             border-bottom:1px solid #4cff00;margin-top:5px;
        }
        .GetFocus {
            width:58px;border:1px solid #ff0000;
            background-color:#0026ff;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //增加每个父元素下的第二个子元素类别
            $("li:nth-child(2)").addClass("GetFocus");
            //增加每个父元素下的第一个子元素类别
            $("li:first-child").addClass("GetFocus");
            //增加每个父元素下的最后一个子元素类别
            $("li:last-child").addClass("GetFocus");
            //增加每个父元素下只有一个子元素类别
            $("li:only-child").addClass("GetFocus");
        })
    </script>
</head>
<body>
    <ul>
        <li>item 1-0</li>
        <li>item 1-1</li>
        <li>item 1-2</li>
        <li>item 1-3</li>
    </ul>
    <ul>
        <li>item 2-0</li>
        <li>item 2-1</li>
        <li>item 2-2</li>
        <li>item 2-3</li>
    </ul>
    <ul>
        <li>item 3-0</li>
    </ul>
</body>
</html>

例子：

表单对象属性过滤器语法
选择器	功能描述	返回值
:enabled	获取表单中所有属性为可用的元素	元素集合
:disabled	获取表单中所有属性为不可用的元素	元素集合
:checked	获取表单中所有被选中的元素	元素集合
:selected	获取表单中所有被选中option的元素	元素集合

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>表单对象属性过滤器选择器</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body {
            font-size:12px;text-align:center;
        }
        div {
            display:none;
        }
        select {
            height:65px;
        }
        .clsIpt {
            width:100px;padding:3px;
        }
        .GetFocus {
            border:1px solid #ffd800;background-color:#ff0000;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#divA").show(3000);
            //增加表单中所有属性为可用的元素类别
            $("#form1 input:enabled").addClass("GetFocus");
            //增加表单中所有属性为不可用的元素类别
            $("#form1 input:disabled").addClass("GetFocus");
            $("#divB").show(2000);
            //增加表单中所有被选中的元素类别
            alert($("#form1 input:checked").val());
            //显示表单中所有被选中的option的元素内容
            $("#divC").show(2000);
            $("#Span2").html("被选中的是"+$("select option:selected").text());
        })
    </script>
</head>
<body>
    <form id="form1" style="width:400px">
        <div id="divA">
            <input type="text" value="可用文本框" class="clsIpt"/>
            <input type="text" disabled="disabled"
                   value="不可用文本框"  class="clsIpt"/>
        </div>
        <div id="divB">
            <input type="checkbox" checked="checked" value="1"/>选中
            <input type="checkbox" value="0"/>未选中
        </div>
        <div id="divC">
            <select multiple="multiple">
                <option value="0">item 0</option>
                <option selected="selected" value="1">item 1</option>
                <option value="2">item 2</option>
                <option value="3">item 3</option>
            </select>
            <span id="Span2"></span>
        </div>
    </form>
</body>
</html>

例子：

jQuery选择器

原文：http://www.cnblogs.com/Akeke/p/6472541.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)