请关注“知了堂学习社区”,地址:http://www.zhiliaotang.com/portal.php
1.对DOM操作
- 节点操作
- 查找节点
- 通过选择器
- 通过属性选择器
- 通过parent([expr])函数方法查找父级元素节点
- 通过parents([expr])函数方法来查找祖先元素
示例:
- 查找节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../jquery-2.1.0.js"></script>
</head>
<body>
<p>
<button id="btn01">parents([expr])</button>
</p>
<div><p><span>Hello World</span></p></div>
</body>
</html>
<script>
$(function(){
$("#btn01").click(function(){
//通过parents函数来找祖先元素,返回元素的集合
// console.log($("span").parents()[1 ]);
// 通过each()函数遍历他的祖先元素
$("span").parents().each(function(){
//如何将js对象专长jQuery对象
//js对象 不能用JQuery中的函数和方法
//只有把js对象转成jQuery对象才能使用jQuery中的函数和方法
console.log($(this).html());
})
});
})
</script>
- 插入内容
- append():在元素的内部添加内容
- prepend():在元素的内部追加内容
- after():在元素的后面追加内容
- before():在元素的前面追加内容
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script></script>
<script src="../../jquery-2.1.0.js"></script>
</head>
<body>
<p>
<button id="btn04">prepend()</button>
<button id="btn05">after()</button>
<button id="btn06">before()</button>
</p>
<div><p><span>hello world</span></p></div>
<div id="d01"></div>
<p><button class="btn01">button</button></p>
</body>
</html>
<script>
$(function(){
$("#btn04").click(function(){
//prepend(),在元素内部添加节点,匹配元素内部的开始处插入内容
$("#d01").prepend("<p>hello prepend</p>");
});
$("#btn05").click(function(){
//在元素后面节点添加内容
$("#d01").after("hello after");
});
$("#btn06").click(function(){
//在元素前面添加内容
$("#d01").before("<p>hello before</p>");
});
})
</script>
- 删除节点
- remove([expr]):把元素本身一起删除掉
- empty():清空元素内部的节点,但是元素本身不会删除掉
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script></script>
<script src="../../jquery-2.1.0.js"></script>
</head>
<body>
<p>
<button id="btn04">prepend()</button>
<button id="btn05">after()</button>
<button id="btn06">before()</button>
<button id="btn07">empty()</button>
<button id="btn08">remov()</button>
<button id="btn09">clone()</button>
</p>
<div><p><span>hello world</span></p></div>
<div id="d01"></div>
<p><button class="btn01">button</button></p>
</body>
</html>
<script>
$(function(){
$("#btn04").click(function(){
//prepend(),在元素内部添加节点,匹配元素内部的开始处插入内容
$("#d01").prepend("<p>hello prepend</p>");
});
$("#btn05").click(function(){
//在元素后面节点添加内容
$("#d01").after("hello after");
});
$("#btn06").click(function(){
//在元素前面添加内容
$("#d01").before("<p>hello before</p>");
});
$("#btn07").click(function(){
//删除
$("#d01").empty();
});
$("#btn08").click(function(){
//移除
$("div").remove("#d01");
});
$("#btn09").click(function(){
//复制
$(".btn01").clone(true).appendTo("body");
});
})
</script>
- 赋值元素节点
- 调用clone(attr)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script></script>
<script src="../../jquery-2.1.0.js"></script>
</head>
<body>
<p>
<button id="btn04">prepend()</button>
<button id="btn05">after()</button>
<button id="btn06">before()</button>
<button id="btn07">empty()</button>
<button id="btn08">remov()</button>
<button id="btn09">clone()</button>
</p>
<div><p><span>hello world</span></p></div>
<div id="d01"></div>
<p><button class="btn01">button</button></p>
</body>
</html>
<script>
$(function(){
$("#btn04").click(function(){
//prepend(),在元素内部添加节点,匹配元素内部的开始处插入内容
$("#d01").prepend("<p>hello prepend</p>");
});
$("#btn05").click(function(){
//在元素后面节点添加内容
$("#d01").after("hello after");
});
$("#btn06").click(function(){
//在元素前面添加内容
$("#d01").before("<p>hello before</p>");
});
$("#btn07").click(function(){
//删除
$("#d01").empty();
});
$("#btn08").click(function(){
//移除
$("div").remove("#d01");
});
$("#btn09").click(function(){
//复制
$(".btn01").clone(true).appendTo("body");
});
$(".btn01").click(function(){
//复制
window.alert("我是一个按钮");
});
})
</script>
- 属性操作
- $(“div”).attr(“title”):获取元素属性节点值
- $(“div”).attr(“title”,”helloworld”)
- $(“div”).removeAttr(“title”):删除元素节点的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-2.1.0.js"></script>
</head>
<body>
<p>
<button id="btn01">attr("title")</button>
<button id="btn02">attr("title","hello")</button>
<button id="btn03">removeAttr("title")</button>
</p>
<div></div>
</body>
</html>
<script>
$(function(){
$("#btn01").click(function(){
//获取节点属性的值
console.log($("div").attr("title"));
});
$("#btn02").click(function(){
//给节点属性复制 或者改变
$("div").attr("title","hello");
});
$("#btn03").click(function(){
$("div").removeAttr("title");
});
})
</script>
- 样式操作
- css(name,value):添加单个样式
- addClass(cssname):添加一个或多个样式,若果是多个样式请用空格隔开
- removeClass(cssname):移除样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-2.1.0.js"></script>
</head>
<style type="text/css">
.div{
width: 100px;
height:100px;
border: 1px solid black;
}
</style>
<body>
<p>
<button id="btn1">css("background","#FFFFF")</button>
<button id="btn2">addclass</button>
<button id="btn3">removeclass</button>
<button id="btn4">还原样式</button>
</p>
<div></div>
</body>
</html>
<script>
$(function(){
$("#btn1").click(function(){
//添加单个样式
$("div").css("width","100px").css("border","1px solid red");
});
$("#btn2").click(function(){
// 添加一个样式
$("div").addClass("div");
});
$("#btn3").click(function(){
// 删除一个样式
$("div").removeClass("div");
});
$("#btn4").click(function(){
// 还原样式
$("div").removeAttr("style").removeAttr("class");
});
})
</script>