This is a heading
This is a paragraph.
This is another paragraph.
图书种类
- 计算机类
- 教材类
- 杂志类
- 文学类
运动
- 篮球
- 足球
- 羽毛球
- 乒乓球
- foo
- bar
<html>
<head>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 设置羽毛球背景色为为橙色
$("#hide").click(function () {
//通过.get()方法获取对象
var e1 = $("ol li").get(2);
//通过.css方法设置对象背景色
$(e1).css("background-color", "orange");
//js设置对象背景色
//e1.style.background = "red";
});
//还原背景色
$("#show").click(function () {
var e1 = $("ol li").get(2);
$(e1).css("background-color", "white");
});
//动态获取元素位置
$("li").click(function() {
alert($(this).index()+1);
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h3>图书种类</h3>
<ul type="circle">
<li >计算机类</li>
<li>教材类</li>
<li>杂志类</li>
<li class = "my_love">文学类</li>
</ul>
<h3>运动</h3>
<ol >
<li>篮球</li>
<li>足球</li>
<li class = "my_love" title="sport">羽毛球</li>
<li class = "my_love" title="sport">乒乓球</li>
</ol>
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
</ul>
<button id="hide" type="button">设置</button>
<button id="show" type="button">还原</button>
</body>
</html>