1、使用html()方法读取或者设置元素的innerHTML
2、使用text()方法读取或者设置元素的innerText
3.1 JQuery的Dom操作
1、使用html()方法读取或者设置元素的innerHTML：
alert($("#btn1").html());
$("#btn1").html("hello");
2、使用text()方法读取或者设置元素的innerText：
alert($("#btn1").text());
$("#btn1").text("hello");
3、使用attr()方法读取或者设置元素的属性，对于JQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。
alert($(“#btn1").attr("href"));
$("#btn1").attr("href", "http://www.cnblogs.com/tangge”);
4、使用 removeAttr 删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。“查看源文件”只能看服务器上下载下来的那份。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Jqeury/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("#link").attr("href", "http://www.baidu.com");
});
$("#btn_move").click(function () {
//获取属性值
//$("#link").attr("href");
//删除属性值
$("#link").removeAttr("href");
});
}
)
</script>
</head>
<body>
<div id="d">
<a id="link">BaiDu</a>
<input id="btn" type="button" value="Set" />
<input id="btn_move" type="button" value="remove" />
</div>
</body>
</html>
案例：图片浏览器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Jqeury/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var link = $("ul a");
link.click(function () {
//this 触发事件的当前a标签 Dom对象
// $(this).attr("href")
$("#i1").attr("src", this.href);
return false;
});
})
</script>
</head>
<body>
<ul id="meinv">
<li><a href="image/1.jpg">美女1</a></li>
<li><a href="image/2.jpg">美女2</a></li>
<li><a href="image/3.jpg">美女3</a></li>
<li><a href="image/4.jpg">美女4</a></li>
</ul>
<br />
<img id="i1" src="image/1.jpg" />
</body>
</html>
对比 开始的【 DOM版：图片浏览器】
节点遍历
1.next()方法用于获取节点之后的挨着的第一个同辈元素，$(".menuitem").next("div")、nextAll()方法用于获取节点之后的所有同辈元素，$(".menuitem").nextAll("div")
3.siblings()方法用于获取所有同辈元素，$(".menuitem").siblings("li")。siblings、next等所有能传递选择器的地方能够使用的语法都和$()语法一样。
//end() 返回上一次包装集被破坏之前的状态
$("#d4").nextAll().css("background-color", "blue").end().css("background-color",
"red");
6.案例：横向菜单，选中的项高亮显示 $(this).css();$(this).siblings().css()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
#menu
{
list-style-type:none;
margin-top:50px;
margin-left:100px;
}
#menu li
{
float:left;
width:100px;
height:30px;
line-height:30px;
background-color:Gray;
text-align:center;
cursor:pointer;
}
</style>
<script src="Jqeury/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#menu li").click (function () {
$(this).css("background-color", "red").siblings().css("background-color", "Gray");
})
})
</script>
</head>
<body>
<ul id="menu">
<li>
首页
</li>
<li>
播客
</li>
<li>
相册
</li>
<li>
关于
</li>
</ul>
</body>
</html>
7.案例：评分控件。prevAll,this,nextAll
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
#rating
{
list-style-type:none;
margin:50px 100px;
}
#rating li
{
float:left;
width:20px;
text-align:center;
cursor:pointer;
}
</style>
<script src="Jqeury/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#rating li").mouseover(function () {
//alert(1);
$(this).prevAll().andSelf().css("color", "red").end().end().nextAll().css("color", "black");
//分开写（上面用链式编程）
//$(this).prevAll().andSelf().css("color", "red");
//$(this).nextAll().css("color", "black");
})
})
</script>
</head>
<body>
<ul id="rating">
<li>
☆
</li>
<li>
☆
</li>
<li>
☆
</li>
<li>
☆
</li>
<li>
☆
</li>
</ul>
</body>
</html>
