JQuery的DOM操作
目标:
1、 复习JavaScript学习中的DOM基本介绍部分的内容
2、 熟悉使用jQuery进行文档处理、筛选和属性操作的内容
大纲:
1、 关于DOM
1) HTML文档可以看成是一颗树,其中的内容是这颗树的节点
2) DOM树上的节点之间有父子关系、兄弟关系
3) 节点之间还有顺序关系
4) 可以通过对DOM树的操作来修改HTML文档
2、 DOM操作的分类
1) 文档处理
(1)内部插入
A、 append(content| fn)向每个匹配的元素内部追加内容
$('div').append('<p>PHP培训</p>');向div里面最后面加入<p>PHP培训</p>
B、 appendTo(content)把所有匹配的元素追加到另一个指定的元素集合
$('<p>PHP培训</p>').appendTo('div'); 向div里面最后面加入<p>PHP培训</p>;(A和B左右是相同的)
C、 prepend(content| fn)向每个匹配的元素内部前置内容
$('div').prepend('<p>PHP培训</p>'); 向div里面的最前面加入<p>PHP培训</p>;
D、 prependTo(content)向每个匹配的元素内部前置内容
$('<p>PHP培训</p>').prependTo('div');; 向div里面的最前面加入<p>PHP培训</p>;
(2)外部插入
A、 after(content | fn)在每个匹配的元素之后插入内容
$('div').after('<p>PHP培训</p>');把<p>PHP培训</p>插入到div之后
B、 before(content | fn)在每个匹配的元素之前插入内容
$('div').before('<p>PHP培训</p>'); 把<p>PHP培训</p>插入到div之前
C、 insertAfter(content)把所有匹配的元素插入到另一个指定的元素元素之后
$('<p>PHP培训</p>').insertAfter('div'); 把<p>PHP培训</p>插入到div之后;(A=C)
E、 insertBefore(content)
$('<p>PHP培训</p>').insertBefore('div'); 把<p>PHP培训</p>插入到div之前
(3) 包裹
A、 wrap(html| ele |fn)把所有匹配的元素用其他元素的结构化标记包裹起来
$('p').wrap('<divstyle="background:red"></div>');把div里面的所有<p>背景颜色改为红色;
B、 unwrap()快速取消 .wrap()方法的效果
C、 wrapAll(html| ele )将所有匹配的元素用单个元素包裹起来
$('p').wrapAll('<div></div>');用div把所有p元素包裹起来
D、 wrapInner(html| ele | fn)将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
$('p').wrapInner('<divid="div1"></div>');把每个p元素单独包裹起来
(4)替换
A、 replaceWidth(content| fn)将所有匹配的元素替换成指定的HTML或DOM
$('P').replaceWith('<P>php培训</p>');
B、 replaceAll(selector)
A=B $('<P>php培训</p>').replaceAll('p');
(5) 删除
A、 empty()删除匹配的元素集合中所有的子节点
$('div').empty();清空div下的所有节点
B、 remove([expr])从DOM中删除所有匹配的元素
$('div').remove();删除div
C、 detach([expr])从DOM中删除所有匹配的元素
注意:与remove()不同的是,所绑定的事件、附加的数据都会保留下来
(6) 复制
Clone([Even[,deepEven]])克隆匹配的DOM元素并且选中这些克隆的副本
$('.cc').clone().appendTo('div');复制class为cc的元素并插入div
2)筛选操作
(1)过滤
eq(index | -index)
$('p').eq(1).css('color','red');
first()
last()
hasClass(class)
filter(expr | obj | ele |fn)筛选出与指定表达式匹配的元素组合
$('p').filter('.cc').css('color','red');
is(expr | obj | ele | fn)根据选择器、DOM元素或jQuery对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true
map(callback)将一组元素转换成其他数组(无论是否是元素数组)
var str=$('p').map(function () {
return $(this).text();
}).get().join(',');
alert(str);把p元素以数组返回
has(expr | ele)
not(expr | ele |fn)
slice(start,[end]选取一个匹配的子集
$('p').slice(1,3).css('color', 'red');
(1) 查找
Children([expr])
Closest(e,[c | o | e]
find(e | o | e)
next([expr])
nextall([])
nextUntil([e | e |[,f]
offsetParent()
parent([expr])
parents([expr])
parentsUntil([e | e][,f])
prev([expr])
prevall([expr])
prevUntil([e | e][,f])
siblings([expr])
DEMO:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>jQuery</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('button').click(function () {
//$('p').eq(1).css('color', 'red');
//$('p').filter('.cc').css('color', 'red');
//var str= $('p').map(function () {
// return $(this).text();
// }).get().join(',');
// alert(str);
// $('p').slice(1, 3).css('color', 'red');
});
$('p').click(function () {
if ($(this).is('.cc')) {
alert('####');
}
});
});
</script>
</head>
<body>
<button>按钮</button>
<h2>PHPChina网站模块划分</h2>
<div>
<p class="cc">PHP 资讯</p>
<p>PHP 论坛</p>
<p>Zend 产品</p>
</div>
</body>
</html>