目录
HTML中的Element对象可以通过Document对象获取,而Document对象是通过window对象获取的
Cocument对象中提供了一下Element元素对象的函数
JavaScript
-
JS 基础知识
简称JS,是一门跨平台、面向对象的脚本语言,用来控制网页行为的,他能让网页进行交互
-
JavaScript引入方式
内部脚本:JavaScript代码必须放置在<script></script>标签之间
外部脚本:外部JS文件中只包含js代码,不包含<script>标签(<script>不能自闭和)
-
JS基础语法
区分大小写,与Java相同,变量名、函数名以及其他一切东西都是区分大小写的
每行结尾分号可有可无(建议大家加上)
注释
-
单行注释:// //
-
多行注释:/* */
-
可以安装该插件,同步IDEA中的注释快捷键
大括号代表代码块
输出语句
-
使用window.alert() 写入警告框
-
-
使用document.write() 写入HTML输出
-
使用console.log() 写入浏览器控制台
-
-
变量
var
JavaScript中用关键词var(variable)来声明变量;JavaScript是一门弱语言,变量可以存放不同类型的值;变量名需要遵循一下规则:组成字符可以是任何字母、数字、下划线(_)或美元符号($),数字不能开头,建议使用驼峰命名
var的特点
-
作用域比较大,全局变量
-
可以重复使用
let
与var相似,是局部变量,不能被重新定义
const
用来声明一个只读常量,一旦声明,常量的值就不能改变
-
-
数据类型
使用 typeo 可以获取数据类型
运输符与Java相似,补充:===不进行类型转换,==进行类型转换
类型转换
字符串类型转换为数字:parsent 可以将字符串转化为数字类型
其他类型转换为Boolean
-
number:0和NaN为false,其他都转为true
-
String:空字符为false,其他转为true
-
Null和undefined:均转为false
原始类型
-
number 数字
-
string 字符串,单双引皆可
-
boolean 布尔(ture/false)
-
null 对象为空
-
undefined 当未声明变量初始化时,该变量的默认值是undefined
引用类型
-
Object类型
-
Array类型
-
Function类型
-
-
函数
定义:JavaScript 函数通过 function 关键字进行定义,语法为
function functionName(Num1,Num2...){ //要执行的代码 } //定义方式二: var functionName = function(Num1,Num2...){ //要执行的代码 } //函数调用 var result = add(Num1,Num2); alert(result);
形式参数不需要类型,因为JavaScript是弱类型语言。返回值也不需要定义类型,可以在函数内部直接使用return返回即可
-
JS对象
JS基础对象
Array——数组对象
//两种定义方式 var name = new Array(num1,num2...) var name = [num1,num2...] //访问 arr[索引] = 值;
Array属性
length——设置返回数组中元素的数量
Array方法
forEach()——遍历数组中的每个有值的元素,并调用一次传入的函数
push()——将新的元素添加到数组的末尾,并返回新的长度
splice()——从数组中删除元素
var arr = [1,2,3,4]; for (let index = 0; index < arr.length; index++) { console.log(arr[index]); } //forEach:遍历数组中有值的元素 arr.forEach(function(e){ console.log(e); }) //箭头函数 arr.forEach((e) => { console.log(e); }) //push:添加元素 arr.push[7,8,9]; console.log(arr); //splice:删除元素 arr.splice[2,2]; console.log(arr);
String——字符串对象
String属性
length——字符串的长度
String方法
charAt()——返回在指定位置的字符
indexOf()——检索字符串
trim()——去除字符串两边的空格
substring()——提取字符串中的两个指定的索引号之间的字符
var str = new String("Hello js"); var str =("Hello js"); console.log(str); //length console.log(str.length); //charAt console.log(str.charAt(3)); //indexOf console.log(str.indexOf("lo")); //trim var s = str.trim; console.log(s); //substring(start,end)——开始索引,结束索引(含头不含尾) console.log(str.substring(0,5));
JSON
JSON概念
全称:JavaScript Object Notation,JavaScript对象标记法。由于语法简单,层次结构鲜明,现多用于作为数据载体,在网络进行数据传输。
JOSN的基本语法
-
定义
var 变量名 = '{"key1" : value1,"key2 : value2}';
-
value的数据类型:
-
数字(整数或浮点数)
-
字符串(在双引号中)
-
逻辑值(true或false)
-
数组(在方括号中)
-
对象(在花括号中)
-
null
-
-
parse 将JOSN字符串转为JS对象
-
stringify 将JS对象转为JSON字符串
浏览器对象模型BOM
-
概念:
Browser Object Model 浏览器对象模型,允许JavaScript与浏览器对话,JavaScript将浏览器的各个组成部分封装成对象
-
组成
-
Windows : 浏览器窗口对象
-
获取:直接使用window,其中window. 可以忽略。
window.alert("Hello Word"); alert("Hello Word")
-
属性
-
history:对History对象的只读引用
-
location:用于窗口或框架的Location对象
-
navigation:对Navigation对象的只读引用
-
-
方法
-
alert:显示带有一段消息和一个确认按钮的警告框
-
confirm():显示带有一段消息以及劝人按钮和取消按钮的对话框
-
setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式
-
setTimeout():在指定的毫秒数后调用函数或计算表达式
-
-
-
Location : 地址栏对象
-
获取:使用 window.location 获取,其中 window. 可以省略
window.location.属性; location.属性;
-
属性:href:设置或返回完整的URL
location.href = "https://www.baidu.cn";
-
-
Navigator : 浏览器对象
-
Screen : 屏幕对象
-
History : 历史记录对象
-
文档对象模型DOM
-
概念
Document Object Model,文档对象模型
-
JavaScript通过DOM,就能够对HTML进行操作
-
改变HTML元素的内容
-
改变HTML的样式(CSS)
-
对HTML DOM事件作出反应
-
添加和删除HTML元素
-
-
DOM是W3C的标准,定义了HTML和XML文档的标准
-
Core DOM - 所有文档类型的标准类型
-
Document:整个文档对象
-
Element:元素对象
-
Attribute:属性对象
-
Text:文本对象
-
Comment:注释对象
-
-
XML DOM - XML 文档的标准模型
-
HTML DOM - HTML 文档的标准模型
-
Image:<img>
-
Button:<input type='button'>
-
-
-
DOM对象的获取
-
HTML中的Element对象可以通过Document对象获取,而Document对象是通过window对象获取的
-
Cocument对象中提供了一下Element元素对象的函数
-
根据id属性值获取,返回单个Element对象
var h1 = document.getElementById('h1');
-
根据标签名获取,返回Element对象数组
var divs = document.getElementByTagName('div');
-
根据name属性获取,返回Element对象数组
var hobbys = document.getElementByName('hobby');
-
根据class属性值获取,返回Element对象数组
var clss = document.getElementByClssName('cls');
-
-
-
-
JS事件监听
-
事件绑定
-
通过HTML标签进行绑定
<input type="button" οnclick="on()" value="按钮1"> <script> function on(){ alter('被点击了'); } </script>
-
通过DOM元素属性进行绑定
<input type="button" id="btn" value="按钮2"> <script> document.getElementById('btn').οnclick=function(){ alert('被点击了') } </script>
-
-
常见事件
-
onclick——鼠标单击事件
-
onblur——元素失去焦点
-
onfocus——元素获得焦点
-
onload——某个页面或图像被完全加载
-
onsubmit——当表单提交时触发该事件
-
onkeydown——某个键盘被按下
-
onmouseover——鼠标被移到某个元素上
-
onmouseout——鼠标从某个元素移开
-
-