原生js上半部分,主要是对对象，数组，字符串的操作。 中部分主要是循环判断和函数的一些操作， 下半部分主要是webAPIs浏览器内置应用编程接口来操作元素样式。
浏览器执行JS过程
- 浏览器由2部分组成：
- 渲染引擎： 用来解析 HTML 和 CSS, 俗称内核，比如chrome浏览器的blink，老版本的webkit
- JS引擎： 也称为 JS 解释器， 用来读取网页中的JS代码，对其处理后运行， 比如chrome浏览器的v8引擎
- 注意：浏览器本身是不会执行JS代码的，是通过内置的解释器引擎，来执行JS代码的，JS引擎会逐行解释每一句源码(转换为机器语言),然后交由计算机去执行， 所以JS是脚本语言，会逐行进行解释
数据类型
数字类型:Number
非数字:isNaN 判断变量是否为非数字， 返回true或者false。 isNaN(变量名)
字符串类型:String
字符串拼接： 数值相加， 字符相连。
Undefined 声明没有赋值
Null 一个变量声明的时候给null， 表示里面存储的值为空
判断变量类型：typeof 变量名 // 返回变量的类型： number, string, boolean, undefined, object
字面量：通俗来讲：就是字面意思，表示根据字面意思去理解这个变量。
number转换为字符串：number.toString() || String(number) || number + '' 。这3种方式都能将number转换为字符串。
保留整数：parseInt(3.14 | 3.95)// 3 parseInt('120px')// 120 保留整数
保留小数点：parseFloat(3.14) // 3.14
Number转换：Number('12') // 12 隐式转换 ('133' - '130') // 3
Boolean()转换为布尔类型：
false :('') 0 NaN null undefined
true:('小白') 12 // 有内容就是true
-------------------------------- Demo 示例 --------------------------------
// isNum 非数字返回布尔值true
console.log(isNaN(4));
console.log(isNaN('hello'));
function isNum(x) {
if (isNaN(x)) {
return console.log('不是数字');
}
return console.log('是数字');
}
isNum(3); //是数字
isNum('hello'); //不是数字
// 字符串拼接： 数值相加， 字符相连。
console.log('hello' + 123);
console.log('ni' + 'hao');
console.log(1 + 3);
// Undefined 声明没有赋值
var student;
console.log(student);
// Null 一个变量声明的时候给null， 表示里面存储的值为空
var a = null;
a = 'fula';
console.log(a);
console.log(typeof 1); //number
console.log(typeof 'cool'); //string
console.log(typeof false); //boolean
var hero;
console.log(typeof hero); //undefined
var newArray = 'null';
console.log(newArray); //null
var obj = {
color: 'yellow',
};
console.log(typeof obj); //object
// number转换为字符串：number.toString() || String(number) || number + ''
// 这3种方式都能将number转换为字符串。
var num1 = 1;
console.log(num1.toString());
var num2 = 2;
console.log(String(num2));
var num3 = 3;
console.log(num3 + '');
// 保留整数：parseInt(3.14 | 3.95)// 3 parseInt('120px')// 120 保留整数
console.log(parseInt(1.34)); //1
console.log(parseInt(1.7)); //1
// 保留小数点：parseFloat(3.14) // 3.14
console.log(parseFloat(3.15)); //3.15
console.log(parseFloat(3.75)); //3.75
// Number转换：Number('12') // 12 隐式转换 ('133' - '130') // 3
console.log(Number('13')); // 13
console.log('120' - '115'); //5
// Boolean()转换为布尔类型： false :('') 0 NaN null undefined true:('小白') 12 // 有内容就是true
console.log(Boolean('')); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(1)); //true
console.log(Boolean('1')); //true
数组 - 循环
// 使用循环求1-100之间，找出能被3整除的数字，把能被3整除的数，存进一个新的数组
// 并计算能被3整除的数字的求和。（所有能被3整除数字的和）
var arr = [1, 3, 5, 7, 9, 11, 15];
var res = 0;
var newArray = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] % 3 === 0) {
newArray.push(arr[i]);
res += arr[i];
}
}
console.log(newArray); // Array(3) [ 3, 9, 15 ]
console.log(res); // 27
// 用双重循环打印九九乘法表：
var str = '';
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
str += j + 'x' + i + '=' + j * i + '\t';
}
str += '\n';
}
console.log(str);
// 数组求和：以及求平均值
var arr1 = [1, 3, 6];
var sum = 0;
var average = 0;
for (var i = 0; i < arr1.length; i++) {
sum += arr1[i];
}
average = sum / arr1.length;
console.log(sum); //10
console.log(average); //3.33333
// 求数组中最大值：
var arr = [3, 5, 65, 33, 21, 76, 9, 34];
var max = arr[0];
for (var i = 0; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i];
}
}
console.log(max);
// 数组转换为用 / 分隔的字符串,
var arr = ['a', 'b', 'c'];
var str = '';
for (var i = 0; i < arr.length; i++) {
str += arr[i] + '/';
}
console.log(str);
// 往空数组里存放 10个值
var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = i;
}
console.log(arr); //Array(10) [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 将大于10的放进一个新的数组
var arr = [2, 5, 33, 6, 24, 7, 9, 12];
var newArray = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] > 10) {
newArray[newArray.length] = arr[i];
}
}
console.log(newArray); //Array(3) [ 33, 24, 12 ]
// 翻转数组：
var arr = ['a', 'b', 'c'];
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
console.log(newArr); //Array(3) [ "c", "b", "a" ]
// 冒泡排序：
var arr = [0, 3, 9, 5, 4, 7, 12, 99, 6, 8, 9];
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr); //Array(11) [ 0, 3, 4, 5, 6, 7, 8, 9, 9, 12, … ]
函数 function
// 函数版：求数组中最大值
function getMax(arr) {
var max = arr[0];
for (var i = 0; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i];
}
}
return max;
}
console.log(getMax([1, 5, 9, 12, 7, 9, 32, 5])); //32
// 函数版： 冒泡排序
function sort(arguments) {
var max = arguments[0];
for (var i = 0; i < arguments.length; i++) {
for (var j = 0; j < arguments.length - i - 1; j++) {
if (arguments[j] > arguments[j + 1]) {
var temp = arguments[j];
arguments[j] = arguments[j + 1];
arguments[j + 1] = temp;
}
}
}
return arguments;
}
console.log(sort([1, 3, 5, 8, 4, 9, 13, 21, 6]));
//Array(9) [ 1, 3, 4, 5, 6, 8, 9, 13, 21 ]
// 函数版： 翻转数组
function reveser(arguments) {
var newArr1 = [];
for (var i = arguments.length - 1; i > 0; i--) {
newArr1[newArr1.length] = arguments[i];
}
return newArr1;
}
console.log(reveser([1, 3, 5, 7, 9, 11, 13]));
对象
// for in 遍历对象
var obj = {
color: 'yellow',
sayHi: function () {
console.log('Hi');
},
};
obj.sayHi(); // Hi
for (var k in obj) {
// console.log(k); // color sayHi
// console.log(obj); //Object { color: "yellow", sayHi: sayHi() }
console.log(obj[k]); //yellow function sayHi()
}
// 用对象的形式封装求数组最大值最大值，和最小值
var myMath = {
max: function (arr) {
var max = arr[0];
for (var i = 0; i < arr.length - 1; i++) {
if (max < arr[i]) {
max = arr[i];
}
}
return max;
},
min: function (arr) {
var min = arr[0];
for (var i = 0; i < arr.length - 1; i++) {
if (min > arr[i]) {
min = arr[i];
}
}
return min;
},
};
var arr = [3, 4, 8, 0, 9, 11, 23, 56, 9, 7];
console.log(myMath.max(arr));
console.log(myMath.min(arr));
数组
// 数组方法： push末尾添加 unshift开头添加 pop删除末尾 shift删除开头
var arr = [1, 2, 3];
arr.push(4); // Array(4) [ 1, 2, 3, 4 ]
arr.unshift(0); // Array(4) [ 0, 1, 2, 3 ]
arr.pop(); // Array [ 1, 2 ]
arr.shift(); // Array [ 2, 3 ]
console.log(arr);
// reverse翻转
arr.reverse(); // Array(3) [ 3, 2, 1 ]
// sort排序
var arr1 = [1, 4, 9, 6, 3, 2];
arr1.sort(); // Array(6) [ 1, 2, 3, 4, 6, 9 ]
console.log(arr1);
// indexOf() 查找数组中的项，查找到返回1，没查找到返回-1.
var arr = ['a', 'b', 'c'];
console.log(arr.indexOf('b')); // 1
console.log(arr.indexOf('d')); // -1
// join() / toString() 将数组转换为字符串
var arr = [1, 3, 5, 7, 9];
console.log(arr.toString()); // 1,3,5,7,9
console.log(arr.join('-')); // 1-3-5-7-9
// splice 将字符串转换为数组
console.log(arr.splice(',')); // Array(5) [ 1, 3, 5, 7, 9 ]
// 数组去重
function repetition(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
}
}
return newArr;
}
console.log(repetition([1, 3, 5, 7, 9, 9, 6, 3, 4, 8, 7]));
Array(8)[(1, 3, 5, 7, 9, 6, 4, 8)];
// concat数组拼接
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
console.log(arr1.concat(arr2)); //Array(6) [ 1, 2, 3, 4, 5, 6 ]
// splice(起始索引位置, 结束的位置(包含起始位置))
// slice(起始索引位置, 结束的位置(包含起始位置))
var arr = [1, 2, 3, 4];
console.log(arr.splice(1, 2)); //Array [ 2, 3 ]
console.log(arr.slice(0, 2)); //Array [ 1, 2 ]
字符串
// indexOf 返回该字符串所在的索引, 查找不到返回-1
var str = 'student';
console.log(str.indexOf('d')); // 3
console.log(str.indexOf('p')); // -1
// 使用while循环统计出现最多的字符串，和字符串出现的次数
var str = 'alshfasjbfkjasghfafasdvfasdfasf';
function getMaxStr(str) {
var obj = {};
for (var i = 0; i < str.length; i++) {
var key = str[i];
if (obj[key]) {
obj[key]++;
} else {
obj[key] = 1;
}
}
var maxCount = 0;
var maxString = '';
for (var k in obj) {
if (maxCount < obj[k]) {
maxCount = obj[k];
maxString = k;
}
}
return (
'出现最多次数的字母是：' + maxString + ', 出现的次数是：' + maxCount
);
}
console.log(getMaxStr(str));
// concat字符串拼接
var str = 'an';
console.log(str.concat('ny')); //anny
// substr 字符串截取(起始的位置(索引值), 截取的个数(从起始的索引开始))，
var str = 'happy new year';
console.log(str.substr(2, 3)); // ppy
// 使用while循环将数组中的o替换为？
var str = 'oppodjopmdoohdosmo';
while (str.indexOf('o') !== -1) {
str = str.replace('o', '?');
}
console.log(str); //?pp?dj?pmd??hd?sm?
// 使用split将字符串转换为数组
var str = 'a, b, c';
console.log(str.split(',')); //Array(3) [ "a", " b", " c" ]
WebAPIs
webAPIs之DOM文档对象模型
JavaScript之 ------ 文档对象模型(DOM)
// 点击按钮切换图片
var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');
var img = document.querySelector('img');
btn1.addEventListener('click', function () {
img.src = '../image/哪吒.jpg';
});
btn2.addEventListener('click', function () {
img.src = '../image/student.jpg';
});
// 点击修改表单中的内容，和禁用表单的输入状态
var btn = document.querySelector('.btn');
var ipt = document.querySelector('.ipt');
btn.onclick = function () {
ipt.value = '这是一段优美的文字';
btn.disabled = true;
};
// 复选框案例： 全选和单选按钮
var parent = document.querySelector('.parent');
var sons = document.querySelectorAll('.son');
// 1：全选事件：
parent.addEventListener('click', function () {
for (var i = 0; i < sons.length; i++) {
sons[i].checked = this.checked;
}
});
// // 复选框事件，全部选中，父按钮就选中
for (var i = 0; i < sons.length; i++) {
sons[i].addEventListener('click', function () {
var flag = true; // 标识符
for (var i = 0; i < sons.length; i++) {
if (!sons[i].checked) {
flag = false;
break;
} // 只要有复选框没选中，标识符就是false
}
parent.checked = flag; //全选中，就让父按钮被选中。
});
}
// 自定义属性操作 setAttribute getAttribute removeAttribute
var box = document.querySelector('.box');
box.addEventListener('click', function () {
this.setAttribute('index', 1);
var inx = this.getAttribute('index'); //1
this.removeAttribute('index');
});
// firstChild lastChild 操作第一个节点和最后一个节点：
// 方式一：ul.firstChild
// 方式二：ul.firstElementChild
// 方式三（推荐）：ul.children[0] // 实际开发中的写法，没有兼容性，又简洁。
var box = document.querySelector('.box');
console.log(box.firstChild.innerHTML); //1
console.log(box.lastChild.innerHTML); //2
console.log(box.children[1].innerText); //2
// createElement 创建节点 removeChild删除节点
var ul = document.querySelector('ul');
var li = document.createElement('li');
li.innerHTML = '我是新创建了li';
ul.appendChild(li);
ul.removeChild(li);
// 事件委托
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
console.log(e.target);
e.target.style.backgroundColor = 'yellow'; // 让被点击的li标签，背景高亮
});
// 常用的键盘事件： onkeydown 键盘按下 onkeyup 键盘松开
// 另一种：onkeypress 键盘按下，不识别功能键 如箭头 和ctrl + shift
document.addEventListener('keydown', function (e) {
console.log(e.keyCode);
});
// 鼠标事件：
// e.clientX | Y 浏览器可视区域的坐标
// e.pageX | Y 文档页面的坐标 IE9支持
// e.screenX | Y 电脑屏幕的坐标
document.addEventListener('click', function (e) {
console.log(e.clientX); // 158
console.log(e.pageX); // 158
console.log(e.screenX); // 159
});
DOM回顾总结：
dom主要是对元素进行操作，主要有：创建，删除，修改，查询，属性操作，事件操作。
BOM浏览器对象模型
// window.onload等待页面元素加载后，才会加载js脚本
window.onload = function () {
console.log(123);
};
// 定时器：setInterval连续 || setTimeout一次性 ，
clearTimeout清除一次性 || clearInterval清除连续;
var timer1 = setInterval(function () {
console.log(11);
}, 1000);
var btn = document.querySelector('.btn');
btn.addEventListener('click', function () {
clearInterval(timer1);
});
// this指向问题：this一般指向它调用的那个对象，
// 谁调用或者谁触发就是谁，但是全局和命名函数以及定时器中this默认指向是window
console.log(this); //window
function fn1() {
console.log(this); //window
}
fn1();
setTimeout(function () {
console.log(this); // window
}, 2000);
var obj = {
say: function () {
console.log(this);
},
};
obj.say(); //Object { say: say() }
var btn = document.querySelector('.btn');
btn.addEventListener('click', function () {
console.log(this); //<button class="btn">
});
function Fun() {
console.log(this);
}
var fun = new Fun(); //Object { }
// --------------------- offset client scroll系列用法： ------------------
// offset 可以得到元素的位置偏移，大小等。获取元素距离带有定位父元素的位置。获取元素自身的大小(宽度高度)，返回的值不带px。
// 常用：
// offsetParent 返回子元素距离有定位父元素的位置
// offsetTop 返回子元素距离有定位父元素上方偏移的位置
// offsetLeft 返回子元素距离有定位父元素左边的偏移位置
// offsetWidth 返回自身内容区的宽度，padding，边框，返回值不带单位
// offsetHeight 返回自身内容区的高度，padding，边框，返回值不带单位
var parent = document.querySelector('.parent');
var son = document.querySelector('.children');
console.log(son.offsetParent); //<div class="parent">
console.log(son.offsetTop); // 100
console.log(son.offsetLeft); // 100
console.log(son.offsetWidth); // 100
console.log(son.offsetHeight); // 100
// offset 常用于获取元素的位置
// client 常用于获取元素大小
// scroll 常用于滚动距离
// 注意： 页面滚动的距离用 window.pageXOffset 获得
// 本地存储之localStorage:
// 2:本地存储之localStorage:声明周期永久生效，除非手动删除 否则关闭页面也会存在,可以多窗口（页面）共享（同一浏览器可以共享）,以键值对的形式存储使用
// 存储数据：localStorage.setItem('uname', val)
// 获取数据：localStorage.getItem('uname')
// 删除数据：localStorage.removeItem('uname');
// 删除所有数据：localStorage.clear();
var btn = document.querySelector('.btn');
btn.addEventListener('click', function () {
localStorage.setItem('token1', '333666');
});
var btn2 = document.querySelector('.btn2');
btn2.addEventListener('click', function () {
localStorage.removeItem('token1');
});
var btn3 = document.querySelector('.btn3');
btn3.addEventListener('click', function () {
var token = localStorage.getItem('token1');
console.log(token);
});
// 点击返回顶部按钮，回到顶部
var goBack = document.querySelector('.goBack');
goBack.addEventListener('click', function () {
window.scroll(0, 0);
});
