8使用jQuery操作 DOM

最新推荐文章于 2023-05-27 01:36:39 发布

Java_Eastlin

最新推荐文章于 2023-05-27 01:36:39 发布

阅读量332

点赞数

分类专栏：结构性学前端文章标签： javascript jquery html

本文链接：https://blog.csdn.net/computer408/article/details/123452672

版权

结构性学前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

无冬奥冰墩墩等相关图片，请审核通过。!!!
#使用jQuery操作 DOM

DOM操作分为哪些类型？

jQuery中如何添加和移除类样式？

append()和appendTo()有什么区别？

如何获取元素的所有同辈节点？

简述remove( )方法与empty( )方法的异同

简述parent( )方法与parents( )方法的异同

课件

1DOM操作分类

DOM操作分为三类：

DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()

HTML-DOM：用于处理HTML文档，如document.forms

CSS-DOM：用于操作CSS，如element.style.color="green"

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

2jQuery中的DOM操作

jQuery对JavaScript中的DOM操作进行了封装

jQuery中的DOM操作

样式操作

内容及Value值操作

节点操作

节点属性操作

节点遍历

CSS-DOM操作

“元素”和“节点”含义大同小异，本章并不严格区分

3追加和移除样式

4切换样式

5判断是否含指定的样式

6内容操作

HTML代码操作

标签内容操作

区别

属性值操作

7节点操作

jQuery中节点操作

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

创建节点

插入节点

删除节点

替换节点

复制节点

8属性操作

获取与设置元素属性

删除元素属性

9节点遍历

遍历子元素

遍历同辈元素

遍历前辈元素

其他遍历方法

10CSS-DOM操作

总结

代码

示例1：追加和移除样式css、addClass、removeClass

<!doctype html>

<html>

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

margin:0px;

padding:0px;

font-size:14px;

font-family:"微软雅黑";

line-height: 28px;;

}

.title {font-size:14px; color:#03F; text-align: center; }

.text{ padding:10px;}

.content {background-color:#FFFF00; }

.border {border:1px dashed #333; }

</style>

</head>

<body>

<h2 class="title" >jQuery操作CSS</h2>

css()设置或返回样式属性<br>

addClass()增加一个或多个类<br>

removeClass()移除一个或多个类

</p>

$(document).ready(function(){

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

$("p").addClass("content border");

});

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

$("p").removeClass("text content");

});

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

$("p").toggleClass("content border");

});

</script>

</body>

</html>

示例2：hasClass的用法

<!doctype html>

<html>

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

margin:0px;

padding:0px;

font-size:14px;

font-family:"微软雅黑";

line-height: 28px;;

}

.title {font-size:14px; color:#03F; text-align: center; }

.text{ padding:10px;}

.content {background-color:#FFFF00; }

.border {border:1px dashed #333; }

</style>

</head>

<body>

<h2 class="title" >jQuery操作CSS</h2>

css()设置或返回样式属性<br>

addClass()增加一个或多个类<br>

removeClass()移除一个或多个类

</p>

$(document).ready(function(){

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

if(!$("p").hasClass("content")){

$("p").addClass("content");

}

});

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

if($("p").hasClass("content")) {

$("p").removeClass("content");

}

});

</script>

</body>

</html>

示例3：常见问题

*{margin: 0; padding: 0; font-family: "Arial", "微软雅黑"; line-height: 25px; font-size: 14px;}

section{margin: 5px auto 0 auto; width: 300px; padding: 5px; background:#f8dda9; border: 1px #b57b0b solid; border-radius: 5px; position: relative;}

.img{position: absolute; right: -18px; bottom: -75px;}

span{float: right;

cursor: pointer;}

h1{font-size: 16px; cursor: pointer;}

section li{list-style: none;}

section li:before{content:" • ";}

<!DOCTYPE html>

<html>

</head>

<body>

</section>

/* $(document).ready(function(){

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

var str="<ul><li>买了商品后，查不到物流信息怎么办？</li><li>申请退款后，交易退款成功，钱到哪里？</li><li>卖家拒绝退款，怎么办？</li><li>投诉发生的时间和条件是什么？</li><li>如何申请淘宝客服介入？</li></ul>";

$(".proList").html(str);

});

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

$(".proList").html("");

})

});*/

$(document).ready(function(){

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

$(".proList").text(str);

});

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

$(".proList").text("");

})

});

</script>

</body>

</html>

示例4：搜索框特效

<!DOCTYPE html>

<html>

<title>搜索框特效</title>

margin:0px;

padding:0px;

font-size:12px;

}

input{

float: left;

}

#searchtxt{

width:222px;

height:38px;

line-height:38px;

padding-left:30px;

border:none;

background: url(images/bg.jpg) no-repeat;

}

.search_btn{

width:90px;

height:38px;

line-height:38px;

border:none;

background: url(images/btn.jpg) no-repeat;

margin-left:-4px;

cursor:pointer;

}

</style>

</head>

<body>

$(document).ready(function(){

$("#searchtxt").focus(function(){ // 搜索框获得鼠标焦点

var txt_value = $(this).val(); // 得到当前文本框的值

if(txt_value=="电风扇"){

$(this).val(""); // 如果符合条件，则清空文本框内容

}

});

$("#searchtxt").blur(function(){ // 搜索框失去鼠标焦点

var txt_value = $(this).val(); // 得到当前文本框的值

if(txt_value==""){

$(this).val("电风扇"); // 如果符合条件，则设置内容

}

});

</script>

</body>

</html>

示例5：祝福冬奥

*{padding:0;margin:0;}

html,body{font-family:"微软雅黑";}

.contain{width:320px;margin:5px auto; border: 1px solid #2a65ba;}

.gameList{list-style:none;}

.gameList li{padding-left:15px;line-height:40px; height:40px;font-size:12px;color:#000;border-bottom:1px #aaaaaa dashed;}

h2{font-size:16px;padding-left:20px;line-height:40px;}

/**

* Created by zongjuan.wang on 2016/6/17.

$(document).ready(function(){

//用过滤选择器给h2设置背景颜色和字体颜色

$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});

var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");

var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</li>");

$("ul").append($newNode1);

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

var $newNode3=$("<li>北京冬残会筹备工作在京举行</li>");

var $newNode4=$("<li>北京奥匹克塔奥运五环标志落成！</li>");

$("ul").after($newNode3);

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

// $(".gameList li:eq(1)").remove();

$(".gameList li:eq(1)").empty();

//li 最后一个没有边框

$(".gameList li:last").css("border","none");

});

<!doctype html>

<head>

<title>仿冬奥列表内容</title>

</head>

<body>

<li> 贝克汉姆：衷心希望北京能够申办成功！</li>

<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>

<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>

<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>

</ul>

</div>

</body>

</html>

示例6：祝福冬奥替换节点replace

*{padding:0;margin:0;}

html,body{font-family:"微软雅黑";}

.contain{width:320px;margin:5px auto; border: 1px solid #2a65ba;}

.gameList{list-style:none;}

.gameList li{padding-left:15px;line-height:40px; height:40px;font-size:12px;color:#000;border-bottom:1px #aaaaaa dashed;}

h2{font-size:16px;padding-left:20px;line-height:40px;}

/**

* Created by zongjuan.wang on 2016/6/17.

$(document).ready(function(){

//用过滤选择器给h2设置背景颜色和字体颜色

$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});

var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");

//$(".gameList li:eq(2)").replaceWith($newNode1);

$($newNode1).replaceAll(".gameList li:eq(2)");

//li 最后一个没有边框

$(".gameList li:last").css("border","none");

});

<!doctype html>

<head>

<title>仿冬奥列表内容</title>

</head>

<body>

<li> 贝克汉姆：衷心希望北京能够申办成功！</li>

<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>

<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>

<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>

</ul>

</div>

</body>

</html>

示例7：祝福冬奥复制节点clone、appendTo

*{padding:0;margin:0;}

html,body{font-family:"微软雅黑";}

.contain{width:320px;margin:5px auto; border: 1px solid #2a65ba;}

.gameList{list-style:none;}

.gameList li{padding-left:15px;line-height:40px; height:40px;font-size:12px;color:#000;border-bottom:1px #aaaaaa dashed;}

h2{font-size:16px;padding-left:20px;line-height:40px;}

/**

* Created by zongjuan.wang on 2016/6/17.

$(document).ready(function(){

//用过滤选择器给h2设置背景颜色和字体颜色

$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});

$(".gameList li:eq(1)").click(function(){

$(this).clone(true).appendTo(".gameList");

})

$(".gameList li:eq(2)").click(function(){

$(this).clone(false).appendTo(".gameList");

})

//li 最后一个没有边框

//$(".gameList li:last").css("border","none");

});

<!doctype html>

<head>

<title>仿冬奥列表内容</title>

</head>

<body>

<li> 贝克汉姆：衷心希望北京能够申办成功！</li>

<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>

<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>

<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>

</ul>

</div>

</body>

</html>

示例8：祝福冬奥操作属性attr

*{padding:0;margin:0;}

html,body{font-family:"微软雅黑";}

.contain{width:320px;margin:5px auto; border: 1px solid #2a65ba;}

.gameList{list-style:none;}

.gameList li{padding-left:15px;line-height:40px; height:40px;font-size:12px;color:#000;border-bottom:1px #aaaaaa dashed;}

h2{font-size:16px;padding-left:20px;line-height:40px;}

.contain div{height: 80px; overflow: hidden;}

/**

* Created by zongjuan.wang on 2016/6/17.

$(document).ready(function(){

//用过滤选择器给h2设置背景颜色和字体颜色

$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});

$(".contain img").click(function(){

alert($(this).attr("alt"));

})

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

$(".contain img").removeAttr("alt");

//li 最后一个没有边框

$(".gameList li:last").css("border","none");

});

<!doctype html>

<head>

<title>仿冬奥列表内容</title>

</head>

<body>

<li> 贝克汉姆：衷心希望北京能够申办成功！</li>

<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>

<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>

<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>

</ul>

</div>

</body>

</html>

示例9：节点遍历next

/**

* Created by zongjuan.wang on 2016/7/1.

$(document).ready(function(){

//遍历子节点

/* var $section =$("section").children();

alert($section.length);*/

//获取同辈节点

$("li:eq(1)").next().addClass("orange");

//$("li:eq(1)").prev().addClass("orange");

// $("li:eq(1)").siblings().addClass("orange");

//获取前辈节点

//$("li:eq(1)").parent().addClass("orange");

//$("li:eq(1)").parents().addClass("orange");

});

<!doctype html>

<head>

.hot{ color:#F00;}

a{ color:#000;

text-decoration:none;

}

.orange{

background: #c3910b;

}

.orange a{

color: #ffffff;

}

</style>

</head>

<body>

<ul>

<li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>

<li><a href="#">苹果iPad mini</a></li>

<li><a href="#">三星GALAXY Ⅲ</a></li>

<li><a href="#">苹果iPhone 5</a></li>

</ul>

</section>

</body>

</html>

示例10：节点遍历each()

/**

* Created by zongjuan.wang on 2016/7/4.

$(document).ready(function(){

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

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

var str=$(this).text()+"<br>";

$("section").append(str);

})

});

<!doctype html>

<head>

.hot{ color:#F00;}

a{ color:#000;

text-decoration:none;

}

.orange{

background: #c3910b;

}

.orange a{

color: #ffffff;

}

</style>

</head>

<body>

<ul>

<li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>

<li><a href="#">苹果iPad mini</a></li>

<li><a href="#">三星GALAXY Ⅲ</a></li>

<li><a href="#">苹果iPhone 5</a></li>

</ul>

</section>

</body>

</html>

示例11：节点遍历end()

*{padding:0;margin:0;}

html,body{font-family:"微软雅黑";}

.contain{width:320px;margin:5px auto; border: 1px solid #2a65ba;}

.gameList{list-style:none;}

.gameList li{padding-left:15px;line-height:40px; height:40px;font-size:12px;color:#000;border-bottom:1px #aaaaaa dashed;}

h2{font-size:16px;padding-left:20px;line-height:40px;}

/**

* Created by zongjuan.wang on 2016/6/17.

$(document).ready(function(){

//用过滤选择器给h2设置背景颜色和字体颜色

$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});

$(".gameList li").first().css("background","#b8e7f9").end().last().css("background","#d3f4b5");

//li 最后一个没有边框

$(".gameList li:last").css("border","none");

});

<!doctype html>

<head>

<title>仿冬奥列表内容</title>

</head>

<body>

<li> 贝克汉姆：衷心希望北京能够申办成功！</li>

<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>

<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>

<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>

</ul>

</div>

</body>

</html>

示例12：随鼠标滚动的广告图片scroll

<!DOCTYPE html>

<html>

<title>随鼠标滚动的广告图片</title>

#main{text-align:center; width: 1014px; margin: 0 auto;}

#adver{

position:absolute;

left:10px;

top:30px;

z-index:2;

}

</style>

</head>

<body>

$(document).ready(function(){

var adverTop=parseInt($("#adver").css("top"));

var adverLeft=parseInt($("#adver").css("left"));

$(window).scroll(function(){

var scrollTop = parseInt($(this).scrollTop());//获取滚动条翻上去的距离

var scrollLeft = parseInt($(this).scrollLeft());//获取滚动条向右的距离

$("#adver").offset({top:scrollTop+adverTop});

$("#adver").offset({left:scrollLeft+adverLeft});

});

})

</script>

</body>

</html>

Java_Eastlin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8使用jQuery操作 DOM

#使用jQuery操作DOMDOM操作分为哪些类型？jQuery中如何添加和移除类样式？append()和appendTo()有什么区别？如何获取元素的所有同辈节点？简述remove( )方法与empty( )方法的异同简述parent( )方法与parents( )方法的异同课件1DOM操作分类DOM操作分为三类：DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()HTML-DOM：用于处理HTML文档，如docu.
复制链接

扫一扫