JS的组成
JS由ECMAscript(es),dom,bom组成
ECMAScript: (3/5/6/7)它是JS语言的标准,规定了JS的编程语法和基础核心知识
DOM: document object model 文档对象模型,提供给JS很多操作页面中元素的属性和方法
BOM: browser object model 浏览器对象模型 ,提供了很多操作浏览器 的属性方法,而这些方法都存放在window浏览器对象上
JS的使用
在 HTML 中,JS 代码必须位于 <script>
与 </script>
标签之间。
旧的 JS例子也许会使用 type 属性:<script type="text/javascript">。
。type 属性不是必需的。JS 是 HTML 中的默认脚本语言。
JS代码块可以放在head,body标签中,或者html标签之外(不推荐),最好放在body和html标签之间,这样可以减少页面呈现时间,有更好的用户体验。
JS代码同样可以外部引用,使用src属性配置路径(绝对路径,相对路径,同文件夹不加路径也可)
<script src="https://域名/js/javascript1.js"></script>
<script src="/js/javascript1.js"></script>
<script src="javascript1.js"></script>
JS输出
使用 window.alert()
写入警告框
使用 document.write()
写入 HTML 输出
使用 innerHTML
写入 HTML 元素
使用 console.log()
写入浏览器控制台
JS数据类型
Undefined、Null、Boolean、Number和String,Object(包含数组,函数等等,本质是无序键值对)
var firstName; // undefined
var bool = true; // boolean
var obj = null; // null
var length = 7; // 数字
var lastName = "Gates"; // 字符串
var dogs = ["a", "b", "c"]; // 数组
var x = {firstName:"Bill", lastName:"Gates"}; // 对象 访问:x.firstName or x['firstName']
JS字面量和变量
3
3.33
"string"
'string'
var a = 1;
var b = "123";
JS注释和标识符
//我是单行注释123
/*12334
我是多行注释
*/
在大多数编程语言中,合法名称的规则大多相同。
在 JS 中,变量命名必须是数字、字母、下划线(-)或美元符号($)。
首字母不能为数字(不推荐$和_开头,这往往会产生冲突,比如jquery)。
变量命名可以遵循大小驼峰法则,并且大小写敏感
var firstName = 1;
var FirstName = 2;
JS的运算符“+”
//数字和数字
var x = 3 + 5;//8
//字符串和字符串
var x = "a" + " " + "b";//"a b"
//数字和字符串,顺序问题
var x = "8" + 3 + 5;//"835"
var x = 3 + 5 + "8";//"88"
JS的typeof
typeof "Bill" // 返回 "string"
typeof 3.14 // 返回 "number" 整数小数都是number
typeof true // 返回 "boolean"
typeof false // 返回 "boolean"
typeof x // 返回 "undefined" (假如 x 没有值)
typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4] // 返回 "object" 数组即对象
typeof null // 返回 "object"
typeof function myFunc(){} // 返回 "function"
JS事件
事件名 | 事件介绍 |
---|---|
onabort | 图像的加载被中断。 |
onblur | 元素失去焦点。 |
onchange | 域的内容被改变。 |
onclick | 当用户点击某个对象时调用的事件句柄。 |
ondblclick | 当用户双击某个对象时调用的事件句柄。 |
onerror | 在加载文档或图像时发生错误。 |
onfocus | 元素获得焦点。 |
onkeydown | 某个键盘按键被按下。 |
onkeypress | 某个键盘按键被按下并松开。 |
onkeyup | 某个键盘按键被松开。 |
onload | 一张页面或一幅图像完成加载。 |
onmousedown | 鼠标按钮被按下。 |
onmousemove | 鼠标被移动。 |
onmouseout | 鼠标从某元素移开。 |
onmouseover | 鼠标移到某元素之上。 |
onmouseup | 鼠标按键被松开。 |
onreset | 重置按钮被点击。 |
onresize | 窗口或框架被重新调整大小。 |
onselect | 文本被选中。 |
onsubmit | 确认按钮被点击。 |
onunload | 用户退出页面。 |
JS事件触发的重要属性,方法
event.clientX
event.clientY
event.screenX
event.screenY
event.type//返回事件名称
event.stopPropagation()//阻止事件冒泡
event.preventDefault()//阻止默认事件
JS字符串方法
length属性返回字符串长度
var str = '123456';
var len = str.length;
转义字符
’
"
\
\n 换行
\r 回车
字符串搜索
indexOf()
方法返回字符串中指定文本首次出现的索引(位置)
lastIndexOf()
方法返回指定文本在字符串中最后一次出现的索引
如果未找到文本, indexOf()
和 lastIndexOf()
均返回 -1。
两种方法都接受作为检索起始位置的第二个参数。
search和indexOf
search()
方法搜索特定值的字符串,并返回匹配的位置
search()
方法无法设置第二个开始位置参数。
indexOf()
方法无法设置更强大的搜索值(正则表达式)。
字符串切片
slice(start, end) //提取字符串的某个部分并在新字符串中返回被提取的部分,如果某个参数为负,则从字符串的结尾开始计数
substring(start, end) //substring() 类似于 slice()。不同之处在于 substring() 无法接受负的索引
substr(start, length) //substr() 类似于 slice()。不同之处在于第二个参数规定被提取部分的长度。
字符串替换
replace('old','new')//返回的是新字符串,只替换首个匹配,可以使用正则
大小写转换
toUpperCase()//转大写
toLowerCase()//转小写
字符串连接,类似+
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");
去除字符串两端空白符
var str = " Hello World! ";
alert(str.trim());
字符串转数组
var txt = "a,b,c,d,e"; // 字符串
txt.split(","); // 用逗号分隔
字符串索引
var str = "HELLO WORLD";
str.charAt(0); // 返回 H
str[0]; // 返回 H
// []索引的缺陷
/*
不适用 Internet Explorer 7 或更早的版本
它让字符串看起来像是数组(其实并不是,字符串一创建就不可变)
如果找不到字符,[ ] 返回 undefined,而 charAt() 返回空字符串。
它是只读的。str[0] = "A" 不会产生错误(但也不会工作!)
*/
JS==
和 ===
==
基本类型比较的是值,对象比较的是地址
===
不但比较值还比较类型
NaN - 非数值 和 Infinity无穷大
NaN
的类型还是数,typeof NaN
返回 number
数字+NaN
= NaN
字符串+NaN
= 字符串
Infinity
(或 -Infinity
)是 JavaScript 在计算数时超出最大可能数范围时返回的值。
Infinity
还是数字类型
除以 0(零)也会生成 Infinity
:
var x = 2 / 0; // x 将是 Infinity
var y = -2 / 0; // y 将是 -Infinity
Number方法
toString()
以字符串返回数值。 所有 JavaScript 对象都拥有 toString() 方法
toFixed()
返回字符串值,它包含了指定位数小数的数字,toFixed(2)
就是保留两位小数(四舍五入)
toPrecision()
返回字符串值,它包含了指定长度的数字
var x = 9.656;
x.toPrecision(); // 返回 9.656
x.toPrecision(2); // 返回 9.7
x.toPrecision(4); // 返回 9.656
x.toPrecision(6); // 返回 9.65600
强制类型转换(全局方法)
Number()
方法
parseInt()
方法 解析一段字符串并返回数值。允许空格。只返回首个数字
parseFloat()
方法 解析一段字符串并返回数值。允许空格。只返回首个数字(浮点)
数组属性方法
基本方法
var cars = [1,2,3,4,5,6];
var x = cars.length; // length 属性返回元素的数量
var y = cars.sort(); // sort() 方法对数组进行排序
var a = cars[0]; // 索引 值为1
cars.forEach(myFunction) //遍历数组,可以使用函数作为参数
cars.push(7); //在数组结尾加一个元素 返回新数组的长度
cars.pop(); //pop() 方法从数组中删除最后一个元素 返回“被弹出”的值
cars.shift(); //删除首个元素
cars.unshift(8); //增加元素到数组首位
cars.splice(2, 0, 9, 10) // 可用于向数组添加新项 第一个参数(2)定义了应添加新元素的位置 第二个参数(0)定义应删除多少元素 其余参数定义要添加的新元素 返回一个包含已删除项的数组
delete cars[0]; // 把 数组 中的首个元素改为 undefined 留下未定义的空洞(不推荐使用)
Array.isArray(cars); // 返回 true 判断是否为数组 如果直接用typeof,返回的是oject
cars instanceof Array; //返回 true 另一种判断方法
使用 splice() 来删除元素
js删除数组任意索引元素用delete会留下undefined空洞,而使用splice(x, 1);方法就可以删除索引为x的元素,并且不留空洞
数组转字符串
var lst = [1,2,3];
lst.join(','); // '1,2,3'
合并(连接)数组
如果直接使用+号,返回的不是连接的数组,而是数组元素的字符串
[1]+[2,3,4]
"12,3,4"
concat
方法 不会更改现有数组,它总是返回一个新数组 可以使用任意数量的数组参数
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3); // 将arr1、arr2 与 arr3 连接在一起
数组切片
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
数组和对象的区别
在 JavaScript 中,数组使用数字索引。
在 JavaScript 中,对象使用命名索引。
数组是特殊类型的对象,具有数字索引。
数组排序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); // 对 fruits 中的元素进行排序 按字符串顺序对值进行排序
fruits.reverse(); // 反转元素顺序
//数字排序 sort方法如果数字按照字符串来排序,则 "25" 大于 "100",因为 "2" 大于 "1"
//比值函数
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
//使用相同的技巧对数组进行降序排序
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
//随机排序
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});