目录

关键字: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属性值来获得图片相应的介绍文字。 了解更多
关键字:
JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件。例如当浏览器装载完一个文档后,会生成事件:当用户单击某个按钮时,也会生成事件。虽然利用传统的JavaScript事件能完成这些交互,但jQuery增加并扩展了基本的事件处理机制。 了解更多
关键字:bind()
在文档加载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用bind()方法来对匹配元素进行特定事件的绑定,bind()方法的调用格式为:bind( type [, data] , fn);bind()方法有3个参数,说明如下。第1个参数是事件类型,类型包括:blur、focus、load、resize、scroll、unload、click…… 了解更多
关键字:hover(),toggle()
jQuery有两个合成事件——hover()方法和toggle()方法,类似前面讲过的ready()方法,hover()方法和toggle()方法都属于jQuery自定义的方法。hover()方法用于模拟光标悬停事件。当光标移动到元素上时,会触发指定的第1个函数(enter);当光标移出这个元素时,会触发指定的第2个函数(leave)。toggle()方法用于模拟鼠标连续单击事件。 了解更多
关键字:事件冒泡
在页面上可以有多个事件,也可以多个元素响应同一个事件。假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时body元素上也绑定了click事件。当单击内部span元素,即触发span元素的click事件时,会输出3条记录。只单击内部span元素,就会触发外部div元素和body元素上绑定的click事件。 了解更多
关键字:封装对象的属性
JQuery在遵循W3C规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断。event.type()方法:该方法的作用是可以获取到事件的类型。event.preventDefault()方法,该方法的作用是阻止默认的事件行为…… 了解更多
关键字:unbind(),one()
可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件。假设网页上有一个<button>元素,使用以下代码为该元素绑定多个相同的事件。来看看unbind()方法的语法结构:unbind([type] [, data]);第1个参数是事件类型,第2个参数是将要移除的函数。one()方法的结构与bind()方法类似。 了解更多
关键字:trigger()
有时候,需要通过模拟用户操作,来达到单击的效果。例如在用户进入页面后,就触发click事件,而不需要用户去主动单击。在JQuery中,可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。$('#btn').trigger("click");这样,当页面加载完毕后,就会立刻输出想要的效果。也可以直接简写click(),来达到同样的效果。 了解更多

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