<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Through the Looking-Glass</title>
<link rel="stylesheet" type="text/css" href="/static/css/01.css">
<script src="/static/js/jquery.js"></script>
<script src="/static/js/01.js"></script>
</head>
<body>
<div id="switcher" class="switcher">
<h3>Style Switcher</h3>
<button id="switcher-default">
Default
</button>
<button id="switcher-narrow">
Narrow Column
</button>
<button id="switcher-large">
Large Print
</button>
</div>
<h2>Shakespeare's Plays</h2>
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
<td>1596</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
<td>1599</td>
</tr>
</table>
<h2>Shakespeare's Sonnets</h2>
<table>
<tr>
<td>The Fair Youth</td>
<td>1–126</td>
</tr>
<tr>
<td>The Dark Lady</td>
<td>127–152</td>
</tr>
<tr>
<td>The Rival Poet</td>
<td>78–86</td>
</tr>
</table>
</body>
</html>
body.large{
font-size: 1.5em;
}
body.narrow{
font-size: 0.5em;
}
.selected {
font-weight: bold;
}
.hidden {
display: none;
}
.hover {
cursor: pointer;
background-color: #afa;
}$(document).ready(function() {
$('#switcher-default').addClass('selected');
$('#switcher button').on('click', function(){
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
$('body').removeClass();
});
$('#switcher-large').on('click', function(){
$('body').addClass('large');
});
$('#switcher-narrow').on('click', function(){
$('body').addClass('narrow');
});
$('#switcher h3')
.click(function(){
$('#switcher button').toggleClass('hidden');
})
.hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
});1.$()是元素选择器，返回html页面中的一个DOM元素，从而对其进行操作。#表示ID选择器，.表示class选择器，如果什么也不加，则是标签，比如$('div')选中所有的div标签。
当然还有一些高级用法，比如
$('#switcher h3')表示取父元素的所有匹配的后代（儿子，孙子全都有），首先通过ID取得一个元素div，后面的空格加h3表示这个div下的所有h3子元素。
而如果是“>”，则只是表示匹配的儿子元素，不包括再下面的。
2.$(document).ready(function(){
});这是写jquery用到的的第一个函数，在浏览器加载完DOM后，这个函数就会执行。也就是构建一棵DOM树，得到页面的所有DOM元素就可以。如果图片还没加载，此时也可以访问jquery，而window.onload则要等页面全部加载完才会执行，即所关联的全部文件，包括图片。
3.添加和删除样式使用addClass和removeClass函数即可。
4.添加事件，先选中元素，再添加事件，参数是一个要执行的函数，比如单击，就是click(function(){})。jquery使用的是冒泡机制，有的时候要避免冒泡，可能要使用event对象的target属性，确保只在触发选中的元素时才实行事件。在事件的函数中添加event参数，用if(event.target == this)检测即可。
标签：jquery,function,hover,入门,元素,switcher,例子,click,addClass From： https://blog.51cto.com/u_15873544/5844094