设置 获取元素的中的文本：
text（）：方法
获取文本时不需要参数。只能获取文本，获取不到文本中包含的标签
设置文本时需要参数。只能设置文本，覆盖式赋值。如果含有标签不会被解析，当做字符串
//获取元素中的文本 .text()方法(没有参数) 覆盖式赋值 只能获取文本
//var $(text) = $(指定的标签).text（）
var $text = $('p').text();
console.log($text);
//给元素设置新文本（有参数） 只能设置文本，如果含有标签不会被解析 当做字符串返回。
$('p').text($text+"你说啥？"); //字符串拼接 ;
html()方法：
获取文本时也不需要参数，不仅能获取文本，连文本中的标签也能获取到。
设置文本时需要参数，不仅能获取文本，连文本中的标签也能获取到，也能解析到包含标签的属性。
//包裹的标签和文本都可以获取到，不仅可以设置文本 还可以设置文本的样式。
var $text1 = $('p').html();
console.log($text1);
$('p').html($text1+"<span style='color: red;'>哈哈哈</span>")
val()方法：是获取到value值（多应用于输入框中）
//val();获取的是表单的value
var $two = $('input').val();
console.log($two);
//修改value值
$('input').val("你是不是傻");
设置 获取标签的属性：
attr（）；设置属性。例如：name ，id class value
获取 设置 移除 属性：
//获取属性：attr
var $attr = $('p').attr('id');
console.log($attr); //打印出 id的属性值
//设置属性值一个或多个属性 通过大括号包括起来 属性名与值之间使用引号，属性与属性之间用逗号隔开
var $attr1 = $('p').attr({'name':'p','id':"one",'class':"two"});
console.log($attr1);
//移除属性 removeAttr（）；// 移除属性 /单次只能移除一个属性
var $one = $('p').removeAttr('id');
console.log($one);
关于类的增删改
//添加class值
$('div').addClass("hehe");
$('div').addClass("haha");
//添加多个类名的时候不会覆盖掉前面的类名。不同的类有相同的属性的话 最后一个类生成效果
//移除class值
$('div').removeClass("hehe");
//切换class值
window.onclick = function() {
//如果存在'abc'这个值，就移除掉，否则就添加上
$('div').toggleClass("abc");
}
判断某个标签是否含有某个属性：
//判断标签是否具备某个类名 hasClass（）返回值是boolean值
var $three = $('h2').hasClass('h3');
console.log($three); // true;
例：
//点击按钮切换
$('button').click(function(){
if($('h2').hasClass('h3')==true){
删除Class
$('h2').removeAttr('class',"h3");
// $('h2').removeClass('h3');
$('h2').addClass('h2');
}
else{
$('h2').removeClass('h2')
$('h2').addClass('h3');
}
})
//根据当前是否有某个类名来判断是否添加还是删除类名 （toggleClass）
// $('h2').toggleClass('p3');
$('button').click(function(){
$('h2').toggleClass('h3');
//每次点击按钮 toggleClass会判断当前是否具备参数中的属性，有则删，无则添；
})
设置 获取元素的样式：
利用jQ来获取元素的样式，不管是css样式还是行内样式只要是能在页面中生效，jQ都可以获取到标签的属性，原生的js只能获取到行内的样式。
通过。css（）方法来设置样式：style下的样式
如果数值类型的带有单位的，必须加上单位，不加单位不会生效。
//获取css样式。不管css样式是行内还是外部，只要能在页面中生效，jQ都可以获取到标签的属性，原生的js只能获取css行内样式。
获取颜色值的时候 返回值是rbg、或者是rbga；
var $bgcolor = $('p').css('backgroundColor');
console.log($bgcolor);
var $color = $('p').css('color');
console.log($color);
//通过css方法设置样式
//如果数值类型的带有单位的，必须加上单位，不加单位不会生效。
$('p').css("font-size","12px");
//设置 获取元素的高度
var $height = $('p').height();
console.log($height);
//参数值可以使数值类型，当参数是数值时，默认单位是px 如果是以其他形式为单位，需要传递包含类型的字符串。
$('p').height('30%');
//设置获取元素的宽度
var $width = $('p').width();
console.log($width);
$('p').width('100px');
注：宽度：
console.log($('div').innerWidth()); //innerWidth = content + padding
console.log($('div').outerWidth()); //outerWidth = content + padding + border
设置 获取 相对于文档的偏移量；
//offset() 是依据窗口的获取的值，无论设置什么决定了元素的位置，都是距离窗口；
var $offset = $('p').offset();
console.log($offset);
//var object = {left:100,top:100}
//$('p').offset(object);
//$('p').offset({left:10,top:12});
注：由于offset获取的是一个对象，所有设置的时候必须用对象的方式设置。
获取相对于定位的祖辈元素的偏移量。
position（）；
//获取 元素相对于定位的父元素的偏移量
//positon()方法只能获取值，不能设置值
$('p').position();
var $positon = $('p').position();
console.log($positon);
设置 获取滚动条：
水平滚动条 垂直滚动条：
//获取 设置 水平滚动条的位置 scrollleft()
var $scrollleft = $('p').scrollLeft();
console.log($scrollleft);
//首先必须确认滚动条属于哪一个标签，在获取滚动条所对应的标签再设置scrollleft才会生效，方法的参数值是一个数值类型。
//获取和设置垂直滚动条
var $scrolltop = $('p').scrollTop();
console.log($scrolltop);
//点击按钮 返回顶部
// $('body').scrollTop(2000);
$('button').click(function(){
$('body').scrollTop(0);
//$('button').hide();
})
元素的包裹：给指定的节点添加父元素。
warp（）方法：给选中的标签添加父元素：
warpAll（）：给所有相同的标签添加父元素。如果相同的标签中混有其他的兄弟标签。会把这些标签放到最后。
warpInner（）给标签的内容添加一个新的标签来包裹：
<script type="text/javascript">
$(document).ready(function(){
//包裹标签（包裹节点）：给指定节点添加父标签
//warp（） 给选中的方法添加父元素
$('li').warp('<ul></ul>');
//wrapAll 给所有相同的标签添加一个共同的父元素，如果相同标签中混合有其他兄弟标签会把这些兄弟标签移到最后
$('li').wrapAll('<ul></ul>');
//warpInner 给标签的内容添加一个新的标签来包裹
$('a').wrapInner('<b></b>');
})
</script>
注;
//解包裹
$('li').unwrap();
DOM的增删改查：
创建文本节点：
//创建
//1 把节点拼接成字符串
var textNode = '<p>又回到春末的五月，凌晨的集市人不多</p>';
//2 jQ创建
var textnode2 = $('<p></p>').text('小孩在门前唱着歌，阳光温暖了溪河');
//3 DOM创建
var textNode3 = document.createElement('p');
textNode3.innerText = "柳絮乘着大风吹，树影下的人想睡。"
添加带文本的首和尾：
//把节点添加到文档最后
//A>B A.append（B）；
// $('body').append(textNode,textnode2,textNode3);
//A>B B.appendTo(A)
$(textnode2).appendTo('body');
//把节点插入文档的开头
// A.prepend(B)
$('body').prepend(textNode3);
// B.prependTo(A);
$(textNode).prependTo('body');
添加到某个标签的前后：
/*
after:在被选元素之后插入标签
before:在被选元素之前插入标签
*/
$('div').after(textNode3);
$('div').before(textnode2);
//在操作节点的这些方法中，参数可以为一个JQ对象，或者为一个字符串(HTML结构)：
删除，替换 ，清空节点：
//删除节点
//$('h1').remove(); //将自己移除
//清空自己所有的子元素
//$('body').empty();
//替换元素
$('span').replaceWith('<a href="#">耀国国</a>');
DOM增删改：
<script type="text/javascript">
$(document).ready(function(){
//删除节点 remove（）； 方法返回值是删除的节点，如果后续用到删除的节点，则需要保存这个返回值
var $p = $('p').remove();
$('body').append($p);
//toggle 隐藏
//$('button').click(function(){
//$('p').toggle();
//});
//判断是否含有p 如果有 删掉 如果没有 添加
/* $('button').click(function(){
if($('p').length !=0){
$('p').remove();
}else{
$($p).prependTo('body')
}
});
*/
//复制节点 clone（）用来复制标签，如果没有参数 则只是复制标签的样式及文本 没有事件。 如果有参数true 则事件也会被复制。
// var $btn = $('button').clone(true);
// 把复制的标签添加在body后面
//$('body').append($btn);
$('button').click(function(){
//empty 清空父元素下的内容及所有的子标签。
$("#car").empty();
});
//A.replaceWith(B); 最后显示的是B；
//B.replaceAll(A); 最后显示的是A；
var $img = '<img src="img/QQ图片20160827090103.jpg">';
$('button').click(function(){
//$('img').replaceWith($img);
$($img).replaceAll('img');
});
})
</script>
