jQuery中的DOM操作（1）

来源：互联网发布：it was until that 编辑：程序博客网时间：2024/05/19 12:29

1、查找节点

<body>
<ptitle="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>

<scripttype="text/javascript">
$(function(){
        var$para = $("p");                        //获取<p>节点
var $li = $("ulli:eq(1)");   //获取第二个<li>元素节点

  var p_txt = $para.attr("title");// 输出<p>元素节点属性title
var ul_txt = $li.attr("title");        //获取<ul>里的第二个<li>元素节点的属性title
  var li_txt = $li.text();           // 输出第二个<li>元素节点的text

alert(ul_txt);
alert(li_txt);
alert(p_txt);
});
</script>

2、创建节点

<body>

<ptitle="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>

</body>

实例一：
<scripttype="text/javascript">

$(function(){
   var $li_1 =$("<li></li>");   // 创建第一个<li>元素
  var $li_2 =$("<li></li>");   // 创建第二个<li>元素

var $parent =$("ul");                //获取<ul>节点。<li>的父节点

$parent.append($li_1);            // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2);
//可以采取链式写法：$parent.append($li_1).append($li_2);
});

</script>

实例二：
<scripttype="text/javascript">

$(function(){
var$li_1 =$("<li>香蕉</li>");        // 创建一个<li>元素，包括元素节点和文本节点
       //“香蕉”就是创建的文本节点。
var$li_2 =$("<li>雪梨</li>");        // 创建一个<li>元素，包括元素节点和文本节点
       //“雪梨”就是创建的文本节点。

var $parent =$("ul");                //获取<ul>节点。<li>的父节点

$("ul").append($li_1);            // 添加到<ul>节点中，使之能在网页中显示
$("ul").append($li_2);            // 添加到<ul>节点中，使之能在网页中显示

});

</script>

实例三：
<scripttype="text/javascript">
$(function(){
var $li_1 = $("<li title='香蕉'>香蕉</li>");    //创建一个<li>元素
//包括元素节点,文本节点和属性节点
//其中title='香蕉'就是创建的属性节点
var $li_2 = $("<li title='雪梨'>雪梨</li>");   //创建一个<li>元素
          //包括元素节点,文本节点和属性节点
          //其中title='雪梨' 就是创建的属性节点
          var $parent =$("ul");                //获取<ul>节点。<li>的父节点

$parent.append($li_1);            // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2);            // 等价于：$parent.append($li_1).append($li_2);
});

</script>

3、插入节点

<body>
<ptitle="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
实例一：
<scripttype="text/javascript">

$(function(){
var$li_1 = $("<lititle='香蕉'>香蕉</li>");        // 创建第一个<li>元素
var$li_2 = $("<lititle='雪梨'>雪梨</li>");        // 创建第二个<li>元素
var$li_3 = $("<lititle='其它'>其它</li>");        // 创建第三个<li>元素

var$parent =$("ul");                //获取<ul>节点，即<li>的父节点
var$two_li = $("ul li:eq(1)");        // 获取<ul>节点中第二个<li>元素节点

$parent.append($li_1);                            // append方法将创建的第一个<li>元素添加到父元素的最后面
$parent.prepend($li_2);                            // prepend方法将创建的第二个<li>元素添加到父元素里的最前面
$li_3.insertAfter($two_li);
// insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后

});

</script>

实例二：移动节点

<scripttype="text/javascript">

$(function(){
var$one_li = $("ul li:eq(1)");        // 获取<ul>节点中第二个<li>元素节点
var$two_li = $("ul li:eq(2)");        // 获取<ul>节点中第三个<li>元素节点
$two_li.insertBefore($one_li);    //移动节点
});

</script>

4、删除节点

<body>
<ptitle="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
实例一：
<scripttype="text/javascript">

$(function(){
$("ulli:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
});

</script>
实例二：
<scripttype="text/javascript">

$(function(){
var $li = $("ul li:eq(1)").remove();// 获取第二个<li>元素节点后，将它从网页中删除。
$li.appendTo("ul"); //把刚才删除的又重新添加到<ul>元素里
//所以，删除只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它
});

</script>

实例三：

<scripttype="text/javascript">

$(function(){
$("ulli").remove("li[title!=菠萝]");
//把<li>元素中属性title不等于"菠萝"的<li>元素删除
});

</script>

实例四：
<scripttype="text/javascript">

$(function(){
$("ulli:eq(1)").empty(); // 找到第二个<li>元素节点后，清空此元素里的内容
});

</script>

5、复制节点

<body>
<ptitle="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>

实例一：
<scripttype="text/javascript">
$(function(){
$("ul li").click(function(){
     $(this).clone().appendTo("ul");// 复制当前点击的节点，并将它追加到<ul>元素
})
});
</script>
再次点击菠萝，则不能继续复制。
实例二：

<scripttype="text/javascript">
$(function(){
$("ul li").click(function(){
    $(this).clone(true).appendTo("ul");// 注意参数true
     //可以复制自己，并且他的副本也有同样功能。
})
});
</script>
这种方式则可以

阅读全文

1 0