代码示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 静态注册 onload 事件
// onload 事件是浏览器解析完页面之后就会自动触发的事件
// <body οnlοad="onloadFun();">
function onclickFun() {
alert("静态注册 onclick 事件");
}
// 动态注册 onclick 事件
window.onload = function () {
// 1 获取标签对象
/*
* document 是 JavaScript 语言提供的一个对象（文档） <br/>
* get 获取
* Element 元素（就是标签）
* By 通过。 。 由。 。 经。 。 。
* Id id 属性
* *
getElementById 通过 id 属性获取标签对象
**/
var btnObj = document.getElementById("btn02");
// alert( btnObj );
// 2 通过标签对象.事件名 = function(){}
btnObj.onclick = function () {
alert("动态注册的 onclick 事件");
}
}
$(function () { // 表示页面加载完成 之后， 相当 window.onload = function () {}
$("#btn03").click(function () { // $("#btn03")表示按 id 查询标签对象; click(function () 绑定单击事件
alert("jQuery 的单击事件");
})
})
</script>
</head>
<body>
<!--静态注册onClick事件-->
<button onclick="onclickFun();">按钮 1</button>
<button id="btn02">按钮 2</button>
<button id="btn03">按钮 3</button>
</body>
</html>
使用 jQuery 一定要引入 jQuery 库
window.onload(){}只可以使用一次
$(function(){})可以使用多次
# 1.JavaScript 介绍 Javascript 语言诞生主要是完成页面的数据验证。 因此它运行在客户端， 需要运行浏览器来解析执行 JavaScript 代码。JS 是弱类型， Java 是强类型。 特点： 1. 交互性（它可以做的就是信息的动态交互） 2. 安全性（不允许直接访问本地硬盘） 3. 跨平台性（只要是可以解释 JS 的浏览器都可以执行， 和平台无关）
1.1.js 中的事件
什么是事件？ 事件是电脑输入设备与页面进行交互的响应。 我们称之为事件。
1.1.1.常用的事件：
onload 加载完成事件： 页面加载完成之后， 常用于做页面 js 代码初始化操作
onclick 单击事件： 常用于按钮的点击响应操作。
onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件： 常用于表单提交前， 验证所有表单项是否合法。
事件的注册又分为静态注册和动态注册两种：
1.1.2.什么是事件的注册（绑定） ？
其实就是告诉浏览器， 当事件响应后要执行哪些操作代码， 叫事件注册或事件绑定。
- 静态注册事件： 通过 html 标签的事件属性直接赋于事件响应后的代码， 这种方式我们叫静态注册。
- 动态注册事件： 是指先通过 js 代码得到标签的 dom 对象， 然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件
响应后的代码， 叫动态注册。
动态注册基本步骤：
1、获取标签对象
2、标签对象.事件名 = fucntion(){}
1.2.DOM 模型
DOM 全称是 Document Object Model 文档对象模型
1.2.1.Document 对象的理解：
第一点： Document 它管理了所有的 HTML 文档内容。
第二点： document 它是一种树结构的文档。 有层级关系。
第三点： 它让我们把所有的标签 都 对象化
第四点： 我们可以通过 document 访问所有的标签对象。
1.2.2.Document 对象中的方法介绍
document.getElementById(elementId)
通过标签的 id 属性查找标签 dom 对象， elementId 是标签的 id 属性值
document.getElementsByName(elementName)
通过标签的 name 属性查找标签 dom 对象， elementName 标签的 name 属性值
document.getElementsByTagName(tagname)
通过标签名查找标签 dom 对象。 tagname 是标签名
document.createElement( tagName)
方法， 通过给定的标签名， 创建一个标签对象。 tagName 是要创建的标签名
注：
document 对象的三个查询方法， 如果有 id 属性， 优先使用 getElementById 方法来进行查询
如果没有 id 属性， 则优先使用 getElementsByName 方法来进行查询
如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
以上三个方法， 一定要在页面加载完成之后执行， 才能查询到标签对象。
2.什么是 jQuery ?
jQuery， 顾名思义， 也就是 JavaScript 和查询（Query） ， 它就是辅助 JavaScript 开发的 js 类库。
2.1.jQuery 核心思想！ ！ ！
它的核心思想是 write less,do more(写得更少,做得更多)， 所以它实现了很多浏览器的兼容问题。
2.2.jQuery 流行程度
jQuery 现在已经成为最流行的 JavaScript 库， 在世界前 10000 个访问最多的网站中， 有超过 55%在使用
jQuery。
2.3.jQuery 好处！ ！ ！
jQuery 是免费、 开源的， jQuery 的语法设计可以使开发更加便捷， 例如操作文档对象、 选择 DOM 元素、
制作动画效果、 事件处理、 使用 Ajax 以及其他功能
2.4.jQuery 核心函数
$ 是 jQuery 的核心函数， 能完成 jQuery 的很多功能, $ ()就是调用$这个函数
1、 传入参数为 [ 函数 ] 时：
表示页面加载完成之后。 相当于 window.onload = function(){}
2、 传入参数为 [ HTML 字符串 ] 时：
会对我们创建这个 html 标签对象
3、 传入参数为 [ 选择器字符串 ] 时：
$(“#id 属性值”); id 选择器， 根据 id 查询标签对象
$(“标签名”); 标签名选择器， 根据指定的标签名查询标签对象
$(“.class 属性值”); 类型选择器， 可以根据 class 属性查询标签对象
4、 传入参数为 [ DOM 对象 ] 时：
会把这个 dom 对象转换为 jQuery 对象
2.5.jQuery 对象的本质是什么？
jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。
2.6.选择器
2.6.1.基本选择器
1 #ID 选择器： 根据 id 查找标签对象
2 .class 选择器： 根据 class 查找标签对象
3 element 选择器： 根据标签名查找标签对象
4 * 选择器： 表示任意的， 所有的元素
selector1， selector2 组合选择器： 合并选择器 1， 选择器 2 的结果并返回
p.myClass
表示标签名必须是 p 标签， 而且 class 类型还要是 myClass
2.6.2.层级选择器
ancestor descendant 后代选择器 ： 在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器： 在给定的父元素下匹配所有的子元素
prev + next 相邻元素选择器： 匹配所有紧接在 prev 元素后的 next 元素
prev ~ sibings 之后的兄弟元素选择器： 匹配 prev 元素之后的所有 siblings 元素
68
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
