`

JQuery技术总结(DOM篇)

阅读更多

JQuery技术总结(DOM篇)

 

jQuery 操作 DOM

  DOMDocument Object Model,文档对象模型)为文档提供了一种结构化表示方法,通过该方法可以改变文档的内容和展示形式。在实际运用中,DOM 更像是桥梁,通过它可以实现跨平台、跨语言的标准访问。

     DOM 模型密不可分的是 JavaScript 脚本技术,DOM 在客户端的应用也是基于该技术,通过该技术我们可以很方便地访问、检索、操作文档中的任何一个元素。因此,学好JavaScript 脚本技术,是掌握 DOM 对象的一个重要条件。单词 Document 即文档,当我们创建一个页面并加载到 Web 浏览器时,DOM 模型则根据单词 Object 即对象,是指具有独立特性的一组数据集合,

该页面的内容创建了一个文档文件;与对象相关联的特征称之为对象属性,访问单词“Model”即模型,在页面文档中,通过树状模型展示页面对象的函数称之为对象方法;的元素和内容,其展示的方式则是通过节点(node)来实现的。

 

在访问页面时,需要与页面中的元素进行交互式的操作。在操作中,元素的访问是最频繁、最常用的,主要包括对元素属性、内容、值、CSS 的操作。

    jQuery 中,可以对元素的属性执行获取、设置、删除的操作,通过 attr() 方法可以对元素属性执行获取和设置操作,而 removeAttr() 方法则可以轻松删除某一指定的属性。

  1. 获取元素的属性

  获取元素属性的语法格式如下

  attr(name)其中,参数 name 表示属性的名称。

 

在页面中,attr() 方法不仅可以获取元素的属性值,还可以设置元素的属性,其设置属性语法格式如下所示

  attr(key, value)

  其中,参数 key 表示属性的名称,value 表示属性的值。如果要设置多个属性,也可以通过 attr() 方法实现,其语法格式如下所示

  attr({key0:value0, key1:value1})

 

attr() 方法还可以绑定一个 function() 函数,通过该函数返回的值作为元素的属性值,其语法格式如下所示

  attr(key, function(index))

其中参数 index 为当前元素的索引号整个函数返回一个字符串作为元素的属性值

 

jQuery 中通过 attr() 方法设置元素的属性后,使用 removeAttr() 方法可以将元素的属性删除,其使用的语法格式为

   removeAttr(name)

其中,参数 name 为元素属性的名称。

   例如,可以通过如下的代码删除标记 <img> 中的 src 属性

   $("img").removeAttr("src");

 

jQuery 中,操作元素内容的方法包括 html() text()。前者与 JavaScript 中的 innerHTML属性类似,即获取或设置元素的 HMTL 内容;后者类似于 JavaScript 中的 innerText 属性,即获取或设置元素的文本内容。二者的格式与功能的区别:

html() text() 方法的区别

       语法格式                   参数说明                            功能描述

       html()                                          用于获取元素的 HTML 内容

                        无参数

       html(val)        val 参数为元素的 HTML 内容             用于设置元素的 HTML 内容

       text()           无参数                            用于获取元素的文本内容

       text(val)        val 参数为元素的文本内容                 用于设置元素的文本内容

 

  说明 html() 方法仅支持 XHTML 的文档,不能用于 XML 文档,而 text() 则既支持 HTML文档,也支持 XML 文档。

 

jQuery 中,如果要获取元素的值,是通过 val() 方法实现的,其语法格式如下所示

  val(val)

其中,如果不带参数 val则是获取某元素的值;反之,则是将参数 val 的值赋给某元素,即设置元素的值。该方法常用于表单中获取或设置对象的值。

  另外,通过 val() 方法还可以获取 select 标记中的多个选项值,其语法格式如下所示 val().join(",")

 

在页面中,元素样式的操作包含:直接设置样式、增加 CSS 类别、类别切换、删除类别几部分。

   1. 直接设置元素样式值

   jQuery 中,可以通过 css() 方法为某个指定的元素设置样式值,其语法格式如下所示

   css(name, value)

   其中 name 为样式名称,value 为样式的值。

2. 增加 CSS 类别

  通过 addClass() 方法增加元素类别的名称,其语法格式如下

  addClass(class)

其中,参数 class 为类别的名称,也可以增加多个类别的名称,只需要用空格将其隔开即可,

其语法格式为

  addClass(class0 class1 ...)

3. 类别切换

    通过 toggleClass() 方法切换不同的元素类别,其语法格式如下

    toggleClass(class)

其中参数 class 为类别名称,其功能是当元素中含有名称为 class CSS 类别时,删除该类别,否则增加一个该名称的 CSS 类别。

4. 删除类别

  与增加 CSS 类别的 addClass() 方法相对应,removeClass() 方法则用于删除类别,其语法格式如下

  removeClass([class])

其中,参数 class 为类别名称,该名称是可选项,当选该名称时,则删除名称是 class 的类别,有多个类别时用空格隔开。如果不选名称,则删除元素中的所有类别。如果要删除 p 标记是 cls0 的类别,可以使用如下的代码

  $("p").removeClass("cls0");

 

如果要在页面中增加某个元素,只需要找到元素的上级节点,通过函数 $(html) 完成元素的创建后,增加到该节点中。函数 $() 用于动态创建页面元素,其语法格式如下

   $(html)

其中,参数 html 表示用于动态创建 DOM 元素的 HTML 标记字符串

 

在页面中动态创建元素需要执行节点的插入或追加操作。而在jQuery 中,有多种方法可以实现该功能,append() 方法仅是其中之一,按照插入元素的顺序来分,可以分为内部和外部两种插入方法。

 

函数 $(html) 只完成 DOM 元素创建加入到页面还需要通过元素节点的插入或追加操作;同时在创建 DOM 元素时要注意字符标记是否完全闭合否则达不到预期效果

 

语法格式                             参数说明                        功能描述

append(content)                   content 表示追加到目标中的内容           向所选择的元素内部插入内容

                                  通过 function 函数返回追加到目标中        向所选择的元素内部插入 function

append(function(index, html))

                                 的内容                           数所返回的内容

                                                                把所选择的元素追加到另一个指定的

appendTo(content)                 content 表示被追加的内容

                                                               元素集合中

                                  content 表示插入目标元素内部前面的

prepend(content)                                                向每个所选择的元素内部前置内容

                                 内容

                                  通过 function 函数返回插入目标元素        向所选择的元素内部前置 function

prepend(function(index, html))

                                 内部前面的内容                       数所返回的内容

                                  content 表示用于选择元素的 jQuery     将所选择的元素前置到另一个指定的

prependTo(content)

                                 达式                            元素集合中

 

下面介绍其中几个最新的节点插入方法。

     1. append(function(index, html))

     该方法是版本 1.4 中新增的,其功能是将一个 function 函数作为 append 方法的参数,该函数的功能必须返回一个字符串,作为 append 方法插入的内容,其中 index 参数为对象在这个集合中的索引值,html 参数为该对象原有的 html 值。

2. appendTo(content)

  该方法用于将一个元素插入另一个指定的元素内容中,即如果要将 span 标记插入 div 标记中,则执行下列代码

  $("span").appentTo($("div"));

即把 appentTo 方法前部分的内容插入其后部分的内容中。

 

外部插入节点方法

语法格式                           参数说明                             功能描述

after(content)           content 表示插入目标元素外部后面的内容              向所选择的元素外部后面插入内容

                         通过 function 函数返回插入目标外部后面             向所选择的元素外部后面插入 function

after(function)

                        的内容                                  数所返回的内容

before(content)          content 表示插入目标元素外部前面的内容              向所选择的元素外部前面插入内容

                         通过 function 函数返回插入目标外部前面             向所选择的元素外部前面插入 function

before(function)

                        的内容                                  数所返回的内容

                         content     将所选择的元素插入另一个指定的元素外

insertAfter(content)

                        内容                                   部后面

                         content     将所选择的元素插入另一个指定的元素外

insertBefore(content)

                        内容                                   部前面

 

after(function)

   该方法也是 jQuery1.4 中新增的方法, function() 参数将返回插入元素外部后面部分的内容。

 

在页面中,有时需要将某个元素节点复制到另外一个节点后,如购物网站中购物车的设计。在传统的 javaScript 中,需要编写较为复杂的代码,而在 jQuery 中,可以通过方法clone() 轻松实现,该方法的语法格式为

   clone()

   其功能为复制匹配的 DOM 元素并且选中复制成功的元素,该方法仅是复制元素本身,被复制后的新元素不具有任何元素行为。如果需要在复制时将该元素的全部行为也进行复制,可以通过方法 clone(true) 实现,其格式为

   clone(true)

其中的参数设置为 true 就可以复制元素的所有事件处理。

 

jQuery 中,如果要替换元素中的节点,可以使用 replaceWith() replaceAll() 这两种方法,其语法格式分别如下

   replaceWith(content)

   该方法的功能是将所有选择的元素替换成指定的 HTML DOM 元素,其中参数 content为被所选择元素替换的内容。

   replaceAll(selector)

   该方法的功能是将所有选择的元素替换成指定 selector 的元素,其中参数 selector 为需要被替换的元素。

 

replaceWith() replaceAll() 方法都可以实现元素节点的替换,二者最大的区别在于替换字符的顺序,前者是用括号中的字符替换所选择的元素,后者是用字符串替换括号中所选择的元素。同时,一旦完成替换,被替换元素中的全部事件都将消失。

 

jQuery 中,不仅可以通过方法替换元素节点,还可以根据需求包裹某个指定的节点.

语法格式                       参数说明                              功能描述

                   html 参数为字符串代码,用于生成元

wrap(html)                                           把所有选择的元素用其他字符串代码包裹起来

                  素并包裹所选元素

                   elem 参数用于包装所选元素的 DOM

wrap(elem)                                           把所有选择的元素用其他 DOM 元素包装起来

                  元素

                                                     把所有选择的元素用 function 函数返回的代码包裹

wrap(fn)           fn 参数为包裹结构的一个函数

                                                    起来

unwrap()           无参数                               移除所选元素的父元素或包裹标记

                   html 参数为字符串代码,用于生成元

wrapAll(html)                                        把所有选择的元素用单个元素包裹起来

                  素并包裹所选元素

                   elem DOM

wrapAll(elem)                                        把所有选择的元素用单个 DOM 元素包裹起来

                  元素

                                                     把所有选择的元素的子内容 ( 包括文本节点 ) 用字

                   html 参数为字符串代码,用于生成元

wrapInner(html)

                  素并包裹所选元素                          符串代码包裹起来

                   elem DOM    把所有选择的元素的子内容 ( 包括文本节点 )

wrapInner(elem)

                                                    DOM 元素包裹起来

                  元素

                                                     把所有选择的元素的子内容 ( 包括文本节点 )

wrapInner(fn)      fn 参数为包裹结构的一个函数

                                                    function 函数返回的代码包裹起来

 

DOM 中,作。JavaScript 中,先获取元素的总长度,然后, for 循环语句,递减总长度,访问其中的某个元素,代码相对复杂;而在 jQuery 中,可以直接使用 each() 方法实现元素的遍历。其语法格

式如下

  each(callback)

其中,参数 callback 是一个 function 函数,该函数还可以接受一个形参 index此形参为遍历元素的序号(从 0 开始)如果需要访问元素中的属性,可以借助形参 index,配合 this 关键字来实现元素属性的设置或获取。

 

DOM 操作页面时,删除多余或指定的页面元素是非常必要的jQuery 提供了两种可以删除元素的方法, remove() empty() 严格来说 empty() 方法并非真正意义上的删除使用该方法,仅仅可以清空全部的节点或节点所包括的所有后代元素并非删除节点和元素。

   remove() 方法的语法格式如下

   remove([expr])

其中参数 expr 为可选项,如果接受参数,则该参数为筛选元素的 jQuery 表达式,通过该表述式获取指定的元素,并进行删除。

   empty () 方法的语法格式如下

   empty()

其功能为清空所选择的页面元素或所有的后代元素。

 

 

 

分享到:
评论

相关推荐

    jQuery全面技术网页

    本篇文章将深入探讨jQuery的核心概念、主要功能以及如何在实际项目中运用。 一、jQuery核心概念 1. 快速选择器:jQuery通过$.fn.find()、$.fn.children()等方法提供了强大的DOM元素选择功能,使得开发者可以方便地...

    从零开始学jquery

    jQuery的核心在于它的选择器和链式操作,这些使得对DOM元素的操作变得简单直观。"Hello World jQuery"示例通常是从一个简单的页面引入jQuery的第一步,它演示了如何通过`$(document).ready()`函数确保在页面加载完毕...

    jQuery学习资料总结

    ### jQuery学习资料总结 在本篇文章中,我们将深入探讨jQuery的核心功能与用法,并通过具体的示例来加深理解。jQuery是一款流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作。下面,让...

    jquery-1.11.0+jquery-UI-1.10.4

    本篇将深入探讨jQuery 1.11.0与jQuery UI 1.10.4这两个版本的功能、特性以及它们在实际项目中的应用。 首先,jQuery 1.11.0是jQuery库的一个稳定版本,它在1.10.x的基础上进行了优化和修复,确保了更好的浏览器兼容...

    jQuery-1.8.3(&2.1.4).min.js&jquery;.fileupload&jquery;.iframe-transport

    本篇将深入探讨jQuery的核心库以及两个重要的插件——jQuery File Upload和jQuery Iframe Transport。 首先,jQuery的核心库jQuery-1.8.3.min.js和jQuery-2.1.4.min.js是其发展过程中的两个稳定版本。1.8.3属于1.x...

    jquery1.4.2.js和jquery.cookie.js

    总结,jQuery 1.4.2作为一款经典版本,提供了丰富的DOM操作和事件处理能力,而jQuery Cookie插件则弥补了JavaScript原生对Cookie操作的不足,两者结合,为开发者构建交互性强、用户体验优良的Web应用提供了便利。...

    jquery攻略

    - **DOM操作**:教授如何使用jQuery进行DOM元素的创建、删除、替换等操作。 - **事件处理**:详解如何利用jQuery绑定、触发及解绑各种事件。 2. **进阶篇** - **动态效果**:学习如何使用jQuery实现页面元素的...

    jquery-1.12.4

    jQuery 1.12.4 是jQuery的一个长期支持(LTS)版本,这意味着它将获得更长时间的安全更新和技术支持,确保开发者可以放心地在生产环境中使用。这个版本的发布,旨在解决之前版本中的一些已知问题,提升性能,并保持...

    jQuery制作图片标注提示信息插件

    要实现这一功能,我们需要掌握以下jQuery技术: 1. **选择器**: jQuery提供了丰富的选择器,如ID选择器(#id),类选择器(.class)等,用于选取页面中的元素。在这个插件中,我们需要选择图片元素来添加标注功能。 2....

    jQuery学习心得总结(必看篇).docx

    ### jQuery学习心得总结 #### 一、jQuery简介与特点 jQuery 是一款优秀的 JavaScript 库,它的出现极大地简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。自2006年发布以来,jQuery 已经成为了前端...

    jquery API学习资料

    - **《jQuery的起点教程》** 和 **《使用jQuery简化Ajax开发》**:这两篇文章提供了从基础到高级的逐步指导,非常适合初学者。 #### 四、语法总结和注意事项 ##### 1. 关于页面元素的引用 在jQuery中,通过`$()`...

    j2ee23:jquery:使用jquery技术实现奇数行偶数行换色

    在本文中,我们将深入探讨如何使用jQuery技术来实现表格中奇数行和偶数行的换色效果。jQuery是一款强大的JavaScript库,它简化了DOM操作、事件处理以及动画制作等任务,使得网页开发更为便捷。在J2EE环境中,jQuery...

    jquery三种版本.zip

    本篇文章将深入探讨jQuery的三种主要版本:1.x,2.x和3.x,以及它们之间的差异与适用场景。 一、jQuery 1.x系列 jQuery 1.x系列是最经典且被广泛使用的版本,包括1.8.3、1.4.2等次级版本。这个系列的主要特点是...

    常用jquery ajax方法总结

    在本篇文章中,我们将深入探讨 jQuery 中的 AJAX 方法及其相关操作。 AJAX (Asynchronous JavaScript and XML) 是一种创建动态网页的技术,允许在不重新加载整个页面的情况下更新部分网页内容。jQuery 提供了一个...

    jquery1.7.2(js,css,例子,中文文档)

    本篇将详细介绍jQuery 1.7.2版本中的核心概念、CSS选择器、DOM操作、事件处理、动画效果,以及如何利用它进行快速的Web开发,特别适合初学者学习。 一、jQuery基础 jQuery的核心理念是“Write Less, Do More”,即...

    jqueryjquery v1.3.2

    本篇文章将聚焦于jQuery v1.3.2这一经典版本,探讨其核心特性、功能以及在实际项目中的应用。 一、jQuery的核心理念 jQuery的设计理念是"Write Less, Do More",通过简洁的语法,实现了对JavaScript的封装和优化,...

    jquery 跨iframe拖拽

    本篇文章将详细探讨"jquery 跨iframe拖拽"这一主题,该技术允许用户在不同的IFrame之间进行元素的拖放操作,这对于构建多窗口、多面板的Web应用尤其有用。 首先,我们要理解IFrame(内联框架)的概念。IFrame是一种...

    jquery实现飞机大战小游戏.rar

    本篇文章将深入探讨如何利用jQuery技术实现一款飞机大战小游戏,同时也会涉及JavaScript的基础知识,帮助读者更好地理解和运用这两种技术。 一、项目概述 "飞机大战"是一款经典的街机游戏,玩家通过控制飞机躲避...

    jquery天猫顶部商品分类

    本篇文章将深入探讨如何利用jQuery技术来实现类似天猫顶部商品分类的效果。 一、jQuery基础理解 jQuery是一款轻量级、高性能的JavaScript库,它的出现极大地简化了JavaScript的DOM操作,提供了丰富的选择器、事件...

Global site tag (gtag.js) - Google Analytics