初识Jquery（二）Jquery对象与DOM对象

╰半橙微兮° 2022-06-02 09:24 235阅读 0赞

Jquery对象：html()

var obj = $("#content); obj.html("jquery对象");

DOM对象：innerHTML()

var obj = document.getElementById("content); obj.innerHTML(""DOM对象)

### jquery对象与DOM对象的相互转换 ###

（1）Jquery转换成DOM对象（使用get()方法）

var test=$("li").get();//jquery对象转换成DOM对象
    alert(test[0].innerHTML());
    alert(test[1].innerHTML());

（2）DOM转换成Jquery对象（只需用$()包括起来）

var $test=$(document.getElementsByTagName("li"));//DOM对象转换成jquery对象
    alert($test.eq(0).html());
    alert($test.eq(1).html());

#### 设置标题颜色 ####

//DOM对象
    $(function(){ 
        $("h3").click(function(){ 
            this.style.color="red";
        });
    })
    //Jquery对象
    $(function(){ 
        $("h3").click(function(){ 
            $(this).css("color","red");
        });
    })
    //this是js的关键字，使用this表示DOM对象，但用$(this)使DOM对象转换为Jquery对象，再使用jquery对象的css()方法

### Jquery中的DOM操作 ###

#### 1.元素样式操作 ####

jquery对象.css(name,value);

$(function(){ 
        $("h3").click(function(){ 
            $(this).css("color","red");//一个
            $(this).css({
       "font-size":"13px","font-weight":"bold"});//多个
        });
    })

#### 2.增加css类 ####

jquery对象.addClass(class0 class1…);

#### 3.类别切换 ####

toggleClass(class);样式规则的来回切换  
toggle();显示，隐藏的来回切换

### 元素内容及value属性值操作 ###

html()：用于获取第一个匹配元素的html内容或文本内容  
text()：用于获取所有匹配元素的文本内容  
val()：jquery获取元素的值

#### 元素属性操作 ####

**获取元素属性**`$("img).attr("src");`  
**设置元素属性**`$("img).attr("src","1.jpg");`  
**删除元素属性**`$("img).removeAttr("src");`

### 元素节点 ###

#### 创建节点$(html) ####

`var $div = $("<div>hello,world</div>")`

#### 插入节点 ####

(1)元素内部插入子节点

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>功能描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>append(content)</td> 
   <td>$(A).append(B)表示将B追加到A中</td> 
  </tr> 
  <tr> 
   <td>appendTo(content)</td> 
   <td>$(A).appendTo(B)表示将A追加到B中</td> 
  </tr> 
  <tr> 
   <td>prepend(content)</td> 
   <td>$(A).prepend(B)表示将B前置插入A中</td> 
  </tr> 
  <tr> 
   <td>prepend(content)</td> 
   <td>$(A).prependTo(B)表示将A前置插入B中</td> 
  </tr> 
 </tbody> 
</table>

(1)元素外部插入同辈节点

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>功能描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>after(content)</td> 
   <td>$(A).after(B)表示将B插入到A之后<code>$("ul").after($div)</code></td> 
  </tr> 
  <tr> 
   <td>insertAfter(content)</td> 
   <td>$(A).insertAfter(B)表示将A插入到B之后<code>$div.insertAfter("ul")</code></td> 
  </tr> 
  <tr> 
   <td>before(content)</td> 
   <td>$(A).before(B)表示将B插入到A之前<code>$("ul").before($div)</code></td> 
  </tr> 
  <tr> 
   <td>insertBefore(content)</td> 
   <td>$(A).insertBefore(B)表示将A插入到B之前<code>$div.insertBefore("ul")</code></td> 
  </tr> 
 </tbody> 
</table>

#### 替换节点 ####

`$("ul li:last").replaceWith($li)`

#### 复制节点 ####

`jquery对象.clone()`若将全部行为复制，使用clone(true)

#### 删除节点 ####

`jquery对象.remove($li)`