jQuery操作Dom

jQuery操作Dom

操作样式

css操作样式

//设置单个值
$("#text").css("color","#fff");
//设置多个样式
$("#text").css({
    backgroung:"#00f",
    color:"#fff"
});
//获取样式
$("#text").css("width");

calss操作样式

//添加类
$("#text").addClass("active");
//移出类
$("#text").removeClass("active");
//切换类
$("#text").toggleClass("active");
//判断类
$("#text").hasClass("active");

操作样式

attr

//设置单个属性
$("#text").attr("data-toggle","dropdown");
//设置多个属性
$("#text").attr({
    title:"提示工具",
    "data-toggle":"dropdown"
});
//获取属性
$("#text").attr("title");

prop

对于不二值类型的属性，disabled，selected，checked，只能用prop

$("#j_cbAll").prop("checked", true)

移出某个属性

$("#j_cbAll").removeAttr("active")

三组基本动画

$("#j_cbAll").fadeIn(1000);
$("#j_cbAll").fadeOut(1000);
$("#j_cbAll").fadeToggle(1000);
$("#j_cbAll").show(1000);
$("#j_cbAll").hide(1000);
$("#j_cbAll").slideDown(1000);
$("#j_cbAll").slideUp(1000);
$("#j_cbAll").slidetoggle(1000);

自定义动画

animate(prop,[speed],[swing/linear],[callback])

$("#j_cbAll").stop().animate({scrollTop:0},1000);

//stop()停止动画

操作节点

//创建节点 $("<span></span>")
//添加节点 append appendTo perpend perpendTo after before
//清空节点 empty
//删除节点 remove
//克隆节点 clone
$("<span></span>");
 //在元素后面添加节点
$("#box").append($("p"))
$("p").appendTo($("#box"))
//在元素前面添加元素
$("#box").prepend($("p"))
$("p").prependTo($("#box"))
//做为兄弟元素添加
$("#box").after($("p"))
$("#box").before($("p"))