文档对象模型(DOM)

 基于jQuery的文档对象模型

<div class="box">
    <div class="sub">盒子一</div>
    </div>
    <div class="box">
        <div class="sub">盒子2</div>
    </div>

    <p class="code">我不是代码创造者，只是代码的搬运工！！！</p>

    <h1>一级标题</h1>

    <div id="container">
        <p>第一行</p>
        <p>第二行</p>
    </div>
</div>

<script>
    var node = $('<p>农夫山泉有点甜</p>')
	//向类名为sub的元素的内部前置内容（如果里面有内容，就会插入在该内容的前面）
    $('.sub').prepend(node);
	
	//将类名为code的元素追加到类名为sub的元素的内部
    $('.code').appendTo('.sub');

	//在类名为box的元素之前插入如下标签
    $('.box').before('<h2>这是一个标题</h2>')
	//在类名为box的元素之后插入如下标签
    $('.box').after('<b>版权所有 翻版必究</b>')

	//将标签为h1的元素插入到类名为box的元素之前
    $('h1').insertBefore('.box');

    //将选择器选中的元素包裹到目标节点中
    var w = $('.box').wrap('<div class="wrap"></div>')
    //  $('#container').append(w);

    //清除内部节点，所有节点置为空
    $('#container').empty();
</script>

注意：

1..before&insertbefore的区别？

答：他们的作用是一样的，但是写法上刚好相反

比如：

//在类名为box的元素之前插入如下标签
$('.box').before('<h2>这是一个标题</h2>')

//将标签为h1的元素插入到类名为box的元素之前
$('h1').insertBefore('.box');

 

2.append&after的区别？

答：

1.append是向指定的元素的内部追加，当然如果内部有内容，追加到内容的后面

2.after是向指定的元素外部之后追加

 

3.1.nth-child 索引是从1开始的，索引是从eq,evev,odd 是从0开始的