jQuery（操作Dom-样式操作）

目录

修改行内样式 添加class样式 class样式移除 判断是否包含class样式 样式切换

Dom core：任何一种支持dom操作的语言都可以操作的对象；

document.getElementById("")

HTML DOM：用于处理html文档；

document.forms;
//获取所有的form表单

CSS DOM：用于 操作css样式的；

element.style.color=red;
//将elment元素的color设置为red

样式操作

css('styleName','styleVaule')：修改行内样式 隐式迭代

function fun1() {
    $("#idName").css("width","200px");
}

css({'styleName1':'styleVaule1','styleName2':'styleVaule2'...})：设置多个属性（注意中间分隔符）

function fun1() {
    $("#idName").css({"width":"200px","height":"200px"});
}

注意：设置多个行内样式属性与设置一个中间的符号容易混淆；

addClass('className')：添加单个class样式（不是行内样式）

function fun1() {
    $("#idName").addClass("c");
}

注意："c"类名称，前面不需要加"."；

addClass(“className1 className2 className3...”)：添加多个class样式

function fun1() {
    $("#idName").addClass("a c");
}

注意：两个类名称用空格隔开；

removeClass(“className“)：单个类名称样式移除

function fun1() {
    $("#idName").removeClass('a');
}

removeClass("className1 className2 className3 ...")：移除多个样式

function fun1() {
    $("#idName").removeClass('a c');
}

注意：两个类名称用空格隔开，与添加多个样式类似；

hasClass("className")：返回boolean类型 ，判断指定元素是否含有某个类样式

function fun1() {
    alert($("#idName").hasClass("a"));
}

hasClass("className1 className2 className3 ...")：判断多个，只要有一个样式它没有则返回false

function fun1() {
    alert($("#idName").hasClass("a c d"));
}
这个例子中指定元素类样式不包含d
所以它返回false

toggleClass("className")：样式切换（当前元素有className样式时，调用removeClass，否则调用addClass）

function fun1() {
    $("#idName").toggleClass("a");
}

toggleClass("className1 className2 ...")：同理。