jQuery中的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().getElementByName(),getAttribute()以及setAttribute()等等方法,都是DOM core的组成部分.这种例子在我们的实际编程当中非常之多,比如document.getElementByTagName(‘form’);还比如element.getAttribute(‘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’;
jQuery中的DOM操作:
使用的HTML例子:
[xhtml] view plaincopyprint? <!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>
1、 查找节点
1) 查找元素节点
$('ul>li:eq(1)').text()
通过jQuery的选择器定位到ul元素的位置为2的子节点,并且通过.text()方法将它的文本内容打印出来.通过查找元素节点都可以通过jQuery提供的选择器来进行,jQuery的选择器有基本选择器.过滤选择器,层次选择器,还有表单选择器.其中过滤选择器又分为很多种了.详细的看jQuery的选择器总结.
2) 查找属性节点
$('ul>li:cotain(苹果)').attr('title')
同样是通过jQuery的选择器定位到ul元素含有文本内容为’苹果’的<li>子元素节点,然后通过attr()函数得到该元素节点的属性title.
2、 创建节点
$("<li title='水蜜桃'>水蜜桃</li>")
$(html)方法会根据传递过来的HTML标记字符串,动态的创建一个DOM对象,然后将这个DOM对象包装成一个jQuery对象返回,按照某个老师的说法就是,只需要将HTML标记字符串交给万能的$符号就可以得到我们想要的jQuery对象了.
动态创建的新的元素节点不会自动的就”被添加”到文档当中去的,而是需要借助其他方法来将这个新的元素节点插入到文档当中,这里我们可以使用append()方法来查看我们新建节点的效果.
$('ul').append($("<li title='水蜜桃'>水蜜桃</li>"))
上面这句话的意思是说,将新建立的jQuery对象节点插入到ul对象的后面,执行了这个语句之后,我们就会在页面中看到,ul元素的后面就多了一个”水蜜桃”的选项了.
当创建单个元素的时候,我们要注意闭合标签和使用标准的XHTML格式,并且一定不要忘记给$(html)中的HTML标识语言添加一对双引号,否则会出现错误的.
var node1=$("<li title='水蜜桃'>水蜜桃</li>");
var node2=$("<li title='蟠桃'>蟠桃</li>");
$('ul').append(node1).append(node2);
上面的代码是为<ul>同时添加两个子元素的演示,这种方式采用了链式结构,链式结构的写法比较简洁,而且比较容易理解.
通过上面的小例子可以看出,通过jQuery那个万能的$符号创建一个元素节点是非常轻松和愉快的.我们可以通过$(“HTML”)来动态的创建非常复杂的元素节点,并且动态的显示到页面上,实现比较好的人机交互效果.这种技术在实际的项目中还是非常常用的.
3、 插入节点
动态的插入节点在上面”创建节点”的小例子中已经使用过其中的一个方法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对象:
var node1=$("ul>li:eq(0)");
var node2=$("ul>li:eq(1)");
node1.insertAfter(node2);
上面的三行代码的作用实现了得到两个jQuery元素,然后将两个元素的位置进行置换的效果.这说明,上面的after(),insertAfter()和before(),insertBefore()方法的作用不仅仅是往匹配节点中进行插入,而且可以通过使用上面的方法来交换位置,实现更好的人机交互效果.
4、 删除节点
如果文档中某一个元素是多余的,那么就应该将其删除,jQuery提供了两种删除节点的方法,即remove()和empty().
1) remove()方法
remove()方法的作用就是从DOM中删除所有匹配的元素,传入的参数用于根据jQuyer表达式来筛选元素.
2) empty()方法
empty()方法并不是删除节点,而是清空节点,这个方法能够清空元素中的所有后代节点.
5、 复制节点
复制节点也是DOM操作中比较常遇到的,jQuery为复制操作提供了clone()方法,$(‘element’).clone()就可以对匹配的元素进行复制操作了.如果想让复制出来的元素同时具有原元素的方法的话,可以使用$(‘element’).clone(true)方法,里面只要添加一个true参数就可以让复制的元素具备原有元素的方法了.
6、 替换节点
要替换某一个节点,jQuery也提供了相应的方法,就是replaceWith()和replaceAll().
replaceWith()方法的作用就是将所有匹配的元素用指定的HTML或者是DOM元素进行替换.
$('p').replaceWith("<strong>你最喜欢的水果</strong>");
replaceAll()就是用指定的HTML或者是DOM元素对所有匹配的元素进行替换.该方法与replaceWith()的作用相同,只不过是颠倒了replaceWith()的操作.
$("<strong>你最喜欢的水果是什么?</strong>").replaceAll('p');
如果在替换之前,已经为元素绑定事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新元素上重新进行时间的绑定.
7、 包裹节点
1) wrap()方法
将某一个元素用其他的元素给包裹起来,这个方法在需要文档插入而额外的节点的时候相当的有用,并且它不会破坏原有的文档的含义.
$('p').wrap('<strong></strong>');
2) wrapAll()方法
会将所有匹配的元素用一个元素来包裹,它不同于wrap()方法,wrap()方法是将所有的元素进行独立的包裹.
$('p').wrapAll('<strong></strong>');
3) wrapInner()方法
是将每一个元素的子内容(包括文本节点),用其他结构化的标记包裹起来.
$('p').wrapInner('<strong></strong>');
8、 属性操作
1) 获取属性和设置属性
$('p').attr('title')
传递一个参数就是取得属性值,传递两个属性就是修改属性的值.
$('p').attr({'title': 'yourtitle','name': 'yourname'});
可以将一个”名/值”形式的对象设置为匹配元素的属性.
能够实现的一个函数来进行获取和设置的功能有html(),text(),height(),width(),val()还有css()等方法.
2) 删除属性
在有些时候需要删除某些元素的属性,如果要删除一个元素的属性,我们可以通过.removeAttr(‘attribute’)来实现.
$('p').removeAttr('title');
9、 样式操作
1) 获取样式和设置样式
通过.attr()方法来进行样式的设置和获取
2) 追加样式
通过.addClass()方法来追加样式,如果给一个元素添加了多个class的值,就相当于合并了他们的样式,如果有不同的class设置同一个样式属性,那么后者就会覆盖前者.
3) 移除样式
通过.removeClass()方法来进行属性的删除,通过.removeClass().removeClass()来移除两个属性,通过.removeClass()里面什么参数也不传来移除所有的样式.
4) 切换样式
jQuery提供了一个toggleClass()方法来控制一个元素的样式,如果类名存在就删除这个样式,如果这个类名不存在就添加它.这个方法可以用来进行两个样式之间的切换.
5) 判断是否有某个样式
$('p').hasClass('high'); 可以用来判断某个元素是否具有指定的样式,这个方法实际上是调用了is()方法来实现的.上面的方法其实等价于$(‘p’).is(‘.high’)
10、 设置和获取HTML,文本以及值
1) 使用.html()方法来获取或者设置某个元素中的HTML的内容
2) 使用.text()方法来获取或者设置某个元素当中的文本内容
3) 使用.val()方法来获取或者设置某个元素当中的元素的值,如果元素为多选,则返回数组.
PS:
val()方法不仅仅能够设置元素的值,同事也能够获取元素的值,不仅如此,val()方法还有一个非常好的用处,就是能够使select(下拉列表框),checkbox(多选框)和radio(单选框)相应的选项被选中,这个在表单操作中经常会被用到.
$("#multiple").val(["选择2号", "选择3号"]);
11、 遍历节点
1) 使用children()方法来取得匹配元素的子元素集合.
2) 使用next()方法来取得匹配元素后面紧邻的同辈元素
3) 使用prev()方法来取得匹配元素前面紧邻的同辈元素
4) 使用siblings()方法来取得匹配元素前后所有的同辈元素
5) 使用closest()方法来取得最近的匹配元素.
6) ……………等等其他不常用的看API
12、 CSS-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方法来获取元素的滚动条距顶端的距离和距左侧的距离.