jQuery的DOM操作详解

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

DOM(Document Object Model—文档对象模型)：一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件
DOM操作的分类
核心-DOM: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML
HTML-DOM：使用 JavaScript 和 DOM 为 HTML 文件编写脚本时,有许多专属于 HTML-DOM 的属性，例如：divElement.innerHTML=“哈哈”
CSS-DOM：针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属性，例如imgElement.style.visibiliby=“hidden”
jQuery提供DOM操作的API
each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象

append(content) :向每个匹配的元素的内部的结尾处追加内容
prepend(content):向每个匹配的元素的内部的开始处插入内容（父子关系）
after(content) ：在每个匹配的元素之后插入内容，例如A.after(B)，即B在后
before(content)：在每个匹配的元素之前插入内容，例如A.before(B)，即B在前（兄弟关系）

<body>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<div>这是子元素，要插入到父元素内</div>
<script type="text/javascript">
//DIV标签插入到(<li>第三项</li>)标签之后
$("ul").append($("div"));
//DIV标签插入到(<li>第一项</li>)标签之前
$("ul").prepend($("div"));
//DIV标签插入到UL标签之后
$("ul").after($("div"));
//DIV标签插入到UL标签之前
$("ul").before($("div"));
</script>
</body>

attr(name)：获取属性值
attr(name,value)：给符合条件的标签添加key-value属性对

<body>
<form>
<table>
<tr>
<td><input type="text" name="username" value="张三" /></td>
<td><input type="password" name="password" value="123456" /></td>
</tr>
</table>
</form>
<script type="text/javascript">
//取得form里第一个input元素的type属性
alert($("form input:first").attr("type"));
//设置form里最后个input元素的为只读文本框
//$(":password").attr("readonly","readonly")也可以
$("form input:last").attr("readonly", "readonly")
</script>
</body>

$("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本
remove()：删除自已及其后代节点

<body>
<ul id="a">
<li>第一项</li>
<li id="secondID">第二项</li>
<li>第三项</li>
</ul>
<script type="text/javascript">
//创建div元素，添加"哈哈"文本，ID属性，并添加到文档中,即<body><div id="2015">哈哈</div></body>
//js方式
var divElement = document.createElement("div");
divElement.innerHTML = "哈哈哈";
divElement.setAttribute("id", "2015");
divElement.id = "2015";
document.body.appendChild(divElement);
//jquery方式
var $div = $("<div id='2015'>哈哈哈哈哈</div>");
//$(document.body).append( $div );
$("body").append($div);
//删除ID为secondID的LI元素
$("#secondID").remove();
//删除所有LI元素
$("#a li").remove();
//删除UL元素及其子元素
$("#a").remove();
</script>
</body>

val()：获取value属性的值
val("")：设置value属性值，""为空串，相当于清空
text()：获取HTML或XML标签之间的值
text("")：设置HTML或XML标签之间的值为""空串

<body>
<select id="city">
<option value="帝都">北京</option>
</select>
<script type="text/javascript">
//取得<option value="帝都">北京</option>中的内容
alert( $("#city").text() );//北京
alert( $("#city option").text() );//北京
alert( $("#city").html() );//<option value="帝都">北京</option>
alert( $("#city option").val() );//帝都
//修改text和value
$("#city option").text("上海");
$("#city option").val("魔都");
alert( $("#city option").text() );//上海
alert( $("#city option").val() );//魔都
</script>
</body>

clone()：只复制样式，不复制行为
clone(true)：既复制样式，又复制行为
replaceWith()：替代原来的节点
removeAttr()：删除已存在的属性

<body>
<input type="button" value="原按钮" />
<div style="width:500px;height:23px" align="right">双击会被替换成文本框,单击改变位置</div>
<script type="text/javascript">
//为原input元素动态添加单击事件，且复制原input元素，
var $old = $(":button");
$old.click(function() {
$("body").append($("<div id='2015'>哈哈哈哈哈</div>"));
});
//复制原input元素，添加到原input元素后，与其同级
var $old = $(":button");
var $new = $(":button").clone();//无点击事件
$new.val("新按钮1");
$old.after($new);
//添加到原input元素后，与其同级，且和原按钮有一样的行为
var $new = $old.clone(true);//有点击事件
$new.val("新按钮2");
$old.after($new);
//双击<div>中的文本，用文本框替换文本
$("div").dblclick(
function() {
var $text = $("<input type='text' style='width:165px;height:23px'/>");
//文本框替代div标签
$(this).replaceWith($text);
});
//单击改变<div>中的文本
$("div").click(
function() {
$(this).removeAttr("align");
});
</script>
</body>

addClass()：增加已存在的样式
removeClass()：删除已存在的样式
hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式
toggleClass()：如果标签有样式就删除，否则增加样式

offset()：获取对象的left和top坐标
offset({top:100,left:200})：将对象直接定位到指定的left和top坐标
width()：获取对象的宽
width(300)：设置对象的宽
height()：获取对象的高
height(500)：设置对象的高

<body>
<img src="../images/zgl.jpg" />
<script type="text/javascript">
//获取图片的坐标
var offset = $("img").offset();
var x = offset.left;
var y = offset.top;
alert(x+":"+y);
//设置图片的坐标
$("img").offset({
top:100,
left:200
});
//获取图片的宽高
var w = $("img").width();
var h = $("img").height();
alert(w+":"+h);
//设置图片的宽高
$("img").width(500);
$("img").height(600);
</script>
</body>

children()：只查询子节点，不含后代节点（多个）
next()：下一个兄弟节点（一个）
prev()：上一个兄弟节点（一个）
siblings()：上下兄弟节点（多个）

<body>
<span>Span</span>
<p>p1</p>
<p>Hello</p>
<div>
<span> Hello Again <b> Bold </b> </span>
</div>
<p>And Again</p>
<span>And Span</span>
<script type="text/javascript">
//取得div元素的直接子元素内容，不含后代元素
alert($("div").children().size());//1
//取得div元素的下一个同级的兄弟元素内容
var $p = $("div").next();
alert($p.text());//And Again
//取得div元素的上一个同级的兄弟元素内容
alert($("div").prev().size());//1
//依次取得div元素的上下一个同级的所有兄弟元素的内容
var $all = $("div").siblings("p");
$all.each(function() {
alert($(this).html());//p1 Hello And Again
});
</script>
</body>

show()：显示对象
hide()：隐藏对象
fadeIn()：淡入显示对象
fadeOut()：淡出隐藏对象

<body>
<p>
<img src="../images/zgl.jpg" />
</p>
<script type="text/javascript">
//图片隐蔽
$("img").hide(5000);
$("img").show(5000);
//淡出隐蔽图片
$("img").fadeOut(3000);
//淡入显示图片
$("img").fadeIn(3000);
</script>
</body>

slideUp()：向上滑动
slideDown()：向下滑动
slideToggle()：上下切换滑动，速度快点

<body>
<div id="div1">
111111<br /> 111111<br /> 111111<br />
</div>
<input id="but1" type="button" value="上移动" />
<input id="but2" type="button" value="下移动" />
<input id="but3" type="button" value="上下移动" />
<script type="text/javascript">
//向上下滑动
$("#but1").click(function() {
//div标标上移动
$("#div1").slideUp(100);
});
//向上下滑动
$("#but2").click(function() {
//div标标下移动
$("#div1").slideDown(100);
});
//向上下滑动
$("#but3").click(function() {
//div标标上下移动
$("#div1").slideToggle(100);
});
</script>
</body>