DOM操作 之卷

关键字:DOM Core、HTML-DOM、CSS-DOM
DOM是Document Object Model的缩写,意思是文档对象模型。根据W3C DOM规范(http://www.w3.org/DOM),DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件。简单来说,DOM解决了Netscape的JavaScript和Microsoft的JScript之间的冲突,给予了Web设计师和开发者一套标准的方法,让他们能够轻松获取和操作网页中的数据、脚本和表现层对象。 了解更多
关键字:attr("name")
DOM操作是JQuery最常见的用法,下面我们来将JQuery的DOM操作逐个剖析下。先来最简单的查找节点操作。为了能全面地讲解DOM操作,首先需要构建一个网页。因为每一张网页都能用DOM表示出来,而每一份DOM都可以看作一棵DOM树。使用JQuery在文档树上查找节点非常容易,可以通过JQuery选择器来完成。 了解更多
关键字:$("html")、append()
用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值。但真正的DOM操作并非这么简单。在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互的目的。 了解更多
关键字:append()、appendTo()
动态创建HTML元素并没有实际用处,还需要将新创建的元素插入文档中。将新创建的节点插入文档最简单的办法是,让它成为这个文档的某个节点的子节点。前面使用了一个插入节点的方法append(),它会在元素内部追加新创建的内容。 将新创建的节点插入某个文档的方法并非只有一种,在JQuery中还提供了其他儿种插入节点的方法。 了解更多
关键字:remove()、empty()
如果文档中某一个元素多余,那么应将其删除。JQuery提供了两种删除节点的方法,即remove()和empty()。remove()方法作用是从DOM中删除所有匹配的元素,传入的参数用于根据JQuery表达式来筛选元素。严格来讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点。 了解更多
关键字:clone()
复制节点也是常用的DOM操作之一,例如很多购物网站的效果,用户不仅可以通过单击商品下方的“选择”按钮购买相应的产品,也可以通过鼠标拖动商品并将其放到购物车中。这个商品拖动功能就是用的复制节点,将用户选择的商品所处的节点元素复制一次,并将其跟随鼠标移动,从而达到购物效果。 了解更多
关键字:replaceWith()、replaceAll()
如果要替换某个节点,jQuery提供了相应的方法,即replaceWith()和replaceAll()。replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。也可以使用JQuery中另一个方法replaceAll()来实现,该方法与replaceWith()方法的作用相同,只是颠倒了replaceWith()操作。 了解更多
关键字:wrap()、wrapAll()、wrapInner()
如果要将某个节点用其他标记包裹起来,JQuery提供了相应的方法,即wrap(),该方法对于需要在文档中插入额外的结构化标记非常有用,而且它不会破坏原始文档的语义。包裹节点操作还有其他两个方法,即wrapAll()和wrapInner()。该方法会将所有匹配的元素用一个元素来包裹。它不同于wrap()方法,wrap()方法是将所有的元素进行单独的包裹。 了解更多
关键字:attr()、removeAttr()
在JQuery中,用attr()方法来获取和设置元素属性,removeAttr()方法来删除元素属性。如果要获取p元素的属性title,那么只需要给attr()方法传递一个参数,即属性名称。在某些情况下,需要删除文档中某个元素的特定属性,可以使用removeAttr()方法来完成该任务。 了解更多
关键字:addClass()、removeClass()、toggleClass()
有了JQuery,元素的样式操作会变得相当简易。下面我们来看看如何使用JQuery来实现元素样式的获取、设置、追加、删除以及其它一些操作。获取class和设置class都可以使用attr()方法来完成。jQuery提供了专门的addClass()方法来追加样式。hasClass()可以用来判断元素中是甭含有某个class。 了解更多
关键字:html()、text()
使用JQuery可以非常容易地添加、获取和改变某个HTML元素的内容,你会为这种简便感到非常愉悦。html()方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的HTML内容。text()方法对HTML文档和XML文档都有效。 了解更多
关键字:val()
val()方法类似于JavaScript中的value属性,可以用来设置和获取元索的值。无论元素是文本框,下拉列表还足单选框,它都可以返回元素的值。如果元素为多选,则返回一个包含所有选择的值的数组。比如网站的邮箱登录界面,默认状态下,邮箱地址文本框和邮箱密码框内分别有“请输入邮箱地址”和“请输入邮箱密码”的提示。 了解更多
关键字:val()
val()方法不仅能设置元素的值,同时也能获取元素的值。另外,val()方法还有另外一个用处,就是它能使select(下拉列表框)、checkbox(多选框)和radio(单选框)相应的选项被选中,在表单操作中会经常用到。下面先来演示val()方法的选中功能。 了解更多
关键字:children()、next()、prev()、siblings()
本节的核心是介绍JQuery的DOM操作,前面介绍了很多创建、删除、替换等等节点操作。这里介绍如何遍历节点,选中临近节点等的一些方法。children()方法该方法用于取得匹配元素的子元素集合。next()方法该方法用于取得匹配元素后面紧邻的同辈元素。 了解更多
关键字:css()、height()、offset()
style属性很有用,但最大不足是无法通过它来提取到通过外部CSS设置的样式信息,然而在jQuery中,这些都是非常的简单。CSS-DOM技术简单来说就是读取和设置style对象的各种属性。可以直接利用css()方法获取元素的样式属性,对透明度的设置,可以直接使用opacity属性。 了解更多
关键字:DOM操作案例
浏览器其实已经自带了超链接提示,只需在超链接中加入title属性就可以了。但是这个提示效果的响应速度是非常缓慢的,大概要延迟1秒左右啊。我们现在需要的是当鼠标移动到超链接的那一瞬间就出现提示。这时就需要移除a标签中的title提示效果,自己动手做一个类似功能的提示。 了解更多
关键字:DOM操作案例
根据上一节的实践,稍微修改一下代码,就可以做出一个图片的提示效果。当鼠标滑过图片后,显示就会有大图提示效果。为了使效果更为人性化,还需要为图片增加说明文字,即提示出来的大图片下面出现图片相应的介绍文字。可以根据超链接的title属性值来获得图片相应的介绍文字。 了解更多

  • 文章数:17
  • 1 / 1
  • 首页
  • < Prev
  • 1
  • Next >
  • 尾页