第7章：jQuery事件二
CH07-JQuery事件二本章目标
掌握表单事件的使用
掌握change事件的使用
掌握给元素绑定事件的使用
一、讲解内容1、表单事件当元素获得焦点时会触发focus事件，失去焦点时会触发blur事件，详见下表：
例：用户名文本框获得焦点时，文本框添加背景颜色，失去焦点时，文本框背景颜色还原添加一个背景颜色的样式
效果图：
1234567891011121314<script src="js/jquery.min.js"></script><script> $(function(){ $("#name").focus(function () { //获取焦点添加背景样式 $(this).addClass("bg"); }); $("#name").blur(function () { ...
第6章：jQuery事件一
CH06-JQuery事件一本章目标
了解事件的概念和常用的事件
掌握窗体、键盘、鼠标和复合事件的使用
一、事件的分类1、什么是事件？页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：
在元素上移动鼠标
选取单选按钮
点击元素
2、常用的事件
基础事件
窗体事件
键盘事件
鼠标事件
表单事件
复合事件是多个事件的组合
鼠标光标悬停
鼠标连续点击
二、窗体事件1、load()语法：$(selector).load(function)
当指定的元素已加载时，会发生load事件
window.onload必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行
例：页面已加载进行提示
效果图：
1234567<script src="js/jquery.min.js"></script><script> $(window).load(function(){ alert("图片已载入&quo ...
第5章：jQuery的DOM操作二
CH05-JQuery的DOM操作二本章目标
掌握jQuery操作CSS样式的使用
掌握jQuery操作文本与属性值内容的使用
掌握jQuery节点属性操作
一、操作CSS样式1、使用css()设置样式值
例：给如下标签设置样式
操作css样式公共HTML代码：
12<p>使用css()为指定的元素设置单个样式</p> <h2>使用css()为指定的元素设置多个样式值</h2>
效果图：
123456789<script src="js/jquery.min.js"></script><script> $(function(){ //点击p段落设置单个样式 $("p").click(function(){ $(this).css("border", "5px solid blue"); ...
JavaScript素材
JavaScript素材
二重循环打印型号图案
百钱买百鸡
万年历
广创学生管理系统
冒泡排序
九九乘法表
斐波拉切数列
第16章：DOM元素增删改
CH16-DOM元素增删改本章目标
掌握如何使用DOM获取节点时使用的属性
熟练使用DOM节点进行创建、添加、删除、替换
一、使用DOM获取节点时使用的属性1.1 首尾子节点firstChild：获取当前节点的首个子节点，注意：换行符、空格等也是节点。
lastChild:访问当前节点的最后一个子节点，是 Node 对象。
注：lastChild 返回的是这些子节点：元素节点、文本节点或注释节点。元素之间的空白也是文本节点。
123456789101112131415161718192021222324252627282930313233343536373839<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v ...
第15章：DOM
CH15-DOM本章目标
了解DOM模型的概念和结构
掌握如何使用DOM获取元素
掌握如何使用DOM操作属性
一、DOM概述1.1 什么是DOM？当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
1.2DOM的结构DOM把文档视为一种树形结构，以树节点的方式表示文档中的各个内容通过
二、使用DOM获取html元素2.1 getElementById() getElementById()：通过 id 获取html 元素
例：点击“查看”按钮，显示文本框中输入的姓名
12345678910111213姓名:<input type="text" id="name"/><input type="button" value="查看" onclick="show()"/><script type="text/javascript">function show(){ //获得文本框对 ...
第12章：Javascript的函数和事件
第12章：Javascript的函数和事件本章目标
函数的概念
掌握常用的系统函数
掌握类型转换
掌握Javascript的常用事件
课程回顾
Javascript中的循环有那些？
Javascript中的各个循环特点是什么？
Javascript中的各个循环语法分别是什么？
讲解内容1. 函数概念
为什么要使用函数
思考：我们写了一段代码，实现了一个功能，如果其他地方还是要实现这个功能，我们怎么办？
以前的思路：
重新写一段重复的代码，实现同一个功能，代码冗余。
重复代码太多，可阅读性太差。
如果功能要修改，每段重复代码都要修改，维护性差。
用函数实现，可以解决以上问题
函数概念：
函数就是完成特定任务的代码语句块。
对于JS来说，我们可以把函数理解为任意一段代码放在一个盒子里，在我们想要让这段代码执行的时候，直接执行这个盒子里的代码就行。专业一点来讲：js函数就是由事件驱动的可执行课重复只用的代码块。
函数的分类
自定义函数
系统函数
2. 声明式函数
无参函数
语法：
123function 函数名(){ 函数体;}
函数的 ...
第13章：Javascript对象
第13章：Javascript对象本章目标
掌握什么是对象？
掌握Javascript中创建对象的方式
对象的使用
值类型和引用类型
课程回顾
如何声明函数？
如何调用函数？
函数的返回值用什么关键字？
常用的系统函数有那些？
讲解内容1. 对象理解
为什么要使用对象？
思考：用函数实现，将学生的信息通过控制台输出，信息包含（学号，姓名，年龄，性别，班级……）
代码实现：
1234function showInfo(studentNo,name,age,sex,className,.....){ console.log("学号："+studentNo); .......}
问题：当参数比较多的情况下，代码可读性太差，而且方法变很复杂，有没有简单的方式呢？
12345function showInfo(student){ console.log(student.studentNo); console.log(student.name); .............}
说明：student则 ...
第14章：JS常用内置对象
第14章：JS常用内置对象本章目标
掌握Javascript的常用内置对象
Number、Boolean、String
Math对象
Date对象
课程回顾
对象的概念
如何创建对象，几种方式创建
值类型和引用类型的区别
讲解内容1. 内置对象 JavaScript中的内置对象有number，Boolean，String，Date，Array等通过给他们创建对象来访问更多的方法和属性
我们学习的所有编程语言都具有内置对象，这些对象创建了语言的基本功能，所以JavaScript也有许多内在对象将其定义为语言。本篇文章将为大家详细介绍几种JavaScript中的内置语言。
2. Number数字对象
概述：通过Number将变量设置为数值来创建对象。然后，此变量就可以访问对象具有的属性和方法，我们可以通过与new关键字结合使用
JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。
在JavaScript中，数字不分为整数类型和浮点型类型，所有的数字都是由 浮点型类型。
Number数字对象 ...
第10章：数组
第10章：数组本章目标
掌握一维数组的运用
课程回顾
js中循环控制语句的作用
数组概述什么是数组
数组是一种特殊的变量，它能够一次存放一个以上的值。
如果您有一个项目清单（例如，汽车品牌列表），在单个变量中存储汽车品牌应该是这样的：
123var car1 = "奔驰";var car2 = "宝马";var car3 = "奥迪";
不过，假如您希望遍历所有汽车并找到一个特定的值？假如不是三个汽车品牌而是三百个呢？
解决方法就是数组！
数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。
语法123456789101112//1.声明数组var arrayName;//2.分配空间arrayName=new Array(长度);//3.赋值arrayName[索引]=值;//4.使用document.write("长度："+arrayName.length);document.write("首项"+arrayName[0]);
说明：数组索引从0开始， ...
