JS
介绍
JS是一种直译式（解释型）基于对象的脚本语言，动态类型，弱类型，基于对象的脚本语言，内置支持类型
JS语言和java语言对比：
| 对比 | java | JS |
|---|---|---|
| 运行环境 | JVM虚拟机 | JS引擎，是浏览器的一部分 |
| 是否跨平台 | 跨平台 | 跨平台 |
| 语言类型 | 强类型语言 | 弱类型语言 |
| 是否需要编译 | 需要编译，是编译型语言 | 不需要编译，是解释型语言 |
| 是否区分大小写 | 区分大小写 | 区分大小写 |
JS的作用
具体来说有两部分作用：
JS代码可以操作浏览器：进行网页跳转、历史记录切换、浏览器弹窗等等
JS代码可以操作网页：操作HTML的标签、标签的属性、样式、文本等等
注意：JS的是在浏览器内存中运行时操作，并不会修改网页源码，所以刷新页面后网页会还原
JS的组成
ECMAScript(核心):是JS的基本语法规范
BOM：Browser Object Model，浏览器对象模型，提供了与浏览器进行交互的方法
DOM：Document Object Model，文档对象模型，提供了操作网页的方法
JS的引入
1、内部JS（内嵌式）
<script>
//js代码
</script>
2、外部JS（外联式）
<script src="js文件的路径"></script>
3、注意事项，script标签不能同时用外部和内部JS例：
<script src="../js/my.js">
alert("hello");
</script>
JS小功能
alert():弹出警示框
console.log():向控制台打印日志
console.warn():控制台警示框
console.error():控制台错误提示
document.write():文档打印，向页面输出内容
JS基本语法
变量：用var来定义，类型由它本身决定
注意：
1、var可以省略不写，建议保留
2、最后一个分号可以省略，建议保留
3、同时定义多个变量可以用“，”隔开，公用一个‘var’关键字，var c=1,d=2;
typeof操作符：
用来判断变量是什么类型
typeof(变量名) 或typeof 变量名
null与undefined的区别：
null:对象类型，已经知道的数据类型，但对象为空
undefined:未定义的类型，并不知道是什么数据类型
| 转换函数 | 作用 |
|---|---|
| parseInt() | 将一个字符串转换成整数，如果包含非数字字符，就会转换失败，返回NaN=Not a Number,不是一个数 |
| parseFloat() | 将一个字符串转换成小数 |
| isNaN() | 转换前判断被转换的字符串是否是一个数字。非数字返回true isNaN=is not a number |
函数
普通函数：
function 函数名(形参列表){
函数体
[return 返回值;]
}
调用普通函数：
var result = 函数名(实参列表);
匿名函数，也叫回调函数，类似于java里的函数式接口里的方法
function(形参列表){
函数体
[return 返回值;]
}
特点：
- 参数列表里面直接写参数的变量名，不写var
- 函数没有重载的，后面的直接把前面的覆盖了
JS事件
| 属性 | 此事件发生在何时 |
|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄 |
| ondbclick | 当用户双击某个对象时调用的事件句柄。 |
| onchange | 域的内容被改变。 |
| onblur | 元素失去焦点。 |
| onfocus | 元素获得焦点。 |
| onload | 一张页面或一幅图像完成加载 |
| onsubmit | 确认按钮被点击；表单被提交。 |
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按住 |
| onkeyup | 某个键盘按键被松开。 |
| onmousedown | 鼠标按钮被按下。 |
| onmouseup | 鼠标按键被松开 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseover | 鼠标移到某元素之上 |
| onmousemove | 鼠标被移动 |
事件使用
方式一: 设置标签的 属性
<input type="button" value="点我吧" onclick="sayHello()"/>
<script>
function sayHello() {
alert("hello...");
}
</script>
方式二: 派发事件 匿名函数; 标签对象.事件属性 = function(){}
document.getElementById("inputId").onclick = function () {
alert("你好...");
}
正则表达式
就是用来校验字符串的规则
test()方法
var reg4 =/^1[3456789]\d{9}$/;
var str4 = "188245899";
alert(reg4.test(str4));
Array数组
var arr=new Array(size)
var arr=new Array(element1,element2,element3,…)
var arr=[element1,element2,element3,…]
数组常用方法介绍
| 方法 | 描述 |
|---|---|
| concat(array) | 连接两个或更多的数组，并返回结果 |
| join(string) | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分割 |
| reverse() | 颠倒数组中元素的顺序 |
join(";")就是按分号进行分隔
Date日期
创建当前日期：var date=new Date()
创建指定日期：var date=new Date(年，月，日)
注意：从0开始，0表示1月
创建指定日期：var date=new Date(年，月，日，时，分，秒)
注意：月从0开始，0表示一月
日期常用方法：通过get获取
toLocaleString():根据本地时间，把date对象转换为字符串
JS的BOM
浏览器对象模型
BOM里面的五个对象
window：窗体对象
| 方法 | 作用 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮 |
| confirm | 显示带有一段消息以及确认按钮和取消按钮的对话框 |
| setInterval(‘函数名()’,time) | 按照指定的周期（以毫秒计算表达式） |
| setTimeout(‘函数名()’,time) | 在指定的毫秒数后调用函数或计算表达式 |
| clearInterval() | 取消由setInterval(0设置的Interval() |
| clearTimeout() | 取消由setTimeout()方法设置的timeout |
//1.弹出警告框 window.alert(“不能删除!!!”);widow可以省略
//alert(“不能删除!!!”);
//2.弹出确认框
//var flag = confirm(“您确认删除吗?”);
//console.log(“flag=”+flag);
//if(flag){
//请求服务器 删除
//}
//3.周期执行 setInterval(‘函数名()’,time) eg: setInterval(“sayHello()”,1000);
//setInterval(“sayHello()”,10000);
//4.延迟执行 5s之后调用sayHello()
//setTimeout(“sayHello()”,5000);
var intervalFlag;
function startSayHello() {
//每隔1s开始打印hello…
intervalFlag = setInterval(“sayHello()”,100);
}
function stopSayHello() {
//停止打印sayHello()
clearInterval(intervalFlag);
}
function sayHello() {
console.log(“hello…”);
}
navigator:浏览器导航对象【了解】
属性
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息
screen:屏幕对象【了解】
方法
width
返回显示器屏幕的分辨率宽度
height
返回显示屏幕的分辨率高度
history:历史对象【了解】
方法
back()
加载 history 列表中的前一个 URL
forword()
加载 history 列表中的下一个 URL
go()
加载 history 列表中的某个具体页面
location:当前路径信息
属性
host
设置或返回主机名和当前 URL 的端口号
href
设置或返回完整的 URL
port
设置或返回当前 URL 的端口号
- location.href; 获得路径
- location.href=""; 设置路径
JS的DOM（最重要）
当网页被加载时，浏览器会创建页面的DOM对象。DOM对象模型是一棵树形结构：网页里所有的标签、属性、文本都会转换成节点对象，按照层级结构组织成一棵树形结构。
- 整个网页封装成的对象叫document
- 标签封装成的对象叫Element
- 属性封装成的对象叫Attribute
- 文本封装成的对象叫Text
操作标签
document.getElementById(id)
根据id获取标签
Element对象
document.getElementsByName(name)
根据标签name获取一批标
Element类数组
document.getElementsByTagName(tagName)
根据标签名称获取一批标签
Element类数组
document.getElementsByClassName(className)
根据类名获取一批标签
Element类数组
操作标签
- document.createElement(tagName) 创建标签 Element对象
- document.createTextNode(“文本”) 创建文本节点
- parentElement.appendChild(sonElement) 插入标签
- element.remove() 删除标签
操作标签体
- 获得标签的内容 (一并获得标签)
标签对象.innerHTML; - 设置标签的内容(①会把前面的内容覆盖 ②支持标签的)
标签对象,innerHTML = “html字符串”;
操作属性
- getAttribute(attrName) 获取属性值
- setAttribute(attrName, attrValue) 设置属性值
- removeAttribute(attrName) 删除属性
HTML
hyper text marku[ language:超文本标记语言
font标签：face：字体类型，size取1-7......
段落标签:<p>段落</p> 注意：段落之间自动换行
粗体标签:<b>内容</b>
斜体标签:<i>内容</i>
下划线标签:<hr/>
换行标签:<br/>
图片标签:<img src="图片的路径" width="宽" height="高" alt="图片描述" title="鼠标放上去展示的信息"/>
路径问题:绝对路径（以http开始的，以盘符开始的）
相对路径: ./当前目录 ../上级目录
列表标签：
无序列表：
<ul type="square">type属性：列表的类型；circle:空心圆;square:实心的正方形
注意：ul和li标签是一个整体，一般情况下ul标签和li标签都是一起出现，不会单个出现
有序列表：
<ol type="类型" start="起始索引">start属性: 起始的索引(默认是第1个) type属性: 列表类型; 1: 阿拉伯数字; a: 小写的英文字母; A:大写的英文字母; i: 小写的罗马数字; I:大写的罗马数字
超链接标签（重要）：用于控制页面和页面（服务器资源）之间的跳转的
格式：<a href="指定需要跳转的目标路径" target="打开的方式">需要展现给用户看的内容</a>
target属性取值：_blank:新起页面 _self:当前页面（默认）
假链接：点击不会跳转的链接<a href="#">这是一个假链接</a>
table标签
表单标签（最重要）
用于收集不同类型的用户的输入.
它有一个标签定义，里边有不同的表单控件
常用属性：
action:提交路径，默认是当前页面
method:提交方式，常用的是get和post，默认就是get
get和post的区别：
1、get方式提交的数据在地址栏可见，post方式不可见
2、get方式相对不安全，post安全一些
3、get方式对提交的数据的大小有限制，post方式没有限制的
form的常见子标签
- input:输入域，通过type属性来指定类型
- select:选择列表
- textarea:文本域
type属性：
- text文本输入框
- password密码域
- submit提交按钮
- reset重置按钮
- button空白按钮
- radio单选框
- checkbox复选框
- file文件
- hidden隐藏字段
选择菜单：select
<select name="">
<option value=""></option>
</select>
- name在select里面指定
- value在option里面指定
- option定义在select里面
文本域：textarea
属性：
cols列
rows行
通用属性
1.name
- 作为单选和多选框的分组
- 作为key上传到后台程序，后台程序通过key得到相对应的value。如果要想把数据提交到后台程序，一定要指定name属性
2.value - 给按钮起名字
- 设置提交到服务器的值 name=value
设置默认值
- text,password:通过value属性
用户名: <input type="text" name="username" value="zs"/>
- radio checkbox:通过checked属性
性别: <input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0" checked="checked" />女
select :在option上通过selected属性
籍贯: <select name="address">
<option value="sz">深圳</option>
<option value="bj">北京</option>
<option value="sh" selected="selected">上海</option>
</select><br/>
textarea:直接在标签体中写
自我介绍: <textarea rows="5" cols="20" name="introduce">哈哈哈</textarea><br/>
媒体标签：
音频标签audio
| 属性名 | 取值 | 默认值 | 描述 |
|---|---|---|---|
| src | url | 音频资源的路径 | |
| autoplay | autoplay | autoplay | 音频准备就绪后自动播放 |
| controls | controls | controls | 显示控件，比如播放按钮 |
| loop | loop | loop | 表示循环播放 |
| preload | preload | preload | 音频在页面加载时进行预加载，如果使用“autoplay”，则忽略该属性 |
视频标签：video
| 属性名 | 取值 | 默认值 | 描述 |
|---|---|---|---|
| src | url | 描述 | |
| width | 设置视频播放器的宽度 | ||
| height | 设置视频播放器的宽度 | ||
| autoplay | autoplay | autoplay | 视频在就绪后自动播放 |
| controls | controls | controls | 显示控件，比如播放按钮 |
| loop | loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放 |
| preload | preload | preload | 视频在页面加载时进行加载，如果使用autoplay则忽略该属性 |
| muted | muted | muted | 规定视频的音频输出应该被静音 |
| poster | url | 视频下载时显示的图像，或者视频播放前显示的图像 |
回到顶部
<a id="aId"></a>
<a href="#aId">回到顶部</a>
图片链接
<a href="http://www.baidu.com">
<img src="../img/b.jpg"/><br/>
百度
</a>
详情和概要标签
<details>
<summary>概要信息</summary>
详情信息
</details>
HTML5中新增的type类型
<input type="xxx"/>
注：不同的浏览器支持上有差异，有些浏览器依然不支持
CSS
- 内联样式：把CSS代码内嵌到HTML代码里,通过标签的style属性来结合
- 内部样式：把CSS代码写在HTML文档内部,通过style标签来结合
- 外部样式：把CSS代码写在独立的CSS文件里,通过link标签结合
基本选择器语法
- 标签选择器 只要是当前这个标签的 都会修饰到
标签名{} - id选择器 适合找1个
#id{} - class选择器 适合找多个(>=1)
.class{}
组合选择器
伪类选择器【了解】
了解几个超链接相关的伪类选择器
背景属性
/*设置整个页面的背景样式*/
body{
/*背景图片*/
background-image: url("img/little_mm.jpg");
/*平铺方式*/
background-repeat: repeat;
}
文本样式
p{
/*首行缩进：2个字符*/
text-indent: 2em;
/*文字颜色：绿色*/
color: green;
}
a{
/*超链接 不显示下划线*/
text-decoration: none;
}
字体属性
span{
/*字体：幼圆*/
font-family: 幼圆;
/*大小：40px*/
font-size: 40px;
/*字体：斜体*/
font-style: italic;
/*加粗显示*/
font-weight: bolder;
}
扫一扫
946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
