安插，复制，替换和删除ul中的li 

<!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>dom</title>
</head>
<body>
    <p title="选择你最喜欢的水果">
        你最喜欢的水果是？</p>
    <ul>
        <li title='苹果'>苹果</li>
        <li title='橘子啊'>橘子</li>
        <li title='菠萝'>菠萝</li>
    </ul>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var $li = $("ul li:eq(1)"); //查找元素节点
            $li.empty(); //删除节点，再试试remove
            $li.replaceWith("<li title ='橘子'>橘子啊啊啊</li>");
            var li_txt = $li.text();
            alert(li_txt);
            alert($li.attr("title")); //查找属性节点
            var $li_1 = $("<li title='香蕉'>香蕉</li>"); //创建<li>元素
            //$("ul").append($li_1); //添加到<ul>节点中
            $("ul").after($li_1); //添加到<ul>节点后
            $("ul li").click(function () {
                $(this).clone().appendTo("ul");
            })
            $("ul").wrap("<p>hi</p>")//用<p>标签把<ul>元素包裹起来
            $("p").attr("title", "水果");
        })
        $(function () {
            var $body = $("body").children();
            alert($body.length);
            for (var i = 0, len = $body.length; i < len; i++) {
                alert($body[i].innerHTML);
            }
        })
    </script>
</body>
</html>

posted @ 2016-06-28 15:17  Chris_在IT道路上前行  阅读(287)  评论(0)    收藏  举报