标签:
什么是DOM?
DOM,即Document Object Model,对象文本模型,用于方便开发者对HTML结构元素内容进行展示和修改
DOM的三种形式:DOM、HTML DOM、CSS DOM
元素内容的操作
html():获取元素中的HTML内容
html(value):设置元素中的HTML内容
text():获取元素中的文本内容
text():设置元素中的文本内容
val():获取表单中的文本内容
val(value):设置表单中的文本内容
val(array[]):设置表单首选项
元素属性操作
attr(property):获取属性property的值
attr(property,value):设置属性property的值
attr({property1:value1,property2:value2,...}):设置多个属性及属性值
attr(property,function([index][,value]){return result}):设置属性property的值用function返回,index为下标,value为原来的值
removeAttr(property):移除属性property
元素样式操作
css(style):获取css样式值
css(style,value):设置css样式
css(array()):获取多个css样式值,array()标示要获取的样式组成的数组,返回对象数组
each(JQObject,function(index,value){})|JQObject.each(function(index,value){}):遍历对象数组的元素
css({style1:value1,style2:value2,...}):设置多个样式及其值
addClass(class1[ class2 class3...]):添加css类
removeClass(class1[ class2 class3...]):删除css类\
toggleClass(class1[ class2 class3...]):样式之间的切换,默认样式与指定样式的切换
class可用function(index,className,switchBool)返回,控制切换,index表示元素的下标,className表示类名,switchBool表示切换频率。
方法
width():获取样式width的值,返回为number类型
width(value):设置样式width的值
height():获取样式width的值,返回为number类型
height(value):设置样式height的值
innerWidth():获取元素宽度,包含内边距
innerHeight():获取元素高度,包含内边距
outerWidth([true]):获取元素宽度,不使用true时,包含内边距和边框;使用true时,包含内外边距和边框
outerHeight([true]):获取元素高度,不使用true时,包含内边距和边框;使用true时,包含内外边距和边框
元素偏移方法
offset():获取元素相对于视口的偏移位置,返回一个对象,具有left,top,right,bottom属性
position():获取元素相对于父元素的偏移位置,返回一个对象,具有left,top,right,bottom属性
$(window).scrollTop():获取垂直滚动条的位置
$(window).scrollTop(value):设置垂直滚动条的位置
$(window).scrollLeft():获取水平滚动条的位置
$(window).scrollLeft(value):设置水平滚动条的位置
DOM节点操作
创建节点:${‘节点内容‘}
插入节点
内部插入
append(content):向指定元素内部后面插入节点content
append(function(index,html){return content}):想指定元素内部后面插入节点content,index表示节点下标,html表示原本节点内部内容
appendTO(element):将指定元素element移入指定指定元素内部后面
prepend(content):向指定元素内部前面插入节点content
prepend(function(index,html){return content}):想指定元素内部前面插入节点content,index表示节点下标,html表示原本节点内部内容
prependTO(element):将指定元素element移入指定指定元素内部前面
外部插入
after(content):向指定元素外部后面插入节点content
after(function(index,html){return content}):想指定元素外部后面插入节点content,index表示上一节点下标,html表示上一节点内部内容
before(content):向指定元素外部前面插入节点content
before(function(index,html){return content}):想指定元素外部前面插入节点content,index表示下一节点下标,html表示下一节点内部内容
insertAfter(element):将指定元素element移入指定指定元素外部后面
insertBefore(element):将指定元素element移入指定指定元素外部前面
包裹节点:使用字符串代码将指定元素的代码包裹起来
wrap(html):向指定元素包裹一层html代码
wrap(element):向指定元素包裹一层DOM节点
wrap(function(index){return element}):使用匿名函数向指定元素包裹一层自定义内容
unwrap():移除一层指定元素包裹的内容
wrapAll(html):用一层html将所有元素包裹在一起
wrapAll(element):用一层DOM节点将所有元素包裹在一起
wrapInner(html):向指定元素的子内容包裹一层html
wrapInner(element):向指定元素的子内容包裹一层DOM节点
wrapInner(function(index){return element}):使用匿名函数向指定元素的子内容包裹一层自定义内容
节点操作
复制节点:clone([bool]):将节点复制到内存中,可使用 append或appendTo打印出来,若bool值设为true,则事件也会被复制
删除节点:
remove(selector):将节点删除,可用selector更精确删除节点,不保留事件行为
detach(selector):将节点删除,可用selector更精确删除节点,保留事件行为
清空节点:empty():将节点中的子节点和内容清除
替换节点:事件也会被替换
replaceWith(html):后面的内容替换前面的节点
replaceAll(element):前面的内容替换后面的节点
标签:
原文地址:http://www.cnblogs.com/HuangWj/p/4492197.html