文档章节

Jquery-DOM操作

啃不动地大坚果
 啃不动地大坚果
发布于 2017/05/09 22:40
字数 1029
阅读 63
收藏 0

1.创建节点
1-1.创建节点
Jqurey $(html)
1-2.创建文本
Jqurey $("father").append("text")

2.插入节点
2-1.内部插入
append() 向元素内部追加内容 此操作完成后 会删除匹配的append对象
appendTo() 把内容追加到指定的元素中去
prepend() 向前部追加内容
prependTo() 把内容追加到指定的元素中去 作为第一个元素
2-2.外部插入
after() 在后面插入元素
before() 在前面插入元素
insertAfter() 把元素追加到指定的元素后
insertBefore() 把元素追加到指定的元素前

3.删除元素
remove([selector]) detach([expr]) empty()
remove移除元素包括元素上的事件 detach移除元素保留元素上的事件 empty清空当前元素的内容

4.克隆元素
clone([withDataAndEvents])
clone([withDataAndEvents],[deepWithDataAndEvents])
withDataAndEvents 默认false 是否复制事件等
deepWithDataAndEvents 默认false 是否同时复制元素的所有子元素的附加数据和绑定事件

5.替换元素
replaceWith 用选中元素替换原来的元素
replaceAll 用元素替换所有选中元素

6.包裹内容
wrapAll() 总包 将匹配到的所有元素用一个指定元素包裹
wrap() 外包 将匹配到的每个元素用一个指定元素包裹
wrapInner() 内包 对匹配到的元素的内部元素进行包裹
unwrap() 卸包 去掉匹配到的元素的父元素

7.属性操作
7-1.设置元素
prop(propertyName,value)
prop(map)
prop(propertyName,function(index,oldPropertyValue))
eg: $("button").pop({disabled:true});

attr(attrName,value)
attr(map)
attr(attrName,function(index,attrValue))
eg:$("img").attr("src",function(index){return "img/icon"+index+".png"})

下面的情况一般使用prop
只需要添加属性名,而不添加属性值就会生效的 如disabled
属性值为true/false的属性 如checked selected readonly multiple等

7-2.访问属性
prop(propertyName)
attr(attrName)
取checked值时应使用$(elem).prop("checked")/$(elem).is(":checked")

7-3.删除属性
removeProp(propName)
removeAttr(attrName)

8.类操作
8-1.添加类样式
addClass(className1 classNameN)
addClass(function(index,class))
addClass会在原class后追加新class 不是替换

8-2.删除类样式
removeClass(className1 classNameN)
removeClass(function(index,class))
不指定类名,则全部删除

8-3.切换类样式
toggleClass(className)
toggleClass(className,switch)
toggleClass(function(index,class),[switch])
switch用于判断样式添加还是移除的boolean值 true添加 false移除

8-4.判断样式
hasClass("className") 等同于 is(".className")

9.读写文本和值
9-1.读写HTML
html()
html(htmlString)
html(function(index,html))
html()参数为空时返回该节点的内容 有内容时覆写该节点的内容
9-2.读写文本
text()
text(textString)
text(function(index,text))
text()参数为空时返回该节点的文本内容 有内容时覆写该节点的文本内容
9-3.读写值
val()
val(valString)
val(function(index,val))
text()参数为空时返回该表单元素的值 内容时覆写该表单元素的值

10.样式表操作
10-1.读写CSS样式
css(propertyName)
css(propertyName,value)
css(propertyName,function(index,value))
css(map) map表示属性名值对构成的对象
10-2.绝对定位
offset() 获取元素在当前视口的偏移
offset(coordinates) coordinates表示一个对象 包含top和left属性 用整数指明元素的新顶部和左边坐标
offset(function(index,coords)) 返回包含top和left属性的对象
10-3.相对定位
position()
获取与指定元素距离最近的父级定位元素的相对偏移
即最近的设置了absolute fixed ralative的父元素
如果没找到 则为body元素 这时与绝对定位的值相同
10-4.设置元素大小
width()
width(value)
width(function)
height()
height(value)
height(function)
innerwidth()
innerheight()
outerwidth([true])
outerheight([true])
width()仅仅包括content(内容)
innerWidth()包括content(内容)和padding(补白)
outerWidth()包括content(内容),padding(补白)和border(边框)
outerWidth(true)包括content(内容),padding(补白),border(边框)和margin(边距)

11.访问文档树
children() 获取当前元素包含的所有子元素
next() 获取当前元素相邻的下一个同级元素
prev() 获取当前元素相邻的上一个同级元素
parent() 获取当前元素的父元素
 

© 著作权归作者所有

共有 人打赏支持
上一篇: Jquery-事件处理
下一篇: Jquery-筛选器
啃不动地大坚果
粉丝 6
博文 119
码字总数 153788
作品 0
其它
程序员
私信 提问
dom对象和jQuery对象的区别

1.jQuery对象和DOM对象 在第一次学习Jquery的时候也许大家都不是很清楚Jquery对象和DOM对象两者之间的关系,下面就解释两点,便于对Jquery和Dom加深理解 DOM对象,即是我们用传统的方法(java...

DockOne
2014/07/30
0
0
jQuery零基础入门——(五)操作DOM

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 jQuery强大的选择器,最终目的是...

JandenMa
2018/07/14
0
0
jQuery对象和DOM对象之间的转换实现

本文主要向大家介绍了jQuery对象和DOM对象之间互相转换的方法,其实转换过程十分简单,一起来看看吧。 在讨论jQuery对象和DOM对象的相互交换之前,先约定好定义变量的风格。如果获取的对象是...

IanSun
2015/03/14
0
1
DOM对象与jquery对象的区别

jQuery对象和DOM对象使用说明,需要的朋友可以参考下。 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它...

zwjjap
2015/07/23
0
0
Query对象和DOM对象使用说明

Query对象和DOM对象使用说明,需要的朋友可以参考下。 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它...

谢晓斌!!
2012/10/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

table边框样式

table{ border:0.5px solid #000; border-collapse:collapse; //去除边框间空隙}th,td{ border:0.5px solid #000;}...

学霸猫
28分钟前
2
0
分布式消息通讯Kafka原理分析(二)

本章重点: 1.消息的存储原理2.Partition的副本机制原理3.副本数据同步原理 消息的文件存储机制 通过如 下命令找到对应partition下的日志内容 [root@localhost ~]# ls /tmp/kafka-logs/f...

须臾之余
33分钟前
2
0
Vue Element表单绑定(四)常用操作整理

一、启用回车提交报单操作 在登录页面,使用回车提交表单操作一般是必要的一个操作。在 Element中如何使用呢,示例如下: 来个注意点: 1.button按钮的native-type设置为submit,而不是绑定c...

tianma3798
37分钟前
2
0
《大话数据结构》读后总结(七)

常见的时间复杂度 执行次数 函数阶 非正式术语 12 O(1) 常数阶 2n+3 O(n) 线性阶 3n^2+2n+1 O(n2) 平方阶 5log2n+20 O(logn) 对数阶 2n+3nlog2n+19 O(nlogn) nlogn阶 6n^3+2n^2+3n+4 O(n3) 立...

徐曙辉
39分钟前
2
0
three.js 事件交互

点击查看交互效果 在three.js中,展示的一切内容都是在canvas中绘制的,所以点击事件点击到物体上是无法获取点击对象的,要获取点击的对象要使用RayCaster,用于在三维空间中进行鼠标拾取,原...

tianyawhl
39分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部