jQuery的基础操作——DOM基本操作
JQuery中的DOM操作主要对包括：建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。
我们通过对比js创建节点和jquery创建节点来分析jquery的方便之处
首先我们来看一下使用原生js来创建标签的方法
// 原生JS
var header = document.createElement('div')
header.className = 'header';
document.querySelector('.container').appendChild(header);
接下来我们使用jQuery来创建标签
var header = $('<div class="header">'); // 创建标签
$('.container').append(header); // append() 拼接元素
$('.container').append(header); //将创建的标签添加到class名为container的div里
我们可以把以上步骤进行简化
$('<div class="header">').appendTo('.container')
我们可以对比，使用原生js创建节点和使用jquery创建节点，使用jquery明显要代码简洁、体积小，使用灵巧。
一、添加DOM节点常用的操作：
1、append（）与appendTo（） 拼接元素
// var header = $('<div class="header">'); //创建标签
// $('.container').append(header); // append() 拼接元素
// header.appendTo($('.container')); // appendTo()拼接元素
// header.appendTo('.container'); // 可以直接把容器的选择器写成参数，而不添加$()
使用jq创建结构的时候，可以同时创建多个标签
//当创建的标签结构比较简单时，我们可以使用下面这种方法
$('<div class="header"><h1>我是标题</h1></div>').appendTo('.container');
//当创建的标签结构比较复杂，代码比较多时，可以使用ES6的模板字符串来解决这个问题
//模板字符串使用``代表结构，所有内部内容，都是字符串的内容，可以换行写
//模板字符串内部如果需要使用变量的话，直接使用${}，在内部编写就可以解析
var str = '我是内容';
$(`<div>
<div>
<div>${ str }</div>
</div>
</div>`).appendTo('body');
2、使用after（）和before（）进行兄弟元素的拼接，将后面的元素拼接在前面元素的上下
$('<h1>h1</h1>').appendTo('.container'); //在class名为container的div里创建h1
$('<h2>h2/<h2>').appendTo('.container'); //在class名为container的div里创建h2
$('h2').before('<hr/>'); //在h2前面添加横线
$('h1').after('<hr/>'); //在h1后面添加横线
3、我们也可以使用insertAfter（）和insertBefore（）进行兄弟元素拼接 将前面的元素拼接在后面的元素上下
$('<hr/>').insertBefore('h2'); //在h2前面添加横线
$('<hr/>').insertAfter('h1'); //在h1后面添加横线
4、我们还有2个方法可以直接在父级所有的子集前面拼接元素
prepend（）和prependTo（）方法
$('<hr/>').prependTo('.container');
$('.container').prepend('<hr/>');
二、替换DOM节点常用的操作：
1、替换 使用replaceWith或者replaceAll
先在页面中添加4个h2
$('h2:eq(1)').replaceWith('<h1>标题</h1>'); //使用h1标题替换第二个h2标题
$('<h1>标题</h1>').replaceAll('h2:eq(1)');
三、删除dom节点，我们有两种方式
1、清空元素以及元素内容，使用remove（）；
$('<h1>我是被移除的元素</h1>').appendTo('.container').remove();
2、清空标签内所有内容
如果使用jq同时创建了多层的标签结构，则返回值代表最外层
$(`<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>`).appendTo('.container').empty(); //清空标签内所有内容,但保留标签
四、复制节点
使用clone（）；
$('.container').clone().appendTo('body');
以上为一些jquery里DOM元素节点的增、删、改、查的方法，后期有新的、简洁的方法继续更新。
五、操作节点属性的一些方法
首先，创建标签并拼接：
1、使用html（）方法，获取全部内容
div.html();
div.html('<h1>我是h1</h1>'); //如果html（）方法有参数，则修改内容
2、使用text（）方法获取文本内容
div.text();
div.text('我是修改后的文字'); //text()有参数的情况和html()类似
3、val()方法是为了给表单元素的value属性使用。有参则设置，无参则取值
$(':input').val('1234567890'); //设置input标签的value值
console.log($('input').val()); //获取input标签的value值
4、关于class的操作
添加class值
$('.container').addClass('c1').addClass('c2'); //一个标签可以设置多个class值，一个class也可以给多个标签设置
移除class值
$('.container').removeClass('c1');
切换class值
$('.container').toggleClass('abc'); //此方法多用于动画切换中，比如在点击事件中添加此方法，当触发点击事件，先判断有无此class值，若有则删除，若无则添加，可以多次操作进行切换
5、attr（）方法
首先创建一个a标签
$('.link').attr('href'); //如果attr方法只有一个参数，为属性名，则获取对应的属性值
$('.link').attr('href',"http://blog.lidaze.com"); //如果attr方法有2个参数，分别为名称值，为修改或添加属性值
$('.link').attr({ //如果attr方法有一个参数，并且为对象，则可以同时添加或修改多个属性与其对应的值
href:'http://book.lidaze.com',
title:'我是a标签'
});
$('.link').removeAttr('title') //移除属性可以使用removeAttr（）
6、css（）方法
//css()方法和attr()方法使用几乎一样
//css（）赋值标签的样式
$('.link').css('color');
$('.link').css('color','yellow');
$('.link').css({
color: 'green',
'font-size': '30px'
});
