html概述-->nodepad++编写第一个html-->html元素-->javascript概述-->javascript变量-->变量类型 -->javascript函数-->条件语句if-->html dom-->获取元素的属性-->元素绑定事件-->jQuery的使用-->firebug
-- 问题什么是html
/*
html是从来描述网页的一种语言
html指超文本标记语言
html不是一种编程语言，而是一种标记语言
标记语言是一套标记标签
html使用标记标签来描述网页
*/
-- 问题什么是html标签
/*
html标记标签通常被称为html标签（html log）;
html标签是由尖括号包围的关键词，比如<html>;
html通常成对出现的，比如<b>,</b>;
标签对中的第一个标签是开始标签，第二个是结束标签
开始标签和结束标签也被称为开放标签和闭合标签
*/
-- html文档=网页
/*
html文档描述网页
html文档包括html标签和纯文本
html文档也被称为网页
web浏览器的作用的读取html文档，并以网页的形式显示出他们；
浏览器不会显示html标签，而是使用标签来解释页面的内容
<html>
<head>
<title>Html学习</title>
</head>
<body>
<h1>我的第一个头标题</h1>
<b>我的第一个段落</b>
</body>
</html>
解释
<html></html>之间的文本描述网页
<head></head>之间的文本一般用于描述要引用的JavaScript和css文件
<body></body>之间的文本描述可见的页面内容
<title></title>之间的文本描述网页名称
<h1></h1>之间的文本描述标题
<b></b>之间的文本描述段落
*/
使用nodepad++编写第一个html
以html文件格式来保存文件，比如test.html
双击打开文件，可以看到网页效果
-- html元素
html文档是由html元素定义的
html元素指的是从开始标签start tag到结束标签end tag的所有代码
eg:<p>this is paragrah</p>是p元素
大多数html元素可拥有属性
-- 嵌套的html元素
大多数html元素可以嵌套
html文档由嵌套的html元素构成
-- 常见需要掌握的html元素
/*
1,文本输入框
<input type = "text"/ value="第一个输入框"/>
2,选择框
<input type = "checkbox"/>
3,单选/复选按钮
<input type = "radio"/>
<input type = "radio" name="sex"/>男 <input type = "radio" name="sex"/>女
4,按钮
<input type = "button"/>
<input type = "button"value ="登录按钮"/>
5,文件上传
<input type = "file"/>
6,密码输入框
<input type = "password"/>
7,下拉框
<select><option></option></select>
<select>
<option>--请选择--</option>
<option>武汉</option>
<option>深圳</option>
<option>上海</option>
</select>
8,超链接
<a href ="http://www.baidu.com">...</a>
<a href ="http://www.baidu.com">百度网址</a>
9,表格
<form>
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</form>
<form>
<table border="1">
<tr><td>aa</td><td>bb</td></tr>
<tr><td>cc</td><td>dd</td></tr>
<tr><td>ee</td><td>ff</td></tr>
</table>
</form>
10,图片
<img src=""/>
<img src="./mysql.png"/>
11,有序列表
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ol>
<li><a href ="http://www.baidu.com">第一条新闻</a></li>
<li><a href ="http://www.baidu.com">第二条新闻</a></li>
<li><a href ="http://www.baidu.com">第三条新闻</a></li>
</ol>
12,无序列表
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li><a href ="http://www.baidu.com">第一条新闻</a></li>
<li><a href ="http://www.baidu.com">第二条新闻</a></li>
<li><a href ="http://www.baidu.com">第三条新闻</a></li>
</ul>
13,文本域
<textarea rows="" cols=""></textarea>
<textarea rows="5" cols="10"></textarea>
14,标题标签
<h1></h1>
<h1>aa</h1>
<h2>aa</h2>
<h3>aa</h3>
<h4>aa</h4>
<h5>aa</h5>
15,加粗标签
<b></b>
<b>测试</b>
16,label标签：加标注
为input元素定义标注
<label>男性</label> <input type="radio" name ="sex" id="male"/>
<label>女性</label> <input type="radio" name ="sex" id="female"/>
17,iframe:在一个页面内嵌一个页面
<iframe src=""width=""height=""></iframe>
<iframe src="http://www.baidu.com"width="200"height="200"></iframe>
18,div页面布局,元素常用布局工具，因为能够轻松的通过css对其定位
<body>
<div class="head">
<h1>页面顶部区域</h1>
</div>
<div class="left">
<h1>页面左部区域</h1>
</div>
<div class="middle">
<h1>页面中部区域</h1>
</div>
<div class="foot">
<h1>页面底部区域</h1>
</div>
</body>
例如：样式放在head标签下，用styley标签定义
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>html学习</title>
<style>
.head{
background-color:black;
color:white;
text-align:center;
padding:5px;
}
.left{
line-beight:30px;
background-color:#eeeeee;
height:300px;
100px;
float:left;
padding:5px;
}
.middle{
350px;
float:left;
padding:10px;
}
.foot{
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div class="head">
<h1>页面顶部区域</h1>
</div>
<div class="left">
<h1>页面左部区域</h1>
</div>
<div class="middle">
<h1>页面中部区域</h1>
</div>
<div class="foot">
<h1>页面底部区域</h1>
</div>
</body>
</html>
备注：html的head标签下添加meta，可以保证网页打开不乱码，显示正常文本信息
<meta http-equiv="content-type" content="text/html;charset=utf-8">
*/
-- 什么是javascript
/*
javascript是属于网络的脚本语言,它是一种轻量级的编程语言
javascript可插入html页码的编程代码,被网页用来改进设计,验证表单,检查浏览器,创建cookies,以及更多应用
这门语言可用于html和web,更可广泛用于服务器,pc,笔记本,平板,智能手机等设备
javascript插入html页面后,可由所有的现代浏览器执行
*/
-- javascript的使用
/*
html中的脚本必须位于<script></script>标签之间
脚本可放置在html页面的<body>和<head>部分中，建议使用head，因为最先被渲染，也便于维护
示例
<script>alert("我的第一个JavaScript脚本")</script>
eg
<script >
alert("我是一个提示框");
</script>
*/
-- javascript变量
/*
声明一个JavaScript变量
我们使用var关键字来定义一个变量,变量的作用是用来存储数据
var name;
如果想要给该变量赋值，则需要使用等号"="
name="张三";
当然也可以在变量定义的时候就对其赋值
eg
<script >
var a;
a=1;
alert(a);
</script>
*/
-- 变量类型
/*
JavaScript的变量类型
字符串,数字,布尔,数组,对象,null,undefined;
所有类型都是用var来表示;
数字类型:var a=1;
字符串类型:var a="a",
布尔类型:var a=true;
数组类型:var a=["a","aa","aaa"];
json对象类型:var person={"name":"张三","job":"aa"};
空值类型:var p=null;
未定义类型:在使用一个未定义的变量的时候就会抛出来这个值
注意:
1,对于数组，取值和赋值都是通过索引来操作的:a[0],a[1],,,
2,索引的最大值为数组的长度减1;
3,a.length可以获取到数组的最大长度;
4,json对象取值和设置是通过,键值来操作的:a.name="张三"
*/
-- javascript函数
/*
javascript函数概念,函数是一段具有固定格式的代码，它是一段能够完成某一特定功能的独立代码，函数可以被拿来重复调用
JavaScript函数语法,不带参:function 函数名(){...},带参函数:function函数名(a,b){...}
函数定义实例，两数求和:
function add1(a,b){
var result=a+b;
}
两数求和并返回
function add2(a,b){
return a+b;
}
eg:定义并返回
function add1(a,b){
return a+b;
}
var result=add1(1,2);
alert("result="+result);
*/
-- JavaScript循环语句for
/*
循环可以将代码块执行指定的次数
for循环的语法：
for(语句1;语句2;语句3;){
执行的代码块}
语句1:循环开始变量的初始值
语句2:循环执行下去的条件
for(var i=1;i<=5;i++){
alert("i="+i);
}
*/
-- JavaScript条件语句if
/*
用于基于不同的条件执行不同的动作
if...if...else
if(){
}else if(){
}else{
}
eg
var a=1;
if(a>0){
alert("a大于0");
}else if(a<0){
alert("a小于0");
}else{
alert("a等于0");
}
区别:if...else条件满足，停止执行，if...if条件满足还会执行
var a=0;
if(a>0){
alert("a大于0");
}
if(a<0){
alert("a小于0");
}
if(a==0){
alert("a等于0");
}
*/
-- html dom(文档对象模型)
/*
通过html dom,可以访问JavaScript html所有元素
当网页被加载时，浏览器会创建页面的文档对象模型(document object model)
html dom 数
文档-根元素html-->元素head/body-->元素title/herf/a/h1
通过可编程的对象模型，JavaScript获得了足够的能力来创造动态的html
1,javascript能够改变页面中的所有html元素
2,javascript能够改变页面中的所有html属性
3,javascript能够改变页面中的所有css元素
4,javascript能够对页面中的所有事件做出反应
两个顶级节点
window:表示浏览器中打开的窗口
document:表示窗口显示的当前文档(当前页面)
注意:window是document的父节点，通过document节点可以遍历到文档里所有子节点
用document文档对象来定位html元素的几种常见方式
(注意一般找元素都是在窗口window加载完成后)
1,通过id, var elel= document.getElementById("test3");
2,通过标签名,var elel=document.getElementsByTagName("input");
3,通过类名,var elel=document.getElementsByClassName("test");
备注：
当页面加载完成时会触发此事件
window.onload =function(){}
<script>
window.onload=function(){
var elel=document.getElementById("test3");
alert(elel.value);
}
</script>
<style>
.test{
background-color="red"
}
</style>
//获取样式，定义颜色
eg
var elel= document.getElementById("test3");
alert(elel.value);
//获取id为"test3"的value值，用元素点属性的方式获取
/*var elel=document.getElementsByTagName("input");
for (var i=0;i<elel.length;i++){
alert(elel[i].value);
}*/
//获取标签,得到一个数组
/*var elel=document.getElementsByTagName("input");
alert(elel.length);
}*/
//获取标签，得到数组长度
/*var elel=document.getElementsByClassName("test");
alert(elel.length);
}*/
//获取样式，得到数组长度
var elel= document.getElementById("test3");
elel.value="附一个新值";
//赋值value属性
/*var elel= document.getElementById("test3");
elel.name="附一个新值"*/
//赋值name属性
/*alert(document.getElementById("abc").text);
alert(document.getElementById("abc").innerHTML);*/
//text和innerHTML区别，纯文本和带标签的区别
-- 操作元素的属性
获取元素的属性
方法：元素.属性
1,获取id为test元素的value属性值
var value= document.getElementById("test").value;
2,获取id为test元素的value属性值为"测试"
var value= document.getElementById("test").value="测试";
3,其他属性取值赋值方式也一样
获取元素间内容
1,获取元素间存文本内容(不含标签text)
alert(document.getElementById("abc").text);
2,获取元素间所有内容(含标签innerHTML)
alert(document.getElementById("abc").innerHTML);
//text和innerHTML区别,纯文本和带标签的区别
练习笔记
<html>
<head>
<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>
<script>
window.onload=function(){
var value= document.getElementById("test3").value="测试";
alert(document.getElementById("abc").innerHTML);
}
</script>
<style>
.test{
background-color="red"
}
</style>
<title>html练习dom</title>
</head>
<body>
文本框1：<input type="text" id="test1" value="1"class="test"/>
<br>
文本框2：<input type="text" id="test2" value="2"class="test"/>
<br>
文本框3：<input type="text" id="test3" value="3"class="test"/>
<br>
文本框4：<input type="text" id="test4" value="4"class="test"/>
<br>
文本框5：<input type="text" id="test5" value="5"class="test"/>
<br>
文本框6：<input type="text" id="test6" value="6"class="test"/>
<br>
<a href="http://www.baidu.com"id="abc"><font color="red">测试获取标签中间的值</font></a>
<br>
</body>
</html>
-- html dom事件
常见dom事件
1,onload():当网页加载完成时触发此事件
2,onblur():当元素失去焦点时触发此事件
3,onfocus():当元素聚焦时触发此事件
4,onchange():当元素的value值改变时触发此事件
5,onclick():当元素单击时触发此事件
6,ondblclick:当元素双击时触发此事件
1,onload():当网页加载完成时触发此事件
window.onload=function(){
alert("page is loaded");
}
2,onblur():当元素失去焦点时触发此事件(用于绑定输入框的)
window.onload=function(){
document.getElementById("test1").onblur=function(){
alert("this.value");
}
}
3,onfocus():当元素聚焦时触发此事件
window.onload=function(){
document.getElementById("test2").onfocus=function(){
this.value="222";
}
}
4,onchange():当元素的value值改变时触发此事件
window.onload=function(){
document.getElementById("test1").onchange=function(){
alert("this.value");
}
}
eg
<html>
<head>
<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>
<script>
window.onload=function(){
document.getElementById("test1").onchange=function(){
alert(document.getElementById("test1").value);
alert("520");
}
}
</script>
</head>
<body>
请输入姓名：<input type="text" id="test1" value="周周"class="test"/>
<br>
<input type="button" id="login" value="登录">
</body>
</html>
-- jquery
--什么是jQuery
jQuery是一个JavaScript库
极大简化了JavaScript编程
凡是JavaScript能完成的事情，jQuery都能做
--学习目标
1,使用jQuery选择器定位dom元素
2,使用jQuery修改dom元素的属性
3,使用jQuery给dom元素绑定事件
-- 怎么使用jQuery
下载jQuery框架源码，然后将源码文件引入到html中,直接引用jquery
<script src="jquery.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
-- jquery常用的dom元素选择器
1,id选择器:得到的是唯一元素,var test1=$("#test1");
2,标签选择器:得到的是一组元素,var inputArr=$("input");
3,类名选择器:得到的是一组元素,var inputArr2=$(".inp");
备注：$();=window.oncload
$("#test1")=document.getElementById("test1");获取id
$(".test")=document.getElementClassName("test");获取样式
$("input")=document.getElementTagName("input");获取标签
-- jQuery常见元素的属性
1,attr():设置或者返回元素的属性值
2,html():设置或者返回匹配的元素集合中的html内容
3,text()：返回匹配的元素集合中的纯文本内容
4,removeAttr()：从所有匹配的元素中移除指定的属性
5,addClass()：向匹配的元素添加指定的类名
eg
1,attr():设置或者返回元素的属性值
设置：$("#test1").attr("value1","aa");
取值：$("#test1").attr("value1");
2,html():设置或者返回匹配的元素集合中的html内容
设置：$("#test1").html("bb");
取值：$("#test1").html();;
3,text()：返回匹配的元素集合中的纯文本内容
4,removeAttr()：从所有匹配的元素中移除指定的属性
$("#test1").removeAttr("value1");
5,addClass()：向匹配的元素添加指定的类名
$("#test1").addClass("dd")
-- jquery给dom元素绑定事件
1,ready():文档就绪事件
2,blur():当绑定元素失去焦点的时候触发该事件
3,focus():当绑定元素聚焦的时候触发该事件
4,change():当绑定元素value值改变时候触发该事件
5,click():当绑定元素点击的时候触发该事件
6,adlclick():当绑定元素被双击的时候触发该事件
7,mouseover():当鼠标移动到某个元素上的时候触发该事件
$(document).read();
$();
window.onload=function(){};
$(function(){
$("#test1").blur(function(){alert("失焦");});
});
$(function(){
$("#test1").focus(function(){alert("聚焦");});
});
$(function(){
$("#test1").change(function(){alert("值变了");});
});
$(function(){
$("#test1").click(function(){alert("单击事件");});
});
$(function(){
$("#test1").dblclick(function(){alert("双击事件");});
});
$(function(){
$("#test1").mouseover(function(){alert("鼠标移动上去");});
});
-- 安装使用firebug调试工具