第8章 jQuery中的DOM操作

jq常用方法jq是一个快速、简洁、灵活的JavaScript库，它允许我们轻松地操纵HTML文档，解析和处理JSON数据、处理表单和事件等。

在使用jq时，我们经常用到一些常用方法，那么接下来，我们就来一一讲解。

1. 选择器在jq中，选择器是最为基本的部分，它可以让我们快速地筛选元素，比如：- $("#id")：根据id选择元素。

- $(".class")：根据class选择元素。

- $("tag")：根据标签名选择元素。

- $("element").find(selector)：在指定元素中查找符合条件的元素。

2. 事件绑定在jq中，我们可以通过事件绑定来实现在指定元素上触发事件。

常用的事件有：- $(selector).click(function(){})：点击元素触发事件。

- $(selector).mouseover(function(){})：鼠标移上元素触发事件。

- $(selector).submit(function(){})：表单提交触发事件。

- $(selector).focus(function(){})：元素获得焦点触发事件。

3. DOM操作在jq中，我们可以通过一些方法来快速地操作DOM元素，比如：- $(selector).html()：获取或设置元素的HTML内容。

- $(selector).text()：获取或设置元素的文本内容。

- $(selector).attr()：获取或设置元素的属性。

- $(selector).addClass()：为元素添加class。

- $(selector).remove()：删除指定元素。

4. 动画效果在jq中，我们可以通过动态效果来增加网页的交互性，比如：- $(selector).show(speed,callback)：显示元素，可以设置速度和回调函数。

第一章一、$(document).ready(function(){//do something});和window.onload的区别1.前者同一页面可以使用多次，后者出现多次只有最后一次能正确显示2.前者在DOM模型加载完成后就开始执行，后台在所有元素（包括图片）加载完成后执行3.前者可以简化为$(function(){//do something});后者没有简写形式。

二、jQuery比较常使用的是链式操作，比如一个书目导航条：$(function(){$(“ul”).click(function(){$(this).addClass(“current”).children(“li”).slideDown().end().sublings().removeClass(“current”).children(“li”).slideUp();})})对于同一元素不超过3个操作的，一般写同一行，如果操作过多，可以将类似的操纵写成一行，便于阅读。

三、jQuery对象和DOM对象的转换1.jQuery转化为DOM对象Var $variable = $(“tr”); //jQuery objectVar variable = $variable[0]; //DOM objectThe transpartent method.DomObject = jQueryObject[index] or = jQueryObject.get(index).2.DOM Object To jQuery ObjectVar variable = getElementsByTagName(“tr”); //DOM objectVar $variable = $(variable) // jQuery object;The transpartent method.jQueryObject = $(DomObject)四、jQuery开发工具1.Dreamweaver 可以安装插件提示jQuery 插件名称：jQuery_API.mxp2.Aptana 功能非常强大的、开源、专注javascript和Ajax开发IDE;3.Visual Studio 2008。

jQuery的选择器非常强大,使你可以轻松选取页面中任何一个对象,下面我们就主要针对DOM操作来看一下jQuery中选择器的基础使用教程,需要的朋友可以参考下其实选择器就像开罐器一样，会用这个工具的人，自然吃的到甜头，但不会用这个工具的人，不管罐头里面的面筋土豆有多美味，吃不到就是吃不到，就如同jquery再怎么强大，也只能看着荧幕，而不知该如何下手，不过虽然选择器不难，也容易上手，但老实说，我用了一年多下来，还是觉得自己只有用皮毛而已，所以希望藉着这一系列的笔记，让自己能更长进一些DOM怎么吃DOM可以说是JavaScript与网页之间的联系管道，他提供了一个模型，让JavaScript 能藉由此模型来改变或操作整个网页，<div class="one">  <p>two_1</p>  <p>two_2</p>  <p>two_2</p></div>我这边就简单介绍一下DOM模型，有个元素class名为one的是父元素，底下有三个儿子元素<p>，每个元素都视为一个节点，也可以看成一个树形图，因为我认为有些东西是Google会讲得比我好，所以还想知道更多纠结的父子关系...，可以去这，那边有很好的说明，这边就不多加解释，而当Jquery利用选择器抓取到DOM元素以后，就会将他包装成一个Jquery object，并且回传$('#MyDiv')<-- 他是一个物件这里有个观念十分重要，因为许多初学者，甚至是一些从Jquery开始学起Javascript的开发者(包括我)，常常会把以下两个程序码搞混在一起//原生JavaScript取id为a的divvar result1 = document.getElementById('a');console.log(result1);//用jquery取id为a的divvar result2=$('#a');console.log(result2);如果你执行这段程序码出来，妳会发现console出来的结果，用JavaScript取出来的结果是DOM，可是一样的div用Jquery取出来的却是个包装过后的物件，换句话说，你不能直接对包装过后的Jquery物件增加DOM的事件，而是要用Jquery提供的事件，有人会说，那意思是不是说以后只能河水不犯井水，往后互不干涉，从此分道扬镳呢? 到也不是var b=$('#a')[0];只要跟上述程序码一样就可以取得DOM的元素了$()工厂不管是如何选择，我们都会用相同的函式$()，就如之前所讲的，他能接受CSS选择器的语法做为参数，而最主要的三个参数分别为tag name、ID与class，当然，这三个参数可以再与其他CSS语法做结合//tag name$('div')//ID$('#myId')//class$('.myClass')而上述函式都会如同第一章所介绍的，都有隐式迭代的特色，而为了做到跨览器的支援，Jquery的选择器包含了CSS1-3，所以不用担心一些比较特别的浏览器(对就是IE6)不能执行，除非addClass('color1');//替index为1的tr加上class$('tr:nth-child(1)').addClass('color2');这里很特别的是，为什么都是替index为1的tr加上class，却是不同的结果呢?，因为:eq()算是一个JavaScript阵列，index是0起始，所以才会选到第二个，而nth-child()是CSS选择器的一种，所以index是以1起始，选到的就是第一个，以下的范例意思相同/3PrJt///选择偶数的tr增加class$('tr:even').addClass('color1');//选择偶数的tr增加class$('tr:nth-child(even)').addClass('color2');就如同刚刚所讲的，index起始不同(JavaScript起始为0，CSS为1)，所以虽然都是取偶数，但却是不同列再来就一些FORM常用的选择器/qcXSy/3/$(':button').click(function(){    alert('a');});这就代表说绑定所有的bitton一个click事件，其他还有像:input、:button、:enabled、:disabled都可以跟其他选择器一起组合成新的选择器更加强大的.filter()当有时候一般的选择器已经不能不能满足我们复杂的DOM时，例如要抓div的爸爸的哥哥的儿子的妹婿的二姑的大舅时...，这时候还可以用一个方法filter，这个方法特别的地方在于他可以带function进去/wGz3k/可以看到function里面限制return index == 1才可以增加CSS，这个好处就在于可以在里面做很多复杂的逻辑运算当然Jquery还有太多太多选择器可以使用，像还有.next()、.parent()、.children()一般常用的这几个，其实就很够用了我认为，再多的选择器有时候好像只是展示不同的写法，但其实只要能抓取到你想要的元素，解决问题你甚至想要这样写$('div').children().children().children().children().children()也不会有人说不行..实例一个网站中有10种的文章分类，我们设计一个类似WordPress显示各文章分类的名称及其文章数量的栏目，当用户进入一个页面时，默认显示前面5个分类的名称以及最后一个分类——其他分类，用户可以通过单击“显示全部分类”按钮来显示全部分类，同时一些推荐的分类会加下划线显示，按钮中的文字会改变为“显示部分分类”，再次单击“显示部分分类”后会回到之前的页面状态。

前端开发中的DOM操作技巧随着移动互联网的快速发展，前端开发已成为互联网行业中不可或缺的一部分。

而DOM操作是前端开发中必不可少的一种技能，它可以让我们更加灵活地操作网页中的元素，从而实现更多的交互效果。

本文将从以下几个方面为大家介绍前端开发中的DOM操作技巧。

一、选择器在进行DOM操作之前，我们需要先选择要操作的元素。

而选择器就是用来选择元素的一种方式。

在HTML中，元素可以通过标签名、类名、ID等来进行选择。

在CSS中，我们在定义样式时常常也使用选择器。

而在JavaScript中，我们可以通过以下方式来获取元素：1. getElementById：通过ID获取元素2. getElementsByClassName：通过类名获取元素3. getElementsByTagName：通过标签名获取元素4. querySelector：通过CSS选择器获取元素以上四种方式都可以用来获取DOM元素，我们需要根据实际情况选择最适合的方式。

二、操作DOM元素选择好要操作的元素之后，我们就可以进行DOM操作了。

以下是几种常用的DOM操作方式：1. innerHTML：获取或设置元素的HTML内容2. textContent：获取或设置元素的文本内容3. style：获取或设置元素的样式4. className：获取或设置元素的类名5. appendChild：在元素的末尾添加一个子元素6. insertBefore：在元素中插入一个子元素7. removeChild：移除元素中的一个子元素通过以上操作，我们就可以灵活地控制元素的内容、样式和结构，从而实现更多的交互效果。

三、事件在前端开发中，我们常常需要对页面元素进行交互操作。

而事件就是让页面元素与用户交互的一种手段。

以下是几种常见的DOM事件：1. click：鼠标单击事件2. hover：鼠标移入/移出事件3. mouseover/mouseout：鼠标移入/移出事件4. focus/blur：元素获得/失去焦点事件5. keydown/keyup：键盘按下/松开事件通过事件，我们可以实现更多的效果，如按钮点击、表单验证等。

jQuery的DOM操作⼩案例案例⼀：下拉列表左右选择<body><div><select style="width:60px" multiple size="10" id="leftID"><option>选项A</option><option>选项B</option><option>选项C</option><option>选项D</option><option>选项E</option></select></div><div style="position:absolute;left:100px;top:60px"><input type="button" value="批量右移" id="rightMoveID"/></div><div style="position:absolute;left:100px;top:90px"><input type="button" value="全部右移" id="rightMoveAllID"/></div><div style="position:absolute;left:220px;top:20px"><select multiple size="10" style="width:60px" id="rightID"></select></div></body><script type="text/javascript">//双击右移//定位左边的下拉框，同时添加双击事件$("#leftID").dblclick(function() {//获取双击时选中的option标签var $option = $("#leftID option:selected");//将选中的option标签移动到右边的下拉框中$("#rightID").append($option);});//批量右移//定位批量右移按钮，同时添加单击事件$("#rightMoveID").click(function() {//获取左边下拉框中选中的option标签var $option = $("#leftID option:selected");//将选中的option标签移动到右边的下拉框中$("#rightID").append($option);});//全部右移//定位全部右移按钮，同时添加单击事件$("#rightMoveAllID").click(function() {//获取左边下拉框中所有的option标签var $option = $("#leftID option");//将选中的option标签移动到右边的下拉框中$("#rightID").append($option);});</script>案例⼆：动态添加标签事件<body><table id="tableID" border="1" align="center" width="60%"><tr><th>⽤户名</th><th>密码</th><th>操作</th></tr><tbody id="tbodyID"></tbody></table><hr />⽤户名：<input type="text" id="usernameID"/>密码：<input type="text" id="passwordID"/><input type="button" value="增加" id="addID"/></body><script type="text/javascript">//定位"增加"按钮，同时添加单击事件$("#addID").click(function() {//获取⽤户名和密码的值var username = $("#usernameID").val();var password = $("#passwordID").val();//去掉⼆边的空格username = $.trim(username);password = $.trim(password);//如果⽤户名或密码没有填if (username.length == 0 || password.length == 0) {//提⽰⽤户alert("⽤户名或密码没有填");} else {//创建1个tr标签var $tr = $("<tr></tr>");//创建3个td标签var $td1 = $("<td>" + username + "</td>");var $td2 = $("<td>" + password + "</td>");var $td3 = $("<td></td>");//创建input标签，设置为删除按钮var $del = $("<input type='button' value='删除'>");//为删除按钮动态添加单击事件$del.click(function() {//删除按钮所有的⾏，即$tr对象$tr.remove();});//将删除按钮添加到td3标签中$td3.append($del);//将3个td标签依次添加到tr标签中$tr.append($td1);$tr.append($td2);$tr.append($td3);//将tr标签添加到tbody标签中$("#tbodyID").append($tr);//清空⽤户名和密码⽂本框中的内容$("#usernameID").val("");$("#passwordID").val("");}});</script>案例三：全选反选<body><table border="1" align="center"><tr><th>状态</th><th>⽤户名</th></tr><tbody><tr><td><input type="checkbox"/></td><td>赵</td></tr><tr><td><input type="checkbox"/></td><td>钱</td></tr><tr><td><input type="checkbox"/></td><td>孙</td></tr></tbody><tfoot><tr><td><input type="checkbox"/>全选</td><td><input type="button" value="全反选"/></td></tr></tfoot></table><script type="text/javascript">//全选中和全取消//定位tfoot中的全选复选框，同时添加单击事件$("tfoot input:checkbox").click(function() {//获取该全选复选框的状态var flag = this.checked;//如果选中if (flag) {//将tbody中的所有复选框选中$("tbody input:checkbox").attr("checked", "checked");//如果未选中} else {//将tbody中的所有复选框取消$("tbody input:checkbox").removeAttr("checked");}});//全反选//定位tfoot标签中的全反选按钮，同时添加单击事件$("tfoot input:button").click(function() {//将tbody标签中的所有选中的复选框失效$("tbody input:checkbox:checked").attr("disabled","disabled");//将tbody标签中的所有⽣效的复选框选中$("tbody input:checkbox:enabled").attr("checked", "checked");//将tbody标签中的所有⽣效的复选框⽣效且设置为未选中 $("tbody input:checkbox:disabled").removeAttr("disabled") .removeAttr("checked");});</script></body>案例四：输⼊框暗影提⽰<head><meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css">.myClass {color: inactivecaption}</style><script type="text/javascript" src="../js/jquery-1.8.2.js"></script></head><body><table border="1" align="center"><tr><th>⽤户名</th><td><input type="text" value="输⼊⽤户名"/></td></tr></table><script type="text/javascript">//当浏览器加载web页⾯时$(function() {//将⽂本框中的⽂本样式改变$(":text").addClass("myClass");});//当光标定位⽂本框时$(":text").focus(function() {//清空⽂本框中的内容$(this).val("");//删除⽂本框的样式$(this).removeClass("myClass");});//当⽂本框失去焦点时$(":text").blur(function() {//获取⽂本框中填⼊的内容var content = $(this).val();//去⼆边的空格content = $.trim(content);//如果没填了内容if (content.length == 0) {//在⽂本框显⽰提⽰信息$(":text").val("输⼊⽤户名");//设置⽂本框中⽂本的样式$(":text").addClass("myClass");}});</script></body>。

jQuery遍历DOM元素与节点⽅法详解本⽂实例讲述了jQuery遍历DOM元素与节点⽅法。

分享给⼤家供⼤家参考，具体如下：⼀、向上遍历--祖先元素① $(selector).parent([filter]):返回selector匹配元素的直接⽗元素，⽅法可以接受⼀个过滤selector来过滤返回的⽗元素。

② $(selector).parents([filter]):返回匹配元素的所有祖先节点，⼀直向上直到⽂档根元素html，⽅法可以接受⼀个过滤selector来过滤返回的祖先节点。

备注：parent与parents的区别，parent返回直接⽗节点，parents返回所有的祖先节点，另外$("html").parent()返回document 节点，⽽$("html").parents()则返回空。

③ $(selector).parentUntil([ancestorSelector][,filter])：返回匹配节点与ancestorSelector之间的所有祖先节点，注意不包括ancestorSelector匹配的⼏点，⽅法可以接受⼀个过滤selector来过滤返回的祖先节点，如果ancestorSelector为空或者在其祖先节点中没有找到匹配ancestorSelector的元素则返回所有祖先节点等同于parents()⽅法。

$(selector).parentUtil(element[,ancestorSelector]):⽤法及含义同上。

④ $(selector).offsetParent():返回匹配元素的最近的⼀个定位的祖先元素，所谓定位祖先元素是指其CSS position属性设置为relative,absolute,fixed，主要在动画演⽰过程中计算元素的偏移及位置具有很⼤的作⽤。

⑤ $(selector).closest(ancestorSelector[,context]):获取最近的⼀个匹配ancestorSelector的祖先元素，⽅法可以接受⼀个参数context来控制搜索的范围。

JQuery 常用技巧 ：jquery对象与dom对象的转换博客分类： javascriptjQueryIECSS浏览器HTML1、关于页面元素的引用通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法。

注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。

普通的dom对象一般可以通过$()转换成jquery对象。

如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。

由于jquery对象本身是一个集合。

所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。

以下几种写法都是正确的：$("#msg").html();$("#msg")[0].innerHTML;$("#msg").eq(0)[0].innerHTML;$("#msg").get(0).innerHTML;3、如何获取jQuery集合的某一项对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。

dom常见的操作方法DOM是指文档对象模型（Document Object Model），它可以将文档（HTML、XML）表示为一个具有层次结构的树形结构。

在JavaScript 中，通过操作DOM，我们可以实现对网页元素的增删改查等操作。

下面是DOM的常见操作方法：一、查询元素1.通过元素的id查询：document.getElementById('id')2.通过元素的类名查询：document.getElementsByClassName('class')3.通过元素的标签名查询：document.getElementsByTagName('tag')4.通过选择器查询：document.querySelector('selector')或document.querySelectorAll('selector')，其中querySelector返回匹配的第一个元素，querySelectorAll返回匹配的所有元素。

二、创建元素1.创建元素：document.createElement('tag')2.创建文本节点：document.createTextNode('text')3.将文本节点添加到元素中：element.appendChild(textNode)三、操作元素属性1.获取元素属性值：element.getAttribute('attribute')2.设置元素属性值：element.setAttribute('attribute', 'value')四、操作元素样式1.获取元素样式值：element.style.property2.设置元素样式值：element.style.property = 'value'五、操作元素内容1.获取元素内容：element.innerHTML2.设置元素内容：element.innerHTML = 'content'3.获取元素文本内容：element.innerText六、操作元素位置1.获取元素相对于文档的位置：element.getBoundingClientRect()2.获取元素的父节点：element.parentNode3.插入元素到指定位置：parentElement.insertBefore(newElement, targetElement)七、操作元素事件1.添加事件监听器：element.addEventListener('event',function(){})2.移除事件监听器：element.removeEventListener('event', function(){})总结：DOM操作是JavaScript中的重要部分，在前端开发中经常需要对网页元素进行增删改查等操作。

DOM常⽤操作 ⽂档对象模型( DOM, Document Object Model )主要⽤于对HTML和XML⽂档的内容进⾏操作。

DOM描绘了⼀个层次化的节点树，通过对节点进⾏操作，实现对⽂档内容的添加、删除、修改、查找等功能。

⼀、DOM树DOM树有两种，分别为节点树和元素树。

节点树：把⽂档中所有的内容都看成树上的节点；元素树：仅把⽂档中的所有标签看成树上的节点。

⼆、DOM常⽤操作2.1 查找节点document.getElementById('id属性值');返回拥有指定id的第⼀个对象的引⽤document/element.getElementsByClassName('class属性值');返回拥有指定class的对象集合document/element.getElementsByTagName('标签名');返回拥有指定标签名的对象集合document.getElementsByName('name属性值');返回拥有指定名称的对象结合document/element.querySelector('CSS选择器');仅返回第⼀个匹配的元素document/element.querySelectorAll('CSS选择器');返回所有匹配的元素document.documentElement获取页⾯中的HTML标签document.body获取页⾯中的BODY标签document.all['']获取页⾯中的所有元素节点的对象集合型2.2 新建节点document.createElement('元素名');创建新的元素节点document.createAttribute('属性名');创建新的属性节点document.createTextNode('⽂本内容');创建新的⽂本节点document.createComment('注释节点');创建新的注释节点document.createDocumentFragment( );创建⽂档⽚段节点2.3 添加新节点parent.appendChild( element/txt/comment/fragment );向⽗节点的最后⼀个⼦节点后追加新节点parent.insertBefore( newChild, existingChild );向⽗节点的某个特定⼦节点之前插⼊新节点element.setAttributeNode( attributeName );给元素增加属性节点element.setAttribute( attributeName, attributeValue );给元素增加指定属性，并设定属性值添加⽂本节点，有两种常见⽅法：document.createTextNode('新增⽂本内容');1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Document</title>6 </head>7 <body>8 <h2>创建⽂本节点</h2>9 <button onclick="addText()">创建⽂本节点</button>10 <p></p>11 <script>12 function addText(){13 var element = document.getElementsByTagName('p')[0];14 var txt = document.createTextNode('新增⽂本内容'); //创建⽂本节点15 element.appendChild(txt); //添加⽂本节点16 }17 </script>18 </body>19 </html>element.innerHTML='新增⽂本内容';【推荐】1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Document</title>6 </head>7 <body>8 <h2>创建⽂本节点</h2>9 <button onclick="addText()">创建⽂本节点</button>10 <p></p>11 <script>12 function addText(){13 var element = document.getElementsByTagName('p')[0];14 element.innerHTML='新增⽂本内容'; //插⼊⽂本内容15 }16 </script>17 </body>18 </html>2.4 删除节点parentNode.removeChild( existingChild );删除已有的⼦节点，返回值为删除节点element.removeAttribute('属性名');删除具有指定属性名称的属性，⽆返回值element.removeAttributeNode( attrNode );删除指定属性，返回值为删除的属性2.5 修改节点parentNode.replaceChild( newChild, existingChild );⽤新节点替换⽗节点中已有的⼦节点element.setAttributeNode( attributeName );若原元素已有该节点，此操作能达到修改该属性值的⽬的element.setAttribute( attributeName, attributeValue );若原元素已有该节点，此操作能达到修改该属性值的⽬的添加属性节点，修改属性值：element.setAttributeNode( attributeName );1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Document</title>6 </head>7 <body>8 <h2>属性节点</h2>9 <p class="classValue">增添id属性，并修改class属性值</p>10 <script>11 var element = document.getElementsByTagName('p')[0];12 element.setAttribute('id','idValue'); //添加属性节点13 element.setAttribute('class','classNewValue');//修改属性值14 </script>15 </body>16 </html>element.setAttribute( attributeName, attributeValue );1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Document</title>6 </head>7 <body>8 <h2>属性节点</h2>9 <p class="classValue">增添id属性，并修改class属性值</p>10 <script>11 var element = document.getElementsByTagName('p')[0];12 // 添加属性节点13 var attr = document.createAttribute('id');14 attr.value = 'idValue';15 element.setAttributeNode(attr);1617 // 修改属性值18 var attr = document.createAttribute('class');19 attr.value = 'classNewValue';20 element.setAttributeNode(attr);2122 </script>23 </body>24 </html>。