使用jQuery操作DOM

来源：互联网发布：java内存模型面试回答编辑：程序博客网时间：2024/05/21 23:32

DOM操作分为DOM Core，HTML-DOM和CSS-DOM3种操作类型。

使用css（）方法可以为元素添加样式，使用addClass（）方法为元素追加类样式，使用removeClass（）方法可以移除样式，使用toggleClass（）方法可以切换样式。

使用html（）方法可以获取或设置元素的HTML代码，使用text（）方法可获取或设置元素的文本内容，使用val（）方法可获取value属性值。

对DOM元素节点的操作包括查找，创建，替换，复制和遍历等。

在jQuery中，提供了append（）等一系列方法插入节点，使用remove（）等方法删除节点。

在jQuery中，使用attr（）方法可获取或设置元素属性，使用removeAttr（）方法可删除元素属性。

在jQuery中，遍历操作包括遍历子元素，遍历同辈元素和便利前辈元素。

在jQuery中，提供了获取和设置元素高度，宽度，相对位置等CSS-DOM方法。

样式操作

1.通过css方式操作

$(function(){

$("div").css({

"color":"red",

"font-size":"20px",

"opacity":"0.3"

});

2,.通过addClass()和removeClass()

$(function(){

//添加样式

$("h1").addClass("myfont mycolor");

//移除样式

$("h1").removeClass("myfont mycolor");

});

3.通过toggleClass()切换样式

$(function(){

$("dd").hover(function(){

$(this).toggleClass("mystyle");

});

4.html()代码操作

$(function(){

$("span").html($("<img src='image/1.jpg' width='300px' height='300px'/>"));

});

文本操作

$(function () {

$("div").html("<p>我是一个p</p>");

$("input").val("我是一个豪华高贵的文本框，你服吗？");

alert($("#myid").val());

});

</script>

注意：表单元素使用val()获取值，非表单元素通过html()和text()方法获取值。

节点操作

jQuery中的节点操作可大致分为创建节点、插入节点、删除节点、替换节点和复制节点操作，这些操作在实际开发中使用非常广泛，许多很炫的特效都要依赖它们。

//01.查找节点：查找内容未海贼王的节点，并且将字体设置成红色

$("#myred").css("color", "red");

//02.创建节点元素

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

//03.插入节点(在元素内部新增)

// $("ul").append($newNode);

//04.插入节点(appendTo，在元素内部新增)

//$($newNode).appendtTo($("ul"));

//05.插入节点，prepend，向元素前新增

//$("ul").prepend($newNode);

//06.插入节点，prependTo,向元素前新增

//$($newNode).prependTo($("ul"));

//07.外部插入：after

//$("ul").after($newNode);

//08.外部插入：insertAfter

//$($newNode).insertAfter("ul");

//09.外部之前插入，before

//$("ul").before($newNode);

//10.外部之前插入,insertBefore

//$($newNode).insertBefore("ul");

$($newNode).insertBefore("ul");

11.替换

//replaceWith

//var $obj= $("<li>豆豆打</li>");

//$("#sleep").replaceWith($obj);

12.克隆

//clone(true)

// $("ul").append($("#fightdd").clone(true));

13.删除

//删除节点 remove()

$("#fightdd").empty();

14.attr()获取与设置节点属性

$("img").attr({width:"50",height:"100"});

15.emoveAttr()用来删除元素的属性

节点遍历

$(function () {

//遍历子节点

// $("ul").children(".myli").click(

// function () {

// $(this).css("background-color","red");

// });

//02.遍历兄弟节点 next() prev() siblings()

//alert($(".myli").siblings().css("background-color","red"));

//03.遍历父节点（前辈）

$(".myli").parents().click(

function () {

// alert($(this).html());

}

);

});

</script>

------------------------------------------------------------------------------------------------------------------------------

<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'append.jsp' starting page</title>


<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>

<script type="text/javascript">
$(function(){
$("#li").click(function(){
//添加li节点
//创建节点
var p=$("<li>花生耶</li>");
//绑定
$("ul").append(p);

});

//添加div
$("#div").click(function(){
var k=$("<div>123</div>");
$("ul").after(k);
});

//替换节点
$("#th").click(function(){
var li=$("#mk");
li.replacewith("<li>五一嗨皮</li>");
});

//复制节点
$("#fz").click(function(){
var li=$("#mk");
$("ul").append(li.clone());
});

//删除节点
$("#del").click(function(){
//获取节点对象
var mm=$("#mk");
mm.remove();
});

//使用attr()获取与设置节点属性
$("#sz").click(function(){
var fr=$("#gih");
fr.attr("12","222");
});
});

//删除自定义属性
$("delsz").click(function(){
var hh=$("#gih");
hh.removeAttr("12");
});

</script>



</head>

<body>
<div>
<ul>

<li>苹果</li>
<li id="gih">火龙果</li>
<li id="mk">不再喜欢</li>
</ul>
</div>

<input type="button" id="li" value="添加li节点"/>
<input type="button" id="div" value="添加div节点"/>
<input type="button" id="th" value="替换节点"/>
<input type="button" id="fz" value="复制节点"/>
<input type="button" id="del" value="删除节点"/>
<input type="button" id="sz" value="设置属性值"/>
<input type="button" id="delsz" value="删除自定义属性"/>
</body>
</html>

<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'tpggleClass.jsp' starting page</title>

<style type="text/css">

.myt{
background:pink;
}

</style>

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>

<script type="text/javascript">

$(function(){
$("li").hover(function(){
$(this).toggleClass("myt");
});

});


</script>


</head>

<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</body>
</html>

0 0