一、HTML
1、HTML的书写规范：
2、HTML的注释：
<!--这里是注释的内容-->
3、HTML标签的介绍：
4、标签的语法：
(1)标签不能交叉嵌套
(2)标签必须正确关闭
(3)没有文本内容的标签
(4)属性必须要有值，属性值必须要加引号
(5)注释不能嵌套
5、常用标签
font标签
需求：在页面上显示：我是字体标签，红色，宋体，4号字
<font color = "red" face = "宋体" size = "4">我是字体</font>6、特殊字符
需求：把<br>换行标签变成文本输出在页面上
我是<br>标签
常用的特殊字符：
< ----》 <
> ----》 >
空格 ---》
7、标题标签
<h1 align = "left">标题内容</h1> //h1到h6 h1最大，h6最小
<h2 align = "center">标题内容</h2>
<h3 align = "right">标题内容</h3>8、超链接：
<a href = "http://www.baidu.com" target = "_self">百度</a> //在当前页面跳转,target默认值是_self
<a href = "http://www.baidu.com" target = "_blank">百度</a> //在新的页面跳转9、列表标签：
(1)无序列表
<ul type = "none">
<li>赵四</li>
<li>刘能</li>
<li>小沈阳</li>
<li>宋小宝</li>
</ul>
(2)有序列表
<ol start = "5">
<li>列表项</li>
</ol>10、img标签
img的属性：
11、表格标签
<table> //cellspacing = "0" 用来设置单元格直接的间距
<tr>
<th>表头</th> //colspan属性标签设置跨列
<th>表头</th> //rowspan属性标签设置跨行
</tr>
<tr>
<td>表内容</th>
<td>表内容</th>
</tr>
</table>12、ifarme标签
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
</head>
<body>
我就是一个单独的页面<br/>
<iframe src = "http://www.baidu.com" width="500" height="400" name="abc"></iframe>
<ul>
<li><a href="zs.html" target="abc">第一个</a></li>
</ul>
</body>
</html>
13、表单显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
</head>
<body>
<form>
用户名称：<input type="text" value="默认值"/><br/>
用户密码：<input type="password" value="abc"/><br/>
确认密码：<input type="password" value="abc"/><br/>
性别：<input type="radio" value="sex" checked="checked"/>男 <input type="radio" value="sex"/>女<br/>
兴趣爱好：<input type="checkbox"/>java <input type="checkbox"/>c++ <input type="checkbox"/>c语言<br/>
国籍：<select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>日本</option>
</select><br/>
自我评价：<textarea cols="20" rows="10">我才是默认值</textarea><br/>
<input type="file"/><br/>
<input type="button"/><br/>
<input type="reset" value="清除"/> <input type="submit" value="提交"/>
<input type="hidden" name="abc" value="cde"/> <!--隐藏不想让用户看到的消息-->
</form>
</body>
</html>
(1)表单格式化之后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
</head>
<body>
<form>
<h1 align="center">注册页面</h1>
<table align="center">
<tr>
<td>用户名称：</td>
<td><input type="text" value="默认值"/></td>
</tr>
<tr>
<td>用户密码：</td>
<td><input type="password" value="abc"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" value="abc"/></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" value="sex" checked="checked"/>男
<input type="radio" value="sex"/>女
</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td>
<input type="checkbox"/>java
<input type="checkbox"/>c++
<input type="checkbox"/>c语言
</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>日本</option>
</select>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td><textarea cols="20" rows="10">我才是默认值</textarea></td>
</tr>
<tr>
<td colspan="2"><input type="file"/></td>
</tr>
<tr>
<td><input type="reset"/></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
<!--<input type="button"/><br/>-->
<input type="hidden" name="abc" value="cde"/> <!--隐藏不想让用户看到的消息-->
</form>
</body>
</html>(2)表单提交的细节
14、其他标签
案例：
二、CSS
1、CSS的语法规则
2、HTML与CSS的结合
(1)第一种结合方式
<div style="border:1px solid red;">div标签1</div>
<div style="border:1px solid red;">div标签2</div>
<span style="border:1px solid red;">span标签1</span>
<span style="border:1px solid red;">span标签2</span>
(2)第二种结合方式
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<style type="text/css">
/*
CSS里面的注释和HTML的注释不一样
*/
div{
border: 1px solid red;
}
span{
border: 1px solid yellow;
}
</style>
</head>
(3)第三种结合方式
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<!--link标签专门用来引入css样式代码-->
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>//css文件
div{
border: 1px solid red;
}
span{
border: 1px solid yellow;
}
3、CSS样式选择器
(1)标签名选择器
<style type="text/css">
div{
border: 1px solid blue;
color: yellow;
font-size: 30px;
}
span{
border: 5px dashed yellow;
color: blue;
font-size: 20px;
}
</style>
(2)id选择器
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<style type="text/css">
#id001{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
#id002{
color: red;
font-size: 20px;
border: 5px blue dotted;
}
</style>
</head> <div id="id001">div标签1</div>
<div id="id002">div标签2</div>
(3)class类型选择器(类选择器)
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<style type="text/css">
.class01{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
.class02{
color: red;
font-size: 20px;
border: 5px blue dotted;
}
</style>
</head> <div class="class01">div标签1</div>
<div>div标签2</div>
<span class="class02">span标签1</span>
<span>span标签2</span>
(4)组合选择器
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<style type="text/css">
.class01,#id001{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
.class02,#id002{
color: red;
font-size: 20px;
border: 5px blue dotted;
}
</style>
</head> <div class="class01">div标签1</div>
<div id="id002">div标签2</div>
<span class="class02">span标签1</span>
<span id="id001">span标签2</span>
(4)CSS常用样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<style type="text/css">
div{
color: red; /*字体颜色*/
border: 1px solid yellow; /*边框样式*/
width: 300px; /*宽度*/
height: 100px; /*高度*/
background-color: green; /*背景颜色*/
font-size: 30px; /*字体大小*/
margin-left: auto; /*左边距*/
margin-right: auto; /*右边距*/
text-align: center; /*文字居中*/
}
a{
text-decoration: none; /*去掉超链接下划线*/
}
table{
border: 1px red solid; /*设置边框*/
border-collapse: collapse; /*将边框合并*/
}
th,td{
border: 1px red solid; /*设置边框*/
}
ul{
list-style: none; /*列表去除修饰符*/
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<div>我是div标签</div>
<ul>
<li>中国</li>
<li>美国</li>
<li>英国</li>
</ul>
<form>
<h1 align="center">注册页面</h1>
<table align="center">
<tr>
<td>用户名称：</td>
<td><input type="text" value="默认值"/></td>
</tr>
<tr>
<td>用户密码：</td>
<td><input type="password" value="abc"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" value="abc"/></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" value="sex" checked="checked"/>男
<input type="radio" value="sex"/>女
</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td>
<input type="checkbox"/>java
<input type="checkbox"/>c++
<input type="checkbox"/>c语言
</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>日本</option>
</select>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td><textarea cols="20" rows="10">我才是默认值</textarea></td>
</tr>
<tr>
<td colspan="2"><input type="file"/></td>
</tr>
<tr>
<td><input type="reset"/></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
<!--<input type="button"/><br/>-->
<input type="hidden" name="abc" value="cde"/> <!--隐藏不想让用户看到的消息-->
</form>
</body>
</html>
三、JavaScript
1、JavaScript和Java的区别
2、JavaScript的特点
3、JavaScript与HTML的结合方式
(1)第一种结合方式
只需要在head或者body标签中使用script标签来书写JavaScript代码
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<script type="text/javascript">
alert("hello JavaScript!");
</script>
</head>
<!--在head或者body里面都可以-->
<body>
<script type="text/javascript">
alert("hello JavaScript!");
</script>
</body>
(2)第二种结合方式
单独写一个JavaScript文件，需要用的时候通过script标签引入
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<script type="text/javascript" src="js.js"></script>
</head>//js文件
alert("欢迎学习JavaScript！")
两种方式一起使用
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<!--两种方式会按照先后顺序依次显示-->
<script type="text/javascript" src="js.js"></script>
<script type="text/javascript">
alert("hello JavaScript!");
</script>
</head>3、JavaScript的变量和数据类型介绍
/*
JavaScript数据类型
数值类型： number： int short long float double
字符串类型： string
对象类型： Object
布尔类型： boolean
函数类型： function
JavaScript里特殊的值
undefined 未定义，所有JavaScript变量未赋值的时候，默认值都是undefined
null 空值
NAN 全名是Not a Number，非数字，非数值
JavaScript的定义变量的格式
var 变量名;
var 变量名 = 值;
<script type="text/javascript">
var i;
alert(typeof(i)); //undefined
i = 12;
alert(typeof(i)); //number
i = "abc";
alert(typeof(i)); //string
var a = 12;
var b = "bcd";
alert(a*b); //NAN
</script>
*/4、关系运算
<script type="text/javascript">
var a = 12;
var b = "12";
alert(a == b); //true
alert(a === b); //false
</script>5、逻辑运算
6、数组
JavaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作
<script type="text/javascript">
var a = []; //定义一个空的数组
// alert(a.length); //0
a[0] = 12;
// alert(a[0]); //12
// alert(a.length); //1
a[2] = "abc";
// alert(a.length); //3
// alert(a[1]); //undefined
//数组的遍历
for(var i=0;i<a.length;i++){
alert(a[i]); //12 undefined abc
}
</script>7、函数
(1)函数的第一种定义方式
<script type="text/javascript">
function fun(){
alert("无参函数被调用！");
}
// fun(); //无参函数被调用
function fun1(a,b){
alert("有参函数被调用,a => "+a+",b => "+b);
}
// fun1(12,"abc"); //"有参函数被调用,a => 12,b => abc
function sum(a,b){
var result = a + b;
return result;
}
alert(sum(100,50)); //150
</script>(2)函数的第一种定义方式
<script type="text/javascript">
var fun = function () {
alert("无参函数");
}
// fun(); //无参函数
var fun1 = function (a,b) {
alert("有参函数,a => "+ a + ",b => " + b);
}
// fun1(12,"abc"); //有参函数,a => 12,b => abc
var fun2 = function (a,b){
return a + b;
}
alert(fun2(100,50));
</script>8、js中的函数不允许重载
在js中函数的重载会直接覆盖掉上一次的定义
<script type="text/javascript">
var fun = function () {
alert("无参函数");
}
var fun = function (a,b) {
alert("有参函数,a => "+ a + ",b => " + b);
}
fun(); //有参函数,a => undefined,b => undefined
</script><script type="text/javascript">
var fun = function (a,b) {
alert("有参函数,a => "+ a + ",b => " + b);
}
var fun = function () {
alert("无参函数");
}
fun(12,"abc"); //无参函数
</script>9、函数的arguments隐形参数
<script type="text/javascript">
var fun = function () {
// alert(arguments.length);
for(var i=0;i<arguments.length;i++){
alert(arguments[i]);
}
alert("无参函数");
}
fun(12,"abc"); //2 12 abc 无参函数
//需求：要求编写一个函数，用于计算所有参数相加的和并返回
function sum1(a,b) {
var result = 0;
for(var i=0;i<arguments.length;i++){
result += arguments[i];
}
return result;
}
alert(sum1(1,2,3,4,"abc",7,8,9)); //10abc789
function sum2(a,b) {
var result = 0;
for(var i=0;i<arguments.length;i++){
if(typeof(arguments[i]) == "number"){
result += arguments[i];
}
}
return result;
}
alert(sum2(1,2,3,4,5,6,7,8,9)); //45
</script>10、自定义对象
(1)Object形式的自定义对象
<script type="text/javascript">
var obj = new Object();
obj.name = "华仔";
obj.age = 18;
obj.fun = function (){
alert("姓名："+this.name+",年龄："+this.age);
}
alert(obj.name); //华仔
alert(obj.age); //18
obj.fun(); //姓名：华仔,年龄：18
</script>(2){}形式的自定义对象
<script type="text/javascript">
var obj = {
name : "华仔",
age : 18,
fun : function (){
alert("姓名："+this.name+",年龄："+this.age);
}
}
alert(obj.name); //华仔
alert(obj.age); //18
obj.fun(); //姓名：华仔,年龄：18
</script>四、JavaScript中的事件
1、什么是事件
事件是电脑输入设备与页面进行交互的响应，我们称之为事件。
2、常用的事件
3、事件的注册(绑定)
就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或绑定
(1)静态注册事件
通过html标签的事件属性直接赋于事件响应后的代码，这种方式我们叫叫静态注册。
(2)动态注册事件
是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = functionl()这种形式赋于事件响应后的代码,叫动态注册。
动态注册基本步骤：
1、获取标签对象
2、标签对象.事件名= fucntion()
1、onload事件(加载完成事件)
静态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<script type="text/javascript">
function onloadfun(){
alert("静态注册的onload事件");
}
</script>
</head>
<body onload="onloadfun();">
</body>
</html>动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<script type="text/javascript">
window.onload = function (){
alert("动态注册的onload事件");
}
</script>
</head>
<body>
</body>
</html>2、onclick事件(单击事件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<script type="text/javascript">
function fun(){
alert("静态注册onclick事件");
}
//动态注册onclick事件
window.onload = function () {
var obj = document.getElementById("bt01");
obj.onclick = function () {
alert("动态注册onclick事件");
}
}
</script>
</head>
<body>
<button onclick="fun();">按钮1</button>
<button id="bt01">按钮2</button>
</body>
</html>3、onblur事件(失去焦点事件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<script type="text/javascript">
function onblurfun(){
console.log("静态注册onblur事件");
}
//动态注册onblur事件
window.onload = function (){
var obj = document.getElementById("password");
obj.onblur = function (){
console.log("动态注册的onblur事件");
}
}
</script>
</head>
<body>
用户名：<input type="text" onblur="onblurfun()"/><br/>
密码：<input type="text" id="password"/>
</body>
</html>4、onchange事件(内容发生改变事件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<script type="text/javascript">
function onchangefun(){
alert("女神已经改变了!");
}
//动态注册onchange事件
window.onload = function (){
var obj = document.getElementById("sl01");
obj.onchange = function (){
alert("男神已经改变了！");
}
}
</script>
</head>
<body>
<!--静态注册onchange事件-->
请选出你心目中的女神：
<select onchange="onchangefun();">
<option>--女神--</option>
<option>佳佳</option>
<option>圆圆</option>
<option>晨晨</option>
</select>
请选出你心目中的男神：
<select id="sl01">
<option>--男神--</option>
<option>杰哥</option>
<option>飞哥</option>
<option>特哥</option>
</select>
</body>
</html>5、onsubmit(表单提交事件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<script type="text/javascript">
function onsubmitfun(){
alert("静态注册onsubmit事件");
return false;
}
window.onload = function (){
var obj = document.getElementById("form01");
obj.onsubmit = function (){
alert("动态注册onsubmit事件");
return false;
}
}
</script>
</head>
<body>
<!--静态注册onsubmit事件-->
<!--返回false可以阻止表单发送-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitfun();">
<input type="submit" value="静态注册">
</form><br/>
<form action="http://localhost:8080" method="get" id="form01">
<input type="submit" value="动态注册">
</form>
</body>
</html>五、DOM模型(Document Object Model)文档对象模型
1、DOM模型的定义：
全称是(Document Object Model)文档对象模型
2、Document对象中的方法介绍
3、验证用户名是否合法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<script type="text/javascript">
function onclickfun(){
var obj = document.getElementById("usename");
var line = obj.value;
//正则表达式 从到到尾检查是否包含5-12个字母，数字，下划线
var patt = /^\w{5,12}$/;
if(patt.test(line)){
alert("用户名合法！");
}else {
alert("用户名不合法！");
}
}
</script>
</head>
<body>
用户名：<input type="text" id="usename" value="">
<button onclick="onclickfun();">按钮</button>
</body>
</html>六、正则表达式
1、正则表达式
2、两种常见的验证提示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<script type="text/javascript">
function onclickfun(){
var usenameobj = document.getElementById("usename");
var spanobj = document.getElementById("span");
var line = usenameobj.value;
var patt = /^\w{5,12}$/;
if(patt.test(line)){
// spanobj.innerHTML = "用户名合法";
spanobj.innerHTML = "<img src=\"true.png\" width=\"20\" height=\"20\"/>";
}else {
// spanobj.innerHTML = "用户名不合法";
spanobj.innerHTML = "<img src=\"false.png\" width=\"20\" height=\"20\"/>";
}
}
</script>
</head>
<body>
用户名：<input type="text" id="usename" value="">
<span style="color: red;" id="span"></span>
<button onclick="onclickfun();">校验</button>
</body>
</html>效果：
3、js中的getElementsByName方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<script type="text/javascript">
//动态注册onclick事件
// window.onload = function (){
// var obj = document.getElementById("bt01");
// obj.onclick = function (){
// var check = document.getElementsByName("boddy");
// for(var i=0;i<check.length;i++){
// check[i].checked = true;
// }
// }
// }
function a(){
var check = document.getElementsByName("boddy");
for(var i=0;i<check.length;i++){
check[i].checked = true;
}
}
function notall(){
var obj = document.getElementsByName("boddy");
for(var i=0;i<obj.length;i++){
obj[i].checked = false;
}
}
function reverse(){
var obj = document.getElementsByName("boddy");
for(var i=0;i<obj.length;i++){
obj[i].checked = !obj[i].checked;
}
}
</script>
</head>
<body>
你的兴趣爱好：
<input type="checkbox" name="boddy" value="java"/>java
<input type="checkbox" name="boddy" value="cpp"/>c++
<input type="checkbox" name="boddy" value="js"/>javascript
<br/>
<button onclick="a();" id="bt01">全选</button>
<button onclick="notall();">全不选</button>
<button onclick="reverse();">反选</button>
</body>
</html>4、js中的getElementsByTagName方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<script type="text/javascript">
function a(){
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
inputs[i].checked = true;
}
}
</script>
</head>
<body>
你的兴趣爱好：
<input type="checkbox" value="java"/>java
<input type="checkbox" value="cpp"/>c++
<input type="checkbox" value="js"/>javascript
<br/>
<button onclick="a();">全选</button>
</body>
</html> 
5、节点的常用属性和方法
6、DOM对象查询练习
7、document对象补充说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识HTML</title>
<script type="text/javascript">
//需求：现在需要我们使用js代码来创建htmL标签，并显示在页面上
//标签的内容就是:<div>晨晨，我爱你</div>
window.onload = function (){
var obj = document.createElement("div"); //创建一个div节点(在内存中)
// obj.innerHTML = "晨晨，我爱你";
var textNode = document.createTextNode("晨晨，我爱你"); //创建一个文本节点
obj.appendChild(textNode); //将文本节点添加为div节点的子节点
document.body.appendChild(obj); //将div节点添加为body节点的子节点
}
</script>
</head>
<body>
</body>
</html>七、jQuery
1、jQuery的介绍
2、jQuery的初体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始HTML</title>
<script type="text/javascript" src="static/js/jQuery.js"></script>
<script type="text/javascript">
$(function () { //表示页面加载完成之后，相当于window.onload = function(){}
var $obj = $('#bt01'); //表示按id查询标签对象
$obj.click(function () { //绑定单击事件
alert("jQuery的单击事件");
});
/*
$('#bt01').click(function () {
alert("jQuery的单击事件");
});
*/
});
</script>
</head>
<body>
<button id="bt01">Hello</button>
</body>
</html>常见的问题：
3、jQuery的核心函数 $
$的第一个功能：
<script type="text/javascript" src="static/js/jQuery.js"></script>
<script type="text/javascript">
$(function () {
alert('页面加载完后自动调用');
});
</script>$的第二个功能:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始HTML</title>
<script type="text/javascript" src="static/js/jQuery.js"></script>
<script type="text/javascript">
$(function () {
$("<div>" +
" <span>div-span1</span>" +
" <span>div-span2</span>" +
" </div>").appendTo("body");
});
</script>
</head>
<body>
<div>
<span>div-span1</span>
<span>div-span2</span>
</div>
</body>
</html>效果：
$的第三个功能:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始HTML</title>
<script type="text/javascript" src="static/js/jQuery.js"></script>
<script type="text/javascript">
$(function () {
alert($("button").length);
});
</script>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</body>
</html>$的第四个功能:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始HTML</title>
<script type="text/javascript" src="static/js/jQuery.js"></script>
<script type="text/javascript">
$(function () {
var obj = document.getElementById("bt01");
//alert(obj); //[object HTMLButtonElement]
alert($(obj)); //[object Object]
});
</script>
</head>
<body>
<button id="bt01">按钮1</button>
</body>
</html>4、如何区分DOM对象和jQuery对象
DOM对象alert出来的效果是： [object HTML标签名Element]
jQuery对象alert出来的效果是：[object Object]
5、jQuery对象的本质
6、jQuery对象和DOM对象的使用区别
7、DOM对象和jQuery对象的相互转换
script type="text/javascript" src="static/js/jQuery.js"></script>
<script type="text/javascript">
$(function () {
var obj = document.getElementById("bt01");
//alert(obj); //[object HTMLButtonElement]
//alert($(obj)); //[object Object]
alert($(obj)[0]); //[object HTMLButtonElement]
});
</script> 8、jQuery--基础选择器
https://www.bilibili.com/video/BV1Y7411K7zz?p=70&spm_id_from=pageDriverhttps://www.bilibili.com/video/BV1Y7411K7zz?p=70&spm_id_from=pageDriver
https://www.bilibili.com/video/BV1Y7411K7zz?p=70&spm_id_from=pageDriver
9、jQuery--层级选择器
https://www.bilibili.com/video/BV1Y7411K7zz?p=71https://www.bilibili.com/video/BV1Y7411K7zz?p=71https://www.bilibili.com/video/BV1Y7411K7zz?p=71
10、过滤选择器
10.1基本过滤选择器
10.2内容过滤选择器
https://www.bilibili.com/video/BV1Y7411K7zz?p=73https://www.bilibili.com/video/BV1Y7411K7zz?p=73https://www.bilibili.com/video/BV1Y7411K7zz?p=73
10.3属性过滤选择器
https://www.bilibili.com/video/BV1Y7411K7zz?p=74&spm_id_from=pageDriverhttps://www.bilibili.com/video/BV1Y7411K7zz?p=74&spm_id_from=pageDriverhttps://www.bilibili.com/video/BV1Y7411K7zz?p=74&spm_id_from=pageDriver
10.4表单过滤器
11、jQuery元素的筛选
12、jQuery的属性操作
13、jQuer的练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始HTML</title>
<script type="text/javascript" src="static/js/jQuery.js"></script>
<script type="text/javascript">
$(function () {
//全选
$("#but01").click(function () {
$(":checkbox").prop("checked",true);
});
//全不选
$("#but02").click(function () {
$(":checkbox").prop("checked",false);
});
//反选
$("#but03").click(function () {
$(":checkbox[name='items']").each(function () {
this.checked = !this.checked;
});
var length = $(":checkbox[name='items']").length;
var count = $(":checkbox[name='items']:checked").length;
$("#ck1").prop("checked",length == count);
});
//提交
$("#but04").click(function () {
$(":checked[name='items']:checked").each(function () {
alert(this.value);
});
});
//给[全选/全不选]单击事件
$("#ck1").click(function () {
// alert(this.checked);
$(":checkbox[name='items']").prop("checked",this.checked);
});
$(":checkbox[name='items']").click(function () {
var length = $(":checkbox[name='items']").length;
var count = $(":checkbox[name='items']:checked").length;
$("#ck1").prop("checked",length == count);
});
});
</script>
</head>
<body>
<form action="" method="post">
你爱好的运动是？<input type="checkbox" id="ck1"/>全选/全不选<br/>
<input type="checkbox" value="足球" name="items"/>足球
<input type="checkbox" value="篮球" name="items"/>篮球
<input type="checkbox" value="乒乓球" name="items"/>乒乓球
<input type="checkbox" value="羽毛球" name="items"/>羽毛球
<br/>
<input type="button" value="全选" id="but01"/>
<input type="button" value="全不选" id="but02"/>
<input type="button" value="反选" id="but03"/>
<input type="button" value="提交" id="but04"/>
</form>
</body>
</html>14、DOM的增删改
内部插入：
外部插入：
替换：
删除：
jQuery的练习：
从左到右，从右到左
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始HTML</title>
<script type="text/javascript" src="static/js/jQuery.js"></script>
<script type="text/javascript">
//页面加载完成后
$(function () {
//第一个按钮【选中添加到右边】
$("button:eq(0)").click(function () {
$("select:eq(0) option:selected").appendTo($('select:eq(1)'));
});
//第二个按钮【全部添加到右边】
$("button:eq(1)").click(function () {
$("select:eq(0) option").appendTo($('select:eq(1)'));
});
//第三个按钮【选中删除到左边】
$("button:eq(2)").click(function () {
$("select:eq(1) option:selected").appendTo($('select:eq(0)'));
});
//第四个按钮【全部删除到左边】
$("button:eq(3)").click(function () {
$("select:eq(1) option").appendTo($('select:eq(0)'));
});
});
</script>
</head>
<body>
<table>
<tr>
<td align="center">
<div>
<select multiple="multiple" name="sel01" style="width: 80px ;height: 100px">
<option value="opt01">选项1</option>
<option value="opt02">选项2</option>
<option value="opt03">选项3</option>
<option value="opt04">选项4</option>
<option value="opt05">选项5</option>
<option value="opt06">选项6</option>
<option value="opt07">选项7</option>
<option value="opt08">选项8</option>
</select><br/>
<button>选中添加到右边</button><br/>
<button>全部添加到右边</button>
</div>
</td>
<td align="center">
<div>
<select name="sel02" multiple="multiple" style="width: 80px ;height: 100px">
</select><br/>
<button>选中删除到左边</button><br/>
<button>全部删除到左边</button>
</div>
</td>
</tr>
</table>
</body>
</html>动态添加和删除行记录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始HTML</title>
<script type="text/javascript" src="static/js/jQuery.js"></script>
<script type="text/javascript">
$(function () {
var deleteFun = function(){
/**
* confirm是JavaScript语言提供的一个确认提示框函数。你给它传什么，它就提示什么
* 当用户点击了确定，就返回true，当用户点击了取消，就返回false
*/
//得到tr对象
var obj = $(this).parent().parent();
//得到删除的姓名
var name = $(obj).find("td:first").text();
if(confirm("确定要删除["+name+"]吗？")){
obj.remove();
}
//阻止元素的默认行为
return false;
};
//给按钮绑定单击事件
$("button:eq(0)").click(function () {
//获取输入的数据
var name = $("#empName").val();
var email = $("#email").val();
var salary = $("#salary").val();
//创建一个标签对象，添加在表格中
var $obj = $("<tr>" +
"<td>"+name+"</td>" +
"<td>"+email+"</td>" +
"<td>"+salary+"</td>" +
"<td><a href=\"deleteEmp?id=003\">Delete</a></td>" +
"</tr>");
$obj.appendTo($("#employeeTable"));
//给添加的内容a标签绑定单击事件
$obj.find("a").click(deleteFun);
});
//给delete的a标签绑定单击事件
$("a").click(deleteFun);
});
</script>
</head>
<body>
<table id="employeeTable" border="1" align="center" cellspacing="0">
<tr>
<th>姓名</th>
<th>Email</th>
<th>Salary</th>
<th></th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div style="border: 1px solid;width: 300px;height: 180px;margin-left: auto;margin-right: auto;margin-top: 1em">
<h4>添加新员工</h4>
<table align="center" cellspacing="0">
<tr align="center">
<td class="word">name:</td>
<td class="inp">
<input type="text" name="empName" id="empName">
</td>
</tr>
<tr align="center">
<td class="word">email:</td>
<td class="inp">
<input type="text" name="email" id="email">
</td>
</tr>
<tr align="center">
<td class="word">salary:</td>
<td class="inp">
<input type="text" name="salary" id="salary">
</td>
</tr>
<tr align="center">
<td colspan="3"><button name="but01">submit</button></td>
</tr>
</table>
</div>
</body>
</html>15、css的样式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始HTML</title>
<style type="text/css">
div{
width: 100px;
height: 260px;
}
div.whiteborder{
border: 2px white solid;
}
div.redDiv{
background-color: red;
}
div.blueBorder{
border: 5px blue solid;
}
</style>
<script type="text/javascript" src="static/js/jQuery.js"></script>
<script type="text/javascript">
//页面加载完成之后
$(function () {
//获取div对象
var $obj = $("div:first");
//为按钮一绑定单击事件
$("#btn01").click(function () {
//addClass添加样式
$obj.addClass("redDiv blueBorder");
});
//为按钮二绑定单击事件
$("#btn02").click(function () {
//removeClass删除样式
//$obj.removeClass(); 删除所有样式
$obj.removeClass("redDiv"); //删除redDiv样式
});
//为按钮三绑定单击事件
$("#btn03").click(function () {
//toggleClass有就删除，没有就添加样式
$obj.toggleClass("redDiv");
});
//为按钮四绑定单击事件
$("#btn04").click(function () {
//offset获取和设置元素坐标
//获取
//var pos = $obj.offset();
//console.log(pos);
//设置
$obj.offset({
top: 100,
left: 50
});
});
});
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<div class="border"></div>
</td>
<td>
<div class="btn">
<input type="button" value="addClass()" id="btn01"/>
<input type="button" value="removeClass()" id="btn02"/>
<input type="button" value="toggleClass()" id="btn03"/>
<input type="button" value="offset()" id="btn04"/>
</div>
</td>
</tr>
</table>
</body>
</html>16、jQuery动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始HTML</title>
<style type="text/css">
div{
width: 100px;
height: 260px;
}
div.whiteborder{
border: 2px white solid;
}
div.redDiv{
background-color: red;
}
div.blueBorder{
border: 5px blue solid;
}
</style>
<script type="text/javascript" src="static/js/jQuery.js"></script>
<script type="text/javascript">
//页面加载完成之后
$(function () {
//为按钮一绑定单击事件
$("#btn1").click(function () {
$("#div1").show(2000,function () {
alert("show动画执行完成");
});
});
//为按纽二绑定单击事件
$("#btn2").click(function () {
$("#div1").hide(1000,function () {
alert("hide动画执行完成");
});
});
//为按钮三绑定单击事件
$("#btn3").click(function () {
$("#div1").toggle(1000,function () {
alert("toggle动画执行完成");
});
});
/* 动画不停的开和关
var abc = function () {
$("#div1").toggle(1000,abc);
}
abc();
*/
//为按钮四绑定单击事件
$("#btn4").click(function () {
$("#div1").fadeIn(2000,function () {
alert("fadeIn完成");
});
});
//为按钮五绑定单击事件
$("#btn5").click(function () {
$("#div1").fadeOut(2000,function () {
alert("fadeOut完成");
});
});
//为按钮六绑定单击事件
$("#btn6").click(function () {
$("#div1").fadeTo(2000,0.5,function () {
alert("fadeTo完成");
});
});
//为按钮七绑定单击事件
$("#btn7").click(function () {
$("#div1").fadeToggle(1000,function () {
alert("fadeToggle完成");
});
});
});
</script>
</head>
<body>
<table>
<tr>
<td><button id="btn1">显示show()</button></td>
</tr>
<tr>
<td><button id="btn2">隐藏hide()</button></td>
</tr>
<tr>
<td><button id="btn3">显示/隐藏切换 toggle()</button></td>
</tr>
<tr>
<td><button id="btn4">淡入fadeIn()</button></td>
</tr>
<tr>
<td><button id="btn5">淡出fadeOut()</button></td>
</tr>
<tr>
<td><button id="btn6">淡化到fadeTo()</button></td>
</tr>
<tr>
<td><button id="btn7">淡化切换fadeToggle()</button></td>
</tr>
</table>
<div id="div1" style="border: 1px black solid;background-color: blue;width: 300px;height: 180px">
jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
</div>
</body>
</html>练习：品牌展示
17、jQuery事件操作
$(function(){});和window.onload = function(){}的区别;
18、jQuery中常用的事件处理方法
19、事件的冒泡
20、JavaScript事件对象
例如：
//原生javas获取事件对象
<script type="text/javascript" src="static/js/jQuery.js"></script>
<script type="text/javascript">
window.onload = function() {
document.getElementById("d1").onclick = function (event) {
console.log(event);
}
}
</script>//jQuery代码获取事件对象
<script type="text/javascript" src="static/js/jQuery.js"></script>
<script type="text/javascript">
$(function () {
$("#d1").click(function (event) {
console.log(event);
});
});
</script>//使用bind同时对多个事件绑定一个函数
<script type="text/javascript" src="static/js/jQuery.js"></script>
<script type="text/javascript">
$(function () {
$("#d1").bind("mouseover mouseout",function (event) {
if(event.type == "mouseover"){
console.log("鼠标移入");
}else if(event.type == "mouseout"){
console.log("鼠标移出");
}
});
});
</script>21、jQuery练习：图片跟随
八、XML
1、什么是xml
xml是可扩展的标记性语言
2、xml的作用
3、xml的语法
<?xml version="1.0" encoding="utf-8" ?>
<!--
<?xml version="1.0" encoding="utf-8" ?>
以上内容为xml的声明
version="1.0" 表示版本
encoding="utf-8" 表示xml本身的编码
-->
<books> <!--books表示多个图书信息-->
<book sn="sn1213546"> <!--book表示一个图书信息 sn属性表示图书序列号-->
<name>时间简史</name> <!--name标签表示书名-->
<author>霍金</author> <!--author标签表示作者-->
<price>75</price> <!--price标签表示价格-->
</book>
<book sn="sn1213545"> <!--book表示一个图书信息 sn属性表示图书序列号-->
<name>java从入门到放弃</name> <!--name标签表示书名-->
<author>浩哥</author> <!--author标签表示作者-->
<price>9.9</price> <!--price标签表示价格-->
</book>
<book sn="sn1213544" name="辟邪剑谱" author="浩儿" price="999999"/>
</books>xml的命名规则
文本区域(CDATA区)
<author>
<![CDATA[
<<<<<浩哥
]]>
</author> <!--author标签表示作者-->
1194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
