jQuery入门(二)--jQuery操作DOM、jQuery动画

jQuery操作样式

1. CSS操作

功能：设置或者修改样式，操作的是style属性

• 操作单个样式

// name:需要设置的样式名称
// value:对应的样式值
css(name,value);
// 使用案例
$("#one").css("background","gray"); //将背景修改为灰色

• 设置多个样式

// 参数是一个对象，对象中包含了需要设置的样式名和样式值
css(obj);
//使用案例 (key加不加双引号都可以)
$("#one").css({
    "background":"gray",
    "width" : "400px",
    "height" : "200px"
});

• 获取样式

// name ： 需要获取的样式名称
CSS(name);
//案例
$("div").css("backgroundColor");

• 注意只会返回第一个元素对应的样式值。
• 隐式迭代
  • 设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
  • 获取操作的时候，如果是多个元素，那么只会返回第一个元素的值

1.2 CLASS 操作

• 添加样式

// name:需要添加的样式，注意参数不要带点
addClass(name);
// 例子，给所有div添加one的样式
$("div").addClass("one");

• 移除样式类

// name：需要移除的样式类名
removeClass("name");
// 例子，移除div中one样式名
$("div").removeClass("one");

• 判断是否某个样式类

// name:用于判断的演示类名，返回值为true false
hasClass(name);
// 例子，判断第一个div是否有one的样式类
$("div").hasClass("one");

• 切换样式类

// name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
toggleClass(name);
// 例子
$("div").toggleClass("one");

2. attr操作

设置单个属性

// 第一个参数：需要设置的属性名
// 第二个参数：对应的属性值
attr(name,value);
//用法举例
$("img").attr("title","哎呦，不错哦");
$("img").attr("alt","哎呦，不错哦");

设置多个属性

//参数是一个对象，包含了需要设置的属性名和属性值
attr(obj);
//用法举例
$(img).attr({
    title:"哎呦不错哦",
    alt:"哎呦，不错哦",
    style:"opacity:.5"
});

获取属性

// 传入需要获取的属性名称，返回对应的属性值
$(img).attr("title");//返回"哎呦不错哦"

• 注意 操作checked selected disabled 等属性时，建议使用prop()方法。当这些属性未设置值时，用attr方法将返回undefined，而使用prop()将返回false。

//设置属性
$(":checked").prop("checked",true);
// 获取属性
$(":checked").prop("checked"); //返回true或者false

3.jQuery动画

jquery提供了三组基本的动画，这些动画都是标准的，有规律的，jquery还提供了自定义的动画功能

3.1 三组基本的动画

显示(show)与隐藏(hide)是一组动画；滑入(slideUp)与滑出(slideDown)与切换(slideToggle),效果与卷帘门类似，淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)

show([speed1],[callback]);
//speed(可选)：动画的执行时间
  //1.如果不传，就没有动画效果，如果是slide和fade系列，会默认为normal
  //2.毫秒值(比如1000)，动画在1000毫秒执行完成(推荐)
  //3.固定字符串，show("fast")、normal("normal")、fast("slow")，分别相当于200ms、400ms、600ms,如果传其他字符串，则认为normal
//callback(可选)：执行完动画后的回调函数

3.2自定义动画

animate:自定义动画

$(selector).animate({param},[speed],[easing],[callback]);
//{params}:要执行的动画的CSS属性，带数字(必选)
//speed:执行动画的时长(可选)
//easing:执行效果，默认为swing(缓动) 可以是linear(匀速)
//callback:执行完成之后立即执行的回调函数(可选)

3.3动画队列与停止动画

在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等待前面的动画执行完成了才会执行

// stop方法：停止动画效果
stop(clearQueue,jumpToEnd);
// 第一个参数：是否清除队列
// 第二个参数：是否跳转到最终的效果

4.jQuery节点操作

4.1.创建节点

// $(htmlStr)
// htmlStr:html格式的字符串
$("<span>这是一个span元素</span>")

4.2.添加节点

// append appendTo     追加到元素的内部其他子元素之后
// prepend prependTo   追加到元素的内部其他子元素之前
// before              追加到外部的前面
// after               追加到外部的后面

4.3.清空节点与删除节点

empty:清空指定节点的所有元素，自身保留(清理门户)

$("div").empty();// 清空div所有内容(推进使用，会清除子元素绑定的内容，源码)
$("div").html("");//使用方法来清空元素，不推荐使用，会造成泄露，绑定的事件不会清除。

remove:相比于empty,自身也删除(自杀)

$("div").remove();

4.4.克隆节点

作用：复制匹配的元素

//复制$(selector)所匹配到的元素(深度复制) jq只支持深度复制
//cloneNode(true)
// 返回值为复制的新元素，和原来的元素没有任何关系了，即修改元素不会影响到原来的元素。
$(selector).clone(param); //传入的参数为true后false
当传入true时，表示复制元素节点和绑定的事件
当传入false时，表示只复制元素的节点不复制绑定的事件。