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对象
<script type="text/javascript"> //用JS语法创建一个一维数组，存入string类型的姓名，再迭代（迭代方式一） var nameArray = new Array("哈哈", "呵呵", "嘻嘻"); for ( var i = 0; i < nameArray.length; i++) { document.write(nameArray[i] + "<br/>"); } //用JSON语法创建一个一维数组，存入string类型的姓名，再迭代（迭代方式二） var nameArray = [ "哈哈", "呵呵", "嘻嘻", "都都" ];//js对象 var $nameArray = $(nameArray);//jquery对象 $nameArray.each(function() { //this表示数组中每一个元素，this属性js对象，this代表string类型 alert(this); }); //用JSON语法创建一个一维数组，存入object类型的姓名和薪水，再迭代 var nameArray = [ { name : "哈哈", sal : 6000 }, { name : "嘿嘿", sal : 7000 }, { name : "笨笨", sal : 8000 } ]; var $nameArray = $(nameArray); $nameArray.each(function() { //this代表object类型 alert(this.name + ":" + this.sal); }); </script>
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()：如果标签有样式就删除，否则增加样式
<style type="text/css"> .myClass { font-size: 30px; color: red } </style> <body> <div>无样式</div> <div class="myClass">有样式</div> <script type="text/javascript"> //为无样式的DIV添加样式 $("div:first").addClass("myClass"); //为有样式的DIV删除样式 $("div:last").removeClass("myClass"); //切换样式，即有样式的变成无样式，无样式的变成有样式 $("div").toggleClass("myClass"); //最后一个DIV是否有样式 var flag = $("div:last").hasClass("myClass"); alert(flag ? "有样式" : "无样式"); </script> </body>
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>
