jquery操作DOM
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery操作DOM相关的知识,希望对你有一定的参考价值。
DOM(Document Object Model, 文档对象模型)为文档提供了一种结构化的表示方法,通过该方法可以改变文档的内容和展示形式。在实际运用中,DOM更像是桥梁,通过它可以实现跨平台、跨语言的标准访问。
与DOM密不可分的是javascript脚本技术,DOM在客户端的技术也是基于该技术,通过该技术我们可以很方便的访问、检索、操作文档中的任何一个元素。因此,学号javascript脚本技术,是掌握DOM对象的一个重要条件。
Document即文档,当我们创建一个页面并加载到浏览器时,DOM模型根据该页面的内容创建一个文档文件。
Object及对象,是值具有独立特性的一组数据集合。例如,我们把新建的页面额外难当称之为文档对象,与对象相关联的特征称之为对象属性,访问对象的函数称之为对象方法。
Model即模型,在页面文档中,通过树状模型展示页面的元素和内容,其展示的方式则是通过节点(node)来实现的。
元素属性的操作
在jquery中,可以对元素的属性执行获取、设置、删除的操作,通过attr()方法可以对元素属性执行获取和设置操作,而removeAttr()方法可以轻松删除某已制定的属性。
1.获取元素的属性
获取元素的属性的语法如下:
attr(name)
其中,参数name表示属性的名称。
2.设置元素的属性
attr()方法不仅可以获取元素的属性值,还可以设置元素的属性,其设置属性语法格式如下所示:
attr(key,value)
其中,参数key表示属性的名称,value表示属性的值。
如果要设置多个属性,也可以通过attr()方法实现,其语法格式如下所示:
attr({key0:value0,key1:value1})
attr()方法还可以绑定一个function()函数,通过该函数返回的值作为元素的的属性值,其语法格式如下所示:
attr(key,fuction(index))
其中,参数index作为当前元素的索引号,整个函数返回一个字符串作为元素的属性值。
3.删除元素属性
jquery中通过attr()方法设置元素的属性后,使用removeAttr()方法可以将元素的属性删除,其使用的语法格式为:
removeAttr(name)
其中,参数name为元素属性的名称。
获取和设置元素
1.获取和设置元素内容
在jquery中,操作元素内容的方法包括html()和text()。前者与javascript中innerHTML属性类似,即获取或设置元素的内容;后者类似于javascript中的innerText属性,即获取或设置元素的文本内容。二者的格式与功能呢个区别如表所示:
语法格式 | 参数说明 | 功能描述 |
html() | 无参数 | 用于获取元素的HTML内容 |
html(val) | val参数为元素的HTML内容 | 用于设置元素的HTML内容 |
text() | 无参数 | 用于获取元素的文本内容 |
text(val) | val参数为元素的文本内容 | 获取设置元素的文本内容 |
html()方法仅支持XHTML的文档,不能用XML文档,而text()即支持HTML文档,也支持XML文档。
2.获取和设置元素的值
在jquery中,要获取元素的值ton通过val()方法实现,其语法格式如下所示:
val(val)
其中,如果不带参数val是获得元素的值;反之,是是将参数val的值赋给某元素,即设置元素的值。此方法常用语表烦中获取或设置对象的值。
另外,通过val()方法还可以获取select表集中的多个选项值,其语法格式如下所示:
val().join(",")
在val(val)方法中,如果有参数,其参数还可以是数组的形式,即val(array),其作用是设置元素被选中。因此
$(":radio"),val(["radio2","radio3"])
代码的意思为:Value值为radio2和radio3的单选框被选中。
元素样式操作
在页面中,元素样式操作包含:直接设置样式、增加css类别、类别切换、删除类别。
1.直接设置元素样式
在jquery中,可以通过css()方法为某个制定的元素设置样式值,其语法格式如下所示:
css(vame,value)
其中name为样式名称,value为样式的值。
2.增加元素css类别
通过addClass(class)方法增加元素类别的名称,其语法格式如下:
addClass(class)
其中,参数class为类别的名称,也可以增加多个类别的名称,只需要将空格将其隔开即可,其语法格式为
addClass(class0 class1...)
注:使用addClass()方法近视追加样式类别,即它还保存原有的类别。
3.切换元素类别
通过toggleClass()方法切换不同元素类别,其语法格式如下:
toggleClass(class)
其中,class为类别名称,其功能是当元素中含有名称为class的CSS类别时,删除该元素类别,否则增加一个该名称的CSS类别。
4.删除css元素类别
与增加类别的addClass()方法相对应,removeClass()方法则用于删除类别,其语法格式如下:
removeClass([class])
其中class为类别名称,该名称是可选项。当选该名称是,删除名称是class的类别,有多个类别时用空格隔开。如果不选,名称,则删除元素中的所有类别。
页面元素操作
如果要在页面中增加某个元素,只需要找到元素的上级节点,通过$(html)完成元素的创建后,增加到该节点中。
1.创建节点元素
函数$()用于动态创建页面元素,其语法格式如下:
$(html)
其中,参数html表示用于动态创建DOM元素的HTML标记字符串,即如果要在页面中动态创建一个div标记,并设置其内容和属性,可以加入如下代码:
var $div = $("<div title=‘jquery理念‘>Write Less Do More</div>"); $("body").append($div);
执行上述代码之后,将在页面文档body中创建一个div标记,其内容为"Write Less Do More",属性title的值为"jquery理念"。
注:函数$(html)只是完成DOM元素的创建,加入到页面还需要同故宫元素及诶但的插入或追加操作;同时,在创建DOM元素是,要注意字符标记是否完全闭合,否则达不到预期的效果。
2.内部插入节点
在页面中动态创建元素需要执行节点的插入或追加操作。而在jquery中,有多种方法可以实现该功能,append()方法近视其中之一。按照插入元素的顺序来分,可以分为内部和外部两种方法。下面将分别对这些方法进行详细介绍。
外部插入的方法如表所示:
语法格式 | 参数说明 | 功能描述 |
append(content) | content表示要追加到目标中的内容 | 向所选择的元素内部插入内容 |
append(function(index,html)) | 通过function函数返回追加到目标中的内容 | 向所选择的元素内部插入function函数所返回的内容 |
appendTo(content) | content表示被追加的内容 | 把所选择的元素追加到另一个制定的元素集合中 |
prepend(content) | content表示插入目标元素内部的前面的内容 | 想每个所选择的元素内部前置内容 |
prepend(function(index,html)) | 通过function函数返回追加到目标元素内部前面的内容 | 向所选择的元素内部前置插入function函数所返回的内 |
prependTo(content) | content表示用于选择元素的jquery表达式 | 把所选择的元素前置到另一个制定的元素集合中 |
2.外部插入节点
内部插入的方法如表所示:
语法格式 | 参数说明 | 功能描述 |
after(content) | content表示插入目标元素外部后面的内容 | 向所选择的元素外部后面插入内容 |
after(function) | 通过function函数返回追加到目标外部后面的内容 | 向所选择的元素外部后面插入function函数所返回的内容 |
before(contont) | content表示插入目标元素外部前面的内容 | 向所选择的元素外部前面插入内容 |
before(function) | content表示插入目标元素内部的前面的内容 | 向所选择的元素外部钱面插入function函数所返回的内容 |
insertAfter(content) | content表示插入目标元素外部后面的内容 | 将所选择的元素插入另一个制定的元素外部后面 |
insertBefore(contont) | content表示插入目标元素外部前面的内容 | 把所选择的元素插入另一个制定的元素外部前面 |
4.复制元素节点
在页面中,有事需要将某个元素节点复制到另外一个节点,如购物网站中购物和的设计。在传统javascript中,需要编写较为复杂的代码,而在jquery中,额可以通过方法clone()轻松实现,该方法的语法格式为:
clone()
其功能为复制匹配的DOM元素并且选中复制成功的元素。该方法近视复制元素本身,被复制后的新元素不具有任何元素行为。如果需要在复制时将钙元素的全部行为也进行复制,可以通过方法clone(true)实现,其格式为:
clone()
其中参数设置为true,就可以复制元素的所有事件处理
5.替换元素节点
在jquery中,如果要替换元素中的节点,可以使用replaceWith()和replaceAll()这两种方法,其语法格式分别如下:
replaceWith(content)
该方法的功能是将所有选择的元素替换成制定的HTML或DOM元素,其中参数content为被所选择元素替换的内容。
replaceAll(content)
该方法的功能是将所有选择的元素替换成制定selector的元素,其中参数selector为需要被替换的元素。
注:replaceWith()和replaceAll()方法都可以实现元素节点的替换,二者最大的区别在于替换字符的顺序,前者是用括号中的字符替换所选择的元素,后者是用字符串替换括号中所选择的元素。一旦完成替换,被替换元素中的全部事件都将消失。
6.包裹元素节点
在jquery中,不仅可以通过方法替换元素节点,还可以根据需求包裹某个制定的节点,对节点的包裹也是DOM对象中很重要的一项,其与包裹节点相关的全部方法如表所示:
语法格式 | 参数说明 | 功能描述 |
wrap(html) | html参数为字符串代码,用于生成元素并包裹所选元素 | 把所有选择的元素用其他字符串代码包裹起来 |
wrap(elem) | elem参数用于包装所选元素的DOM元素 | 把所有选择的元素用其他DOM元素包装起来 |
wrap(fn) | fn参数为包裹元素的一个函数 | 把选优选择的元素用function函数返回的代码包裹起来 |
unwrap | 无参数 | 移除所有元素的父元素或包裹标记 |
wrapAll(html) | html参数为字符串代码,用于生成元素并包裹所选元素 | 把所有选择的元素用单个DOM元素包裹起来 |
wrapAll(elem) | elem参数用于包装所选元素的DOM元素 | 把所有选择的元素用单DOM元素包裹起来 |
wrapInner(html) |
html参数为字符串代码,用于生成元素并包裹所选元素 | 把所有选择的元素的子内容(包括文本节点)用字符串代码包裹起来 |
wrapInner(elem) | elem参数用于包装所选元素的DOM元素 | 把所有选择的元素的字内容(包括额外那本节点)用DOM元素包裹起来 |
wrapInner(fn) | fn参数为包裹结构的一个函数 | 把所有选择的元素的字内容(包括文本节点)用fn返回的代码包裹起来 |
注:在上述表格中,wrap(html)和wrapInner(html)方法比较常用,前者包括外部元素,后者包含元素内部的文本字符。
7.遍历元素
在DOM元素操作中,有事需要对同意标记的全部元素进行同一操作。在传统的javascript中,先获取元素的总长度,然后以for循环语句递减总长度,访问其中的某个元素,代码相对复杂;而在jquery中,可以直接使用each()方法实现元素的遍历。其语法格式如下:
each(callback)
其中,参数callback是一个function函数,该函数还可以接受一个形参index,次形参为遍历元素的需要(从0开始);如果需要访问元素中的属性,可以借助形参index,配合this关键字来实现元素属性的设置或获取。
8.删除页面元素
在DOM操作页面时,删除多余或指定的页面元素是非常必要的,jquery提供了两种删除元素的方法,即remove()和empty()。严格来说,empty()方法并非真正意义上的删除,使用该方法,紧紧可以清空全部的及诶但或节点所包含的所有后代元素,并非删除及诶但和元素。
remove()方法的语法格式如下:
remove([expr])
其中expr为可选子昂,如果接受参数,则该参数为筛选元素的jquery表达式,通过该表达式获取制定的元素,并进行删除。
empty()方法的语法格式如下:
empty()
其功能为清空所选呢的页面元素或所有的后代元素。
以上是关于jquery操作DOM的主要内容,如果未能解决你的问题,请参考以下文章
jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段