DOM 基本操作
关于DOM
1.HTML 文档可以看成是一棵树，其中的内容是这棵树的节点
2.DOM 树上的节点之间有父子关系、兄弟关系
3.节点之间还有顺序关系
4.可以通过对 DOM 树的操作来修改 HTML 文档
1.内部插入
1）append(content|fn) 向每个标签的内部插入内容
$('div').append('<p>培训</p>');
2）appendTo(content)
$('
<p>培训</p>
').appendTo('div')
3）prepend(content) 向每个元素内部的前部添加
$('div').prepend('<p>培训</p>');
4）prependTo(content)
$('
<p>培训</p>
').prependTo('div')
2.外部插入
1）after 在每个匹配元素之后插入
$('div').after('
<p>培训</p>
')
2）before 在每个匹配元素之前插入
$('div').bofore('
<p>培训</p>
')
3）insertAfter 把所有匹配的元素插入另一个元素之后
$('
<p>培训</p>
').insertAfter('div')
4
）insertBefore 把所有匹配的元素插入另一个元素之前
$('
<p>培训</p>
').insertBefore('div')
3.包裹
1）wrap 将选中的标签包含一层wrap
$('p').wrap('<div style="background:red"></div>')
2）unwrap()
$('p').unwrap() 只能去除前面 wrap 的标签，不能去除 标签中包含的文字
3）wrapall 将所有的 标签作为一个整体包含一层 wrap
$('p').wrapAll(
'<div style="background:red"></div>'
)
4）wrapInner 将选择的标签的内部所有元素包含在一层 wrap 下
$('div').wrapInner(
'<div style="background:red"></div>'
);
4.替换
1）replaceWith() 选择的标签替换
$('p').replaceWith(
'
<p>培训</p>
'
);
2）replaceAll() 效果跟 replaceWith 一样
$(
'
<p>培训</p>
'
).replaceAll('p')
5.删除
1）empty() 清空子节点
$('div').empty()
2）remove([expr]) 删除整个选择的标签
$('div').remove()
var elem = $('.cc').remove() 此时相当于剪切的效果
$('div').after(elem)
3）detach([expr]) 与remove 不同的是，所有绑定的时间和附加的数据等都会被保留下来
var elem = $('.cc').
detach
() 此时相当于剪切的效果
$('div').after(elem)
$('.cc').click(function(){ 整个方法会被保留
alert("####")
})
6.克隆
1）
clone([Even[,deepEven]])
$('.cc').clone(true).after('div') 将上 true 可以将原来的标签的时间也克隆一份
筛选操作
1.过滤
1）eq(index)
$('p').eq(1).css('color','red');
2）first()
3）last()
4）filter() 筛选出指定匹配表达式的标签
$('p').filter('.cc').css('color','red')
5）is(expr|obj|ele|fn) 返回 Boolean 值
$('p').click(function(){
if($(this).is('.cc')){
alert('###');
}
})
6）map(callback) 返回一组标签的文本
var str = $('p').map(function(){
return $(this).text();
}).get().join(', ');
7）slice(index,len) 选择第 index 到 len 长度的标签
$('p').slice(1,3).css('color','red')
2.查找
1）
find()
$('div').find('p').css('color','red')
2）parent()
$('.dd').parent().css('color','red')
3）parents() 除根元素以外的元素都找到
$('.dd').parents().css('color','red')
$('.dd').parents('#aa').css('color','red') 找到祖先元素为 #aa 的元素与其之间的元素
4）closest() 与 parents() 有区别，具体查看手册
$('.dd').
closest
('#aa').css('color','red')
3.串联
1）end() 回到最近的一个操作(具体的满足的操作看手册)之前
$('div').find('.cc').end().css('color','red')
属性操作
1.属性
1）attr(name|pro|key , val|fn)
$(':checkbox').eq(0).attr('value') 获取属性值
$(':checkbox').eq(0).attr('value':'zf') 更改属性值
$(':checkbox').last().attr({name:'zfsite',value:'zf'}) 更改多个属性值
2）removeAttr(name)
$(':checkbox').eq(1).removeAttr('value') 删除属性值
$(':checkbox').eq(1).removeAttr('name value') 删除多个属性值
3）prop(n|p|k , v|f) 1.6+ 使用与 attr() 方法相似
区别：获取 checked、selected、disabled 等属性值时，如果使用 attr()
将 返回 undefined (字符串) ,而使用 prop() 则返回 false(布尔型)
4）removeProp(name) 1.6+
2.Css 类
1）addClass(class|fn)
2）removeClass([class|fn])
3）toggleClass(class|fn[,sw])
3.HTML代码/文本/值
1）html([val|fn]) 取得第一个匹配的元素的 html 代码
2）text([val|fn]) 取得第一个匹配的元素的内容的值
3）val([val|fn|arr]) 获取匹配元素的当前值
css 操作
1.CSS
css(name|pro|[,val|fn]) 1.8*
$('span').css('display')
$('span').css('color','blue')
$('span').css({width:'200px',color:'blue'})
2.位置
1）offset([coordinates])
var obj = $('button').offset() 获取相对偏移
alert('top:'+obj.top+';left:'+obj.left);
2）position()
3）scrollTop([val])
4）scrollLeft([val])
3.尺寸
1）height([val|fn])
2）width([val|fn])
3）innerHeight()
4）innerWidth()
5）outerHeight([soptions])
6）outerWidth([options])
附加内容：
1）创建节点对象的方法
$('<span>jQuery</span>')
2）移动对象的常见实现方法
1）插入方式
$(':checkbox:first').before($(':checkbox:eq(1)'));
2）剪切方式
调用 remove() 或 detach() 方法时，会删除当前节点，可以将
该节点赋值给变量，放到别的地方
在 jquery 中，有些方法既能返回值，又能设置值