web js的使用方法
壤驷敏学
JavaScript的书写位置;
- 写在行内:
<input type="button" value="按钮" onclick="alert('Hello World')" />
- 写在script标签中
<head>
<script>
alert('Hello World!');
</script>
</head>
- 写在外部js文件中，在页面引入
<script src="main.js"></script>
变量
- 什么是变量:
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据 - 为什么要使用变量:
使用变量可以方便的获取或者修改内存中的数据
//var声明变量//
var age;
//同时声明多个变量//
var age, name, sex;
age = 10;
name = 'zs';
- 浮点数:
浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
var result = 0.1 + 0.2; // 结果不是 0.3，而是0.30000000000000004
console.log(0.07 * 100);不要判断两个浮点数是否相等 - 数值判断
NaN：not a number 'abcdf ’
NaN 与任何值都不相等，包括他本身
isNaN: is not a number - 字符串长度
length属性用来获取字符串的长度 - List item字符串拼接
字符串拼接使用 + 连接
-获取变量的类型
typeof - 数据类型转换
字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的
转换成字符串类型- toString()
var num = 5;
console.log(num.toString());
String()
String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null
转换成数值类型:Number()
Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN
parseInt()
var num1 = parseInt("12.3abc"); // 返回12，如果第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt("abc123"); // 返回NaN，如果第一个字符不是数字或者符号就返回NaN
parseFloat()把字符串转换成浮点数,parseFloat会解析第一个. 遇到第二个.或者非数字结束,如果解析的内容里只有整数，解析成整数;
- 一元运算符
++ 自身加1
– 自身减1 - 前置++
var num1 = 5;
++ num1;
var num2 = 6;
console.log(num1 + ++ num2);//num2先加1，后再打印输出13
- 后置++
var num1 = 5;
num1 ++; //6
var num2 = 6
console.log(num1 + num2 ++);//先打印，后num+1，结果为12
前置++：先加1，后参与运算
后置++：先参与运算，后加1
上面两个理解后，下面两个自通
前置-- ：先减1，后参与运算
后置-- ：先参与运算，后减1
- 逻辑运算符(布尔运算符)：
&& 与 两个操作数同时为true，结果为true，否则都是false
|| 或 两个操作数有一个为true，结果为true，否则为false
! 非 取反 - 关系运算符(比较运算符)
< > >= <= == != === !==
==：数值上相等即可，不看数据类型如：“10”==10
===：数值上等于，数据类型一直
- 运算符的优先级：
优先级从高到底
1. () 优先级最高
2. 一元运算符 ++ -- !
3. 算数运算符 先* / % 后 + -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符 先&& 后||
7. 赋值运算符 =
流程控制
- 顺序结构:输入 输出 赋值语句
从上到下执行的代码就是顺序结构 - 分支结构：根据不同的情况，执行对应代码
if (/* 条件表达式 */) {
// 执行语句
}
- do…while语句
do…while循环和while循环非常像，二者经常可以相互替代，但是do…while的特点是不管条件成不成立，都会执行一次。
如果知道确切循环次数用for，如1++到100
如果不知道确切循环次数用while，如才1-100之间的一个数：
- 循环结构：循环结构：重复做一件事情
- switch语句：
switch (expression) {
case 常量1:
语句;
break;
case 常量2:
语句;
break;
case 常量3:
语句;
break;
…
case 常量n:
语句;
break;
default:
语句;
break;
}
break如果省略，代码会继续执行下一个case
switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换（例如，字符串’10’ 不等于数值 10）
- 布尔
转换为true 非空字符串 非0数字 true 任何对象
转换成false 空字符串 0 false null undefined - for循环语法：
// for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
// 循环体4
}
数组
- 遍历数组
for(var i = 0; i < arr.length; i++) {
}
函数
- 函数的定义
function 函数名(){
//函数体
}
- 函数表达式
var fn = function() {
// 函数体
return
}
- 函数的调用
函数名();
- 匿名函数
匿名函数：没有名字的函数
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。
对象
new Object()创建对象
- 工厂函数创建对象
function createPerson(name, age, job) {
var person = new Object();
person.name = name;
person.age = age;
person.job = job;
person.sayHi = function(){
console.log('Hello,everyBody');
}
return person;
}
var p1 = createPerson('张三', 22, 'actor');
- new关键字
1 构造函数用于创建一类对象，首字母要大写。
2 构造函数要和new一起使用才有意义。 - 自定义构造函数
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayHi = function(){
console.log('Hello,everyBody');
}
}
var p1 = new Person('张三', 22, 'actor');
- 字符串对象的常用方法
// 1 字符方法
charAt() //获取指定位置处字符
charCodeAt() //获取指定位置处字符的ASCII码
str[0] //HTML5，IE8+支持 和charAt()等效
// 2 字符串操作方法
concat() //拼接字符串，等效于+，+更常用
slice() //从start位置开始，截取到end位置，end取不到
substring() //从start位置开始，截取到end位置，end取不到
substr() //从start位置开始，截取length个字符
// 3 位置方法
indexOf() //返回指定内容在元字符串中的位置
lastIndexOf() //从后往前找，只找第一个匹配的
// 4 去除空白
trim() //只能去除字符串前后的空白
// 5 大小写转换方法
to(Locale)UpperCase() //转换大写
to(Locale)LowerCase() //转换小写
// 6 其它
search()
replace()
split()
fromCharCode()
// String.fromCharCode(101, 102, 103); //把ASCII码转换成字符串
BOM:
BOM的顶级对象window
- 对话框
alert() ,prompt(),confirm() - 页面加载事件
window.onload = function () {
// 当页面加载完成执行
// 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
}
window.onunload = function () {
// 当用户退出页面时执行
}
DOM经常进行的操作
- 获取元素
根据id获取元素
var div = document.getElementById('main');
console.log(div);
// 获取到的数据类型 HTMLDivElement，对象都是有类型的
// HTMLDivElement <-- HTMLElement <-- Element <-- Node <-- EventTarget
根据标签名获取元素
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
console.log(div);
}
根据name获取元素*
var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
console.log(input);
}
根据类名获取元素
var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
var main = mains[i];
console.log(main);
}
根据选择器获取元素
var text = document.querySelector('#text');
console.log(text);
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
console.log(box);
}
- 事件三要素
事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)
var box = document.getElementById('box');
box.onclick = function() {
console.log('代码会在box被点击后执行');
};
- 自定义属性操作
getAttribute() 获取标签行内属性
setAttribute() 设置标签行内属性
removeAttribute() 移除标签行内属性
与element.属性的区别: 上述三个方法用于获取任意的行内属性。 - 使用style方式设置的样式显示在标签行内
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
- 类名操作
var box = document.getElementById('box');
box.className = 'clearfix';
- 创建元素的三种方式
document.write()
document.write('新设置的内容<p>标签也可以生成</p>');
innerHTML
var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';
innerText(只能添加字符串，不能添加各种标签)
document.createElement()
var div = document.createElement('div');
document.body.appendChild(div);
- 常用的鼠标和键盘事件
onmouseup 鼠标按键放开时触发
onmousedown 鼠标按键按下触发
onmousemove 鼠标移动触发
onkeyup 键盘按键按下触发
onkeydown 键盘按键抬起触发
opacity:透明度（0-1（透明-不透明）） - 定时器
setTimeout()和clearTimeout()
在这里插入代码片// 创建一个定时器，1000毫秒后执行，返回定时器的标示
var timerId = setTimeout(function () {
console.log('Hello World');
}, 1000);
// 取消定时器的执行
clearTimeout(timerId);
- 对话框:
alert()
prompt()
confirm() - 页面加载事件:
onload,onunload
window.onload = function () {
// 当页面加载完成执行
// 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
}
window.onunload = function () {
// 当用户退出页面时执行
}
- history对象:
back()：后退
forward()
go()：前进 - userAgent
通过userAgent可以判断用户浏览器的类型 - platform
通过platform可以判断浏览器所在的系统平台类型.
事件对象的属性和方法 - event.type 获取事件类型
- clientX/clientY 所有浏览器都支持，窗口位置
- pageX/pageY IE8以前不支持，页面位置
- event.target || event.srcElement 用于获取触发事件的元素
- event.preventDefault() 取消默认行为
偏移量 - offsetParent用于获取定位的父级元素
- offsetParent和parentNode的区别
类似资料：