HTML
全称是超文本标记语言
超文本:可以向网页中插入的元素类型丰富(图片,视频,音频,文字…)
标记:HTML提供了各种标记标示是不同类型的元素img bideo
语法:由很多的标签组成的,标签要一对的写开始标签和结束标签
CSS
什么是CSS
CSS全称叫做层叠样式表stylesheet,是用来修饰HTML网页的一门语言,增强网页的展示能力.主要是使用CSS属性来实现,最终可以将CSS代码和HTML网页代码进行分离,也可以提高CSS代码的复用性.
语法:选择器{属性名:属性值;属性名:属性值:样式3…}
学习重点:选择器+各种属性
位置
- 行内CSS:只作用在当前行,给当前元素使用style属性来修饰样式
- 内部CSS:在HTML代码里使用style标签,包裹着CSS代码,提高了CSS代码的复用性
- 外部CSS:把HTML代码和CSS代码分离,在HTML中引用CSS文件
盒子模型
CSS认为HTML里的每个元素都是一个盒子,盒子与盒子之间的距离,包括盒子的边框以及盒子边框和盒子内容的距离都可以设置.
margin,padding,border
元素类型补充
块级元素
默认情况下,块级元素独占一行(div,p,h1~h6)
可以设置宽和高.如果不设置宽和高,其中宽是默认填满父元素,而高是由内容外边距/边框/内边距都可以设置.
行内元素
默认情况下,多个行元素处在同一行
不能设置宽和高
左右外边距/边框/内边距都可以设置,上下外边距设置无效
行内块元素
既具备行内元素的特征,还具备会计元素的特征
JS
概述
全称是javascript,是java脚本语言.用来增强网页的交互性.
JS是基于对象和事件驱动的脚本语言
基于对象:js和java一样,可以创建对象并使用对象.
事件驱动:js代码必须想办法触发才会执行,常见事件:单击/双击/鼠标划入划出…
脚本语言:js的运行必须在浏览器里
JS特点:直译式,弱类型的语言,跨平台(浏览器),一定的安全性
JS位置
行内JS/内部JS/外部JS
基本数据类型
包括:number/string/boolean/null/undefined
(1)数值类型
在JS中,数值类型只有一种,就是浮点型.
在JS中,需要时会自动的进行数据类型的转换,比如:在显示和处理的时候,浮点型和整型会自动的转换.
2.4+3.6=6;
Infinity ： 正无穷大
-Infinity ： 负无穷大
NaN : Not a Number 非数字， 和任何值都不相等，包括它本身
(2)字符串类型-string
在JS中,字符串时基本数据类型.
在JS中,字符串直接量时通过单引号或者双引号引起来.
var str1 = "Hello…";
var str2 = 'CGB2103…';;
alert(str1);
(3)布尔类型-boolean
var s1 = false;
console.log(s1);
(4)undefined
值只有一个就是undefined.表示变量没有初始化值.
a) var num; alert(num);//声明了变量但是没有为变量赋值，该变量的值就是undefined。
b) 或者访问一个对象上不存在的属性时，也是undefined。
c) 或者访问数组中一个没有的元素的位置时，该位置处的值也是undefined.
(5)null
值也只有一个,就是null,表示空值或者不存在的对象.
复杂数据类型
函数/数组/对象(自定义对象,内置对象,DOM对象,BOM对象…)
JS的变量
js时弱类型语言,所有类型的变量都是用var关键字定义,并且参数的类型可以随时转换.
javascript没有类似采用静态语言类型,如java的变量类型是编译期就确定的;而它采用了动态类型,也就是说在编译期类型不确定,运行时会动态根据变量的赋值来决定它的类型,这点比较灵活.这也时双刃剑,编译期就难以检查出其赋值的错误.
JS的运算符
JS中的运算符和Java中的运算符大致相同
算术运算符:+,-,,/,%,++,-
赋值运算符:=,+=,-=,=,/=,%=
比较运算符:==,!=,=,!,>,<,>=,<=
位运算符:&,|
逻辑运算符:&&,||
前置逻辑运算符:!(not)
三元运算符:?:
var a = 3;
var b = 1;
console.log(a+b);//4
a+=4;
console.log(a+b);//8
//a+=4;
console.log(a==b); //true
console.log(a==="3"); //false 如果两边比较的值不是同一种数据类型，===直接返回false，如果是同一种数据类型，==和===没有区别！
console.log("1"=="1"); //true //由于JS中字符串是基本数据类型，比较字符串相等通过 == 进行！
var a = 1;
alert(a++);//1
alert(++a);//3
alert(++a+a+++a);//4+4+5
alert(a>3?10:8);
var b = 10;
alert(a>b?a:b);//求两个数里的大数
var c = 8;
var d = a>b?(a>c?a:c):(b>c?b:c);
alert(d);//三个数里的大值
typeof运算符:用于返回变量或者表达式的数据类型
var i = 3;
console.log(typeof i);//number
i=true;
console.log(typeof i);//boolean
i="hello";
console.log(typeof i);//string
console.log(typeof 123+"abc");//numberabc
console.log(typeof (123+"abc"));//string
JS数组
JS的数组和java一样,可以存储多个数据
区别:
1,java严格区分数据类型,整型数组只能存整数…
2.JS里的数组可以存储各种数据(弱类型语言)
两种定义方式:
var a = new Array();
var a = [];
JS函数
概述:类似于java里的方法,用来封装一段代码,为了提高代码的复用性.
声明:function 函数名称([参数列表]){函数体}
调用:函数名称([参数列表])
JS对象
内置对象
Window对象–代表浏览器中一个打开的窗口,了解一下即可，很多被UI替代
window.onload() 在浏览器加载完整个html后立即执行!
window.alert("text") 提示信息会话框
window.confirm("text") 确认会话框
window.prompt("text") 键盘输入会话框
window.event 事件对象
window.document 文档对象
Document对象–代表整个HTML文档，可用来访问页面中的所有元素
学会简单使用，后期被jQuery封装，在后期被Vue框架封装
document.write() 动态向页面写入内容
document.getElementById(id) 获得指定id值的元素
document.getElementsByName(name) 获得指定Name值的元素
String/Array/Number/Math/JSON…等
自定义对象
(1)方式一:
- 声明对象:function Person(){}
- 创建对象:var p1=new Person();
- 设置属性:p1.name=“张飞”;p1.age=18;
- 设置方法:p1.run=function(){}
- 访问P1对象
/* 自定义对象*/
function Person(){
} /* 定义对象*/
var p1 = new Person(); /* 创建对象*/
p1.name="张三";
p1.age=20;
console.log(p1);
p1.say = function(){
/* 定义函数*/
console.log("haha");
}
p1.say(); /* 函数调用*/
上面展示了js的强大！js的牛掰之处就在于，它的属性可以边写边创建，非常灵活，而java不行，必须先定义。
(2)方式二:
var p2 = {
"pname":"李四",
"page":100,
"psay":function(){
/* this使用p2里定义的 */
console.log(this.pname+this.page);
}
}
console.log(p2);
p2.psay(); /* 函数调用*/
JS数组,函数,对象汇总
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js 作业</title>
<script>
/* js数组 */
//js数组的创建方法1
var array1=new Array(1,'我',"他");
console.log(array1);
for(let i=0;i<array1.length;i++){
console.log(array1[i]);
}
//js数组的创建方式2
var array2=[2,'嘿',"哈"];
console.log(array2);
for(let i in array2){
console.log(array2[i]);
}
/* js函数 */
//js函数的创建方法1
function fun1(a){
console.log("我是函数fun1");
return a;
}
var a="函数fun1的参数";
console.log(fun1(a));
//js函数的创建方法2
var fun2=function(a){
console.log("我是函数fun2");
return a;
}
var a="函数fun2的参数";
console.log(fun2(a));
/* js对象 */
/* 内置对象 */
//window
window.alert("我是window对象的提示信息会话框");
window.confirm("我是window对象的确认会话框");
window.prompt("我是window对象的输入框");
//string
var str="我是一名99级的封号斗罗";
console.log(str);
console.log("字符串长度:"+str.length);
console.log("字符串最后一个字符:"+str.charAt(str.length-1));
console.log("查询9首次出现位置的下标:"+str.indexOf("9"));
console.log('查询9最后出现位置的下标:'+str.lastIndexOf("9"))
console.log(str.concat(",来和我一起成神吧"));
console.log(str.substr(4));
console.log(str.substring(4));
console.log("substr可以截取从指定位置字符开始后的若干字符:"+str.substr(4,10));
console.log("substring可以截取两个位置之间的字符,含头不含尾:"+str.substring(4,10));
/* 自定义对象 */
//创建对象的方法1
function Object(){
}
var object1=new Object();
object1.name='我';
object1.eat=function(num){
console.log(this.name+"吃了"+num+"碗饭");
}
console.log(object1.name);
object1.eat(4);
//创建对象的方法2
var object2={
name:"他",
age:28,
eat:function(num){
console.log(this.name+"吃了"+num+"碗饭");
}
}
console.log(object2.age);
object2.eat(5);
</script>
</head>
<body>
</body>
</html>
Document对象
概述
全称是文档对象模型,是JS提供的一种用来快速解析HTML文档的HTML网页的 技术.
利用Document对象提供的API操作元素
--获取对象: window.document
--调用方法:
getElementById("元素的id的属性的值")--返回1个元素
getElementsByName("元素的name属性的值")--返回多个元素(用数组)
getElementsByClassName("元素的class属性的值")--返回多个元素(用数组)
getElementsByTagName("元素的标签名的值")--返回多个元素(用数组)
write()--向文档写 HTML 表达式 或 JavaScript 代码
title--返回网页的标题
id--设置或返回元素的id
innerHTML--设置或返回元素的内容
innerText--获取元素的内容
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM解析</title>
<!-- js -->
<script>
function a(){
/* 按id获取,返回1个 */
var x = document.getElementById("div1");
x.innerHTML="<h1>你好div</h1>";
/* 按name属性值获取,返回多个*/
var y = document.getElementsByName("div2");
console.log(y);//NodeList
y[0].innerHTML="hello js...";
/* 按class属性值获取,返回多个*/
var z = document.getElementsByClassName("span1");
console.log(z);//HTMLCollection
z[0].innerText="<p>我变了</p>"
/* 按照标签名获取,返回多个 */
var m = document.getElementsByTagName("div");
console.log(m);//HTMLCollection
m[1].style.fontSize=30+"px";
}
</script>
</head>
<body>
<div id="div1" onclick="a();">我是div1</div>
<div name="div2" onclick="a();">我是div2</div>
<span class="span1">我是span1</span>
<span class="span1">我是span2</span>
<a name="div2" id="a1">我是a</a>
<!-- js事件: -->
<a href="#" onclick="method();">单击触发js</a>
<a href="#" ondblclick="method2();">双击触发js</a>
<a href="#" onmouseenter="method3();">滑过触发js</a>
<a href="#" onmouseleave="method4();">滑走触发js</a>
<button onkeydown="alert(1);">点我</button>
</body>
</html>
JSON
概述
规定了浏览器和服务器交互数据的格式,本质上就是一个字符串
好处:轻量级,简洁明了
语法格式
JSON数据:
var a = ' "firstName" : "John" '
JSON对象:
var a = ' { "firstName":"John" , "lastName":"Done" } '
JSON数组:
var a = '[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" }]';
json字符串转js对象:
JSON.parse(str);
js对象转json字符串
JSON.stringify(object);