jQuery 选择器

原创已于 2025-05-27 11:44:49 修改 · 680 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

于 2015-08-04 11:27:01 首次发布

JavaScript 专栏收录该内容

51 篇文章

订阅专栏

jQuery API 3.2.0 中文版

*、选择器

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/jquery/jquery.min.js"></script>
    <style>
        .mydiv {width: 550px;}
        .mydiv ul {list-style: none;}
        .mydiv li {float: left;width: 180px;margin-top: 10px;}
    </style>
</head>
<body style=" font-size: larger; font-weight:800;">
    <div class="mydiv">
        <ul>
            <li><input id="btnchildren" type="button" value="children" /></li>
            <li><input id="btnfirstchild" type="button" value="first-child" /></li>
            <li><input id="btnNthChild" type="button" value="nth-child(n)" /></li>
            <li><input id="btnChildeq" type="button" value="child-div:eq(1)" /></li>

            <li><input id="btnparent" type="button" value="parent" /></li>
            <li><input id="btnparents" type="button" value="parents" /></li>
            <li><input id="btnparentseq" type="button" value="parents-div:eq(0)" /></li>
            <li><input id="btnfirst" type="button" value="first" /></li>

            <li><input id="btnfind" type="button" value="find" /></li>
            <li><input id="btnfindeq" type="button" value="find-eq(1)" /></li>
            <li><input id="btngt" type="button" value="gt" /></li>
            <li><input id="btnlt" type="button" value="lt" /></li>
        </ul>
    </div>

    <div id="fdiv">
        <ul>
            <li>John</li>
            <li>Karl</li>
            <li>Brandon</li>
        </ul>
        <ul>
            <li>Glen</li>
            <li>Tane</li>
            <li>Ralph</li>
        </ul>
    </div>

    <div id="f1">
        1
        <div id="f2-1" class="selected">
              2-1
            <div id="f3">
                    3
            </div>
        </div>
        <div id="f2-2" class="selected">
              2-2
        </div>
        <div id="f2-3" class="selected">
              2-3
        </div>

    </div>
    <script>
        $("#btnchildren").click(function (event) {
            //children() 方法返回被选元素的所有直接子元素,该方法只会向下一级对 DOM 树进行遍历。
            $("#f1").children().css("color", "#0000FF");
        });

        $("#btnfirstchild").click(function (event) {
            //匹配第一个子元素
            $("#fdiv ul li:first-child").css("color", "blue");
        });

        $("#btnNthChild").click(function (event) {
            //匹配其父元素下的第N个子或奇偶元素
            $("#fdiv ul li:nth-child(2)").append("<span> - 2nd!</span>");
        });

        $("#btnChildeq").click(function (event) {
            $("#f1").children("div:eq(1)").css("color", "#0000FF");
        });
        
        $("#btnparent").click(function (event) {
            //parent() 方法返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历。
            $("#f3").parent().css("color", "red");
        });

        $("#btnparents").click(function (event) {
            //parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素,即一直到<html>。
            $("#f3").parents().css("color", "#EE82EE");
        });

        $("#btnparentseq").click(function (event) {
            //parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素,即一直到<html>。
            $("#f3").parents("div:eq(0)").css("color", "#EE82EE");
        });

        $("#btnfind").click(function (event) {
            $("#fdiv").find("li").css("color", "#8A2BE2");
        });

        $("#btnfindeq").click(function (event) {
            $("#fdiv").find("li").eq(1).css("color", "#8A2BE2");
        });

        $("#btnfirst").click(function (event) {
            $("#fdiv ul").first().css("color", "#7CFC00");
        });

        $("#btngt").click(function (event) {
            //匹配所有大于给定索引值的元素
            $("#fdiv ul:gt(0)").first().css("color", "#7CFC00");
        });

        $("#btnlt").click(function (event) {
            //匹配所有小于给定索引值的元素
            $("#fdiv ul:lt(1)").first().css("color", "#BA55D3");
        });

        $(function () {
            var w = $(window).width();
            var h = $(window).height();
            //alert("显示器长度：" + w + "  显示器长度/2：" + w / 2);
            //alert("显示器宽度：" + h + "  显示器宽度/2：" + h / 2);
            $(window).resize();
        });

        //获取显示器长宽，div定位
        $(window).resize(function () {
            $(".mydiv").css({
                position: "absolute",
                left: ($(window).width() - $(".mydiv").outerWidth()) / 2,
                top: ($(window).height() - $(".mydiv").outerHeight()) / 3
            });
        });
    </script>
</body>
</html>

*、jQuery [attribute*=value] 选择器

<div attribute="abc"></div>
<div attribute="abc"></div>
<div attribute="abc"></div>

<script>
    $("[attribute=abc]").addClass("ng-hide");
</script>

<div print="true"></div>
<div print="true"></div>
<div print="true"></div>

<table>
    <tr trProductId="1"></tr>
    <tr trProductId="2"></tr>
    <tr trProductId="3"></tr>
</table>

<script>
    var a = $("div[print]").length;
    var a = $("div[print=true]").length;
    console.log(a)

    $("tr[trProductId='" + copyTarget + "']").after("123");

</script>

*、常用

$("#allwaiting :first").find("div div:first").removeClass("active");

*
*
*
*
*
*