Query中的DOM操作
DOM 是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接口,这种接口 可以提供一种访问页面中所有的节点的机制,DOM提供了Netscape的JavaScript和Microsoft的Jscript之间的冲突的解决方 案.
通常DOM操作分成三个部分,也就是核心DOM(DOM core)HTML-DOM还有CSS-DOM三种.
一.核心DOM:
DOM core并不是JavaScript的专属,任何一种支持DOM的设计语言都可以非常好的使用DOM核心,DOM核心也不是仅仅用来处理网页,它还可以被 用来处理任何一种标记语言编写出来的文档,比如说xml配置文件.我们就可以将xml文件通过自己的编程语言,或者使用第三方的解决方案将xml文件解析 成DOM模型,通常是形成一堆配置对象,在程序中直接调用配置对象来运行.
JavaScript中的 getElementById_r(). getElementByName_r(), getAttribute_r()以及setAttribute()等等方法,都 是DOM core的组成部分.这种例子在我们的实际编程当中非常之多,比如document. getElementByTagName_r(‘form’);还比如 element. getAttribute_r(‘src’)来得到某个元素的src属性的值.等等.
二,HTML-DOM
在使 用JavaScript和DOM为HTML文件编写脚本程序的时候,有很多是专属于HTML-DOM的属性,HTML-DOM的出现甚至比DOM core还要早上许多,HTML-DOM提供了一些更加简明的记号来描述各种HTML元素的属性.比如说使用HTML-DOM来获取表单对象的方法有 document.forms使用HTML-DOM来获取某个元素的src属性的方法直接使用element.src就可以了.通过上面的方法,我们可以 发现,对于某些对象,属性既可以使用核心DOM来实现,也可以使用HTML-DOM来实现,相比较而言,HTML-DOM来实现会比较简短,不过 HTML-DOM顾名思义,只能使用来处理Web文档的内容,这个是HTML-DOM的一个局限.因为它本身就是为HTML-DOM设计和开发的.
三,CSS-DOM
CSS-DOM是针对CSS的操作,在JavaScript当中,CSS-DOM技术 的主要作用就是获取和设置style对象的各种属性,通过改变style对象的各种属性,可以使网页呈现出各种不同的效果,CSS就好像是网页的一个衣 服,一种不仅可以穿,而且可以换的衣服,光秃秃的网页穿上色彩缤纷的衣服,就给用户提供了非常良好的体验,形成了一个非常漂亮的网站效果.比如我们可以设 置某个元素style对象,让某个元素的字体颜色变成红色:element.style.color=’red’;
<wbr></wbr>
jQuery中的DOM操 作:
使用的HTML例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery中的DOM操作</title> <mce:script type='text/javascript' src="jquery-1.3.2.js" mce_src="jquery-1.3.2.js"></mce:script> </head> <body> <p title='选择你最喜欢的水果'>你最喜欢的水果是什么?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='葡萄'>葡萄</li> <li title='香蕉'>香蕉</li> <li title='蚊子'>蚊子</li> </ul> </body></html>
<wbr></wbr>
n查找节点
1) 查找元素节点
$('ul>li:eq(1)').text()
通过jQuery的选择器定位到ul元素的位置为2的子节点,并 且通过.text()方法将它的文本内容打印出来.通过查找元素节点都可以通过jQuery提供的选择器来进行,jQuery的选择器有基本选择器.过滤 选择器,层次选择器,还有表单选择器.其中过滤选择器又分为很多种了.详细的看jQuery的选择器总结.
2) 查找属性节点
$('ul>li:cotain(苹果)').attr('title')
同样是通过jQuery的选择器定位到ul元素含有文本内容为’苹果’的<li>子元素节点,然后通过attr()函数得到该 元素节点的属性title.
n创建节点
$("<li title='水蜜桃'>水蜜桃</li>")
$(html)方法会根据传递过 来的HTML标记字符串,动态的创建一个DOM对象,然后将这个DOM对象包装成一个jQuery对象返回,按照某个老师的说法就是,只需要将HTML标 记字符串交给万能的$符号就可以得到我们想要的jQuery对象了.
动态创建的新的元素节点不会自动的就”被添加”到文档当中去的,而 是需要借助其他方法来将这个新的元素节点插入到文档当中,这里我们可以使用append()方法来查看我们新建节点的效果.
$('ul').append($("<li title='水蜜桃'>水蜜桃</li>"))
上面这句话的意思是说,将新建立的jQuery对象节点插入到ul对象的后面,执行了这个语句之后,我们就会在页面中看到,ul元素的后面 就多了一个”水蜜桃”的选项了.
当创建单个元素的时候,我们要注意闭合标签和使用标准的XHTML格式,并且一定不要忘记 给$(html)中的HTML标识语言添加一对双引号,否则会出现错误的.
varnode1=$("<li title='水蜜桃'>水蜜桃</li>");
varnode2=$("<li title='蟠桃'>蟠桃</li>");
$('ul').append(node1).append(node2);
上面的代码是 为<ul>同时添加两个子元素的演示,这种方式采用了链式结构,链式结构的写法比较简洁,而且比较容易理解.
通过上面的小例子可以看出,通过jQuery那个万能的$符号创建一个元素节点是非常轻松和愉快的.我们可以通过$(“HTML”)来动态 的创建非常复杂的元素节点,并且动态的显示到页面上,实现比较好的人机交互效果.这种技术在实际的项目中还是非常常用的.
n插入节点
动态的插入节点在上面”创建节 点”的小例子中已经使用过其中的一个方法A.append(B),这个方法的意思就是往A内部的后面动态的追加B这个元素.可供我们使用的插入节点的方法 有以下几个:
1) append()与appendTo()
append()是向匹配的元素内 部追加内容,是追加到内部元素的后面去的,就好比是一个排队的,新来的总是要排到后面去的.使用append()的时候一定要注意的是,是追加到匹配元素 内部的后面去的.一定要跟after区分开.append在英文中有”添加”的意思,说明仅仅是”添加”而已,貌似比DOM同辈要低一等的感觉.
appedTo()是将匹配的元素添加到给定的元素内部去,这种方法仅仅是颠倒了append()方法的顺序,jQuery为什么要提供两 种方式来向一个元素的内部追加元素呢?个人感觉是为jQuery提供的链式写法提供方便.
2) prepend()与prependTo()
prepend()方法是向匹配的元素的内部的前面追加指定的元素,prepend很多地方 将这个单词翻译成”前导”,在shell命令里面,要执行内置命令dir和copy的时候,调用者必须要为向用的命令加上”cmd.exe|”前导..不 管怎么样prepend的意思就是在元素内部的前面该指定的元素.
prependTo()是将匹配的元素添加到指定的元素内部的前面 去,这种方法也就是颠倒了prepend()方法.
到这里应该记住append()和prepend()两个方法都是往匹配元素的内部 去.而后面两对则是将匹配元素添加到指定元素的后面或者前面.
3) after()与insertAfter()
after()是往匹配元素的后面添加指定的内容.
insertAfter()是将匹配的元素插入到指定的内容的后面 去,看字面的意思非常好理解,其实就是after()的一个颠倒.
4) before()与insertBefore()
before()是在每个匹配的元素的前面增加指定的元素.
insertBefore() 是将匹配的元素插入到指定元素的前面去,实际上,这个方法也仅仅是before()方法的一个颠倒,这个看insertBefore()的字面意思也非常 容易去掌握.
PS:
上述方法不仅仅能够将新建立的jQuery对象插入到文档对应的位置去,而且可以使 用这些插入语句来移动DOM对象:
varnode1=$("ul>li:eq(0)");
varnode2=$("ul>li:eq(1)");
node1.insertAfter(node2);
上面的三行代码的作用实现了得到两个jQuery元素,然后将两个元素的位置进行置 换的效果.这说明,上面的after(),insertAfter()和before(),insertBefore()方法的作用不仅仅是往匹配节点中 进行插入,而且可以通过使用上面的方法来交换位置,实现更好的人机交互效果.
n删除节点
如果文档中某一个元素是多余的,那么就应该将其删除,jQuery提供了两种删除节点 的方法,即remove()和empty().
1)remove()方法
remove() 方法的作用就是从DOM中删除所有匹配的元素,传入的参数用于根据jQuyer表达式来筛选元素.
2)empty()方法
empty()方法并不是删除节点,而是清空节点,这个方法能够清空元素中的所有后代节点.
n复制节点
复制节点也是DOM操作中比较常 遇到的,jQuery为复制操作提供了clone()方法,$(‘element’).clone()就可以对匹配的元素进行复制操作了.如果想让复制出 来的元素同时具有原元素的方法的话,可以使用$(‘element’).clone(true)方法,里面只要添加一个true参数就可以让复制的元素具 备原有元素的方法了.
n替换节点
要替换某一个节点,jQuery也提供了相应的方法,就是replaceWith()和replaceAll().
replaceWith()方法的作用就是将所有匹配的元素用指定的HTML或者是DOM元素进行替换.
$('p').replaceWith("<strong>你最喜欢的水果</strong>");
replaceAll()就是用指定的HTML或者是DOM元素对所有匹配的元素进行替换.该方法与replaceWith()的作用相 同,只不过是颠倒了replaceWith()的操作.
$("<strong>你最喜欢的水果是什 么?</strong>").replaceAll('p');
如果在替换之前,已经为元素绑定事 件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新元素上重新进行时间的绑定.
n包裹节点
1) wrap()方法,将某一个元素用其他的元素给包裹起来,这个方法在需要文档插入而额外的节点的时候相当的有用,并且它不会破坏原有的文档的含义.
$('p').wrap('<strong></strong>');
2) wrapAll()方法,会将所有匹配的元素用一个元素来包裹,它不同于wrap()方法,wrap()方法是将所有的元素进行独立的包裹.
$('p').wrapAll('<strong></strong>');
3) wrapInner()方法,是将每一个元素的子内容(包括文本节点),用其他结构化的标记包裹起来.
$('p').wrapInner('<strong></strong>');
n属性操作
1) 获取属性和设置属性
$('p').attr('title')
传递一个参数就是取得属性值,传递两 个属性就是修改属性的值.
$('p').attr({'title': 'yourtitle','name': 'yourname'});
可以将一个”名/值”形式的对象设置为匹配元素的属性.
能够实现的一个函数来进行获取和设置 的功能有html(),text(),height(),width(),val()还有css()等方法.
2) 删除属性
在有些时候需要删除某些元素的属性,如果要删除一个元素的属性,我们可以通 过.removeAttr(‘attribute’)来实现.
$('p').removeAttr('title');
n样式操作
1) 获取样式和设置样式
通过.attr()方法来进行样式的设置和获取
2) 追加样式
通过.addClass()方法来追加样式,如果给一个元素添加了多个class的值,就相当于合并了他们的样式,如果有不同的class 设置同一个样式属性,那么后者就会覆盖前者.
3) 移除样式
通过.removeClass()方 法来进行属性的删除,通过.removeClass().removeClass()来移除两个属性,通过.removeClass()里面什么参数也不 传来移除所有的样式.
4) 切换样式
jQuery提供了一个toggleClass()方法来控制一个 元素的样式,如果类名存在就删除这个样式,如果这个类名不存在就添加它.这个方法可以用来进行两个样式之间的切换.
5) 判断是否有某个样式
$('p').hasClass('high'); 可以用来判断某个元素是否具有指定的样式,这个方法实际上是调用了is()方法来实现的.上面的方法其实等价于$(‘p’).is(‘.high’)
n设置和获取HTML,文 本以及值
1) 使用.html()方法来获取或者设置某个元素中的HTML的内容
2) 使用.text()方法来获取或者设置某个元素当中的文本内容
3) 使用.val()方法来获取或者设置某个元素当中的元素的值,如果元素为多选,则返回数组.
PS:
val()方法不仅仅能够设置元素 的值,同事也能够获取元素的值,不仅如此,val()方法还有一个非常好的用处,就是能够使select(下拉列表框),checkbox(多选框)和 radio(单选框)相应的选项被选中,这个在表单操作中经常会被用到.
$("#multiple").val([" 选择2号", "选择3号"]);
n遍历节点
1) 使用children()方法来取得匹配元素的子元素集合.
2) 使用next()方法来取得匹配元素后面紧邻的同辈元素
3) 使用prev()方法来取得匹配元素前面紧邻的同辈元素
4) 使用siblings()方法来取得匹配元素前后所有的同辈元素
5) 使用closest()方法来取得最近的匹配元素.
6) ……………等等其他不常用的看API
nCSS-DOM操作
CSS-DOM技术简单的来说就是读取和设置style对象的各种属性,style属性非常的有用,但是最大的不足就是没有办法通过它来提 取通过外部CSS设置的样式信息,但是在jQuery当中,这些就非常的简单.
我们可以直接利用css()方法来 获取元素的样式属性.
font-size----------------à驼峰式写法 -------------àfontSize
background-color-------------------à驼峰式 写法--------------------àbackgroundColor
1) 通过offset()方法来得到元素在当前视窗的相对便宜.其中返回的对象包括两个属性,也就是top和left.
2) 通过position()方法来获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,返 回的对象也包括两个属性,就是top和left.
3) scrollTop和scrollLeft方法来获取元素的滚动条距顶端的距离和距左侧的距离
<wbr></wbr>
相关推荐
jquery DOM操作，重点介绍DOM这个章节。
引用 jquery ,只是用一些 DOM 操作函数， 还是觉得 jQuery 的体积有点大，抽取其中常用的 DOM 操作函数，形成了 gQuery，去除空格后，只有不到 4k
JQuery DoM和ajax 操作大全源码
jQuery 的DOM操作方法 元素的创建、复制、重组、修饰，学习jquery dom操作的朋友有福了。
jQuery DOM节点操作源码，适合初学者哦，可以下载下来作为参考资料的。
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
jquery DOM操作 基于命令改变页面,需要的朋友可以参考下。
jquery学习资料jQuery DOM的操作jQuery插件源码jQuery插件等资料: jQuery DOM教辅.pdf jQuery DOM源码 jQuery DOM的操作.pdf jQuery 丰富的插件.pdf jQuery 事件的处理.pdf jQuery 元素选择器参考手册（教辅） .pdf ...
本文用代码的方式详细讲解了jQuery的DOM操作,具体操作方法请详细参看代码中的注释部份
开发工具与关键技术：Visual Studio jQueryDOM节点操作相关知识点 创建DOM节点
JQ 选择器大全包含：基本选择器,层级选择器,层级函数,过滤选择器,内容选择器,可见选择器,jq中显示相关的函数,属性选择器,子元素选择器,表单选择器。里面的练习题可以拿来练手
每天都在与DOM打交道而且晕头转向，不过，自打咱认识了jQuery：是操作属性也不烦了，插入新元素也不晕了，连移动元素及包装元素咱也不抽筋了。。
jQuery中的DOM操作（1） jQuery获得元素 jQuery设置元素 jQuery复制元素 1、jQuery获得元素 jQuery 中非常重要的部分，就是操作 DOM 的能力。 jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很...
本文实例讲述了jQuery中DOM常见操作。分享给大家供大家参考，具体如下： DOM属性操作 属性列表 属性 版本 说明 attr() 1.0 设置或返回文档节点的属性。 removeAttr() 1.0 移除文档节点的属性。 prop() 1.6 ...
jquery 基本 层级 控制器 可见性 属性 子元素 表单对象属性 dom对象 等详细的一些操作~ 详细 简单~易懂 实用！
Jquery对dom的操作也是很总要的。 1.三个简单实用的用于 DOM 操作的 jQuery 方法： · text() – 设置或返回所选元素的文本内容 · html() – 设置或返回所选元素的内容（包括 HTML 标记） · val() – 设置或返回...
jQuery操作DOM解析
我是辰兮，很高兴你能来阅读，本章初识jQuery，用案例详细的讲解了jQuery的DOM操作，每一个操作都有详细的案例以及截图，希望对你有帮助，分享获取新知，大家一起进步。 下一篇请参考：JQuery-DOM进阶 文章目录一、...