JQuery选择器使用案例

最新推荐文章于 2023-10-19 15:17:55 发布

冷眸丶杵

最新推荐文章于 2023-10-19 15:17:55 发布

阅读量323

点赞数

分类专栏： jQuery 文章标签： JQuery选择器

本文链接：https://blog.csdn.net/LY9457/article/details/82389122

版权

jQuery 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

先附上代码展示：

<body>
    <form id="form1" runat="server">
        <div>
        <div>list1</div>
        <div>list2</div>
        <div>list3</div>
        <div>list4</div>
        </div>
        <div>
            列表1
        <ul>
            <li id="t" title="list">这是1</li>
            <li id="i" title="list1">这是2</li>
            <li>这是3</li>
            <li title="t1">这是4</li>
            <li id="d" title="list3">这是5</li>
            <li id="q">这是6</li>
            <li title="list5"></li>
        </ul>
        </div>
        <asp:Button ID="btn_live" runat="server" Text="live" />
        <div visible="true">列表2</div>
        <div id="one">列表3</div>
        <div>列表4</div>
        <div>水果5
            <p>苹果</p>
            <p>香蕉</p>
            <p>橘子</p>
            <p>火龙果</p>
        </div>
        <div>列表6</div>
        <div hidden="hidden">显示与隐藏</div>
        <asp:Button ID="btn_maopao" runat="server" Text="冒泡" />
        <div>
            <ol id="D1">
            </ol>
        </div>
        <div>
            <ol id="id1">
                <li class="class1">属性1</li>
                <li id="div" class="class">属性2</li>
                <li>属性3</li>
                <li class="C1">属性4</li>
                <li>属性5</li>
                <li id="C2">属性6</li>
            </ol>
        </div>
    </form>
</body>

使用JQuery选择器：

 <script src="Scripts/jquery-1.7.2.js"></script>
    <style type="text/css">
        #id {
            background-color:violet;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("div div").css("color", "red");//空格取后面的div
            //$("div>div").css("color", "green");//>取后面的div
          
            //$("#one+div").css("color", "blue");//取id后面那一位div
            //$("#one~div").css("color", "yellow");//取id后面的两位div
            //$("li:first").css("color", "red");//divli中的第一个
            //$("li:last").css("color", "blue");//divli中的最后一个
            //$("li:even").css("background", "aqua");//li中的偶数（从0开始）
            //$("li:odd").css("background", "blueviolet");//li中的奇数（从0开始）
            //$("li:eq(3)").css("background", "chartreuse");//li中等于3（从0开始，列表4）
            //$("li:gt(4)").css("background", "darkgoldenrod");//li中大于4（大于列表5的只有列表6）
            //$("li:lt(5)").css("background", "brown");//li中小于5（小于列表6的是列表1,2,3,4,5）
            //$("div:contains(水果)").css("color", "darkorange");//选取含有文本内容的
            //$("div:has(p)").css("color", "red");//选取含有p标签的元素
            //$("li:parent").css("color", "yellow");//选取含有子元素(文本元素）
            //$("li[title]").css("color", "darkorange");//选取拥有‘title’的元素
            //$("li[title=list1]").css("color", "darkgoldenrod");//选取‘title等于list1’的元素
            //$("li[title!=list1]").css("color", "chartreuse");//选取‘title不等于list1’的元素
            //$("li[title][title!=list1]").css("color", "brown");//选取‘title中不等于list1’的元素
            //$("li[title][title=list1]").css("color", "violet");//选取‘title中等于list1’的元素
            //$("li[title^=list1]").css("color", "aqua");//选取属性为title开头的元素list1
            //$("li[title$=list5]").css("color", "red"); //选取属性为title结尾的元素list5
            //$("li[title*=list]").css("color", "chartreuse");//选取属性为title中所包含的list元素
            //$("li[id][title^=list]").css("color", "darkgoldenrod");//选取用于id属性，且title属性中以list开头的元素
            //$("li[id][title*=list]").css("color", "brown"); //选取用于id属性，且title属性中包含list的元素
            //$("li[id]").css("color", "darkorange");//选取所拥有id属性的元素
            //$("ul li:first-child").css("color", "red"); //选取ul中的第一个li元素
            //$("div :first-child").css("color", "aqua"); //选取div中每一个中的元素(加空格)
            //$("ul li:last-child").css("color", "red"); //选取ul中的最后一个li元素
            //$("ul li:nth-child(4)").css("color", "aqua");//选取索引元素，从1开始
            //$("ul li:nth-child(even)").css("background", "violet");//选取父元素索引下值的偶数元素
            //$("ul li:nth-child(odd)").css("background", "brown");//选取父元素索引下值的奇数元素
            //$("ul li:nth-child(2n)").css("background", "blueviolet");//选取父元素索引下值是2的倍数元素
            //click点击事件（li的第一个）
            //$("li:first").click(function () {
            //    alert($(this).text());
            //});
           // bind和unbind删除和解除
            //$("li").bind("click", function () {
            //    alert($(this).text());
            //});
            //解除绑定
            //$("li:first").unbind("click");
            //on和off删除和解除
            //$("li").on("click", function () {
            //    alert($(this).text());
            //});
            //解除绑定
            //$("li:first").off("click");
            //one只能执行一次(点击一次之后再次点击就不会出现)
            //$("li:first").one("click", function () {
            //    alert($(this).text());
            //});
            //给匹配的元素click一个事件
            //$("li").live("click", function () {
            //    alert($(this).text());
            //});
            //删除匹配事件，与live相反（取消点击事件）
            //$("li").die("click"); 
            //添加一个事件，点击按钮出现的时间短
            //$("#btn_live").click(function () {
            //    $("ul").append("<li>芒果</li>");
            //});
            //hover模仿悬停事件鼠标移入移出
            //$("li:first").hover(function () { alert("移入") }, function () { alert("移出") });
            //toggle绑定多个事件处理，轮流执行click事件
            //$("li:last").toggle(function () { alert("我是1") }, function () { alert("我是2") }, function () { alert("我是3") }, function () { alert("我是4") });
            //冒泡事件
            //$("#Button1,body").click(function () {
            //    alert($(this).text());
            //    return false; //结束冒泡事件
            //});

            //append与appendTo谁先在前面运行，谁在后面显示结果。
            //prepend与prependTo谁先在前面运行，谁排第一位。
            向每个匹配元素内部追加内容
            //$("ol").append("<li>列表1</li>"); //（<li>列表1</li>添加到ol后面）
            插入到匹配元素中的前部
            //$("ol").prepend("<li>列表2</li>"); //（<li>列表2</li>添加到ol前面）
            将所有匹配的元素追加到指定元素中
            //$("<li>列表3</li>").appendTo($("ol")); //（<li>列表3</li>添加到ol后面）
            将所有匹配元素插入到指定元素中的前部
            //$("<li>列表4</li>").prependTo($("ol")); //（<li>列表4</li>添加到ol前面）
            //元素节点
            //$("<ol style='font-size:24px; color:Aqua;'></ol>").appendTo($(document.body));
            //$("ol").append("<li>创建元素节点1</li>");
            //$("ol").append("<li>创建元素节点2</li>");
            //after、before、insertAfter、insertBefore
            //$("#D1").after("<li>after我是1</li>"); //<li>我是1</li>插入到我是3后面
            //$("#D1").before("<li>before我是2</li>"); //<li>我是2</li>插入到我是4前面
            //$("<li>insertAfter我是3</li>").insertAfter($("#D1")); //<li>我是3</li>在我是4后面
            //$("<li>insertBefore我是4</li>").insertBefore($("#D1")); //<li>我是4</li>在我是2前面
            //alert($("#id1").html());//取得第一个匹配元素的html内容，不能用于XML文档
            //alert($("#id1").text());//取得所有匹配元素的内容
            reemove删除所有匹配的元素
            //$("li").remove(".class1"); //删除li class中的属性1
            删除所有匹配的元素
            //$("ol").detach("#id1"); //删除ol id中li的所有属性
            删除匹配的元素集合中所有的子节点
            //$("ol").empty("#id");//删除ol中所包含的id元素
            复制属性2的内容
            //$(".class").clone().appendTo($("#div")); 
            将所有匹配的元素替换成指定的元素
            //$(".C1").replaceWith("<li>列表 replaceWith</li>");
            用匹配的元素替换掉所有匹配到的元素
            //$("<li>列表 replaceAll</li>").replaceAll($("#C2"));
        });
    </script>