jQuery操作DOM

我们先来看一下JavaScript怎么操作DOM元素

    1.根据元素的id
        document.getElementById("id值");
    2.根据元素的类名className
        document.getElementsByClassName(className);
    3.标签名 tagName
        document.getElementsByTagName(tagName);
    4.获取dom元素属性、样式...
        dom元素.attr(属性名，[属性值]);
        dom元素.style.样式名=样式值

这里学习的jQuery框架就是对javascript的封装来操作DOM（document object Model ）
简单来说就是操作DOM的简单化

DOM操作分为三类

• DOM Core：任何一种支持DOM的编程语言都可以使用getElementById()
• HTML-DOM：用于处理HTML文档，如document.forms
• CSS-DOM：用于操作CSS，如element.style.color=“green”

注意一下：JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持

一、样式操作

1、设置样式

语法：
css(name,value) ; 【设置单个属性】
css({name:value, name:value,name:value…}) ; 【同时设置多个属性】

代码示例：

$(this).css("border","5px solid #f5f5f5");
$(this).css({
   "border":"5px solid #f5f5f5","opacity":"0.5"});  

2、追加样式

语法：
$(selector).addClass(class);【追加单个】
$(selector).addClass(class1 class2 … classN);【追加多个】

代码示例：

//单个
.text{
    padding:10px;}
//多个
.content {
   background-color:#FFFF00; }
.border {
   border:1px dashed #333; }
$("h2").mouseover(function() {
    $("p").addClass("content border"); });

3、移除样式

语法：
$(selector).removeClass(“class”) ;【移除单个】
$(selector).removeClass("class1 class2 … classN ") ;【移除多个】

代码示例：

多个
.text{
    padding:10px;}
.content {
   background-color:#FFFF00; }
$("h2").mouseout(function() {
   $("p").removeClass("text content");});

4、切换样式

语法：
toggleClass()：
模拟了addClass()与removeClass()实现样式切换的过程

代码示例：

$("h2").click(function() {
      $("p").toggleClass("content  border");   });

5、判断是否含指定的样式

hasClass( )方法来判断是否包含指定的样式

语法：$(selector). hasClass(class);

代码示例：

$("h2").mouseover(function() {
   
      if(!$("p").hasClass("content ")){
    $("p").addClass("content "); } });
        【鼠标移入，判断p元素是否含有content，不含有就添加content】
$("h2").mouseout(function() {
   
      if($("p").hasClass("content ")) {
    $("p").removeClass("content "); } });
        【鼠标移出，判断p元素是否含有content，含有就移除content】

二、节点操作

1、创建节点元素

$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点

代码示例：

var $newNode=$("<li></li>");

var $newNode1=$("<li>你是不是一个帅哥？</li>");

var $newNode2=$("<li title='last'>是的！</li>");

2、元素内部插入子节点

语法	功能
append(content)	( A ) . a p p e n d ( B ) 表 示 将 B