05jQuery之class增删查以及切换样式、math对象、attr获取和设置节点属性以及删除元素属性、节点元素操作、CSS-DOM操作

追加和移出以及判断class存在控制样式：

• hasClass(“div2”) //判断是否存在class
• addClass(“div2”)//添加class
• toggleClass（）//也可以进行添加Class
• removeClass(“div2”)//移出class

示例：

$(function(){
        $("#div1").mouseover(function(){
          if (!$(this).hasClass("div2")) {//判断是否存在class
            $(this).addClass("div2")//添加class
          }
        });
        
        $("#div1").mouseout(function(){
          if ($(this).hasClass("div2")) {
            $(this).removeClass("div2")//移出class
          }
        });
      })
    </script>
    <style type="text/css">
      .div2{
        background-color: #00FFFF;
      }
      .div3{
        font-size: 50px;
      }
    </style>

    <div id="div1" class="div3">
      朱得草是帅哥！！
    </div>

切换样式：
toggleclass（）//添加一个class样式
示例：

toggleClass("one")//在样式里面书写一个css样式伪类，将类名为one添加到目标标签当中

math对象：

attr获取和设置节点属性：

语法：

$(selector).attr([name]) ;//获取属性值
或
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;//设置多个属性的值

示例：

$(".contain img").attr({width:"200",height:"80"});

删除元素属性：
语法：

$(selector).removeAttr(name) ;

示例：

$(".contain img").removeAttr("alt");//删除元素的alt属性

节点操作：

• 创建节点元素：
  工厂函数$()用于获取或创建节点
  $(selector)：通过选择器获取节点
  $(element)：把DOM节点转化成jQuery节点
  $(html)：使用HTML字符串创建jQuery节点

示例：

var $newNode=$("<li></li>");
var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</li>");
创建含文本与属性<li>元素节点

注意：元素内部插入子节点

注意：元素外部插入同辈节点

jQuery提供了三种删除节点的方法

1. remove()：删除整个节点 ​​$(selector).remove([expr]);​​
2. empty()：清空节点内容 ​​$(selector).empty();​​
3. detach()：删除整个节点，保留元素的绑定事件、附加的数据

replaceWith()和replaceAll()用于替换某个节点
示例：

var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);
$($newNode1).replaceAll(".gameList li:eq(2)");

注意：两者的关系类似于append()和appendTo()

• 复制节点操作：
  clone()用于复制某个节点

语法：

$(selector).clone([includeEvents]) ;//参数ture或flase, true复制事件处理，flase时反之

通俗的来说true的话，复制出来的副本，也可以进行复制；默认值为false，复制出来的副本，不能够再进行复制。

示例：

$(".gameList li:eq(1)").click(function(){
     $(this).clone(true).appendTo(".gameList");
    })
$(".gameList li:eq(2)").click(function(){
     $(this).clone(false).appendTo(".gameList");
    })

节点遍历：

• 遍历子元素
  children()方法可以用来获取元素的所有子元素

语法：

$(selector).children([expr]);

示例：

var $section =$("section").children();//获取<section>的子元素，但不包含子元素的子元素
alert($section.length);

• 遍历同辈元素
  jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

• 遍历前辈元素
  jQuery中可以遍历前辈元素

语法：

parent()：获取元素的父级元素
parents()：获取元素的祖先元素

示例：

$("li:eq(1)").parent().addClass("orange");
 $("li:eq(1)").parents().addClass("orange");

1. each( ) ：规定为每个匹配元素规定运行的函数
2. end( )：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

语法：

$(selector).each(function(index,element)) ;

1. index：选择器的位置
2. element：当前的元素

示例：
each():

$("img").click(function(){
       $("li").each(function(){
           var str=$(this).text()+"<br>";
           $("section").append(str);
       })
   });

end():

$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
$(".gameList li").first().css("background","#b8e7f9").end().last().css ("background","#d3f4b5");
$(".gameList li:last").css("border","none");

CSS-DOM操作：

除css()外，还有获取和设置元素高度、宽度等的样式操作方法