jquery在div后增加已有div jquery给div添加内容

1.创建元素

CreateElement()  document对象的一个方法

Jquery语法：$()

案例：$(function(){ // 创建div对象

$(“body”).append($div)     //将div元素添加到文档

})

 

2.创建文本

 CreateTextNode()   DOM的一个方法

 语法：Var $div = $(“<div>DOM</div>”)

案例：  

Var $div = $(“<div>DOM</div>”)   //创建文本

  $(“body”).append($div)

 

3.创建属性

SetAttribute(name（标签名),value(属性值))创建属性节点    DOM的一个方法

Jquery语法：

Var $div = $(“<div title=’盒子’>DOM</div> ”)    

 

4、插入节点

4.1内部插入

• appendChild()      DOM提供的一种方法
• insertBefore()      DOM提供的一种方法

javascript语法:nodeObject.appendChild(newchild)

Jquery语法

• Append()             向当前匹配元素中追加内容
• appendTo()           把所有匹配的元素追加到另外一个指定元素集合中
• Append()   appendTo()  实现效果相同，但方法操作相反
• prepend()            向每个匹配的元素内部前置内容
• prependTo()          把所有匹配的元素前置到另外一个指定的元素集合中
• prepend()    prependTo()    实现效果相同，但方法操作相反
• $(A).prepend(B)与$(B).prependTo(A)等价

 

4.2外部插入

• After()                       向每个匹配的元素之后插入内容
• insertAfter()            把匹配的元素插入到另一个指定的元素集合后面    功能相同用法相反$      
• Before()                   向每个匹配的元素之前插入内容
• insertBefore()         把匹配的元素插入到另一个指定元素集合的前面     功能相同用法相反
• attr() 方法设置或返回被选元素的属性和值。

4.3删除节点

DOM 提供的方法 removeChild(); 删除指定的节点

nodeObject.removeChild(node)

nodeOject     父节点对象

node              要删除的子节点

移出

remove()  对应DOM的removeChild()方法，从DOM中删除所有匹配的元素

清空

empty()   删除匹配的元素集合中所有的子节点

分离

detach()   从DOM中删除所有匹配的元素

案例：

$(“p”).detach

 

4.4复制节点

• DOM使用cloneNode复制节点
• Nodeobject.cloneNode(include_all)
• Include_all为布尔值
• 值为 true复制原节点及子节点，值为flash仅复制节点本身
• 复制的节点需要通过appendChild(),insertBefore(),或replaceChild()方法将他添加到文档中

 

• Clone([withDataAndEvents])
• Clone([withDataAndEvents],[deepWithDataAndEvents])
• withDataAndEvents表示一个布尔值，可以为true和false用来设置是否复制事件处理等数据
• deepWithDataAndEvents表示一个布尔值，默认值为false,用来设置事件处理函数和复制元素的所有子元素的数据是否被复制。

 

• 案例:$(“b”).clone(true).insertAfter(“p”);
•  
•  
• $(selector).toggleClass(function(index,class),switch)
• Class: 必需。规定添加或移除 class 的指定元素。
• 如需规定若干 class，请使用空格来分隔类名
•  
• $(selector).toggleClass(class,switch)
• toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
• 该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
• 不过，通过使用 "switch" 参数，您能够规定只删除或只添加类。

4.5替换节点

• DOM提供的方法 replaceChild()
• nodeObject.replaceChild(new_node,old_node)
• new_node:指定的新节点
• old_node:要替换的旧节点

 

• jquery:
• replaceWith()能够将所有匹配的元素替换成指定的HTML或DOM元素
• replaceWith(newContent)
• newContent表示插入的内容，可以是HTML字符串，DOM元素或Jquery对象
• replaceWith(function)
• function返回HTML字符串，用来替换的内容
•  
• replaceAll()能够用匹配的元素替换掉所有指定参数匹配到的元素
• replaceAll(selector)
• selector表示jquery选择器字符串，用于查找要被替换的元素
• replaceAll()与replaceWith()实现效果相同，操作方法相反如：
• $A.replaceAll($B)等于$B.replaceWith($A)

5.包裹元素

5.1外包

• Wrap()能够在每个匹配的元素外层包上一个HTML元素
• Wrap( wrappingElement)
• wrappingElement：表示一个HTML片段，jquery对象，DOM元素用来包在匹配元素外层
• Wrap( wrappingFunction)
• wrappingFunction：生成一个用来包元素的回调函数

5.2内包

• wrapInner()能够在匹配元素的内容外包裹一层结构
• wrapInner( wrappingElement)
• wrapInner( wrappingFunction )

5.3总包

• wrapAll()能够在所有匹配元素外包一层结构
• wrapAll( wrappingElement)

5.4卸包

• Unwarp()与wrap()功能相反，能够将匹配元素的父级元素删除，保留自身在原来的位置
• Unwrap() 无参数

6、属性操作

61 设置属性

• DOM提供的方法  SetAttribute()设置元素属性
• elementNode.setAttribute(name,value)
• elementNode表示元素节点
• name 表示设置属性名
• value 设置属性值
• jquery：
• prop()为匹配属性设置一个或多个属性，一般获取表单属性
• prop(propertyName ,value)
• propertyName表示要设置的属性名称
• value表示一个值，用来设置属性值
• prop(map)
• map为元素设置多个属性值
• prop(propertyName,function(index,oldPropertyValue))
• function(index,oldpropertyvalue)用来设置返回值的函数，接收到集合中的元素和属性的值作为参数旧的索引位置。在函数中，this关键字指的是当前元素
• attr()设置一个或多个属性，一般用于设置除表单元素属性的其他属性
• .attr(attributeName,value)
• Attr(map)
• Map元素设置多个属性值{属性：值}
• Attr(attributeName,function(index,attr))
• Function(index,attr)用来设置返回值的函数，接收到集合中的元素和属性的值作为参数旧的索引位置

 

6.2访问属性

• DOM提供的方法GetAttribute()方法可以访问属性的值
• ElementNode.getAttibute(name);
• Jquery:attr()和prop()方法传递两个参数时，表示设置属性的值，传递一个参数时表示读取参数的值
• Prop(propertyName)
• propertyName表示要读取属性的名称
• prop()方法只获取jquery对象的第一个匹配元素的属性值，如果元素的一个属性没有设置，或者如果没有匹配的元素，该方法返回undefined。获取每个元素单独的属性值可用循环结构jquery.each()（历遍文档）或.map()来逐一获取
• attr(attributeName)
• attributeName读取属性名称

6.3删除属性

• DOM提供的方法removeAttribute()删除指定属性
• elementNode.removeAttribute(name)
• jquery:
• removeprop():主要删除prop方法设置的属性集.删除特殊属性
• removeprop(propertyName)
• removeattr()删除一般属性

7、操作类

7.1添加类样式

• Jquery:
• addClass()专为元素追加样式
• addclass(className )
• className表示为每个匹配元素所要增加的一个或多个样式名
• addClass(function(index,class))
• function(index,class)函数返回一个或多个用空格隔开要增加的样式名，这个参数函数能够接收元素索引位置和元素旧的样式名做为参数
• addClass()不会替换样式，只是简单的添加样式，添加多个样式是用空格符分开addClass(class1  class2)

7.2删除类样式

• RemoveClass()删除类样式
• RemoveClass([className])
• removeClass(function(index,class))

7.3切换类样式

• toggleClass()开/关定义类样式（切换类样式）
• toggleClass(className)
• toggleClass(className,switch)
• toggleClass(function(index,class),[switch])
• swich表示一个用来判断样式类添加还是移出的Boolean值

7.4判断类样式

• DOM提供的方法hasAttribute()  判断指定属性是否设置
• HasAttribute(name)
• Jquery:
• .hasclass(className)判断元素是否包含指定类的样式
• className表示要查询的样式名

8、操作内容

8.1读写HTML字符串

• DOM为每个元素定义了InnerHTML属性，该属性以字符串的形式读写元素包含HTML结构
• Jquery:
• Html()以字符串的形式读写HTML文档结构
• Html()
• Html( htmlString)
• Html(function(idex,html))

 

8.2读写文本

• Text()
• Text(textString)
• Text(function(index,text))

8.3读写值

• Val()读写指定表单对象包含的值
• Val()
• Val(value)
• Val(function(index,value))

9、操作样式表

9.1读写css样式

• css()读取指定的样式
• css(propertyName)
• css(propertyName,value)
• css(propertyName,function(index,value))
• css(map)
• propertyName表示一个css属性，value表示一个属性值
• map表示属性名值对构成的对象，如{name:value}
• css()方法集获取方法（getter）与设置方法（setter）与一体
• css()方法在设置样式属性时，可接受的参数有两种：
• 传递一个单独的样式属性和值，
• 传递一个由属性名值对（“属性-值对”）构成的映射（map）

9.2绝对定位

• DOM offsetleft 和offsetTop属性可以获取元素最近的偏移位置
• Jquery：
• Offset
• Offset()方法获取匹配元素在当前视口的相对偏移
• Offset()
• Offset(coordinates)
• Offset(function(index,coords))
• 参数coordinates表示一个对象，包含top和left属性

 

9.3相对定位

• Javascript :
• offsetparent获取最近的父级定位元素，如果是父元素则获取他的offsetleft和offsetTop属性
• Jquery:
• Position()可以获取匹配元素的相对偏移位置
• 该方法与offset()方法相同都返回包含两个属性（top和left）
• ,此为精确结果的计算，填充，边框需设置px

9.4控制大小

• Width()
• Height()

10、遍历文档

Children()，Next()，Prev()，Parent()可便利文档中任何元素