jquery对dom操作的一系列方法总结

一.dom对象和jq对象

1.对象含义

• dom对象:js方法获取元素,将dom对象存储在变量中
• jq对象:jq方法获取元素的jq对象,将jq对象存储在变量中
• 相互之间不能使用另外一个对象的任何属性和方法

2.相互之间的转化

• a.jq转为dom:
  • get([index])方法:不带参数时,返回一个dom对象的数组; 带参数时,返回第(index+1)个元素的dom对象(索引从0开始);
  • [index]:直接通过索引
• b.dom转为jq:
  $(dom对象):只需用$()将dom对象包装起来

3.this:表示dom对象;事件方法中表示事件源.

$(selector),$(dom),$(html)

二.jq中的dom操作

对元素属性,内容,值和CSS样式的操作
如何创建节点,插入节点,复制节点,删除节点和遍历节点

1. 元素修改:

   • a.元素样式

     css() -- 增加style属性值 css({name:value,name:value}),css(name,value)
     addClass() -- 增加css类(class属性值),多个类用空格分隔(保留了原有的类别)
     removeClass() -- 删除类别,没参数时,删除所有类样式
     toggleClass() -- 类样式切换(增加/删除类别),检测是否有该类别

   • b.元素内容及value值

     html() -- 获取第一个匹配元素
     html(content) -- 设置所有匹配的元素
     text() -- 获取所有匹配的元素的文本内容
     text(content) -- 设置所有匹配的元素的文本内容
     val([val]) -- 获取或设置元素的值

   • c.元素属性

     attr() --attr({name:value,name:value}),attr(name,value),attr(name),attr(name,function(){})
     prop() -- 当属性值为布尔型时,如checked,selected
     removeAttr(name) -- 删除属性

2. 元素节点

   • a.元素创建

     $(html) -- 动态创建页面元素

   • b.元素插入

     append() -- A内部附加B
     prepend() -- A内部前置附加B
     after() -- A之后插入B
     before() -- A之前插入B

   • c.元素替换

     replaceWith(content) -- 用括号中内容替换jq对象
     replaceAll(selector) -- jq对象去替换括号中的元素

   • d.元素复制

     clone([true]) -- 带true参数时,元素全部行为也会复制

   • e.元素删除

     remove() -- 删除节点
     empty() -- 清空节点的html内容,不删除自身节点

3. 元素遍历

   each(callback) -- 先获取匹配元素的集合,在遍历
   $.each(obj,callback) -- 全局的,obj为遍历对象