1.DOM操作分类

DOM Core

任何一种支持DOM的编程语言都可以使用它，如getElementById()

HTML-DOM

用于处理HTML文档，如document.forms

CSS-DOM

用于操作CSS，如element.style.color=”green”,

2.jQuery中的DOM操作

jQuery对JavaScript中的DOM操作进行了封装，使用起来更简便

样式操作

使用css()为指定的元素设置样式值

$(this).css( "border" ,  "5px  solid  #f5f5f5" );
或
$(this).css( { "border" : "5px solid #f5f5f5" ,  "opacity" : "0.5" } );

**JSON简介** JSON(JavaScript Object Notation)一种轻量级的数据交互格式

var   JSON =   {   名称 : 值 ,  名称 : 值 ,   ….     } ;
// 例如：
var    students  =  {"name"  : "Tom",   "age" : 17 };
var    JSON  =  {
    "students": [
            {"name":"Tom","age":21},
            {"name":"James","age":23}
        ]
    } ;

**JSON的取值** JSON的取值方法：点号表示法来获取

// 获取年龄
var    student  =  {"name"  : "Tom",   "age" : 17 };
alert( student.age );    // 17

// 获取 James的年龄
var   JSON = {
    "students": [
            {"name":"Tom", "age":21},
            {"name":"James", "age":23}
        ]
} ;
alert( JSON.students[1].age );  // 23

追加样式

addClass("class") 或 addClass("class1   class2 .. ")

移除样式

removeClass("class") 或 removeClass("class1   class2 .. ")

属性值操作

HTML代码操作
html()可以对HTML代码进行操作，类似于原生JavaScript中的innerHTML

$("div.left").html();    
或
$("div.left").html("<div class='content'>…</div>");

文本操作
text()可以获取或设置元素的文本内容

$("div.left").text();
或
$("div.left").text("<div class='content'>…</div>");

value值操作
val()可以获取或设置元素的value属性值

$(input).val();      // 获取value值
或
$(input).val("值"); // 设置value值

节点操作

jQuery中节点操作主要分为：
查找节点
创建节点
插入节点
删除节点
替换节点
复制节点
创建节点元素
工厂函数 $()用于获取或创建节点$ (selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点$ (html)：使用HTML字符串创建jQuery节点

var $newNode2=$(" <li  title= '标题为千与千寻' >千与千寻</li> ");

插入子节点
元素内部插入子节点
这里写图片描述
插入同辈节点
元素外部插入同辈节点

替换节点
replaceWith()和replaceAll()用于替换节点

//HTML 代码
<div class="container">
     <div class="inner first">Hello</div>
     <div class="inner second">And</div>
     <div class="inner third">Goodbye</div> 
</div>

//jQuery代码
$('.third').replaceWith($('.first'));

//结果
<div class="container"> 
<div class="inner second">And</div> 
<div class="inner first">Hello</div>
 </div>

复制节点
clone()用于复制节点
$(A).clone(true).appendTo(B);
注意：clone()有个副作用就是会复制id，要么避免对有id的元素克隆，要么使用class代替id的作用
删除节点
jQuery提供了三种删除节点的方法
remove()：删除整个节点
detach()：删除整个节点，保留元素的绑定事件、附加的数据
empty()：清空节点内容

//HTML代码
<p>
    Hello, <span>Person</span>
    <a href="#">and person</a>
</p>
// jQuery代码
$("p"). empty();
//结果
<p></p>

节点属性操作

attr()获取或设置匹配元素的属性值

// 获取元素的某属性的值
$(selector).attr("属性名");
//设置元素的属性值
$(selector).attr("属性名","值"  );  // 设置一个属性值
$(selector).attr( { "属性1" : "值1"  ,  "属性2" : "值2" } );  // 设置多个属性值

removeAttr()匹配的元素中删除一个属性

$(selector).removeAttr( "属性名称" );

节点遍历

遍历子元素
children()方法可以用来获取元素的所有子元素
$(“body”).children()
遍历同辈元素
jQuery可以获取紧邻其后、紧邻其前和位于
该元素前与后的所有同辈元素
这里写图片描述
遍历前辈元素
jQuery中可以遍历前辈元素，方法如下：
parent()：获取元素的父级元素
parents()：获取元素的祖先元素
其他方法：
jQuery遍历 – each()
以每一个匹配的元素作为上下文来执行一个函数

 $("img").each(function(i){ 
        this.src = "test" + i + ".jpg";
 });

查找方法 – find()
搜索所有与指定表达式匹配的元素

$(“p”).find(“span”);   // 在所有p元素的后代节点中查找span元素

CSS-DOM操作

除css()外，还有获取和设置元素高度、宽度、相对位置等的样式操作方法
这里写图片描述

3. jQuery的事件

jQuery事件是对JavaScript事件的封装，常用事件分类如下：
基础事件
window事件
鼠标事件
键盘事件
表单事件
复合事件是多个事件的组合
鼠标光标悬停
鼠标连续点击

鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：
这里写图片描述

键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有
这里写图片描述

表单事件

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件
表单的提交事件
这里写图片描述

事件绑定

bind()方法 - 事件绑定

$(selector).bind(  type [, data] ,  fn  )
//例如：
$("#btn").bind( "click" , fn );
$("#btn").bind( "click  dblclick" , fn );
$("#btn").bind( {
    click : function() { },
    mouseover : function() { } 
} );

unbind()方法 – 解除事件绑定

$(selector). unbind(   )
//例如：
$("# btn"). unbind()
$("# btn"). unbind( "click" )
$("# btn"). unbind( "click" ,  handler );

on()方法 - 事件绑定

$(selector).on(  events  [, selector] [, data] ,  fn  )
//例如：
$("#form").on(  "click" ,  ".btn" , {} ,  fn  );

off()方法 – 解除事件绑定

$(selector). off(  events,   [selector],   [handler]  )
$(selector). off(  events,   [selector]  )
$(selector). off(  events )
$(selector). off()

注意：建议用on()方法绑定事件，效率更高

鼠标光标悬停事件

hover(fn1,fn2)方法
相当于mouseover与mouseout事件的组合

//鼠标在父级菜单移入移出，子菜单隐藏与显示
$("#parentMenu").hover( function() {
        $("#childMenu").css("display","block");  //mouseover
     },
     function() {
        $("#childMenu").css("display","none");  // mouseout
     }
);

鼠标连续click事件

toggle()方法用于模拟鼠标连续click事件

$("body").toggle(
function () { },   // 第1,4,7…次点击时触发
function () { },  // 第2,5,8..次点击时触发
function () { }   // 第3,6,9…次点击时触发
);

4，jQuery的动画效果

jQuery提供了很多动画效果，如：
控制元素显示与隐藏
控制元素淡入淡出
改变元素高度

显示及隐藏元素

show([duration][,complete]) 
hide([duration][,complete])
$(".tipsbox").show("slow");

注意：显示速度可以取如下值：毫秒（如1000）、slow、normal、fast

淡入淡出效果

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果

$("input[name=fadein_btn]").click(function(){
        $("img").fadeIn("slow");
});
$("input[name=fadeout_btn]").click(function(){
        $("img").fadeOut(1000);
});

切换元素可见状态

toggle()除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态

$("li:gt(5):not(:last)").toggle();

改变元素的高度

slideDown() 可以使元素逐步延伸显示
slideUp()则使元素逐步缩短直至隐藏

$("h2").click(function(){
        $(".txt").slideUp("slow");
        $(".txt").slideDown("slow");
});

自定义动画

animate( )方法用于创建自定义动画的函数

$(selector).animate(  params  [, speed] [,easing] [,fn]  );

params:规定产生动画效果的CSS样式和值
speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”
fn:在动画完成时执行的函数，每个元素执行一次

jQuery基础知识总结（二）