使用jQuery操作DOM

jQuery对JavaScript中的DOM操作进行了封装，可分为：

l 样式操作
l 内容及Value属性值操作
l 节点操作
l 节点属性操作
l 节点遍历
l CSS-DOM操作

一、直接设置样式值

使用css()为指定的元素设置样式值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"});

案例：使用css()添加边框效果

<!DOCTYPE html>

<html>

<head>

<title>使用css()添加边框效果.html</title>

$(function(){

$("div").css("border","5px solid green");

});

</script>

</head>

<body>

<div>

This is my HTML page. <br>

</div>

</body>

</html>

追加和移除样式

追加：addClass(class)或addClass(class1 class2 … classN)

移除：removeClass(“style2 ”)或removeClass("style1 style2 ")

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

<!DOCTYPE html>

<html>

<head>

<title>追加和移除样式.html</title>

.a{

background:red

}

</style>

$(function(){

// $("#btn1").click(function(){

$("#div1").addClass("a");

});

$("#btn2").click(function(){

$("#div1").removeClass("a");

});

//切换样式

$("#btn3").click(function(){

$("#div1").toggleClass("a");

});

</script>

</head>

<body>

</body>

</html>

二、内容及Value属性值操作

ü html()可以对HTML代码进行操作，类似于JS中的innerHTML

$("div.left").html();//获取元素中的html代码

或

$("div.left").html("<div class='content'>…</div>");//设置元素中的html代码

ü text()可以获取或设置元素的文本内容

$("div.left").text();//获取元素中的文本内容

或

$("div.left").text("<div class='content'>…</div>");//设置元素中的文本内容

ü val()可以获取或设置元素的value属性值

$(this).val();

或

$(this).val("");

html()和text()的区别：

语法	参数	功能
html()	无参数	用于获取第一个匹配元素的HTML内容或文本内容
html(content)	content参数为元素的HTML内容	用于设置所有匹配元素的HTML内容或文本内容
text()	无参数	用于获取所有匹配元素的文本内容
text (content)	content参数为元素的文本内容	用于设置所有匹配元素的文本内容

案例：

<!DOCTYPE html>

<html>

<head>

<title>内容及Value属性值操作.html</title>

$(function(){

// alert($("div").html());

// alert($("div").text());

$("button").click(function(){

// $("div").html("<button>click</button>");

// $("div").text("<button>click</button>");

});

// alert($("input").val());

// $("input").val("ddddddd");

});

</script>

</head>

<body>

</div>

</body>

</html>

第一节两个案例：

当鼠标移过某个目录时，该条目颜色加深，字体颜色变为白色，鼠标移出时，恢复初始状态

<!DOCTYPE html>

<html>

<head>

<title>根据鼠标移动变更菜单样式.html</title>

.a{

background:blue;

color:white

}

</style>

$(function(){

$("li").mouseover(function(){

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

});

$("li").mouseout(function(){

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

});

</script>

</head>

<body>

<ul>

<li>易付宝账号激活</li>

<li>易付宝实名认证</li>

</ul>

</body>

</html>

当文本框获得焦点时，文本框内默认文字消失，失去焦点时，文本框内提示文字再次出现

<!DOCTYPE html>

<html>

<head>

<title>文本框获得焦点变化.html</title>

$(function(){//on() 方法在被选元素及子元素上添加一个或多个事件处理程序

$("#id").on("blur", function(){//失去焦点

$(this).val("请输入密码");

}).on("focus", function(){//获得焦点

$(this).val("");

});

</script>

</head>

<body>

</body>

</html>

升级版

<!DOCTYPE html>

<html>

<head>

<title>文本框获得焦点变化.html</title>

.a{

opacity:0.5;

}

</style>

$(function(){

$("#input").on("focus",function(){//获得焦点

$(this).removeClass("a");

if($(this).val()==null || $(this).val()=="" || $(this).val()=="please input password"){

$(this).val("");

}else{

$(this).select();

}

}).on("blur",function(){//失去焦点

if($(this).val()==null || $(this).val()=="" || $(this).val()=="please input password"){

$(this).val("please input password");

$(this).addClass("a");

}else{

$(this).removeClass("a");

}

});

</script>

</head>

<body>

请输入密码：<input type="text" id="input" value="please input password" class="a">

</body>

</html>

三、节点操作

ü 查找节点（前面章节已讲）

ü 创建节点

var $newNode=$("<li title='标题为千与千寻'>千与千寻</li>");

ü 插入节点

元素内部插入子节点

语法	功能
append(content)	$(A).append(B)表示将B追加到A中。如：$("ul").append($newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中。如：$newNode1.appendTo("ul");
prepend(content)	$(A). prepend (B)表示将B前置插入到A中。如：$("ul"). prepend ($newNode1);
prependTo(content)	$(A). prependTo (B)表示将A前置插入到B中。如：$newNode1. prependTo ("ul");

元素外部插入同辈节点

语法	功能
after(content)	$(A).after (B)表示将B插入到A之后。如：$("ul").after($newNode1);
insertAfter(content)	$(A). insertAfter (B)表示将A插入到B之后。如：$newNode1.insertAfter("ul");
before(content)	$(A). before (B)表示将B插入至A之前。如：$("ul").before($newNode1);
insertBefore(content)	$(A). insertBefore (B)表示将A插入到B之前。如：$newNode1.insertBefore("ul");

ü 替换节点

$("ul li:eq(1)").replaceWith($newNode1);

或

$newNode1.replaceAll("ul li:eq(1)");

ü 复制节点

$("ul li:eq(1)").clone(true).appendTo("ul");

ü 删除节点

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

remove()：删除整个节点

detach()：删除整个节点，保留元素的绑定事件、附加的数据

empty()：清空节点内容

案例：

<!DOCTYPE html>

<html>

<head>

<title>节点元素操作.html</title>

$(function(){

//创建节点

var $newNode=$("<li>你的名字</li>");

//插入子节点

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

$newNode.appendTo("ul");

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

$newNode.appendTo("ul"); */

//插入同辈节点

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

$newNode.insertAfter("ul");

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

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

//替换节点

/* $("ul li:eq(0)").replaceWith($newNode);

$newNode.replaceAll("ul li:eq(1)"); */

//复制节点

//$("ul li:eq(1)").clone(true).appendTo("ul");

//删除节点

/* $("ul").append($newNode);//将节点添加到ul

$("ul li:eq(3)").click(function(){//对添加的节点定义事件

alert($(this).text());

});

$("ul li:eq(3)").remove();//remove后，节点事件也会被删除

$("ul li:eq(3)").detach();//detach后，节点事件保留，当该节点重新append后事件依然存在

$("ul li:eq(3)").empty();//删除节点内容

$("ul").append($newNode);//节点删除后重新将节点append上去，看事件是否还在 */

});

</script>

</head>

<body>

<p>热门动画排行</p>

<ul>

</ul>

</body>

</html>

四、节点属性操作

ü attr()用来获取与设置元素属性

$newNode4.attr("alt");//获取alt属性值

或

$("img").attr({width:"50",height:"100"});//设置width、height属性的值

ü removeAttr()用来删除元素的属性

$newNode2.removeAttr("title");//删除元素的title属性

<!DOCTYPE html>

<html>

<head>

<title>获取与设置节点属性.html</title>

$(function(){

/* alert($("img").attr("alt"));

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

$("img").removeAttr("title"); */

});

</script>

</head>

<body>

</body>

</html>

五、节点遍历和六、CSS-DOM操作

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

如：$("body").children();

ü 获取<body>元素的子元素，但不包含子元素的子元素

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

语法	功能
next([expr])	用于获取紧邻匹配元素之后的元素，如：$("li:eq(1)").next().css("background-color","#F06");
prev([expr])	用于获取紧邻匹配元素之前的元素，如：$("li:eq(1)").prev().css("background-color","#F06");
slibings([expr])	用于获取位于匹配元素前面和后面的所有同辈元素，如：$("li:eq(1)").siblings().css("background-color","#F06");

ü jQuery遍历前辈元素

parent()：获取元素的父级元素

parents()：元素元素的祖先元素

ü CSS-DOM操作

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

语法	功能
css()	设置或返回匹配元素的样式属性
height([value])	设置或返回匹配元素的高度
width([value])	设置或返回匹配元素的宽度
offset([value])	返回以像素为单位的top和left坐标。此方法仅对可见元素有效

案例：

<!DOCTYPE html>

<html>

<head>

<title>节点的遍历.html</title>

$(function(){

//子元素相关操作

// $("#div1").children().css("background","red");//遍历所有子元素，不包括子元素的子元素

//前辈元素相关操作

// $("#div3").parent().css("background","blue");//获取前辈元素

// $("#div3").parents().css("background","blue");//遍历所有的前辈元素

//同辈元素相关操作

// $("#div4").next().css("background","red");//匹配后一个元素

// $("#div4").prev().css("background","red");//匹配前一个元素

// $("#div4").siblings().css({background:"red"});//匹配所有同辈元素

//css-dom操作

/* var offset = $("#div1").offset();

alert( "left: " + offset.left + ", top: " + offset.top ); */

});

</script>

</head>

<body>

</div>

</div>

</div>

<br>

</div>

</body>

</html>

使用jQuery操作DOM

猜你喜欢