jquery里面的dom总结

jquery里面的dom总结

注: this和$(this)
this 是原生态js里面的this获取到的是一个节点
$(this) 获取到的是jQuery对象

  1. 获取值的方法

html() 取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档
text() 取得所有匹配元素的内容.结果是由所有匹配元素包含的文本内容组合起来的文本
val() 既可以获取input里面的值/也可以设置值 如果是下拉菜单 、单选、多选的情况下
val([’’])方法 还可以将他们设置成默认选中
prop('checked',true) 专属input默认选中方法

  1. 操作属性的方法

attr() 获取/设置元素属性的方法 ,还可以设置多个属性 设置多个属性采用对象的模式
removeAttr() 移除属性方法
addClass() 只能向元素添加class值
removeClass() 删除属性方法
toggleClass() 添加样式切换方法 (方法中不加.)
hasClass()/is() 检查元素是否包含指定的类 (方法中不加 .)

注: prop和attr的区别
attr 是从标签里面去搜索属性,可以搜索到自定义的属性和系统内容的属性,但是他的速度比prop慢
prop 是直接从属性集合里面是读取(只能操作内置的一些属性,自定义的不行).他的速度快.当操作系统内容的属性时候推荐使用他,又快又精准

  1. 遍历方法

each() 元素的遍历方法
$().each() 用来操做dom
$.each(arr,function(下标,内容){}) 比如遍历数组

  1. 节点内部插入
	var box=$('<div id="box">你好</div>')	创建一个标签
	append()		插入到标签里面的后面		eg: $('#box').append(a);
	appendTo()		插入到标签里面的后面		eg: a.appendTo($('#box'));
	prepend()		插入到标签里面的前面		eg: $('#box').prepend(a);
	prependTo()		插入到标签里面的前面		eg: a.prependTo( $('#box'));
  1. 节点外部插入
	before()		向指定元素前插入一个同级标签  eg: $('#box').before(a);
	insertBefore()  将指定元素移入指定元素前面	eg: a.insertBefore($('#box'));
	after()			向指定元素后插入一个同级标签  eg: $('#box').after(a);
	insertAfter()   将指定元素移入指定元素后面	eg: a.insertAfter($('#box'));
  1. 包裹节点方法

wrap() 向指定元素包裹一层代码
wrap(element) 向指定标签包裹指定标签
unwrap() 移除指定元素上一层标签
wrapAll() 包裹所有的指定元素上
wrap()和wrapAll()的区别是:
       wrap()方法是把指定标签看成独立体分别包裹
       wrapAll()方法是把指定标签包裹成一个独立体

  1. 操作节点方法

clone(true/false) 克隆节点
如果克隆里面是false ,那么他是不会克隆事件行为的,有true的话就会克隆事件行为
remove() 删除节点
detach() 删除节点
empty() 删除内容保留标签
replaceWith() 替换节点
replaceAll() 替换节点(先创建再删除)

注: detach()和remove()区别
detach() 删除匹配到的元素,但是会保留其添加的事件和数据不会从内存中删掉,当你把这个元素在添加回来之后,他还会有之前的事件和数据
remove() 把匹配到的元素,删除掉,并且会清空其对应内存

注: clone(true,false)
第一个参数 如果是true 可以克隆当前元素的事件
第二个参数 如果是true 会把当前元素的子元素的事件也会被克隆下来

  1. 其他css方法

width() 获取/设置元素的宽度
height() 获取/设置元素的高度
innerWidth() 获取元素的宽,包含内边距(padding)
innerHeight() 获取元素的高,包含内边距(padding)
outerWidth() 获取元素的宽,包含内边距(padding)+边框(border)
outerWidth(true) 获取元素的宽,包含内边距(padding)+边框(border)+外边距(margin)
outerHeight() 获取元素的高,包含内边距(padding)+边框(border)

  1. 元素偏移方法

offset() 元素相对可视窗口的偏移位置
position() 元素相对父元素的偏移位置
scrollTop(val) 获取/设置垂直滚动条的值
scrollLeft(val) 获取/设置横滚动条的值

匿名

发表评论

匿名网友