jquery的dom操作

piperzero

浏览: 3555309 次
性别:
来自: 杭州

最近访客更多访客>>

handsome1234

u012363178

zhangketuan

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (3796)

社区版块

存档分类

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’;

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> 你最喜欢的水果是什么? <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='葡萄'>葡萄</li> <li title='香蕉'>香蕉</li> <li title='蚊子'>蚊子</li> </ul> </body></html>

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("你最喜欢的水果");

replaceAll()就是用指定的HTML或者是DOM元素对所有匹配的元素进行替换.该方法与replaceWith()的作用相同,只不过是颠倒了replaceWith()的操作.

$("你最喜欢的水果是什么?").replaceAll('p');

如果在替换之前,已经为元素绑定事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新元素上重新进行时间的绑定.

n包裹节点

1) wrap()方法,将某一个元素用其他的元素给包裹起来,这个方法在需要文档插入而额外的节点的时候相当的有用,并且它不会破坏原有的文档的含义.

$('p').wrap('');

2) wrapAll()方法,会将所有匹配的元素用一个元素来包裹,它不同于wrap()方法,wrap()方法是将所有的元素进行独立的包裹.

$('p').wrapAll('');

3) wrapInner()方法,是将每一个元素的子内容(包括文本节点),用其他结构化的标记包裹起来.

$('p').wrapInner('');

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方法来获取元素的滚动条距顶端的距离和距左侧的距离

分享到：

mysql中的建表语句 | php数据结构函数

2013-06-13 18:19
浏览 1428
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论