jquery学习笔记之DOM操作

1.查找节点
查找元素节点：通过jquery选择器
查找属性节点：通过jquery选择器查找到元素节点之后使用attr()方法,当只有一个参数时，表示获取属性值，两个参数时表示更改属性值
如

var $para=$('#luzhe');
var p_txt=$para.attr('title');

alert(p_txt);
2.创建节点（用$(html)这个工厂函数）
创建元素节点
例： var $li_1=$html('<li></li>'); //可以用$('<p/>')不能用$('<p>')
var $li_2=$html('<li></li>');
$('ul').append($li_1).append($li_2);
创建文本节点
例： var $li_1=$html('<li>香蕉</li>');
var $li_2=$html('<li>苹果</li>');
$('ul').append($li_1).append($li_2);
创建属性节点
例： var $li_1=$html('<li title="luzhe">香蕉</li>');
var $li_2=$html('<li title="luzhe">苹果</li>');
$('ul').append($li_1).append($li_2);
3.插入节点
例：<p>我想说：</p> <b>你好</b>
$('p').append('<b>你好</b>')---------------<p>我想说：<b>你好</b></p>
类似于appendTo()
$('p').prepend('<b>你好</b>')----------------<p><b>你好</b>我想说：</p>
类似于prependTo()
$('p').after('<b>你好</b>')-------------<p>我想说：</p><b>你好</b>
类似于insertAfter()
$('p').before('<b>你好</b>')-------------<b>你好</b><p>我想说：</p>
类似于insertBefore()
4.删除节点
remove()方法
都某个节点用该方法删除后，该节点所包含的全部后代节点将全部被删除，这个方法的返回值是一个指向已被删除节点的引用，因此可以以后继续使用
例：var $li=$('ul li:first').remove();
$li.appendTo($('ul')); //可以用来移动元素
也可以通过给该方法传入参数来选择需要删除的节点
例：$('ul li').remove($('li[title]=luzhe'))
detach()方法
与remove()相同点：该方法不会把匹配出来的元素从对象中删除，因而可以在将来再使用这些元素
与remove()不同点：该方法还会保留全部的绑定的事件和附加的数据
empty()方法
empty()不是删除节点，而是清空节点
5.复制节点
clone()如果需要新复制的元素也有复制元素的时间，需传入true，即clone(true)
例：$('ul li').click(function(){
$(this).clone(true).appendTo($('ul'));
}
)
6.替换节点
replaceWith()
例:$('p').replaceWith('<h1>卢哲</h1>')
类似于replaceAll()
7.包裹节点
wrap()把某个节点用其他节点包裹起来
例：$("strong").wrap("<b></b>")-----------<b><strong>卢哲</strong></b>
wrapAll()会将所有的匹配的元素当作一个元素来包裹

wrapInner()将匹配的元素的内容用相应的标签包裹起来、
例：$("strong").wrapInner("<b></b>")----------------<strong><b>卢哲</b></strong>
8.属性操作
获取属性和设置属性
用attr()方法来完成
可以同时设置多个属性
例：$("p").attr({"title":"luzhe","name":"test"});
删除属性
用removeAttr()方法
9.样式操作
获取样式和设置样式
用attr()方法
追加样式
用addClass()方法
移除样式
用removeClass方法
切换样式
用toggle()方法 行为上的切换
例： $toggleBtn.toggle( //交替一组动作
function(){
//显示元素
}.function(){
//隐藏元素
}
)
toggleClass()防范用来控制样式上的重复切换
判断是否含有某个样式
使用hasClass()方法来判断是否含有某个class，有返回true，否则返回false
10.设置和获取HTML、文本、值
html()该方法类似于js中的innerHTML属性，即可以用来获取，也可以用来设置
例1：var p_html=$('p').html();
alert(p_html);
例2：$("p").html("<h1>阿伦</h1>");
text()该方法类似于js中的innerText()，可以用来获取或设置某个元素中的文本内容
val()该方法类似于js中的value属性，用来获取和设置元素的值
defaultValue属性包含该元素的初始值
11.遍历节点
children()用于获取匹配元素的子元素集合，值考虑子元素而不考虑其他后代元素
例： var $body=$('body').children();
next()用于获取匹配元素的紧邻同辈元素
例：var p=$('p').next();
prev()用于获取匹配元素的前面紧邻的同辈元素
siblings()用于获取匹配元素前后所有的同辈元素
closest()该防范用于取得最近的匹配元素，首先检查当前元素是否匹配，如果匹配则直接返回
该元素，如果不匹配则向上查找父元素，什么都找不到则返回一个空的jquery对象
parent()直接从父元素开始查找，找到即返回该元素节点
parents()直接从第一个父元素开始查找，但当找到后并不停止查找，而是继续，最后返回多个父节点

12.CSS-DOM操作
用css()方法获取或设置样式
同样的还有height()和width()
13.元素定位的几个方法
offset()用于获取元素在当前视窗的相对便宜，返回的对象包含两个属性，即top和left，但只对可见元素有效
position()用于获取相对于最近的一个position样式属性设置为relative或absolutely的父节点的相对便宜,同样返回top和left两个属性
scrollTop()和scrollLeft()分别获取元素的滚动条距顶端和距左侧的距离