jQuery操作DOM

下面总结了基本的Dom操作：
jQuery操作元素样式

• css
  
  • css(“name”,”value”)
  • css({“name1”:”value1”,”name2”:”value2”})
  • -

jQuery操作元素类

• 删除类
  
  • removeClass(className)
• 添加类
  
  • addClass(className)
• 切换类
  
  • toggleClass(className)
• 判断类

jQuery动画

• 预制动画
  
  • 对角线动画
    
    • show/hide/toggle
    • show(1000,fn)
  • 滑入滑出动画
    
    • slideDown/slideUp/slideToggle
    • slideDown(1000,fn)
  • 淡入淡出动画
    
    • fadeIn/fadeOut/fadeToggle
    • fadeIn(1000,fn)
    • fadeTo
    • fadeTo(1000,value,fn)
• 自定义动画
  
  • $(selector).animate({params},speed,callback);
• 停止动画
  
  • stop()

jQuery操作节点

• 创建元素
  
  • $(“我是一个span元素”);
• 插入元素
  
  • append
  • 为该元素元素添加最后一个子节点
    
    • 在$(selector)中追加node，$node作为最后一个子节点
      $(selector).append(node);
  • appendTo
  • 作为最后一个子节点添加到指定元素
    
    • 把$(selector)追加到node中去，selector作为node最后一个子节点$(selector).appendTo(node);
  • prepend()
  • 在元素的第一个子元素前面追加内容或节点
    
    • 在$(selector)中追加node，node作为第一个子节点$(selector).prepend(node);
  • after
  • 在元素的后面添加兄弟节点
    
    • 在$(selector)后追加node，node作为selector后一个兄弟节点$(selector).after(node);
  • before
  • 在元素的前面添加兄弟节点
    
    • 在$(selector)前追加node，node作为selector前一个兄弟节点$(selector).before(node);
  • html方法
  • 设置或返回所选元素的html内容
    
    • 设置元素内容
      
      • $(selector).html(“设置的内容”)
    • 清空元素
      
      • $(selector).html(“”)
    • 获取元素内容
      
      • $(selector).html( )
• 清空元素
  
  • empty()
    
    • $(selector).empty();
• 删除元素
  
  • remove()
    
    • $(selector).remove();
• 复制元素
  
  • clone()
    
    • $(selector).clone();

尺寸位置操作
- 获取宽高
- height（）
- width（）
- 获得值是数值
- 位置
- offset()
- 获取：$(selector).offset();//是对象 -设置：$(selector).offset({left:100, top: 150});
- scrollTop()
scrollLeft()

元素属性操作

• attr()
  
  • 操作元素属性
    
    • 获取 $(selector).attr(“title”);
    • 设置 $(selector).attr(“title”, “安妮”);
• prop()
  
  • 设置DOM状态属性

元素内容设置获取

• html()
• text()

操作form表单

• 获得表单元素值
  
  • 设置值 $(selector).val(“具体值”);
  • 获取值 $(selector).val();