码迷,mamicode.com
首页 > 其他好文 > 详细

DOM操作

时间:2015-05-12 08:04:12      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:

什么是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):前面的内容替换后面的节点

DOM操作

标签:

原文地址:http://www.cnblogs.com/HuangWj/p/4492197.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!