JQuery DOM操作
2015-12-31 10:11
549 查看
创建节点
1.创建元素
DOM方式:var div = document.createElement("div"); //创建div元素
document.body.appendChild(div); //将其添加到body元素下
JQuery方式:
var $div = $("<div></div>");
$("body").append($div);
2.输入文本
DOM方式:var div = document.createElement("div");
var txt = document.createTxtNode("test"); //创建文本节点
div.appendChild(txt);
document.body.appendChild(div);
JQuery方式:
var $div = $("<div>test</div>");
$("body").append($div);
3.设置属性
DOM方式:var div = document.createElement("div");
var txt = document.createTxtNode("test");
div.appendChild(txt);
document.body.appendChild(div);
div.setAttribute("title","我的标题"); //为div元素定义title属性
JQuery方式:
var $div = $("<div title='我的标题'>test</div>");
$("body").append($div);
插入内容
1.内部插入
append() 向元素最后面追加内容appendTo() 颠倒了append()的用法,$(A).append(B)与$(B).appendTo(A)是等价的
prepend() 向元素最前面插入内容
prependTo() 颠倒了prependTo()的用法,$(A).prepend(B)与$(B).prependTo(A)是等价的
2.外部插入
after(content)或after(function(index)) 在元素之后插入内容before(content)或before(function(index)) 在元素之前插入内容
insertAfter(target) 与after功能相同,用法相反
insertBefore(target) 与before功能相同,用法相反
删除内容
remove([selector]) 删除元素以及其包含的所有内容,不可恢复empty() 删除其包含的内容,不删除当前元素
detach([expr]) 删除元素以及其包含的所有内容,但保留了数据、事件等,可恢复
克隆内容
clone([withDataAndEvents])或clone([withDataAndEvents],[deepWithDataAndEvents]) withDataAndEvents是一个Boolean值,设置是否复制事件处理函数等数据;deepWithDataAndEvents也是一个Boolean值,设置是否对事件处理函数和克隆元素的所有子元素的数据进行复制。替换内容
replaceWith(newContent)或replaceWith(function) newContent表示用来插入的内容,可以是HTML字符串、DOM元素或JQuery对象;function返回HTML字符串,表示用来替换的内容。replaceAll(selector) selector表示JQuery选择器字符串,用于查找所要被替换的元素,与replaceWith实现的结果一致,但行为方式相反,$A.replaceAll($B)等同于$B.replaceWith($A)。
包裹内容
1.外包
wrap(wrappingElement) wrappingElement表示一个HTML片段、选择器表达式、JQuery对象或DOM对象,用来包在匹配元素的外层。wrap(wrappingFunction) wrappingFunction表示一个用来包裹元素的回调函数
2.内包
wrapInner(wrappingElement)wrapInner(wrappingFunction)
3.总包
wrapAll(wrappingElement)4.卸包
unwrap 将匹配元素的父级元素删除,保留自身(及兄弟元素,若存在)在原来的位置属性操作
1.设置属性
prop(propertyName,value) 为匹配元素设置一个属性prop(map) 为匹配元素设置多个属性,以{key:value}形式进行定义
prop(propertyName,function(index,oldPropertyValue)) function用来设置返回值的函数,接收到集合中的元素和属性的值作为参数旧的索引位置,函数中,this指的是当前元素。
说明:大多数情况下,prop()应该用于设置disabled和checked属性值。
attr(attributeName,value) 为匹配元素设置一个属性
attr(map) 为匹配元素设置多个属性,以{key:value}形式进行定义
attr(attributeName,function(index,attr)) function用来设置返回值的函数,接收到集合中的元素和属性的值作为参数旧的索引位置,函数中,this指的是当前元素。
2.访问属性
prop(propertyName)attr(attributeName)
说明:检索或更改DOM使用prop(),获取一个字符串值使用attr()。
3.删除属性
removeProp(propertyName)removeAttr(attributeName)
类操作
1.添加类样式
addClass(className) 为元素追加一个或多个(空格隔开)样式assClass(function(index,class)) function返回一个或多个用空格隔开的要增加的样式名,能够接收元素的索引位置和元素旧的样式名作为参数。
2.删除类样式
removeClass([className])removeClass(function(index,class))
3.切换类样式
toggleClass(className) 切换一个或多个(空格隔开)类样式toggleClass(className,switch) switch表示添加或删除的boolean值
toggleClass(function(index,class),[switch]) function返回一个或多个用空格隔开的用来切换的样式名,能够接收元素的索引位置和元素旧的样式名作为参数。
4.判断样式
hasClass(className) 判断元素是否包含指定的类样式读写文本和值
1.读写HTML
html() 读取指定节点下的所有HTML结构html(htmlString) 写入HTML字符串,同时覆盖该节点原来包含的内容
html(function(index,html)) function返回要设置的HTML内容,能够接收元素的索引位置和元素旧的HTML作为参数。
2.读写文本
text()读取指定节点下所有文本内容
text(textString)
写入文本字符串,同时覆盖该节点原来包含的内容
text(function(index,text))
function返回要设置的文本内容,能够接收元素的索引位置和元素旧的
cc95
文本值作为参数。
3.读写值
val()读取指定表单的值
val(value) 向指定表单写入值
val(function(index,value)) function返回要设置的值
样式表操作
1.读写CSS样式
css(propertyName) 读取指定CSS样式css(propertyName,value) 为指定元素设置CSS样式
css(propertyName,function(index,value)) function返回要设置的CSS样式
css(map) 以名值对(如{name:"value"})为元素设置CSS样式
2.绝对定位
绝对定位是指指定元素距离浏览器窗口左上角的偏移距离offset() 读,返回一个包含top(顶部偏移)和left(左侧偏移)属性的对象
offset(coordinates) 写,coordinates是一个包含top(顶部偏移)和left(左侧偏移)属性的对象
offset(function(index,coords)) 写,function返回一个包含top(顶部偏移)和left(左侧偏移)属性的对象
3.相对定位
相对定位是指指定元素距离最近父级元素左上角的偏移位置position()
返回一个包含top(顶部偏移)和left(左侧偏移)属性的对象
4.设置大小
width()width(value)
width(function(index,width))
height()
height(value)
height(function(index,height))
此外,还有innerWidth(),innerHeight(),outerWidth(),outerHeight()
5.访问文档树
基本遍历方法children() 获取当前元素所包含的的所有子元素
next() 获取当前元素相邻的下一个同级元素
prev() 获取当前元素相邻的上一个同级元素
parent() 获取当前元素的父元素
相关文章推荐
- 使用jquery+css实现更多+收起的功能
- 如何在一个页面上让多个jQuery版本共存
- jQuery语法小结(超实用)
- 一个好用的jquery树形插件zTree
- jQuery实现简单的图片查看器
- php+jQuery+Ajax实现点赞效果的方法(附源码下载)
- jQuery实现简单的图片查看器
- jQuery语法小结(超实用)
- jQuery动画效果相关方法实例分析
- jQuery动画显示和隐藏效果实例演示(附demo源码下载)
- jQuery操作基本控件方法实例分析
- jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
- jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
- jQuery实现的超简单点赞效果实例分析
- jQuery+ajax实现文章点赞功能的方法
- 基础 jQuery 百例
- jquery选择器
- jquery文档就绪函数
- jQuery库与其它冲突问题
- JQuery以JSON方式提交数据到服务端