jQuery DOM常见操作

最新推荐文章于 2022-11-08 07:29:41 发布

gdjlc

最新推荐文章于 2022-11-08 07:29:41 发布

阅读量918

点赞数

分类专栏： jQuery 文章标签： jquery function xhtml button border vb

本文链接：https://blog.csdn.net/gdjlc/article/details/5712605

版权

jQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery DOM</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#test").click(function() {
                alert($("#lang li:eq(0)").text());  //查找元素节点

                alert($("#lang li:eq(1)").attr("title"));  //查找属性节点

                $("#lang").append("<li title='C'>C</li>"); //append()向元素内部追加内容

                $("#lang").prepend("<li title='VB'>VB</li>"); //prepend()向元素内部前置内容

                $("#lang").after("学习啥。。");  //after()元素之后插入内容

                $("#lang").before("兴趣"); //before()元素之前插入内容

                var $li1 = $("#lang li:eq(0)");
                var $li2 = $("#lang li:eq(1)");
                var $li3 = $("#lang li:eq(2)");
                var $li4 = $("#lang li:eq(3)");
                $li2.insertBefore($li1); //移动元素
                $li3.insertAfter($li4); //移动元素


                var $li = $("#lang li:gt(3)").remove(); //remove()删除元素及所有后代元素
                $li.appendTo("#lang"); //把删除元素再添加到ul中

                $("#lang li:eq(4)").empty(); //empty()清空元素及所有后代元素

                $("#lang").wrap("<div style='border:1px #ccc solid'></div>"); //warp()包裹元素

                $("#lang li:eq(0)").attr("title", "鼠标移上来看看。。。"); //设置属性的值

                $("#lang li:eq(1)").removeAttr("title"); //删除属性

                alert($("#lang").children().length); //children()子元素(不包括后代元素)的集合

                alert($("#lang li:eq(1)").next().text()); //next()获取元素后面紧邻的同辈元素

                alert($("#lang li:eq(1)").prev().text()); //prev()获取元素前面紧邻的同辈元素

                alert($("#lang li:eq(1)").siblings().text()); //siblings()获取元素前后紧邻的同辈元素

                $(this).clone(true).appendTo("body"); //复制元素产生一个按钮，ture表示同时复制事件
            });
        });
    </script>

</head>
<body>
    <ul id="lang">
        <li title="C#">C#</li>
        <li title="C++">C++</li>
        <li title="Java">Java</li>
    </ul>
    <input type="button" id="test" value="测试" />
</body>
</html>