首页 > 代码库 > jQueryDOM操作
jQueryDOM操作
1.添加节点，效率上不相上下，使用firefox，jQuery要快于JavaScript
1>JavaScript
$( function()
{
var t1 = new Date();
var body = document.getElementsByTagName("body")[0];
for(var i =0; i < 5000 ;i++)
{
var span = document.createElement("span");
span.setAttribute("class","red");
body.appendChild(span);
}
var t2 = new Date();
$("#result").html("添加5000个span用时:" + (t2-t1));
}
)
2>jQuery
$( function()
{
var t1 = new Date();
for (var i = 0;i<5000;i++)
{
var $span = $("<span/>");
$span.attr("class","red");
$("body").append($span);
/*
注：在效率上使用
$("body").append("<span class=‘red‘ />");
要快,大约2到3倍
*/
}
var t2 = new Date();
$("#result").html("添加5000个span用时:" + (t2-t1));
}
)
2.添加文本节点
var $h1 = $("<h1>标题，这个是</h1>");
$("body").add($h1);
3.添加属性
$span.attr("class","red");
或
var $span = $("<span class=‘red‘/>");
4.添加元素
1>append 在末尾追加。添加后成为最后一个
2>appendTo
3>prepend 在开始追加。添加后成为第一个
4>prependTo
5>after 在每个匹配元素后插入。如 ：$("div").after("<p>一段文本</p>");
6>before ..............前....
7>insertAfter 如：$("<p>一段文本</p>").insertAfter("div");
8>insertBefore
5.删除元素
1>remove() 如：$("p").remove();
2>empty()
6.复制元素
1>clone() 如；var $div = $("div").clone();若使用clone(true)则同时会复制目标元素的事件
7.元素替换
1>replaceWith() 如：$("p").replaceWith("<div>替换</div>");
2>replaceAll()
8.包裹(加壳)元素
1>A.wrap(B) 用元素Ｂ包裹元素Ａ。如：$("p").wrap("<span class=‘wrap‘ />");在p元素外加一层span，这里每一个p都会有一个span
2>wrapAll() 用元素Ｂ包裹全部元素Ａ。如：$("p").wrapAll("<span class=‘wrap‘ />");则在新增元素span下有(连续)若干原有的p元素
3>wrapInner() 元素B将包裹在每个元素Ａ里。与1>刚好相反。
9.属性操作
1>attr()
<1>设置属性 如：$("img").attr( { src:"1.jpg" , alt:"测试图像"); $("p").attr("title","文本");
<2>获取属性 如：$("p").attr("title"); 若没有此属性则返回 undefined.
<3>删除属性 removeAttr() 如：$("p").removeAttr("title");
10.类样式
1>追加样式 addClass()。 如：$("p").addClass("style1");
2>删除样式 removeClass()。 如：$("p").removeClass("style1");
3>切换样式 toggleClass(styleName ,[选项])。如果第二个参数不存在，如果目标元素中的样式不存在，则追加，如果存在，则删除样式。如：$("p").toggleClass("hidden",n++ % 3== 0);//每三次切换一次样式
4>样式判断 hasClass()。 如 $("p").hasClass("style1"); 返回true或false
11.操作Html、文本与值
1>读写Html，html()。此方法是对Dom的innerHtml的封装
如：var $html = $("p").html();
$("p").html($html);
2>读写文本，text()。用法同上。
3>读写表单值，val()。用法同上。
示例：
<form>
<select id="s1">
<option value="http://www.mamicode.com/1" selected="selected">单选1</option>
<option value="http://www.mamicode.com/2" >单选2</option>
</select>
<select id="s2" multiple="multiple">
<option value="http://www.mamicode.com/1" selected="selected">单选1</option>
<option value="http://www.mamicode.com/2" >单选2</option>
<option value="http://www.mamicode.com/3" >单选3</option>
</select>
<input type="checkbox" value="http://www.mamicode.com/6">复选框</input>
<input type="radio" value="http://www.mamicode.com/8">单选框</input>
</form>
$("#s1").val("单选2");
$("s2").val(["多选2","多选3"]);
$("input").val(["6","8"]);
12.读写样式,css() 第169页
13.偏移位置
1>绝对偏移位置 offset()方法返回元素在当前窗口的相对位置。返回值为一个对象，包含top与left属性。仅对可见元素有效。
2>相对偏移位置 position()方法。用法同上。
注：
相对偏移位置是元素相对于距离最近的父级定位元素左上角的距离。
<1>定位元素，就是被定义了 相对(),绝对(),固定()定位的元素，即设置了CSS的position为absolute,fixed或relative。
<2>最近的父级定位元素是指元素的父级的position被定义为<1>中的值。若父级中没有定义position的三个属性值，那么父级要再向上追溯，直到body
14.元素的高和宽
1>width()
2>height()
3>innerHeight() //返回元素的内部高
4>innerWidth() //..............宽
5>outerHeight() //返回元素的总高
6>outerWidth() //............宽
15.元素遍历
1>children() //子元素。如：$("body").children().eq(2).children()[0];
2>next() //相邻的下一个(同级)
3>prev() //......上.........
4>parent() //父元素
jQueryDOM操作