jQuery（二、DOM）

来源：互联网发布：淘宝怎么看正品编辑：程序博客网时间：2024/05/16 09:30

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>

阅读全文

0 0