jQuery DOM 节点操作-优快云博客

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="../websites/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>jQuery DOM节点操作</title>
</head>

<body>
<!--DOM-->
<!--分为DOM Core(核心)、HTML-DOM、CSS-DOM-->
<!--1.DOM Core-->
<p title="你最喜欢的水果是？">你最喜欢的水果是？</p>
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ul>
<!--2.CSS-DOM-->
<div class="demo1">
</div>
<input type="button" value="变色">
</body>
</html>
<script>
$(function(){
    //添加节点
    var $li_1 = $('<li>雪梨</li>');
    var $li_2 = $('<li>葡萄</li>');
    //append向目标元素内部的后面追加元素
    $('ul').append($li_1);
    $('ul').append($li_2);
    $('<li>甜橙</li>').appendTo($('ul'));
    //prepend向目标元素内部的前面追加元素
    $('ul').prepend($('<li>西瓜</li>'));
    $('<li>蜜桃</li>').prependTo($('ul'));
    //after向目标元素外部的后面追加元素；before是向目标元素外部的前面追加元素
    $('ul').after($('<p>我是ul外部后边的段落</p>'));
    $('<p>我是ul外部后边的段落1</p>').insertAfter($('ul'));
    $('ul').before($('<p>我是ul外部前边的段落</p>'));
    $('<p>我是ul外部前边的段落1</p>').insertBefore($('ul'));
    //对节点进行移动
    var $li_3 = $('ul li:eq(2)');
    var $li_1 = $('ul li:eq(0)');
    $li_3.insertBefore(($li_1));
    //删除节点-jQuery提供了3中方法
    //1.remove()方法
    var $li_last = $('ul li:last').remove();
    //alert($li_last);//remove()方法返回的是一个对象,删除后还是可以再使用的。
    $li_last.appendTo($('ul'));//把刚才删除的节点再次添加到ul中
    //另外remove()方法也可以通过传递参数来选择性的删除元素
    //2.detach()方法：与remove()方法差不多，区别是remove()方法删除时，将目标元素的绑定事件和附加的数据都删除，detach()方法则会保留他们。
    $('ul li:first').click(function(){
        alert($(this).text());
        })
    var $li_first = $('ul li:first').detach();//删除元素
    $li_first.prependTo($('ul'));//再次添加到ul中，点击事件依然有效
    var $li_first = $('ul li:first').remove();//删除元素
    $li_first.prependTo($('ul'));//再次添加到ul中，点击事件已经失效
    //3.empty()方法：并不是删除节点，而是清空节点，它能清空元素中的所有后代节点，清空后再次加入到ul中依然无法显示其原先的内容。
    var $li_two = $('ul li:eq(1)').empty();
    $li_two.prependTo($('ul'));
    //复制节点：clone()方法 括号内可以写true或false；true是克隆元素的同时也克隆元素中绑定的事件，默认不写参数为false。
    $('ul li:first').click(function(){
        $(this).clone(true).appendTo($('ul'));
        alert($(this).text());
        })
    //替换节点 
    //1.replaceWith();
    $('body p:eq(1)').replaceWith('<strong>我是替换段落</strong>');
    //2.replaceAll();
    $('<strong>我是替换段落</strong>').replaceAll($('body p:eq(1)'));
    //注意：这两个方法都会将替换前的元素所绑定的事件取消，需要在新元素上重新绑定事件。
    //包裹节点
    //1.wrap()方法：是将匹配元素进行单独包裹(在匹配元素的外层)
    $('ul li').wrap('<b></b>');
    //2.wrapAll()方法：是将匹配元素用一个元素来包裹(在匹配元素的外层)
    $('ul li').wrapAll('<b></b>');
    //3.wrapInner()方法：是将匹配元素进行单独包裹(在匹配元素的内层)
    $('ul li').wrapInner('<b></b>');
    //属性操作:对一个元素进行多属性设置要用对象键值对的方式设置
    $('body p:eq(1)').attr({'title':'我是外部前边的段落','name':'111'});
    //CSS操作
    $('input').click(function(){
        //$('div').toggleClass('demo2');简便变色方法
        //原始变色方法
        if($('div').hasClass('demo1'))
        {
            $('div').removeClass('demo1');
            $('div').addClass('demo2');
        }
        else
        {
            $('div').removeClass('demo2');
            $('div').addClass('demo1');
        }
        })
    //遍历节点
    //1.children()方法：用于取得匹配元素的子元素集合,只考虑子元素，而不考虑其他后代元素
    var $children = $('ul').children();
    //alert($children.length);
    //2.next()方法:取匹配元素同级的下一个元素
    //   nextAll()方法：取匹配元素同级下面的所有元素
    //3.prev()方法：取匹配元素同级的上一个元素
    // prevAll()方法：取匹配元素同级上面的所有元素
    //4.siblings()方法：取匹配元素同级的前后所有元素
    })
</script>