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

来源：互联网发布：苹果mac官方壁纸编辑：程序博客网时间：2024/06/05 10:56

获取标签的方式

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>

可以提炼的知识：
1.dl dt dd ul ol li的用法
2.事件代理：特别处理是对于脚本生成的代码监听特别有用
3.给标签、class样式添加新的样式
4.jquery对标签的系列操作

0 0