今天主要講解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>