今天主要讲解Jquery的三大常用DOM属性，如下：
1.addClass()
2.attr()
3.val()
接下来分别对其进行一一讲解：
1.addClass()
1.1语法：.addClass(className)
其中的className可以为一个或多个
作用：为我们所选中的元素添加指定的样式的类名
1.2语法：.addClass(function(index,currentClass))
作用：返回一个或多个使用空格隔开的要添加的样式名，其中的index参数表示当前元素的位置
记住一点：这个方法只是添加一个样式类名，不会替换之前已经存在的样式类名
<!DOCTYPE html>
<html>
<head>
<style>
h3{ margin:10px;
font-size:16ps;
}
.colors{
background-color:green;
}
.sizes{
font-size:200px;
}
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<h3>I am best in the world</h3>
<script>
$("h3").addClass("colors sizes");
</script>
</body>
</html>
调用addClass方法之前
调用addClass（）方法之后
以上就是添加样式之后的区别
这个方法，通常会和.removeClass一起使用，除去之前的样式，使用现在添加的样式
<!DOCTYPE html>
<html>
<head>
<style>
h3{ margin:10px;
font-size:16ps;
color:yellow;
}
.colors{
background:green;
}
.sizes{
font-size:200px;
background-color:black;
}
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<h3>I am best</h3>
<script>
$("h3").addClass("colors sizes").removeClass("sizes");
</script>
</body>
</html>
执行上面这段代码可以发现，只留下了colors的样式，Sizes的样式被移除了
2.attr()
2.1语法：
$(selector).attr(attribute)
作用：返回属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("图片宽度: " + $("img").attr("width"));
});
});
</script>
</head>
<body>
<img src="imgk.jpg" alt="Pulpit Rock" width="200" height="200"
<br>
<button>返回图片的宽度</button>
</body>
</html>
2.2语法：
$(selector).attr(attribute,value)
作用：设置属性和值
设置单个值的时候，使用逗号将属性和值分隔开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").attr("width","500");
});
});
</script>
</head>
<body>
<img src="imgk.jpg" alt="Pulpit Rock" width="200" height="200"
<br>
<button>设置图片的宽度为500</button>
</body>
</html>
2.3语法：
$(selector).attr(attribuet,function(index,currentvalue))
作用：使用函数设置属性和值
该function函数其实就是对当前的属性值进行操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").attr("width",function(n,v){
return v-100;
});
});
</script>
</head>
<body>
<img src="imgk.jpg" alt="Pulpit Rock" width="200" height="200"
<br>
<button>将图片的宽度减少100</button>
</body>
</html>
2.4语法：
$(selector).attr({attribute:value,attribute:value...})
作用：设置多个属性和值
设置对个值的时候，使用：赋值，逗号分隔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").attr({width:"600"},{height:"600"});
});
});
</script>
</head>
<body>
<img src="imgk.jpg" alt="Pulpit Rock" width="200" height="200"
<br>
<button>将宽度和高度均设置为600</button>
</body>
</html>
3.val()
该方法根据参数不同有三种：
3.1$(selector).val()
返回第一个匹配元素的value属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(function(){
$("button").click(function(){
alert("返回属性值"+$("input").val());
})
});
</script>
</head>
<body>
<h3>年龄:<input type="text" name="user"></h3>
<button>输入字段，点击，该字段会显示</button>
</body>
</html>
3.2$(selector).val(value)
设置所有匹配元素的value属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(function(){
$("button").click(function(){
$("input").val("yeyeye");
})
});
</script>
</head>
<body>
<h3>年龄:<input type="text" name="user"></h3>
<button>点击</button>
</body>
</html>
3.3$(selector).val(function(index,currentvalue))
通过函数设置value属性
此处的index代表集合中元素的位置
currentvalue代表被选元素的当前值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(function(){
$("button").click(function(){
$("input").val(function(n,c){
return c-10;
});
})
});
</script>
</head>
<body>
<h3>年龄:<input type="text" name="user" value=20></h3>
<button>点击</button>
</body>
</html>