jQuery设置及获取样式

设置 获取元素的中的文本：
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>