1.JavaScript: 一门客户端脚本语言
2.JavaScript 的组成: 1,ECMAScript: 基本的语法和对象
2,BOM: 浏览器模型, 与浏览器进行交互
3,DOM: 文档模型, 与网页内容进行交互
变量
定义:
- var a = 123;
- var b = 'abc';
- // 连写
- var a = 123,b=456;
注意: JS 为弱类型的解释型脚本语言, 使用 var 关键字定义一个变量, 数据类型自动判断.
注意: 每句代码后可以不写分号, 换行即可, 习惯上最好加上, 增强可读性.
变量类型:
number: 数字类型
string: 字符串类型
boolean: 布尔类型
undefined: 未定义类型
null: 空类型
object: 复合类型, 一般用来接收标签.
命名规则:
区分大小写;
第一个字符必须是字母, 下划线 (_) 或者美元符号($), 不能输数字;
其他字符可以是字母, 下划线, 美元符或数字;
不能使用 JS 的关键字或保留字.
多个单词变量的命名使用小驼峰或单词加下划线.
对于 object 对象一般使用匈牙利命名风格.
- // 小驼峰命名法
- var getMyClass = "abc";
- // 字母加下划线
- var get_my_name = "abc";
- // 匈牙利命名风格
- object: oDiv = document.getElementById('div1');
- string: sMyName = "abc" // 根据数据类型的第一个字母为开头的小驼峰命名法.
获取属性
- <script>
- Windows.onload = function(){
- // 获取标签, 通过 id
- var oDiv = document.getElementById('div');
- // 获取标签, 通过 class 属性
- var oDiv = document.getElementByClassName('div');
- // 获取标签, 写法和 CSS 一样
- var oDiv = document.querySlector("#id");// 如果有多个, 获取到第一个
- var oDiv = document.querySlectorAll()// 获取所有, 得到选择集
- // 读取属性值
- var name =oDiv.className;
- var oId = oDiv.id;
- // 写 (设置) 属性
- oDiv.style.color = 'red';
- oDiv.style.fontSize = "20px";
- // 写属性值第二种
- var cor = oDiv.style.color;
- var oDiv.style[cor] = "red";// 自己命名的属性需要通过 [] 方式
- var oDiv.style.cor = ""; // 这种是无效的
- }
- </script>
注意 1: 代码需要写在 Windows.onload =function(){}; 中, 使得 html 和 CSS 加载完毕后才执行, 防止报错.
注意 2: 如果 style 中的属性不是行内式, 而是由 CSS 设置的, 那么 JS 第一次是获取不到的, 但可以直接设置.
注意 3:JS 代码需要用 script 标签包裹, 可以放置在 HTML 代码的任何位置, 但 CSS 嵌入式只能放在头部.
书写方法:
一般行内的属性写法一样;
"class" 属性写成 "className";
"style" 属性里面的属性, 有横杠的改成驼峰式, 如:"font-size", 改成 "style.fontSize";
获取标签包裹的内容
- // 读取
- var txt = oDiv.innerHTML;
- // 写入
- oDiv.innerHTML = '<a href="">哈哈哈哈哈 < a/>';
说明: 写入的标签会被解析, 从而可以动态添加标签; 标签的属性可以在 CSS 中写, 有效.
运算符
算术运算符: +(加), -(减), *(乘), /(除), %(求余);;
赋值运算符:=, +=, -=, *=, /=, %=;
条件运算符:= =,===,>,>=,<,<=,!=,&&(而且),||(或者),!(否);
自加, 自减: i++, i--;
== 和 === 的区别:== 不会判断数据的类型, 直接比较值;=== 会先判断数据的类型, 不是同一种类型则不相等.
- if(3=="3"){
- alert("true")// 判断为真
- }
- if(3==="3"){
- alert("true")// 判断为假
- }
条件语句
if; if else; if else if else; 和 java 的写法一样;
switch: 选择语句, 和 java 写法一样.
- var a = 2;
- switch (a){
- case 1:
- alert('1');
- break;
- case 2:
- alert('2');
- break;
- default:
- alert("else");
数组和操作数组
定义方法:
- // 实例创建, 和 java 相似
- var aList = new Array(1,2,3);
- // 直接创建, 内部数据可以是不同的类型;
- var aList2 = [1,2,3,'asd',true,null];
- // 多维数组
- var aList = [[1,2,3],['a','b','c']];
操作方法:
- var aList = [1,2,3,4];
- var n1 = aList.length; // 获取数组的长度, n1=4;
- var n2 = aList[0]; // 下标获取数据, n2 = 1;
- var n3 = (aList.join('-')) // 数组成员通过分隔符拼接成字符串, n3="1-2-3-4";
- var n4 = aList.push(5); // 数组后面追加成员
- var n5 = aList.pop(); // 数组后删除成员
- var n6 = aList.unshift(5); // 数组前面增加成员
- var n7 = aList.shift();; // 数组前面面删除成员
- var n8 = aList.reverse();// 数组翻转
- var n9 = aList.indexOf(1);// 返回元素 1 在数组中第一次出现的索引, 没有则返回 - 1;
- var n10 = aList.splice(2,1,7,8,9);// 从第 2 个元素开始, 删除 1 个元素, 然后在此位置增加'7,8,9'三个元素
注意点:
- aList.join("") // 快速拼接成字符串;
- aList.push(5,6,9); // 一次性添加多个成员
- aList.pop(2); // 2 是没有作用的, 里面的任何参数都不会起作用, 但不会报错;
- aList.unshift(5,8,9);// 在前面一次性增加多个数据
- aList.shift(5); // 没有效果, 这里没有参数, 但不会报错.
- aList.splice(2); // 一个参数时, 删除角标 2 后面的所有元素, 包括角标 2 的元素;
- aList.splice(2,1); // 两个参数代表从角标 2 后 (包括角标) 删除 1 个元素;
字符串处理
相关方法:
- var sName = "abcdfg";
- var iNmr = "123456";
- var s1 = sName + "dfgh"; // 字符串合并操作:"+"
- var sx = sName[0];// 获取字符串角标为 0 的字符
- var s2 = parseInt(iNmr) // 将数字字符串转化为整数, 得到新的数据
- var s3 = parseFloat(iNmr) // 将数字字符串转化为小数
- var s4 = sName.split() // 把一个字符串分隔成字符串组成的数组
- var s5 = sName.charAt(3) // 获取字符串中角标为 3 的字符
- var s6 = sName.indexOf("g") // 查找字符串是否含有某字符, 如果没有就返回 - 1, 有返回第一次出现的角标
- var s7 = sName.substring() // 截取字符串
- var s8 = sName.toUpperCase() // 字符串转大写
- var s9 = sName.toLowerCase() // 字符串转小写
方法扩展:
- var sName = "abcdfg";
- var s4 = sName.split() // 参数为空时返回数组["abcdfg"]
- var s4 = sName.split("") // 参数为空字符返回数组["a","b","c","d","f","g"];
- var s3 = parseFloat("5.6") // s3=5.59999999995, 该方法转换数据时存在一定的精度问题
- var s3 = parseFloat("5.6")*100/100; // s3 = 5.6
- var s7 = sName.substring(start,end)// start 为开始的字符串下标, end 为结束下标, 新的字符串包含 start 不包含 end.
- var s7 = sName.substring(start,)
- var s7 = sName.substring(start) // 以上两种写法可获取从 start 角标到最后的所有字符;
重要应用: 字符串翻转
- var str = 'abcdefg';
- // 先切割成数组, 翻转后拼接成字符串.
- var str2 = str.split('').reverse().join('');
循环
for 循环: 和 java 一样的使用方式
- for(var i=0;i<length;i++)
- {
- ......
- }
while 循环:
- while(i<length){
- ......
- i++;
- }
一个扩展应用: 数组去重
- var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
- var aList2 = [];
- for(var i=0;i<aList.length;i++)
- {
- if (aList2.indexOf(aList[i]) == -1) {
- aList2.push(aList[i]);
- }
- }// 对数组进行遍历, 如果数据在新的数组中不存在就加入.
数据类型转换
直接转换
- alert('12'+7); // 将 7 转换成 "7", 弹出 127
- alert(parseInt('1') + 7 ); // 转换后, 弹出 8
- alert(parseInt(5.6)); // 去掉小数部分, 不是四舍五入, 弹出 5
- alert('5.6'+2.3); // 2.3 转换成 "2.3", 弹出 5.62.3
- alert(0.1+0.2); // 弹出 0.3000000000000004, 精度有问题
- alert((0.1*100+0.2*100)/100); // 弹出 0.3, 需要计算处理一下
隐式转换
- "4" == 4; // 判断为真,== 将 "4" 转换成 4;
- "3"-2; // 结果 1;
- var s1 = parseInt('123abc') // 结果为 123
- alert( parseInt('abc123') ); // 弹出 NaN
- // 说明: 以数字开头的字符串通过函数可以转换其中的数字为整形, 如果不是开头 则转换失败
- alert(isNaN(123abc)) // 弹出 true
- //isNAN(string): 判断是否是纯数字, 是返回 false, 不是返回 true
null==undefined: 涉及隐式转换, null 和 undefind 都被当做 false 处理, 判断为真
null===undefined: 判断为 flase,null 为 Object 类型, undefined 类型是其本身
!(null): 判断为真
!(undefined): 判断为真
typeof(): 查看数据类型
程序调试方法
- alert("xxxx")// 输出弹窗, 但是阻止程序继续运行
- console.log()// 在控制台输出内容
- document.title == "xxxx"// 覆盖网页的标题, 很少使用
- document.write("xxxx")// 覆盖 body 的内容, 很少使用
定时器
作用: 制作动画和异步操作
- var time1 = setTimeout(function,1000) // 只执行一次的定时器, 第一个参数为函数, 第二个参数为定时时间, 单位 ms
- clearTimeout(time1) // 关闭只执行一次的定时器
- var time2 = setInterval(function,1000) // 反复执行的定时器
- clearInterval(time2) // 关闭反复执行的定时器
注意: 反复执行的定时器一旦开启就不会停止, 相当于启动了一个线程, 会一直消耗 cup 资源, 所有很多时候需要手动关闭.
- var timer1 = setInterval(func1,2000);
- function funnc1(){
- console.log("hhhh");
- clearInterval(timer1); // 关闭定时器在函数内部
- }
- //clearInterval(timer1); 在外部是无效的
注意: 关闭定时器的操作需要在定时器函数的内部执行, 否则不会成功.
函数
命名函数
- function myalert(){
- alert('ok!');// 弹出 OK 的窗口
- }
说明: 用 function 定义, 其他的写法和 java 一样.
匿名函数:
- // 匿名函数赋值给绑定的事件
- oBtn.onclick = function (){
- alert('ok!');
- }
说明: 匿名函数不能单独存在, 必须用一个变量将其引用.
封闭函数:
定义: 一个打开网页就立即执行的函数 .
作用: 当需要在原来的代码基础上增加新的函数时, 如果函数名相同, 新的函数会覆盖原来的函数, 为了避免覆盖, 将后一个函数写成封闭函数, 一开始就运行.
- // 写法一
- (function(){
- ......
- })();
- // 写法二
- !function(){
- .....
- }()
- // 写法三
- ~function(){
- .....
- }()
传参和返回值: 和 java 一样.
- function myalert(a,b){
- //return a+b;
- return [a,b]
- }
- myalert(1,2);
说明: 返回多个参数时需要使用一个数组, 不可以直接写 return a,b; 否则报错!
说明: return 关键字可以结束函数运行, 阻止程序的默认行为.
Array 数组对象
创建:
- var arr = new Array(元素列表);,
- var arr = new Array(长度)
var arr = [元素列表];
方法;
join(); 将数组中的元素, 按照一定的分隔符拼接为字符串
push(): 向数组的末尾添加一个元素或者多个, 并返回新的长度
属性:
length: 长度
注意: JS 中的数组长度是可变的, 元素类型也是可以改变的
3,Date 对象
创建:
var date = new Date();
方法:
toLocaleString: 本地时间格式
getTime: 毫秒值
4,Math 对象
5,RegExp 对象
- var reg = new Reg("正则表达式")
- reg.test();
- JavaScript BOM:
Windows: 所有跟 Windows 相关的方法和属性 都可以省略掉 Windows 直接使用
弹框:
警告框: alert()
提示框: pormpt()
确定: 返回输入值 取消: null
确认框:
confirm()
确定: true 取消: fasle
open(): 打开一个新的网页
close(): 关闭当前网页
<button onclick="window.close()">点</button>
定时器:
setTimtout(code,mills): 延时多久时间后, 执行一次
- var id= Windows.setTimeout(function () {
- alert("hello java")
- },3000)
setInterval(): 每个多少时间, 执行一次
- clearTimeout(定时器的 id)
- clearInterval(定时器 id)
注意: code 可以是一段代码, 也可以是一个方法
location:
href: 设置或者获取 url
location.href = "http://www.baidu.com"
reload(): 刷新
history:
back() : 后退
forward(): 前进
go():
go(-1): 后退
go(1): 前进
JavaScript DOM:
在每个加载到浏览器的 HTML 文档 都会对应的形成一个 document 树
document 对象 可以访问文档中的任意元素
节点(Node)
文档节点: document
元素节点: element
属性节点: attribute
文本节点: text
注意: 如果我们可以获取到节点 那么就可以动态的修改节点的属性和方法
获取节点的方式:
getElementById(): 通过 id 获取
getElementsByClassName(): 通过 class 名
getElementsByName: 通过 name 名获取
getElementsByTagName(); 通过标签名获取
设置获取节点的 value:
节点对象. value;
节点对象. value= 值
设置获取节点的标签体
节点对象. innerHTML
节点对象. innerHTML = 值
innerHTML 和 innerText
innerText 只针对于文本, 如果文本中有 HTML 标签 , 会原样输出
innerHTML: 如果文本中有 HTML 标签 , 会解析以后输出
设置获取节点的 style 属性
节点对象. style. 属性;
节点对象. style. 属性 = 值
设置获取节点的属性
节点对象. 属性;
节点对象. 属性 = 值
创建节点对象
document.createElement(): 创建元素节点
添加元素:
appendChild()
document.createTextNode(): 创建文本节点
添加文本节点:
appendChild()
document.createAttribute(): 创建属性节点
添加属性节点:
setAttributeNode()
事件介绍:
概念: 某些组件, 执行某些操作以后, 触发了某一段代码的执行
事件: 某些操作, 单击, 双击, 按下, 移动......
事件源: 组件
监听器: 代码
注册监听: 将事件和事件源, 监听器整合在一起的过程
常见事件:
1, 点击事件
单击: onclick
双击: ondblclick
事件绑定:
1, 通过标签本身的相关属性设置
<button id="btn1" class="aa" onclick="add1()" value="添加元素节点">点击</button>
2, 通过 element 对象绑定事件
- document.getElementById("btn2").ondblclick = function (ev) {
- add2();
- }
2, 焦点事件
获取焦点: onfocus
失去焦点: onblur
- // 失去焦点
- function a() {
- var elementById = document.getElementById("in");
- elementById.style.background = "red";
- }
- // 获取焦点
- function b() {
- var elementById = document.getElementById("in");
- elementById.style.background = "black";
- }
3, 加载事件
onload: 页面加载完成触发
Windows.onload = function (ev) {}
4, 鼠标事件
onmousedown 鼠标按钮被按下.
onmousemove 鼠标被移动.
onmouseover 鼠标移到某元素之上.
onmouseout 鼠标从某元素移开.
onmouseup 鼠标按键被松开.
5, 键盘事件
onkeydown 某个键盘按键被按下.
onkeypress 某个键盘按键被按下并松开.
onkeyup 某个键盘按键被松开.
onkeydown: 键盘上的所有按键
onkeypress: 无法识别系统按键(回车, 箭头)
6, 选择和改变
onchange: 内容改变
onselect: 文本被选择
7, 表单事件
onsubmit : 提交
来源: http://www.bubuko.com/infodetail-2929708.html