近期学习web笔记，可供参考
目录
css:
css导入方式：
css选择器：
javascript:
javascript介绍：
js引入方式：
js书写语法：
js变量：
5种原始类型：
运算符：
JavaScript流程控制语句：
JavaScript函数：
JavaScript对象：
1.Array
JavaScript中的自定义对象：
BOM对象：
DOM：
属性：
事件监听：
事件绑定：
常用事件：
正则表达式：
css:
css导入方式：
css导入HTML有三种方式，
1.内联样式：在标签内部使用style属性，属性值是css属性键值对
<div style="color:red"> HELLO CSS</div>
2.内部样式：定义<style>标签，在标签内部定义css样式
<style type="text/css"> div{ color:red; } </style>
3.外部样式：定义link标签，在HTML中引入外部css文件
（复制
href="../demo.css"复制
）是css文件路径复制
（ rel ="stylesheet" 标志是css文件）
<link rel ="stylesheet" href="demo.css">
外部css:
div{ color:red; }
整合代码实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color: blue; } </style> <link href="../demo.css" rel="stylesheet"> </head> <body> <!--方法1 内联--> <div style ="color:red"> jskxcdksmkmfdkjd</div> <div>dkdsasdk6666666666</div> <p>nb999</p> </body> </html>
demo.css文件：
p{ color:darkred; }
css选择器：
选择器是选择其所需的标签如：
div{
color:red;
}
表示选取标签div
选择器的分类：
1.元素选择器：
元素名称{color：red;}
2.id选择器：
#id属性值{color：red;}
3.类选择器：
.class属性值{color：red;}
选择器向冲突时，谁选择范围小，谁生效
id选择器唯一，所以选择器为单项
类选择器可以多选
代码实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color: darkcyan; } #name{ color:rebeccapurple; } .cls{ color:darkgreen; } </style> </head> <body> <div>div1</div> <div id="name">div2</div> <div class="cls">div3</div> <span class="cls">span1</span> </body> </html>
javascript:
javascript介绍：
javascript是一门跨平台，面向对象的脚本语言（不需要编译，直接可执行），来控制网页行为，他能让网页可交互
js是控制网页行为的，所以需要与HTML结合
js引入方式：
1.内部脚本：
将js代码定义在HTML页面中
在HTML中，js代码必须位于<script></script>标签之间
<script> alert("hello js"); </script>
提示：
1.在HTML文档中可以在任何位置加<script>标签
2.一般把标签放置在<body>元素的底部，这样可以改善显示速度，先加载出来页面（让用户先看到页面，不着急），在加载js代码（脚本执行会拖慢显示）
2.外部脚本：
将js代码定义在外部js文件中，让后也引入HTML页面中
外部文件：demo.js
alert("hello js");
引入外部js文件:
<script src="../js/demo.js"></script>
注意：
1.外部脚本不能包含<script>标签
2.<script>标签不能自闭和
代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> <!--内部js--> alert("js hello"); <!--弹出警告框--> </script> </head> <body> <script src="../js/demo.js"> <!--用src属性指定资源路径--> </script> </body> </html>
外部js代码：
alert("666666");
js书写语法：
1.区分大小写：与Java一样，变量名，函数名以及其他一切东西都是区分大小写的，
2.每行结尾的分号可有可无
3.注释：与Java一样
4.大括号表示代码块
输出语句：
1.使用window.alert()写入警告框
2.使用document.write()写入HTML输出
3.使用console.log()写入浏览器控制台
代码实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> alert("99999999"); document.write("66666"); console.log("88888"); <!--可在开发者工具中查看--> </script> </body> </html>
js变量：
在js中用var关键字来声明变量
var test=20;
test="张三";复制
JavaScript是一门弱类型的语言，变量可以存放不同类型的值
变量名的命名规则与Java相同（建议驼峰命名）
在使用var命名时，相当于全局变量（而且可以重复定义）
新引入let关键字来定义变量，用法类似var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明
新增const关键字，用来声明一个只读的常量，一旦声明，常量就不能改变
数据类型：
JavaScript中分为：原始类型和引用类型
5种原始类型：
number：数字
string：字符
boolean:布尔
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是undefined
使用typeof运算符可以获取数据类型
alert（typeof age）;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var ch='ss'; var age=20; var price=66.9; var obj=null; alert(typeof age); alert(typeof price); alert(typeof ch); alert(typeof obj); </script> </body> </html>
运算符：
运算符与Java运算符大概相同
js比Java多一个（===全等于）
==
* 1.判断类型是否相同，如果不一样，则进行类型转换‘
* 2.再比较其值
* ===全等于
* 1.判断类型是否一样，不一样直接返回false
* 2.类型一样才比较值复制
JavaScript类型转换：
*类型转换：
* 1.其他类型转换成number(使用parseInt 字符串转换成数字)
* string：按照字符串字面值，转换成数字
* boolean: true转换成1 false 转换成0
* **/
/*
* 当字符串为非字母时，会转换成NaN(number中特殊的值)
* 如果想让字符串转换成number 在字符串前面加上+复制
其他类型转换成Boolean
* 1.number 0与NaN 转为false 其他转换成true
* 2.string 空字符串转换成false 其他转换成true
* 3.null false
* 4.undefined false复制
代码实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> /* * * == * 1.判断类型是否相同，如果不一样，则进行类型转换‘ * 2.再比较其值 * ===全等于 * 1.判断类型是否一样，不一样直接返回false * 2.类型一样才比较值 * */ var b=20; var c="20"; alert(b==c); /* *类型转换： * 1.其他类型转换成number(使用parseInt 字符串转换成数字) * string：按照字符串字面值，转换成数字 * boolean: true转换成1 false 转换成0 * **/ /* * 当字符串为非字母时，会转换成NaN(number中特殊的值) * 如果想让字符串转换成number 在字符串前面加上+ * */ var d="sss"; alert(parseInt(d)); var e=+true; alert(e); /* * 其他类型转换成Boolean * 1.number 0与NaN 转为false 其他转换成true * 2.string 空字符串转换成false 其他转换成true * 3.null false * 4.undefined false * */ </script> </body> </html>
JavaScript流程控制语句：
与Java也是相同的
if：
switch：
for：
while：
do....while：
部分代码实例：
由于与Java完全相同，没有全部写出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var sum=0; for (let i=1;i<=100;i++)// 最好用let定义 只在代码块中有效 用var 则全局有效 { sum+=i; } alert(sum); /* do while */ var sum=0; var i=1; do { sum+=i; i++; }while(i<=100) alert(sum); </script> </body> </html>
JavaScript函数：
函数（Java中成为方法）：都是被设计为执行特定任务的代码块
在JavaScript中函数的定义与Java中方法的定义有些不同
定义：JavaScript函数通过function关键字进行定义，语法为：
方式1：
function fun(a,b) { return a+b; }
方式2：
var f=function (a,b){ return a-b; }
先定义一个变量，让变量接受函数的值（数组相当于对象）
注意：
1.形式参数不需要类型，因为JavaScript是弱类型语言
2.返回值也不需要定义类型 可以在函数内部直接使用return返回
函数的调用：
let m=fun(1,2);
函数的调用注意：
函数调用的过程中，传入的参数个数可以与形参个数不同
当形参个数为2时，实参传入1个时，则另一个形参会赋值为NaN
则最后结果也是NaN
function fun(a,b) { return a+b; } let m=fun(1); alert(m);
跳出弹框：
JavaScript对象：
1.Array
JavaScript中Array对象用于定义数组
定义：
方法1：
var 变量名=new Array（元素列表）
var n1=new Array(1,2,3);
方法2：
var 变量名=[元素列表]
var n2=[1,3,2];
注意：
js数组类似于Java中的集合，长度，类型可变
访问：
与Java的数组访问相似：
n2[0]
JavaScript中的变长度：
var n1=new Array(1,2,3); // alert(n1); n1[10]=10; alert(n1); alert(n1[9])
访问结果：
在没有初始化的情况下，会被赋值为undefined
JavaScript中的变类型：
n1[5]="helloooo"; alert(n1[5]) alert(n1)
复制
Array属性：
1.length
var arr=[1,2,3]; for (let i = 0; i < arr.length; i++) { alert(arr[i]) }
Array方法：
push:添加方法
数组相当于对象，所以调用方法时要用对象
var arr=[1,2,3]; arr.push(4); for (let i = 0; i < arr.length; i++) { alert(arr[i]) }
splice：删除方法
splice（参数1，参数2）复制
参数1：表示从下标为几的位置开始删除
参数2：表示删除元素的个数
arr.splice(1,1)
2.String对象：
定义：
方式1：
var 变量名=new String(s);
var n1=new String("skadj"); alert(n1);
方式2：
var 变量名=s;
var n2="sssssssss"; alert(n2);
属性：
length ：字符串的长度
alert(n2.length)
方法：
charAt() 返回在指定位置的字符
IndexOf() 检索字符串
trim（）方法：去除字符串前后两端的空白字符串
var srt=" a " alert(1+srt.trim()+2)
JavaScript中的自定义对象：
与Java中的类相似
格式：
var 对象名={
属性1：属性值1，
...................
函数名：function（形参列表）{}
..................
}；
实例：
<script> /* * 创建的是自定义对象 对象 对象！！！！！！！！！！ * */ var n1={ name:"txc", class:"yun1", age:19, eat :function (a,b){ alert(a+"和"+b+"都喜欢吃水果") } } n1.eat("tt","yy"); alert(n1.age) </script>
BOM对象：
浏览器对象模型
JavaScript将浏览器的各个组成部分封装为对象
BOM中的五个对象：
Window:
窗口（打开的浏览器对象--可以调用一些window方法（window可以省略））
widow对象的属性：获取其他BOM对象
window方法：alert（） 弹出警告框（确认的按钮和警告信息）
confirm（）显示一段消息以及确认按钮和取消按钮的对话框
let confirm1 = confirm("危险！！！"); alert(confirm1)
confirm（）是有返回值的 返回值的不同走的路径就不同（点击确定按钮--true 点击取消按钮返回---false）
setInterval()按照指定周期来调用函数或计算表达式
setTimeout()在指定的毫秒后调用函数或计算表达式
代码实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> /*显示一段消息以及确认按钮和取消按钮的对话框*/ let confirm1 = confirm("危险！！！"); alert(confirm1) /* setInterval() 按照指定周期来调用函数或计算表达式*/ // setInterval(function（），毫秒值);//在一定的时间间隔后执行一个function（）函数，循环结束 // setTimeout() 在一定的时间间隔后执行一个function（）函数 执行一次 // setInterval(function (){ // alert("hello"); // },3000); setTimeout(function (){ alert("hello"); },3000); </script> </body> </html>
定时器（比如京东商城页面的滑轮--定时转换）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" onclick="on()" value="白底"> <img id="myImage" border="0" src="蓝底.gif" style="..."> <input type="button" onclick="off()" value="蓝底"> <script> function on(){ document.getElementById('myImage').src='蓝底.gif' } function off(){ document.getElementById('myImage').src='白底.gif' } var x=0; setInterval(function (){ if (x % 2=== 0) { on(); } else { off(); } x ++ ; },1000); </script> </body> </html>
Navigator:
浏览器对象（整个浏览器对象-------包含浏览器的一些信息）
Screen:
整个显示器屏幕对象（屏幕的属性----长宽高之类）
History：
历史记录对象
获取：使用window.history获取（window可以省略）
history.方法（）；
方法：
back()
加载history列表中前一个URL（统一资源定位符---调用资源）
forward()
加载history列表中后一个URL()
效果
Location:
地址栏对象
location.方法（）（---window省略）
属性：
href:设置或返回完整的URL
其实就相当与传入一个网址，进行跳转
内容函数引用
document.write('三秒后跳转');函数复制
Document 对象使我们可以从脚本（JavaScript）中对 HTML 页面中的所有元素进行访问。
在页面上写入出来
代码实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> document.write('三秒后跳转'); setTimeout(function () { location.href="https://www.bilibili.com/video/BV1Qf4y1T7Hx?p=79&spm_id_from=pageDriver&vd_source=061c60aa464a23eb048c1d56c47c8b6c" },3000) </script> </body> </html>
DOM：
文档对象模型
将标记语言的各个部分封装为对象
HTML是标记文档（各部分被封装）
Document：整个文档对象
Element:元素对象（标签对象）
Attribute:属性对象
Text:文本对象
Comment:注释对象
JavaScript通过dom对HTML进行操作
改变HTML元素内容
改变HTML元素样式
对HTML DOM事件做出反应
添加和删除HTML元素
DOM定义访问了HTML和XML文档的标准
W3C 的 DOM标准被分为三部分
1.核心DOM：针对任何结构化文档的标准模型
Document：整个文档对象
Element:元素对象（标签对象）
Attribute:属性对象
Text:文本对象
Comment:注释对象
2.XML DOM：针对xml文档的标准模型
3.HTML DOM :针对HTML文档的标准模型
Image: <img>
Button:<input type ='button'>'
Element:元素对象
使用：查阅文档
获取：使用DOCUMENT对象的方法获取
1.document.getElementById() :根据id属性获取，返回一个element对像
2.document.getElementsByTagName()：根据标签名获取，返回element对象数组
3.document.getElementsByName()：根据name 属性获取，返回element对象数组
4.document.getElementsByClassName()：根据class属性获取，返回element对象数组
代码实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img id="light" src="蓝底.gif"> <br> <div class="cls">传智教育</div> <br> <div class="cls">黑马程序员</div> <br> <input type="checkbox" name="hobby"> 电影 <input type="checkbox" name="hobby"> 旅游 <input type="checkbox" name="hobby"> 游戏 <script> // 返回element对象 var img=document.getElementById("light"); alert(img) var divs = document.getElementsByTagName("div"); alert(divs.length) alert(divs[0]) var ho = document.getElementsByName("hobby"); alert(ho[0]) var cls = document.getElementsByClassName("cls"); alert(cls[0]) </script> </body> </html>
属性：
element.style 设置或返回元素的style属性 （设置css样式）
element.innerHTML 返回或设置元素内容
代码实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img id="light" src="蓝底.gif"> <br> <div class="cls">传智教育</div> <br> <div class="cls">黑马程序员</div> <br> <input type="checkbox" name="hobby"> 电影 <input type="checkbox" name="hobby"> 旅游 <input type="checkbox" name="hobby"> 游戏 <script> //# 上面三种标签会封装成对象 //通过对象进行更改 document.getElementById("light").src="白底.gif" var divs = document.getElementsByTagName("div"); for (let i=0;i<divs.length;i++) { divs[i].style.color='red'; // divs[i].innerHTML="hehh"; } // <input>中type="checkbox" // 属性checked 设置或返回checkbox是否被选中（true false） var hobbys = document.getElementsByName("hobby"); for (let i=0;i<hobbys.length;i++) { hobbys[i].checked=true; // alert(hobby[i]); } </script> </body> </html>
事件监听：
事件：HTML事件是发生在HTML元素上的“事情”
比如：
按钮被点击
鼠标移动到元素之上
按下键盘按键
事件监听：JavaScript可以在事件被监测到时执行代码
事件绑定：
方式一：
通过HTML标签中事件的属性进行绑定（没有做到职责单一，JavaScript代码和HTML代码耦合在一起）
方式二：
通过DOM属性绑定复制
代码实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="点我" onClick='on()'><br> <input type="button" value="再点我" id="btn"> <script> //方式1 通过标签属性进行绑定 function on() { alert("我被点了"); } // 方式2：// 通过DOM属性绑定 document.getElementById("btn").onclick=function () { alert("我被点了") } </script> </body> </html>
常用事件：
onblur:元素失去焦点(文本框点 击就获得焦点--变深)
onfocus:元素获取焦点
onsubmit：确认提交表单
表单验证（案例）：
1.当输入框失去焦点时，验证输入内容是否符合要求
2.当点击注册按钮时，判断所有输入框内容是否符合要求，如果不符合则阻止表单提交
正则表达式：
正则表达式定义了字符串的组成规则
定义：
1.直接量：(不要加引号)
var reg =/^\w{6,12}$/
2.创建RegExp对象
var reg =new RegExp("^\\w{6,12}$")
方法：
test（str）:
str:是字符串
判断指定字符串是否符合正则表达式的规则，返回true和false
代码实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> // 规定单词字符6-12 var reg =/^\w{6,12}$/; var str="sdsddsd"; var flag=reg.test(str); alert(flag); // 长度11 数字组成 第一位是1 var re=/^[1]\d{10}$/ var st="15893266008" var falg=re.test(st); alert(falg); </script> </body> </html>
到此完结撒花！！！！！！！
