jquery 伪类选择器节点操作

最新推荐文章于 2023-06-19 16:35:56 发布
最新推荐文章于 2023-06-19 16:35:56 发布
阅读量473 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18932003/article/details/119703343
版权 
t148
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .select{
            display: none;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //可见性 伪类选择器
           $("#btn1").click(function () {
               $("li:hidden").css("display","block")
                   .css("background-color","red");
           });
        });
</script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li class="select">jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input type="button" id="btn1" value="显示">
</body>
</html>


t149
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //内容 伪类选择器
            //：contains（text）
           $("p:contains(jQuery)").css("color","blue");
        });
</script>
</head>
<body>
    <div>jQuery实战开发</div>
    <p>write less do more</p>
    <p>从JavaScript到jQuery</p>
    <div>欢迎来到虾米大王</div>
</body>
</html>


t150
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //内容 伪类选择器
            //：has（selector）
           $("div:has(span)").css("color","blue");
        });
</script>
</head>
<body>
    <div>
        <p>这是段落</p>
    </div>
    <div>
        <p>这是另一个段落</p>
        <span>这是一个span</span>
    </div>
</body>
</html>

t151
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            margin-top: 5px;
            margin-left: 50px;
        }
        table,tr,td{
            border: 1px solid silver;
        }
        td{
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //内容 伪类选择器
            //：empty
           $("td:empty").css("background-color","red")
               .html("?");
        });
</script>
</head>
<body>
    <table>
        <tr>
            <td>2</td>
            <td>4</td>
            <td>8</td>
        </tr>
        <tr>
            <td>16</td>
            <td>32</td>
            <td>64</td>
        </tr>
        <tr>
            <td>128</td>
            <td>256</td>
            <td></td>
        </tr>
    </table>
</body>
</html>


t152
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            margin-top: 5px;
            margin-left: 50px;
        }
        table,tr,td{
            border: 1px solid silver;
        }
        td{
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //内容 伪类选择器
            //：parent
            $("td:parent").css("background-color","red");
        });
</script>
</head>
<body>
<table>
    <tr>
        <td>2</td>
        <td>4</td>
        <td>8</td>
    </tr>
    <tr>
        <td>16</td>
        <td>32</td>
        <td>64</td>
    </tr>
    <tr>
        <td>128</td>
        <td>256</td>
        <td></td>
    </tr>
</table>
</body>
</html>

t153
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //表单 伪类选择器
            //：checkbox
           //$("input:checkbox").attr("checked","true");
            $("input:checkbox").attr("checked","checked");
        });
</script>
</head>
<body>
    <p>性别：
        <input type="radio" name="gendar" id="sex_man">
        <label for="sex_man">男</label>
        <input type="radio" name="gendar" id="sex_woman">
        <label for="sex_woman">女</label>
    </p>
    <p>喜欢的水果：
        <input type="checkbox" id="apple"><label for="apple">苹果</label>
        <input type="checkbox" id="watermelon"><label for="watermelon">西瓜</label>
        <input type="checkbox" id="peach"><label for="peach">蜜桃</label>
    </p>
</body>
</html>


t154
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //表单 伪类选择器
            //：radio
            $("input:radio").attr("checked","checked");
            //单选按钮按照name名称分组，每组中只有一个生效，所以设置单选选中，只有最后一个有效
        });
</script>
</head>
<body>
    <p>性别：
        <input type="radio" name="gendar" id="sex_man">
        <label for="sex_man">男</label>
        <input type="radio" name="gendar" id="sex_woman">
        <label for="sex_woman">女</label>
    </p>
    <p>喜欢的水果：
        <input type="checkbox" id="apple"><label for="apple">苹果</label>
        <input type="checkbox" id="watermelon"><label for="watermelon">西瓜</label>
        <input type="checkbox" id="peach"><label for="peach">蜜桃</label>
    </p>
</body>
</html>

t155
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //表单 伪类选择器
            //:text
           $("input:text").css({
               border:"2px solid #666666",
               width:"300px",
               height:"30px",
               lineheight:"30px",
               marginTop:"20px"
           });
        });
</script>
</head>
<body>
    <div>
        姓名：<input type="text"><br>
        曾用名：<input type="text"><br>
        密码：<input type="password"><br>
    </div>
</body>
</html>

t156
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //表单 伪类选择器
            //:password
            $("input:password").css({
                border:"2px solid #666666",
                width:"300px",
                height:"30px",
                lineheight:"30px",
                marginTop:"20px"
            });
        });
</script>
</head>
<body>
<div>
    姓名：<input type="text"><br>
    曾用名：<input type="text"><br>
    密码：<input type="password"><br>
</div>
</body>
</html>

t157
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //表单属性 伪类选择器
            // ：checked
            $("#btn1").click(function () {
                var result = $("input:checked").val();
                window.alert(result);
            });

        });
</script>
</head>
<body>
    <p>喜欢的水果：
        <input type="checkbox" id="apple" value="苹果"><label for="apple">苹果</label>
        <input type="checkbox" id="watermelon" value="西瓜"><label for="watermelon">西瓜</label>
        <input type="checkbox" id="peach" value="蜜桃"><label for="peach">蜜桃</label>
    </p>
    <input type="button" id="btn1" value="提示">
</body>
</html>

t158
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //表单属性 伪类选择器
            //：selected
            $("#btn1").click(function () {
                var result = $("div :selected").val();
                window.alert(result);
            });
        });
</script>
</head>
<body>
    <div>
        <select>
            <option>北京市</option>
            <option>天津市</option>
            <option>重庆市</option>
        </select>
    </div>
    <input type="button" id="btn1" value="提示">
</body>
</html>

t159
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //其他 伪类选择器
            //:not(selector)
           $("li:not(#select)").css("color","blue");
        });
</script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li id="select">jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

t160
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //习题，如何选中最后一个p元素
        $(function () {
            $("p:nth-of-type(3)").css("background-color","red");
        });
</script>
</head>
<body>
    <div>1</div>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <div>5</div>
</body>
</html>

t161
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //创建元素节点
           $("#btn1").click(function () {
               var $li = "<li>jQuery</li>";
               $("ul").append($li);
           });
        });
</script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
    <input type="button" id="btn1" value="添加">
</body>
</html>

t162
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //创建复杂元素
        $(function () {
           $("#btn1").click(function () {
               var $li = "<li><a href='http://www.163.com'>网易</a></li>";
               $("ul").append($li);
           });
        });
</script>
</head>
<body>
    <input type="button" id="btn1" value="添加">
    <ul>
        <li><a href="http://www.baidu.com">百度</a></li>
    </ul>
</body>
</html>

t163
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //插入节点
            //prepend
            //$(A).prepend(B)，往A内部的开始处插入B
           $("#btn1").click(function () {
               var $strong = "<strong>jQuery教程</strong>";
               $("p").prepend($strong);
           });
        });
</script>
</head>
<body>
    <p>虾米大王</p>
    <input type="button" id="btn1" value="插入">
</body>
</html>

t164
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //插入节点
            //prependTo
            //$(A).prependTo(B)，将A插入到B内部的开始处
            $("#btn1").click(function () {
                var $strong = "<strong>jQuery教程</strong>";
                $($strong).prependTo("p");
            });

            /*
            在jQuery中，prependTo和prepend两个方法类似，
            但是两者的操作对象是颠倒的。

             */
        });
</script>
</head>
<body>
    <p>虾米大王</p>
    <input type="button" id="btn1" value="插入">
</body>
</html>

t165
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //插入节点
            //append
            //$(A).prepend(B)，往A内部的末尾处插入B
            $("#btn1").click(function () {
                var $strong = "<strong>jQuery教程</strong>";
                $("p").append($strong);
            });
        });
</script>
</head>
<body>
    <p>虾米大王</p>
    <input type="button" id="btn1" value="插入">
</body>
</html>

t166
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //插入节点
            //appendTo
            //$(A).prepend(B)，将A插入到B的末尾处
            $("#btn1").click(function () {
                var $strong = "<strong>jQuery教程</strong>";
                $($strong).appendTo("p");
            });
        });
</script>
</head>
<body>
    <p>虾米大王</p>
    <input type="button" id="btn1" value="插入">
</body>
</html>


t167
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //插入节点
            //before
            //$(A).before(B)，表示往A外部的前面插入B
            $("#btn1").click(function () {
                var $strong = "<strong>jQuery教程</strong>";
                $("p").before($strong);
            });
        });
</script>
</head>
<body>
    <p>虾米大王</p>
    <input type="button" id="btn1" value="插入">
</body>
</html>

t168
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //插入节点
            //insertBefore
            //$(A).insertBefore(B)，将A插入到B外部的前面
            $("#btn1").click(function () {
                var $strong = "<strong>jQuery教程</strong>";
                $($strong).insertBefore("p");
            });
        });
</script>
</head>
<body>
    <p>虾米大王</p>
    <input type="button" id="btn1" value="插入">
</body>
</html>

t169
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //插入节点
            //after
            //$(A).after(B)，表示往A外部的后面插入B
            $("#btn1").click(function () {
                var $strong = "<strong>jQuery教程</strong>";
                $("p").after($strong);
            });
        });
</script>
</head>
<body>
    <p>虾米大王</p>
    <input type="button" id="btn1" value="插入">
</body>
</html>

t170
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //插入节点
            //insertAfter
            //$(A).insertAfter(B)，表示将A插入到B外部的后面
            $("#btn1").click(function () {
                var $strong = "<strong>jQuery教程</strong>";
                $($strong).insertAfter("p");
            });
        });
</script>
</head>
<body>
    <p>虾米大王</p>
    <input type="button" id="btn1" value="插入">
</body>
</html>

t171
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $("#btn_prepend").click(function () {
                var text = $("#name").val();
                if(text == "") return;
                var $node = "<li>"+ text + "</li>";
                $("ul").prepend($node);
            });

            $("#btn_prependto").click(function () {
                var text = $("#name").val();
                if(text == "") return;
                var $node = "<li>"+ text + "</li>";
                $($node).prependTo("ul");
            });

            $("#btn_append").click(function () {
                var text = $("#name").val();
                if(text == "") return;
                var $node = "<li>"+ text + "</li>";
                $("ul").append($node);
            });

            $("#btn_appendto").click(function () {
                var text = $("#name").val();
                if(text == "") return;
                var $node = "<li>"+ text + "</li>";
                $($node).appendTo("ul");
            });

            $("#btn_before").click(function () {
                var text = $("#name").val();
                if(text == "") return;
                var $node = "<p>"+ text + "</p>";
                $("ul").before($node);
            });

            $("#btn_insertBefore").click(function () {
                var text = $("#name").val();
                if(text == "") return;
                var $node = "<p>"+ text + "</p>";
                $($node).insertBefore("ul");
            });

            $("#btn_after").click(function () {
                var text = $("#name").val();
                if(text == "") return;
                var $node = "<p>"+ text + "</p>";
                $("ul").after($node);
            });

            $("#btn_insertAfter").click(function () {
                var text = $("#name").val();
                if(text == "") return;
                var $node = "<p>"+ text + "</p>";
                $($node).insertAfter("ul");
            });

            /*
            总结一下，在jQuery中用于插入节点的方法有4组，
            prepend 和 prependTo
            append 和 appendTo
            before 和 insertBefore
            after 和 insertAfter

            4组方法，可以这样划分：
            1组和2组是内部插入节点，
            3组和4组是外部插入节点，
            轻松好记，可以这样
            一类是prepend，append，before，after
            另一类是prependTo，appendTo，insertBefore，insertAfter
            我个人比较喜欢第一类，符合一般的常用思维模式，
            但是第二类的使用比较方便，可以直接将节点插入到需要的地方。
            大家按需学习吧。
             */
        });
</script>
</head>
<body>
    <div>
        <input type="text" id="name">
        <br>
        <span>
            <input type="button" id="btn_prepend" value="prepend">
            <input type="button" id="btn_append" value="append">
            <input type="button" id="btn_before" value="before">
            <input type="button" id="btn_after" value="after">
        </span>
        <br>
        <span>
            <input type="button" id="btn_prependto" value="prependTo">
            <input type="button" id="btn_appendto" value="appendTo">
            <input type="button" id="btn_insertBefore" value="insertBefore">
            <input type="button" id="btn_insertAfter" value="insertAfter">
        </span>
    </div>
    <div>
        <ul>
            <li>虾米大王</li>
        </ul>
    </div>
</body>
</html>

t172
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //删除元素
            // remove
           $("#btn1").click(function () {
               $("li:nth-child(4)").remove();
           });
        });
</script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input type="button" id="btn1" value="删除">
</body>
</html>

t173
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //删除元素
            //remove方法有返回值
           $("#btn1").click(function () {
               var $li = $("li:nth-child(4)").remove();
               $($li).appendTo("ul");
           }); 
        });
</script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input type="button" id="btn1" value="删除">
</body>
</html>

t174
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul li:nth-child(2),ul li:nth-child(4)
        {
            background-color: orange;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //删除元素
            //使用remove进行元素互换练习
           $("#btn1").click(function () {
               var $li1 = $("li:nth-child(2)").remove();
               var $li2 = $("li:nth-child(3)").remove();

               $($li1).insertAfter("ul li:nth-child(2)");
               $($li2).insertBefore("ul li:nth-child(2)");
           });
        });
</script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input type="button" id="btn1" value="互换">
</body>
</html>

t175
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //删除元素
            //remove，是彻底删除，会一并删除元素绑定的事件
            //detach，是半彻底删除，只删除元素，事件依然有效
           $("li").click(function () {
               alert('虾米大王');
           });
           $("#btn1").click(function () {
              //var $li = $("li:nth-child(4)").remove();
              var $li = $("li:nth-child(4)").detach();
              $($li).appendTo("ul");
           });
        });
</script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input type="button" id="btn1" value="删除">
</body>
</html>

qq_18932003
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
伪类（伪类选择器）
weixin_46736220的博客
04-06 326
文章目录基本过滤选择器内容过滤选择器可见性过滤选择器属性过滤选择器表单对象属性过滤选择器 基本过滤选择器 :first 选取第一个元素，返回单个元素 $(“p:first”) 选取所有< p>元素中第一个< p>元素 :last 选取最后一个元素，返回单个元素 :not(selector) 去除所有与给定选择器匹配的元素，返回元素集合 $(“input:not(.myClass)”) 选取 类名 不是 myClass 的< input> 元素 :eve
jQuery选择器详细介绍：伪类选择器
天空的博客
10-18 1万+
jQuery选择器详细介绍：伪类选择器 二、子元素伪类选择器 总结： （1）“：first-child”是选择父元素下的第1个子元素（不区分元素类型），“：first-of-type”是选择父元素下某个元素类型的第1个子元素（区分元素类型） （2）在“:only-child选择器”中，父元素是只有一个子元素的。但是在“:only-of-type选择器”中，却可以有多个子元素
JQuery 选择器、DOM节点操作练习实例
10-19
下面小编就为大家带来一篇JQuery 选择器、DOM节点操作练习实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery伪类选择器
weixin_30298497的博客
04-07 385
//伪类选择器： 特定位置的选择器： jQuery（“selector:first”）//第一个jQuery（“selector:last”）//最后一个jQuery（“selector:eq(index)”）//指定位置 <div> <img src="../img/飘雪.jpg" width="200px" h...
使用JavaScript修改伪类样式的方法总结
xin_xun_的博客
04-18 4064
项目中时常会需要用到使用JavaScript来动态控制为元素(:before,:after)的样式，但是我们都知道JavaScript或jQuery并没有伪类选择器。这里总结一下几种常见的方法。 HTML class="red">Hi, this is a plain-old, sad-looking paragraph tag. CSS .red::before { conte
jquery写伪类样式、隐藏和显示、循环写法、点击事件等等项目中的事件方法
最新发布
weixin_60172238的博客
06-19 285
项目中的一些事件
jQuery选择器_动力节点Java学院整理
10-19
选择器是jQuery的核心，一个选择器写出来类似$('#dom-id')。下面给大家分享jQuery选择器的相关知识，感兴趣的朋友一起看看吧
JQuery常见节点操作实例分析
11-29
本文实例讲述了JQuery常见节点操作。分享给大家供大家参考，具体如下： 插入节点 append()和appengTo()：在现存元素内部，从后面插入 prepend()和prependTo()：在现存元素外部，从前面插入 after()和insertAfter()：...
jQuery层级选择器_动力节点节点Java学院整理
10-19
主要为大家详细介绍了jQuery层级选择器的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JQuery中层次选择器用法实例详解
10-24
主要介绍了JQuery中层次选择器用法,以实例形式较为详细的分析了jQuery中层次选择器的各种常见使用技巧,并备有较为详细的注释说明,需要的朋友可以参考下
jQuery对伪类元素进行操作
w19981225的博客
02-05 1585
$(’’).appendTo(‘body’);
jQuery（一）--概述、$()函数（选择器、伪类等）
小白小白从不日别的博客
05-01 2175
一、概述 1.本质：快速简洁的JavaScript框架是继Prototype之后的又一个优秀的JavaScript库（或JavaScript框架） jQuery有非常便利的选择元素的能力，用一个$()函数就能搜寻页面上的元素；$是jQuery的别称（另外的名字），在代码中可以使用jQuery代替$，但一般为了方便，通常都是直接用$ $是jQuery的顶级对象，相当于原生JavaScript中的window，把元素利用$包装成jQuery对象，就可以调用jQuery的方法 jQuery的操作...
伪对象选择器
weixin_44790641的博客
02-07 245
一、定义： 也叫伪元素选择器，用于在元素前面或后面插入内容 二、语法： ::before{ content:"";(在元素内容的最前面) } ::after{ content:"";(在元素内容的最后面) } 三、实例： 1.插入文字： .box::before{ content: “前面”; } .box::after{ content: “后面”; } <!DOCTYPE html> <html lang="en"> <head> <meta chars
JavaScript(12) jQuery选择器(基本选择器、层级选择器、伪类选择器、属性选择器)
热门推荐
郑清
11-06 4万+
提示：我们可以从jquery文档上学习哦~ 下面简单的介绍几种常用的选择器 ===================================基本选择器================================== id选择器 #id --> 匹配指定id名称 元素选择器 --> 匹配指定标签名 类型选择器 .class --> ...
jquery选择器之伪类选择器
跬步科技 的专栏
11-20 3621
伪类选择器： :nth-child的用法： nth-child是一个css3伪类选择符,在jQuery中被实现了，在Jquery API中对nth-child的定义是：”匹配其父元素下的第N个子或奇偶元素“。 例  伪类nth-child实现隔行换色 [html] view plaincopy html xmlns="htt
jquery用outerHTML替换html节点
06-06
其中，`$('#old-node')`和`$('<div id="new-node">New Node</div>')`分别为获取旧节点和创建新节点的jQuery选择器。`newNode[0].outerHTML`将新节点转换为HTML字符串，然后替换旧节点。注意，这里使用了数组下标 `[0...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值