jQuery操控DOM元素-访问页面的元素
访问页面的元素
访问页面时需要与页面中的元素进行交互式的操作，在操作中元素的访问时最频繁，最常见的。主要包括对元素属性、内容、值、css的操作
元素属性操作
在jQuery中可以对元素的属性执行获取、设置和删除的操作。通过attr方法可以对元素属性执行获取和设置操作，而removeAttr方法则可以轻松删除某一指定的属性
获取元素的属性
语法--- attr(name);
获取img标签的src属性,并弹出alert
<script type="text/javascript">
$(function(){
var im=$("img").attr("src");
alert(im); //img/bt1.jpg
});
</script>
<div id="wrapper">
<img src="img/bt1.jpg" />
</div>
设置元素的属性
attr方法不仅可以获取元素的属性，也可以设置元素的属性
语法--- attr(key,value);
其中key表示属性的名称，value标书属性的值，设置多个属性的值，也可以通过attr实现
语法--- attr({key0:value0,key1:value1});
鼠标经过改变图片，在鼠标经过的时候，通过attr方法设置图片的src值实现
<script type="text/javascript">
$(function(){
var im=$("img");
im.mouseover(function(){
im.attr("src","img/bt2.jpg");
});
});
</script>
<div id="wrapper">
<img src="img/bt1.jpg" />
</div>
删除元素的属性
jQuery中，使用removeAttr方法可以删除元素的属性
语法--- removeAttr(name);
鼠标经过删除img标签的src属性，鼠标经过之后图片消失
<script type="text/javascript">
$(function(){
var im=$("img");
im.mouseover(function(){
im.removeAttr("src");
});
});
</script>
<div id="wrapper">
<img src="img/bt1.jpg" />
</div>
元素内容操作
在jQuery中操作元素内容的方法包括html方法和text方法
获取或设置元素的html内容
html();
无参数，用于获取元素的html内容
*获取id="wrapper"标签的html内容
<script type="text/javascript">
$(function() {
var htm = $("#wrapper");
var htmn = htm.html();
alert(htmn);
//<img src="img/bt1.jpg" />
});
</script>
<div id="wrapper">
<img src="img/bt1.jpg" />
</div>
html(val);
有参数，用于设置元素html内容
鼠标经过改变id="wrapper"标签的html内容
<script type="text/javascript">
$(function() {
var htm = $("#wrapper");
htm.mouseover(function(){
htm.html("<img src='img/bt2.jpg' />");
});
});
</script>
<div id="wrapper">
<img src="img/bt1.jpg" />
</div>
获取或设置元素的文本内容
text();
不带参数，用于获取元素的文本内容
获取p元素的文本内容
<script type="text/javascript">
$(function() {
var p=$("#wrapper p");
alert(p.text());
//元素的文本内容
});
</script>
<div id="wrapper">
<img src="img/bt1.jpg" />
<p>元素的文本内容</p>
</div>
text(val);
带参数，用于设置元素的文本内容
鼠标经过，设置p元素的文本内容
<script type="text/javascript">
$(function() {
var p=$("#wrapper p");
p.mouseover(function(){
p.text("重新设置的文本内容");
});
//元素的文本内容
});
</script>
<div id="wrapper">
<img src="img/bt1.jpg" />
<p>元素的文本内容</p>
</div>
获取或设置元素值
在jQuery中，要获取或设置元素的值是通过val方法实现的,改方法通常用于设置获取表单的值
语法--- val(val);
如果val方法不带参数，则是获取元素的值，如果val方法带参数，则是设置元素的值
另外val方法可以获取select标记中的多个选项值，其语法格式如下：
val.join(",");
获取元素的值
<script type="text/javascript">
$(function() {
var s = $("select").val();
alert(s);
//m1
});
</script>
<div id="wrapper">
xuanxiang:
<select>
<option value="m1">1</option>
<option value="m2">2</option>
<option value="m3">3</option>
<option value="m4">4</option>
<option value="m5">5</option>
</select>
</div>
点击按钮重新设置元素的值
<script type="text/javascript">
$(function() {
$("input").click(function(){
$("select").val("m2");
});
});
</script>
<div id="wrapper">
xuanxiang:
<select>
<option value="m1">1</option>
<option value="m2">2</option>
<option value="m3">3</option>
<option value="m4">4</option>
<option value="m5">5</option>
</select>
<input type="button" value="点击切换" />
</div>
元素样式操作
元素样式的操作包含：直接设置样式、增加css样式表、切换样式表和删除样式表
直接设置元素样式
在jQuery中，通过css方法为某各指定的元素设置样式，语法如下：
css(name,value);
如果要同时改变多个样式，语法：css({name1:value1,name2:value2,...})
鼠标经过文字，改变文字的颜色为红色
<script type="text/javascript">
$(function() {
$("p").mouseover(function(){
$(this).css("color","red");
});
});
</script>
<div id="wrapper">
<p class="p">颜色改变</p>
</div>
增加css样式表
语法：addClass(class);
如果需要增加多个样式表，用空格隔开
样式切换
通过toggleClass方法切换样式，语法：toggleClass(class);
这个函数的功能是：当元素中含有名称为class的样式表时，删除该样式，否则增加该类
toggleClass方法实现音乐图标的点击切换打开和关闭
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>test</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<style type="text/css">
.img{
width:100px;
height:100px;
}
.playon{
background:url(img/playon.png) center center no-repeat;
background-size:contain;
}
.playoff{
background:url(img/playoff.png) center center no-repeat;
background-size:contain;
}
</style>
</head>
<body>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
$(".img").click(function(){
$(this).toggleClass("playoff");
});
});
</script>
<div id="wrapper">
<div class="img playon">
</div>
</div>
</body>
</html>
删除样式表
语法：removeClass(class);
如果需要删除多个样式表，用空格隔开
