Jquery获取标签及对标签的相关操作

最新推荐文章于 2024-09-05 11:16:50 发布

kwing-0125

最新推荐文章于 2024-09-05 11:16:50 发布

阅读量1k

点赞数

分类专栏： jquery 文章标签： jquery 标签 class

本文链接：https://blog.csdn.net/qq_33339121/article/details/53432402

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

获取标签的方式

1.使用id获取表签
2.使用class样式获取标签
3.使用标签关系获取标签
eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./easy-ui/jquery.min.js"></script>
</head>
<style type = "text/css">
    .li1{
        background-color: chocolate;
        width:200px;
    }
    dt{
        font-weight:bold;
    }
</style>
<body>
    <h3>一个定义列表</h3>
    <!--dl dt dd ul li-->
    <dl id="dl1">
        <dt>描述dl、dt、dd、ul、li作用</dt>
        <dd>
            <ul>
                <li id="li1" class="li1"><span>dl:定义一个列表</span></li>
                <li class="li2"><span>dt:定义列表中的项目</span></li>
                <li><span>dd:对该项目的描述</span></li>
                <li><span>ul:定义无序列表</span></li>
                <li><span>li:列表项目</span></li>
            </ul>
            <ol>
                <li><span>ol:定义有序列表</span></li>
            </ol>
        </dd>
    </dl>
</body>
<script type = "text/javascript">
    //对标签做监听事件
    $(function(){
        /**1.使用id获取表签*/
        //使用监听代理，好处：即使是通过脚本生成的内容也能被监听到
       $("#dl1").on("click",".li1",function(){
           alert("您点击了第一个li列表项");
       });
       /**2.使用class样式获取标签*/
       $(".li2").click(function(){
           alert("您点击了第二个li列表项")
       });
        /**3.使用标签关系获取标签*/
        $("#dl1 dd:first ul:eq(0) li:eq(2) span").click(function(){
           alert($(this).text());
        });
        /**判断标签是否存在*/
        if($("#ol1").length == 0){
            var li = "<li style='background-color: red;width:400px;'><span>由于不存在id=ol1的标签，因此加载的时候多出此一列</span></li>";
            $("ol").append(li);
        }
</script>
</html>