jquery中的dom操作

1.创建元素节点
(1)创建两个<li>新元素
(2)将这两个元素插入文档中
可以使用jquery的工厂函数$()来完成，格式如：

$(html); //会根据传入的html标记字符串，创建一个dom对象，并将这个dom对

象包装成一个jquery对象后返回

var $li_1=$("<li></li>");
var $li_2=$("<li></li>");

将这两个新元素插入文档中
$("ul").append($li_1);
$("ul").append($li_2);

2.创建文本节点

var $li_1=$("<li>test1</li>");
var $li_2=$("<li>test2</li>");

$("ul").append($li_1);
$("ul").append($li_2);

3.创建属性节点

var $li_1=$("<li title="test1">test1</li>");
var $li_2=$("<li title="test2">test2</li>");

$("ul").append($li_1);
$("ul").append($li_2);

复制节点(被复制的新元素不具备任何行为)

$("ul li")click(function(){
	$(this).clone().appendTo("ul"); //复制当前单击的节点，并添加到

ul元素中
如果在复制元素的同时复制元素中所绑定的事件要在clone()中传递一个参数

true:clone(true);

替换节点
replaceWith()和replaceAll();

$('p').replaceWith('<stong>xxxx</stong>');

$('<stong>xxxx</stong>').replaceAll('p');

以上两行代码效果相同，replaceAll()只是颠倒了replaceWith()操作.
被替换后，绑定在该元素上的事件也一起消失

包裹节点
warp():
如果要将某个节点用其他标记包裹起来，jquery提供了wrap()方法

$("strong").wrap("<b></b>");//用<b>标签把<strong>包裹起来

得到的结果：

<b><strong title="test">test1</strong></b>

wrapAll():
该方法会将所有匹配的元素用一个元素来包裹，而wrap()是将所有的元素进行单
独的包裹

$("strong").wrapAll("<b></b>");
得到的结果:
<b>
 <strong title="test">test1</strong>
 <strong title="test">test1</strong>
</b>

wrapInner():
该方法将每一个匹配元素的子内容（包括文本节点）用其他结构化标签包裹起来

$("strong").wrapInner("<b></b>");
<strong title="test"><b>test1</b></strong>

属性操作
jquery中,用attr()方法来获取和设置元素属性，removeAttr()来删除元素属性
1.获取属性和设置属性

var $para = $("p"); //获取p节点
var p_t = $para.attr("title"); //获取p节点的属性title

$("p").attr("title","your title"); //设置属性
$("p").attr({"title":"your title","name":"test"});//为同一元素设置多个

属性值
2.删除属性

$("p").removeAttr("title");

样式操作
1.获取样式和设置样式

html:
<p class="myClass" title="test">i love this game</p>
通过attr()来获取<p>元素的class:
var p_class = $("p").attr("class");

设置<p>元素的class:

$("p").attr("class","hight");
在多数情况下，它会将原来的class替换为新的class,而不是在原来的基础上追
加class
结果：

<p class="hight" title="test">i love this game</p>

2.追加样式

addClass()方法来追加样式
$("p").addClass("hight");
结果

<p class="myClass hight" title="test">i love this game</p>

3.移除样式

$("p").removeClass("high");

删除多个

$("p").removeClass("myClass").removeClass("another");
$("p").removeClass("myClass another");
$("p").removeClass();

4.切换样式

$("p").toggleClass("hight");
当切换后<p>由
<p class="myClass" title="test">i love this game</p>
变为:
<p class="myClass hight" title="test">i love this game</p>
再次切换后:
<p class="myClass" title="test">i love this game</p>

5.判断是否含有某个样式
有 返回true,否则返回false

$("p").hasClass("another");//jquery内部实际上调用了is()方法来完成这功

能is(".another")

设置和获取html、文本和值
1.html()方法
类似于js中的innerHTML，用来读取或设置某个元素中的html内容

var p_html = $("p").html();
结果:
<p class="myClass" title="test"><strong>i love this game</strong></p>

设置某元素的html

$("p").html("<strong>i test</strong>");

2.text()方法
类似于js中的innerText属性，用来读取或设置某个元素中的文本内容

<p class="myClass" title="test"><strong>i love this game</strong></p>

var p_text=$("p").text();
结果：
i love this game

3.val()方法
类似于js中的value属性，可以用来设置和获取元素的值。无论元素是文本框，

下拉框还是单先框，都可以返回元素的值。如元素为多选，则返回一个包含所有

选择的值的数组。

遍历节点
1.children()方法
用于取得匹配元素的子元素集合
$("body").childern();
children()只考虑子元素而不考虑任何后代元素
2.next()方法
用于取得匹配元素后面紧邻的同辈元素

3.prev()方法
用于取得匹配元素前面紧邻的同辈元素

4.siblings()方法
用于取得匹配元素前后所有的同辈元素

5.closest()方法
取是最近的匹配元素

CSS-DOM操作
用来读取和设置style对象的各种属性

$("p").css("color"); //获取<p>元素的样式颜色

无论color属性是外部css导入，还是直接拼接在html元素里（内联），css()方

法都可以获取属性style里的其他属性的值.

$("p").css("color","red");//设置<p>元素的样式颜色为红色

1.offset()方法
获取元素的当前视窗的相对偏移，其中返回的对象包含两个属性，top和left，

它只对可见元素有效

var offset = $("p").offset();
var left = offset.left;
var top = offset.top;

2.position()方法
获取元素相对于最近的一个position样式属性设置为relative或absolute的祖父

节点的相对偏移，与offset()一样，它返回的对象也包括两个属性，即top left

var position = $("p").position();
var left = position.left;
var top = position.top;

3.scrollTop() 和scrollLeft()
获取元素的滚动条距顶端的距离和距左侧的距离
var $p = $("p");
var scrollTop = $p.scrollTop();
var scrollLeft = $p.scrollLeft();
也可指定参数，控制元素的滚动条滚动到指定位置。
$("textarea").scrollTop(300);
$("textarea").scrollLeft(300);