jQuery学习之DOM操作
接着昨天的继续写，这几篇只是把看书的内容系统的在写一下。
对dom的基本操作
（1）查找结点
- 查找元素节点
- 查找属性节点 var $para=$("p"); var p_txt=$para.attr("title");
（2）创建结点
- 创建元素节点 var $li_test=$("<li></li>"); $("ul").append($li_test);
- 创建文本节点 var $li_test=$("<li>文本文档</li>"); $("ul").append($li_test);
- 创建属性节点 var $li_test=$("<li title="文本文档"></li>"); $("ul").append($li_test);
（3）插入节点
- append() 向每一个匹配内部追加内容
- appendTo() 将所有匹配的元素追加到指定的元素中.与append相反
- prepend() 向每个匹配元素的内部前置内容
- prependTo()
- after() 在每个匹配元素之后插入内容
- insertAfter() 将所有匹配的元素插入到指定元素后面
- before() 在每个匹配元素之前插入内容
- insertBefore()
（4）删除节点
- remove() 从Dom中删除所有匹配的元素
- detach() 与remove不一样的是，所有绑定的事件会保留下来
- empty() 清空节点
（5）复制节点
- clone()
$(this).clone(true).appendTo(body);
在clone()方法中传递一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件。
（6）替换节点
- replaceWith() 将所有匹配的元素替换成指定的HTML或者DOM元素
$("p").replaceWith("<strong>= =<strong>");
- replaceAll()反过来
$("<strong>= =<strong>").replaceAll("p");
（7）包裹节点
- wrap() 该方法对于在文档中插入额外的结构化标记非常有用
- wrapAll() 将所有匹配的元素用一个元素来包裹，而warp()是将所有元素进行单独包裹
- wrapInner() 将每一个匹配元素的子内容（包括文本）用其他结构化的标记包裹起来
（8）属性操作
- 获取属性和设置属性
$("p").attr({"title":"myTitle","name":"myName"})
除了attr()， 还有类似的方法html(),text(),height(),width(),val(),css()
- 删除属性
$("p").removeAttr("title");
（9）样式操作
- 获取样式和设置样式
var p_class=$("p").attr("class");
$("p").attr("class","high"); //设置<p>元素的class为“high”
- 追加样式
$("p").addClass("")
- 移除样式
$("p").removeClass("")
- 切换样式
$("p").toggleClass("")
- 判断是否有某个样式
$("p").hasClass("") 判断是否有某个class,如果有返回true,否则返回false
（10）设置和获取HTML文本和值
- html()
- text()
- val()
（11）遍历节点
- children() 取得匹配元素的子元素
- next() 取得后面紧邻的同辈元素
- prev() 取得前面紧邻的同辈元素
- sibilings() 取得前后所有的同辈元素
- close() 首先检查当前元素是否匹配，若匹配返回元素本身，不匹配，向上查找父元素。====
- parent() 父元素
- parents() 祖先元素
（12）CSS-DOM操作
- offset()
获取元素在当前视窗的相抵偏移，返回top,left
var offset=$("p").offset();
var left=offset.left;
var top=offset.top;
- position()
获取元素相对于最近一个position样式设置为relative或absolute的父元素的相对偏移量
- scrollTop()
获取元素的滚动条距顶端的距离
可以为该方法指定参数,控制元素内的滚动条滚动到距顶端300的位置
$("textarea").scrollTop(300)
- scrollLeft()
