jQuery 访问DOM元素操作

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

例1：CSS样式：<input type="button" value="按钮" width="0">
使用如下：

//attr可以获取其width
$("input[type='button']").attr("width", "200px");
console.log($("input[type='button']").attr("width"));  //200px

//prop不可以获取其width
$("input[type='button']").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样式：<input type="button" value="按钮" width="0">
使用如下：

/*一次设置多个属性值*/
//attr可以设置其width
$("input[type='button']").attr({
    width: "100px",
    value: "易安"
});
console.log($("input[type='button']").attr("width"));  //100px

//prop不可以设置其width
$("input[type='button']").prop({
    width: "100px",
    value: "易安"
});
console.log($("input[type='button']").prop("width"));  //0

（2）设置自定义属性
attr prop 均可

例3：CSS样式：<input type="button" value="按钮" width="0">
使用如下：

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样式：<input type="button" value="按钮" width="0">
使用如下：

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样式：<input type="button" value="按钮" width="0">
使用如下：

var btn = $("input[type='button']");
btn.removeProp("data-src");
console.log(btn.prop("data-src"));  //undefined

二、元素内容的操作
1.html()：获取或设置元素的HTML内容
例6：CSS样式：<div id="block"><span>困！</span></div>
使用如下：

console.log($("#block").html());   //<span>困！</span>
$("#block").html("欢迎");

2.text()：获取或设置元素的文本内容
例7：CSS样式：<div id="block"><span>困！</span></div>
使用如下：

console.log($("#block").text());   //困！
$("#block").text("欢迎");

注：html()和text()方法的区别如下：

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

例8：CSS样式：<input type="text" value="请输入..." id="txt">
使用如下：

$("#txt").val("12345");
console.log($("#txt").val());  12345

四、元素样式的操作
1.直接设置元素样式值
（1）css() ：获取或设置元素的样式
语法格式：css(name,value);
其中，name为样式名称，value为样式的值

例9：CSS样式：<input type="text" value="请输入..." id="txt">
使用如下：$("#txt").css("borderColor", "#090a0a"); //设置css样式

（2）同时设置多个样式属性
例10：CSS样式：<input type="text" value="请输入..." id="txt">
使用如下：

$("#txt").css({
    width: "",
    height: ""
});

案例：将rgb值装换为十六进制的值
CSS样式：<input type="text" value="请输入..." id="txt">
使用如下：

$("#txt").css("borderColor", "#090a0a");  //设置css样式
var color = $("#txt").css("borderColor");
var col = (function (c) {
    console.log(c);  //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样式：<input type="text" value="请输入..." id="txt">
使用如下：

$("#btn").addClass("btninfo");  /*添加一个类*/
$("#btn").addClass("btninfo btnlist");  /*添加多个类*/

3.类别切换
toggleClass()：切换不同的元素类别
语法格式：toggleClass(class);
其中，class为类别名称，其功能是当元素中含有名称为class的CSS类别时，删除该类别，否则增加一个该名称的CSS类别，即有则删无则加。

例12：CSS样式：<input type="text" value="请输入..." id="txt">
使用如下：$("#btn").toggleClass("btndata");

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

例13：CSS样式：<input type="text" value="请输入..." id="txt">
使用如下：

$("#btn").removeClass("btndata btnlist");  /*移除类名称*/
$("#btn").removeClass();  /*全部移除*/