DOM操作

1.append() 向匹配到的父元素末尾追加子元素

 <div class="add">append</div>
<script>
    /*
	 1. 创建dom元素
     jQ:  $('<a href="http://www.baidu.com">百度</a>')
    2. 获取父元素
    $('.add')
    3. 使用append()追加
    父元素对象.append(要追加的子元素)
        */
var obj = $('<a href="http://www.baidu.com">taobao</a>')
$('.add').append(obj)
</script>

2.appendTo() 把子元素追加到父元素中

 <div class="add">append</div>
<script>
var obj = $('<a href="http://www.baidu.com">taobao</a>')
obj.appendTo($('.add'))
</script>

3.prepend() 向父元素的开头添加子元素

 <div class="add">prepend</div>
<script>
var obj = $('<a href="http://www.baidu.com">taobao</a>')
$('.add').prepend(obj)  
    //结果： <div class="add"><a href="http://www.baidu.com">taobao</a>prepend</div>
</script>

4.prependTo() 元素前置到另一个、指定的元素元素集合中。

<div class="parent">宝剑锋从磨砺出</div>
    <span id="child">梅花香自苦寒来</span>
<script>
    $(function(){
        $('#child').prependTo($('.parent'))
        // 效果：<div class="parent"> <span id="child">梅花香自苦寒来</span>宝剑锋从磨砺出</div>
    })
</script>

5.remove() 移出匹配到的元素

<p>苹果01</p>
<p class="two">苹果02</p>
<p>苹果03</p>
<script>
//$('p').remove()   // remove()方法不传递参数的情况下  表示删除匹配到的所有元素
$('p').remove('.two')   // 移除类名等于two的p标签
</script>

属性

1.attr() 获取或者设置属性

 <div class="demo" title="这是一个测试代码">attr方法 </div>
<script>
// attr()  获取匹配元素属性的值
    var res = $('.demo').attr('title')
//    attr()   设置匹配元素的属性值
    $('.demo').attr('title','this is a test code')   // 只修改一个属性值
    $('.demo').attr({name:'code',id:'test'})   // 设置多个属性
</script>

2.removeAttr() 移除属性

<div class="demo" title="这是一个测试代码" id='test'>attr方法 </div>
<script>
$('.demo').removeAttr('id')
</script>

3.addClass() 添加类名

 <div id="demo"> 白日依山尽</div>
<script>
       $(this).addClass('active')
</script>

4.removeClass() 移出类名的

<div id="demo" class='active'> 白日依山尽</div>
<script>
       $(this).removeClass('active')
</script>

5.toggleClass() 当某个类名存在时则删除，不存在时则添加

 <div id="demo"> 白日依山尽</div>
<script>
     $('#demo').click(function(){
       $(this).toggleClass('active')
</script>

6.html() 获取或者设置匹配元素的内容(包含标签)

<div class="content"><span>作者:王之涣</span><br>白日依山尽</div>
<script>
    $(function(){
        // html()    获取元素的内容    和JavaScript中的innerHTML相同的
        var con = $('.content').html()
        // console.log(con);
        // html()  设置匹配元素的内容
        $('.content').html('去<a href="http://jd.com" target="_blank">京东</a>网购')
    })
</script>

7.text()

<div class="content"><span>作者:王之涣</span><br>白日依山尽</div>
<script>
    $(function(){
        // text()    获取元素的文本内容不包含标签    和JavaScript中innerText的相同的
        var con = $('.content').text()
        // console.log(con);
        // text()  设置匹配元素的文本内容
        $('.content').text('去<a href="http://jd.com" target="_blank">京东</a>网购')
    })
</script>