jQuery的DOM操作

一、操作元素属性
1.获取元素的属性
attr() prop()

例1：CSS样式：
使用如下：

//attr可以获取其width
$("input[type{=}^{\prime }butto{n}^{\prime }]").attr("width","200px");console.log($(“input[type=‘button’]”).attr(“width”)); //200px

//prop不可以获取其width
$("input[type{=}^{\prime }butto{n}^{\prime }]").prop("width","300px");console.log($(“input[type=‘button’]”).prop(“width”)); //0
2.设置元素的属性
语法格式：attr(key,value);
其中，key表示属性的名称，value表示属性的值。如果要设置多个属性，也可通过attr()方法实现，其语法格式：attr({key0:value0,key1:value1})
(1)设置其自带属性
attr prop 有可有不可

例2：CSS样式：
使用如下：

/一次设置多个属性值/
//attr可以设置其width
$("input[type{=}^{\prime }butto{n}^{\prime }]").attr(width:"100px",value:"易安");console.log($(“input[type=‘button’]”).attr(“width”)); //100px

//prop不可以设置其width
$("input[type{=}^{\prime }butto{n}^{\prime }]").prop(width:"100px",value:"易安");console.log($(“input[type=‘button’]”).prop(“width”)); //0
（2）设置自定义属性
attr prop 均可

例3：CSS样式：
使用如下：

var btn = $(“input[type=‘button’]”);
btn.attr(“data-src”, “./image/1.jpg”);
console.log(btn.attr(“data-src”)); //./image/1.jpg

btn.prop(“data-src”, “./image/1.jpg”);
console.log(btn.prop(“data-src”)); //./image/1.jpg
3.删除元素的属性
语法格式：removeAttr(name);
其中，name为元素属性的名称
（1）removeAttr() 可以移除自定义与自带属性
例4：CSS样式：
使用如下：

var btn = $(“input[type=‘button’]”);
btn.removeAttr(“data-src”);
console.log(btn.attr(“data-src”)); //undefined
btn.removeAttr(“value”);
console.log(btn.attr(“value”)); //undefined
（2）removeProp()只能移除自定义属性
例5：CSS样式：
使用如下：

var btn = $("input[type{=}^{\prime }butto{n}^{\prime }]");btn.removeProp("data-src");console.log(btn.prop("data-src"));//undefined二、元素内容的操作1.html()：获取或设置元素的HTML内容例6：CSS样式：<divid="block"><span>困！</span></div>使用如下：console.log($("#block").html()); //困！
$("#block").html(“欢迎”);
2.text()：获取或设置元素的文本内容
例7：CSS样式：

困！

使用如下：

console.log($("#block").text());
$("#block").text(“欢迎”);
注：html()和text()方法的区别如下：

三、操作表单元素的值
val()：获取或设置表单元素的value值

例8：CSS样式：
使用如下：

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲txt").val("1234…("#txt").val()); 12345
四、元素样式的操作
1.直接设置元素样式值
（1）css() ：获取或设置元素的样式
语法格式：css(name,value);
其中，name为样式名称，value为样式的值

例9：CSS样式：
使用如下：$("#txt").css(“borderColor”, “#090a0a”); //设置css样式

（2）同时设置多个样式属性
例10：CSS样式：
使用如下：

$("#txt").css({
width: “”,
height: “”
});
案例：将rgb值装换为十六进制的值
CSS样式：
使用如下：

$("#txt").css(“borderColor”, “#090a0a”); //设置css样式
var color = $("#txt").css(“borderColor”);
var col = (function © {
console.log©; //rgb(9, 10, 10)
var a = c.split(","); //a=[“rgb(9”, " 10", " 10)"]
var r = parseInt(a[0].split("(")[1]); //9
var g = parseInt(a[1]); //10
var b = parseInt(a[2].split(")")[0]); //10
return “#” + ((r << 16) + (g << 8) + b).toString(16);
})(color);
console.log(col); //#90a0a
2.增加css类别
（1）addClass()：增加元素类别名称
语法格式：addClass(class);
其中，class为类别的名称
（2）可增加多个类别的名称，需用空格将其隔开
语法格式：addClass(class0 class1 …);
例11：CSS样式：
使用如下：

$("#btn").addClass(“btninfo”); /添加一个类/
$("#btn").addClass(“btninfo btnlist”); /添加多个类/
1
2
3.类别切换
toggleClass()：切换不同的元素类别
语法格式：toggleClass(class);
其中，class为类别名称，其功能是当元素中含有名称为class的CSS类别时，删除该类别，否则增加一个该名称的CSS类别，即有则删无则加。

例12：CSS样式：
使用如下：$("#btn").toggleClass(“btndata”);

4.删除类别
removeClass()：删除类别
语法格式：removeClass(class);
其中，class为类别名称，该名称是可选项，当选该名称时，则删除名称为class的类别， 多个类别时用空格隔开；若不选名称，则全部移除

例13：CSS样式：
使用如下：

$("#btn").removeClass(“btndata btnlist”); /移除类名称/