jQuery自学教程(三)——DOM操作
来源:互联网 发布:仿糗事百科源码 编辑:程序博客网 时间:2024/06/07 04:58
DOM有三种形式,标准DOM、HTML DOM、CSS DOM,大部分进行了封装,然而jQuery中并不需要深刻理解它们。
其中最重要的DOM操作,就是元素及内容的操作和元素的属性操作。
一、元素及内容操作
Ps:text方法可以自动滤掉html标签直接获得文本内容。同理,当用text方法设置内容时,会自动将html标签转义为普通文本。
二、属性操作
Ps:这里第四个写法是一个带function的写法。这种方式在attr(),html(),text(),val(),is(),filter()中都有应用。
注意其中的function()可以不传参数,可以只传一个参数index,表示当前元素索引号(从0开始),并不断自增;也可以传递两个参数index和value,value表示属性原始的值。
这种写法也并不适用于所有方法,比如removeAttr。
三、CSS操作
其中有很多方便的用法。toggleClass()常和动作(比如click)结合,用于样式的切换。
jQuery除了提供核心的css操作方法,还封装了一些特殊功能的css操作方法:
1、width(方法内部自动完成了类型转换,直接获得number类型结果)
width()获取某个元素的长度
width(value)设置某个元素的长度
width(function(index,value) {}) 通过匿名函数设置某个元素的宽度
eg:$('div').width(function(index,value){
return value-500+;
})
2、height
height()获取某个元素的高度
height(value)设置某个元素的高度
height(function(index,value) {}) 通过匿名函数设置某个元素的高度
eg:$('div').height(function(index,value){
return value-500+;
})
3、内外边距和边框尺寸
4、元素偏移方法
四、DOM节点操作
1、创建,插入节点
创建节点→插入节点
下面是几种插入节点的方法:
所谓内部外部,就是在标签的内部还是标签的外部加入内容。
2、包裹节点
Ps:unwrap()方法是从内部往外部取出包裹
wrapAll()方法是将所有元素当做独立体包裹在一起,而wrap()是将每个元素分别包装起来
3、增删节点
复制节点:clone()复制一个节点,但是如果clone(false)或缺省,则不会复制元素的事件处理,如果为true,则会同时复制事件响应。
删除节点:remove(),其中可以简单选择器,特定的删除某些节点(eg:$('div').remove('#id')删除指定id的div),其方法本身返回jQuery对象,因此可
以在加回来,但是其不保留之前所绑定的事件。
detach(),同remove,但是删除之后保留之前所绑定的事件。
清空节点:empty(),清空节点内的内容
替换节点:replaceWith() /replaceAll() 二者效果相同,就是用的时候替换节点和被替换节点位置互换。且被替换之后节点所绑定的事件都消失了。
- jQuery自学教程(三)——DOM操作
- (三)jQuery DOM操作
- jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤)
- (三)jquery操作DOM
- jQuery——入门(三)JQuery DOM操作(核心处理和文档处理)
- jQuery的DOM操作(三)
- Jquery系列(三) DOM操作
- jquery中DOM节点操作(三)
- 锋利的Jquery——学习笔记(三)DOM的操作分类
- DOM(三)——操作技术
- 三、jQuery中的DOM操作
- jQuery——DOM操作
- jQuery——操作DOM
- jQuery自学教程(二)——选择器
- jQuery自学教程(四)——事件
- jQuery自学教程(五)——事件对象
- jQuery自学教程(六)——动画
- jQuery学习(三)---jquery 与 DOM操作
- 黑幕背后的Autorelease
- iOS 运行发现,view随着屏幕的变大整体放大的问题
- ClassNotFound/load XXXX error 的疑问杂症
- android中的动画
- leetcode:Convert Sorted Array to Binary Search Tree
- jQuery自学教程(三)——DOM操作
- 递归与循环的效率问题
- leetcode--Plus One
- javascript--argument&this
- BZOJ_P2324 [ZJOI2011]营救皮卡丘(网络流+最小费用最大流+Floyd)
- Redhat 7.0使用CentOS 7 的Yum 网络源
- Android Wear 8 Using Speakers on Wearables 在手表上面使用扬声器
- Android Shape属性介绍[图文]
- Mongodb 稀疏索引 sparse