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

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…);

<style type="text/css">
    .cla1{
    color:red;
    }
</style>
<script>
$(function(){
    $("h3").click(function(){
        $(this).addClass("cla1");//添加
        $(this).removeClass("cla1");//删除
    });
})
</script>

3.类别切换

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

<style type="text/css">
    .cla1{
    color:red;
    }
</style>
<script>
$(function(){
    $("h3").click(function(){
        $(this).toggleClass("cla1");
    });
})
</script>

元素内容及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)元素内部插入子节点

语法	功能描述
append(content)	$(A).append(B)表示将B追加到A中
appendTo(content)	$(A).appendTo(B)表示将A追加到B中
prepend(content)	$(A).prepend(B)表示将B前置插入A中
prepend(content)	$(A).prependTo(B)表示将A前置插入B中

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

语法	功能描述
after(content)	$(A).after(B)表示将B插入到A之后$("ul").after($div)
insertAfter(content)	$(A).insertAfter(B)表示将A插入到B之后$div.insertAfter("ul")
before(content)	$(A).before(B)表示将B插入到A之前$("ul").before($div)
insertBefore(content)	$(A).insertBefore(B)表示将A插入到B之前$div.insertBefore("ul")

替换节点

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

复制节点

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

删除节点

jquery对象.remove($li)