<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery的DOM操作</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css"></style>
</head>
<body>--目标：
1.复习JavaScript学习中的DOM基本介绍部分的内容
2.熟悉使用jQuery进行文档处理 刷选和属性操作的内容
大纲
1.关于DOM
1）HTML可以看成一棵树，其中内容是这棵树的节点
2）DOM树上的节点之间有父子关系 兄弟关系
3）节点之间还有顺序关系
4）可以通过对DOM树的操作来修改
2.DOM操作的分类
1) 文档处理
(1)内部插入
append(content|fn) 向每个匹配的元素内部追加内容
appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中
prepend(content|fn) 向每个匹配的元素内部前置内容。
prependTo(content) 把所有匹配的元素前置到另一个、指定的元素元素集合中。
(2)外部插入
after(content|fn)在每个匹配的元素之后插入内容。
before(content|fn) 在每个匹配的元素之前插入内容。
insertAfter(content)把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
insertBefore(content)把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
(3)包裹
wrap(html|ele|fn)把所有匹配的元素用其他元素的结构化标记包裹起来。
unwrap()这个方法将移出元素的父元素
wrapAll(html|ele)将所有匹配的元素用单个元素包裹起来
wrapInner(html|ele|fn)将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
(4)替换
replaceWith(content|fn)
replaceAll(selector)
删除
empty()删除匹配的元素集合中所有的子节点。
remove([expr])从DOM中删除所有匹配的元素。
detach([expr])从DOM中删除所有匹配的元素。
复制
clone([Even[,deepEven]])克隆匹配的DOM元素并且选中这些克隆的副本。
2) 刷选操作
(1) 过滤
eq(index|-index)
first()
last()
hasClass(class)
filter(expr|obj|ele|fn)筛选出与指定表达式匹配的元素集合。
is(expr|obj|ele|fn)根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
map(callback)将一组元素转换成其他数组（不论是否是元素数组）
has(expr|ele)保留包含特定后代的元素，去掉那些不含有指定后代的元素。
not(expr|ele|fn)从匹配元素的集合中删除与指定表达式匹配的元素
slice(start,[end])选取一个匹配的子集
(2)查找
children([expr])
closest(e|o|e)1.7*
find(e|o|e)搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
next([expr])
nextAll([expr])
nextUntil([e|e][,f])
offsetParent()
parent([expr])
parents([expr])
parentsUntil([e|e][,f])
prev([expr])
prevall([expr])
prevUntil([e|e][,f])
siblings([expr])
(3)串联
add(e|e|h|o[,c])1.9*
andSelf()1.8-
addBack()1.9+
contents()
end()
3) 属性操作
attr(name|pro|key,val|fn) 设置或返回被选元素的属性值。
removeAttr(name) 从每一个匹配的元素中删除一个属性
prop(n|p|k,v|f) 获取在匹配的元素集中的第一个元素的属性值。
removeProp(name) 用来删除由.prop()方法设置的属性集
4)CSS操作
addClass(class|fn) 为每个匹配的元素添加指定的类名。
removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类。
toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类。
浏览器提供的网站开发者工具
在jQuery中有一些方法 它既能返回值 又能设置值 getter/ settter/
-->
<button>按钮</button>
<h2>PHPChina 网站模板化分</h2>
<div>
<p class="cc">php 资讯</p>
<p>PHP 论坛</p>
<p>zend 产品</p>
</div>
<span>选择你喜欢的PHP网站</span>
<div>
<input type="checkbox" name="site" value="php" />www.php.net
<input type="checkbox" name="site" value="phpchina" />www.phpchina.com
<input type="checkbox" name="site" value="zend" />www.zend.com
</div>
<button>按钮</button>
</body>
<script>
$(document).ready(function () {
$('button').click(function () {
// $('div').append('<p>php 内部培训</p>');
// $('<p>php 内部培训</p>').appendTo('div');
// $('div').prepend('<p>php 内部培训</p>');
// $('div').after('<p>php 内部培训</p>')
// $('div').before('<p>php 内部培训</p>')
//$('p').eq(1).css('color','red');
$('p').slice(1,3).css('color','green');
$('p').filter('.cc').css('color','red');
var str= $('p').map(function () {
return $(this).text();
}).get().join(',' );
});
$('p').click(function () {
if($(this).is('.cc')){
alert('###');
}
});
}) ;
$(document).ready(function () {
$('button').click(function () {
//只有一个参数情况下
var ret =null;
ret= $(':checkbox').eq(0).attr('value')
alert(ret);
});
});
</script>
</html>
<!--
节点（属性节点 文本节点 元素节点）
http-equiv content
| |
————————————— jQuery-DOM
| |
<meta> <title> 网站模板化分
| | |
-------------------- <h2>
| |
<head> <body>
| |
-------------------------
<html>
|
document-->jQuery的DOM操作
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
推荐阅读更多精彩内容
- title: 《锋利的jQuery》三、jQuery的DOM操作date: 2017-07-03 09:23:54...
