jQuery操作样式

css操作

功能：设置或者修改样式，操作的是style属性（行内样式）。

设置单个样式

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

设置多个样式

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

获取样式

//name:需要获取的样式名称
css(name);
//案例
$("div").css("background-color");

隐式迭代：

  1. 设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
  2. 获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。

class操作

添加类名

//name：需要添加的样式类名，注意参数不要带点.

addClass(name);
//例子,给所有的div添加one的样式。
$("div").addClass("one");
//添加多个class,以空格分开。
$("div").addClass("one two");

移除类名

//name:需要移除的样式类名
removeClass("name");
//例子，移除div中one的样式类名
$("div").removeClass("one");
//移除多个class,以空格分开。
$("div").removeClass("one two");

切换样式类

//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
toggleClass(name);
//例子
$("div").toggleClass("one");
//切换多个class,以空格分开。
$("div").toggleClass("one two");

判断是否有某个类名

//name:用于判断的样式类名，返回值为true false

hasClass(name)
//例子，判断第一个div是否有one的样式类
$("div").hasClass("one");

jQuery操作属性

attr操作

设置单个属性

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

设置多个属性

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

获取属性

//传需要获取的属性名称，返回对应的属性值
attr(name)
//用法举例
var oTitle = $("img").attr("title");
alert(oTitle);

移除属性

//参数：需要移除的属性名，
removeAttr(name);
//用法举例
$("img").removeAttr("title");

prop操作

在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。

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

jQuery动画

jquery提供了三组基本动画，这些动画都是标准的、有规律的效果，jquery还提供了自定义动画的功能。【演示动画例子】

三组基本动画

显示(show)与隐藏(hide),切换(toggle)是一组动画

滑入(slideUp)与滑出(slideDown)与切换(slideToggle)，效果与卷帘门类似

淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)

三组基本动画参数一致。
show([speed], [callback]);
/* 
speed(可选)：动画的执行时间
1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。

callback(可选):执行完动画后执行的回调函数
 */

自定义动画

animate: 自定义动画

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

动画队列与停止动画

在同一个元素上添加多个动画，jQuery会把这些动画放到一个队列中，前面执行完再执行后面的，按照添加顺序依次执行。

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

jQuery节点操作

添加节点

1. father.append(son) 父元素（盒子）里面的末尾添加子元素
2. father.prepend(son) 父元素（盒子）里面的开头添加子元素
3. before() 元素外面的前面添加兄弟元素
4. after() 元素外面的后面添加兄弟元素

5. son.appendTo(father) 子元素添加到父元素的里面的末尾
6. son.prependTo(father) 子元素添加到父元素里面的开头

创建节点

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

清空节点与删除节点

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

$("div").empty();//清空div的所有内容（会清除子元素上绑定的事件）

remove：相比于empty，自身也删除（自杀）

$("div").remove();

克隆节点

作用：复制匹配的元素

/* 
$(selector).clone([param]);
返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。

都是深拷贝相当于：cloneNode(true);
param:是否连带拷贝节点上的事件。
*/