// /Chrome/i 正则表达式, i:代表部分大小写
var ua = navigator.userAgent
if (/Chrome/i.test(ua)) { console.log('我是谷歌呀')
} else if (/firefox/i.test(ua)) { console.log('我是火狐呀')
} else if (/msie/i.test(ua)) { console.log('我是IE呀')
}
var select = document.getElementById("selectId");
var index = select.selectedIndex;//拿到选中项的索引
var value = selected.options[index].value;
var lable = select.options[index].text;
var table= document.getElementById("tableId");
table.rows;//获取行
table.deleteRow(0);//删除行
rows[0].cells;//获取行中单元格
var node= document.getElementById("node"); node.parentNode;//获取父节点,如根据可以获取 node.childNodes;//获取子节点 node.innerHTML;//获取节点内的html元素:
123
node.innerTEXT;//获取节点内的文本,标签不会获取:123
document.getElementById().click();
history.go(0);
//arguments对象是一个类似数组的对象,方法参数就是它的元素
arguments.length;//参数个数
arguments[0];//取参数
document.querySelectorAll("input[type='file']");
document.getElementById("id");
document.getElementsByName("name");
document.getElementsByTagName("input");
console.log("123456".substring(2,3));// 3
console.log("123456".substr(2,3));// 345
function asy(fn){
setTimeout(function(){
//fn("异步编程");
},0)
}
asy(function (str){
console.log(str);
});
// 定时器
let interval = setInterval(function (){
document.getElementById("p1").innerText = new Date().toLocaleString();
},1000);
// setTimeout是一次性的无需清除
setTimeout(function() {
// 清除定时器
window.clearInterval(interval);
}, 5000);
// Promise对象
let state = prompt("请输入一个数");
new Promise((resolve,reject) => {
setTimeout(function (){
if(state % 2 == 0){
resolve(state + "是偶数");
}else{
reject(state + "不是偶数");
}
},2000);
// 获取两个返回参数
}).then(resolve => {
console.log(resolve);
},reject => {
console.log(reject);
// catch只获取参数二
}).catch(reject => {
console.log(reject);
})
let obj1 = new Object();
obj1.id = 1;
console.log(obj1.id);
let obj2 = {id : 2};
console.log(obj2.id);
function obj(id){
this.id = id;
this.log = function(){
console.log(this.id);
}
}
// 原型(静态)
obj.prototype = {
count : 10,
add : function (){
// this.count++;操作实例
obj.prototype.count++;// 操作原型
}
}
let obj3 = new obj(3);
let obj4 = new obj(4);
obj3.log();
console.log(obj3.id == obj4.id);// false
console.log(obj3.count == obj4.count);// true
obj3.add();
obj4.add();
console.log(obj3.count);
console.log(obj4.count);
// 对象数组遍历
let map = [{id:1},{id:2}];
for (let item of map) {// 数组用of
for(let key in item){// 对象用in
console.log(key + " " + item[key]);
}
}
console.dir({id:1});// 以对象形式输出
// 解构
const list = [1,2,3];
let [a,b,c] = list;
console.log(a,b,c);
const student = {
name : "zhangsan",
log : function (){
console.log("log");
}
}
let{log} = student;
log();
// 对象简写
let name = "lisi";
let age = 20;
let person = {
name,
age,
sayHi : function (){
console.log(this);
}
}
function father(id){
this.id = id;
this.msg = function (){
console.log("father");
}
}
function son(name){
this.name = name;
this.log = function (){
console.log("son");
}
}
// 子类原型持有父类实例
son.prototype = new father(1);
let son1 = new son("zhangsan");
son1.log();
son1.msg();
console.log(son1.id);
console.log(son1.name);
// 排序
console.log([1,3,2].sort(function (o1,o2){
return o2-o1;// 逆序(sort无参或o1-o2:顺序)
}));
let ary = [1,2,3];
ary.unshift("零");// 头部插入
ary.push(function (){console.log(4);});// 尾部插入
for (let item of ary) {
if(typeof item === "function"){
item();
}
console.log(typeof item + " " + item);
}
let ary1 = [1,2,3];
// splice(截取位置,截取个数,从截取位置补充),截取的元素组成新的数组,会改变原数组
let ary2 = ary1.splice(1,0,4);
// slice(截取位置,结束位置(不包含)),截取的元素组成新的数组,不会改变原数组
let ary3 = ary1.slice(1,3);
console.log(ary1,ary2,ary3);
// 注意引号规范,一行用"'",多行用"`"。
let str = `{
"id" : 1,
"name" : "lisi",
"flag" : true,
"addr" : {"city":"sz"},
"ary" : [1,2,3]
}`;
// 字符串转JSON
let json = JSON.parse(str);
console.log(json);
// JSON转字符串
console.log(JSON.stringify(json));
document.querySelector("#btn");// id
document.querySelectorAll("a");// 标签
document.querySelectorAll(".cls");// 类
document.querySelectorAll("#btn p");// 后代:#btn内部所有p标签
document.querySelectorAll("#btn>p");// 子代:#btn内下一级p标签
// 结构选择器
document.querySelectorAll("#btn ul li:first-child");
// #btn下的ul下的第二个li
document.querySelectorAll("#btn ul li:nth-child(2)");
// 多事件注册
function add(){}
btn.addEventListener("click",add);
btn.addEventListener("click",function (){});
// 事件解绑
btn.removeEventListener("click",add);
window.onload = function (){}// 页面加载完成后立即执行
history.back();// 页面历史后退
history.forward();// 页面历史前进
history.go();// 正数前进、负数后退、0刷新
document.getElementById("btn").onclick = function (){
location.href = "http://www.baidu.com";// 跳转
//location.reload();// 刷新页面
//location.replace("http://www.baidu.com");// 没有历史
}
// 本地存储
localStorage.setItem("key","value");
localStorage.getItem("key");
let title = "登鹳雀楼";
console.log(`${title}
锄禾日当午
汗滴禾下土`);
let fun = function (){
console.log(this);
}
fun();// window
// 改变this指向
fun.call({});// {}
document.querySelector("#p1").onclick = function(){
// window.setTimeout(function (){
// console.log(this);// window
// },1000);
// 箭头函数是静态的,始终指向作用域下的this
window.setTimeout(() => {console.log(this);},1000);// p
}
let person = [
{
name : "zhangsan",
age : 20
},
{
name : "lisi",
age : 30
},
{
name : "wangwu",
age : 40
},
{
name : "zhaoliu",
age : 50
},
];
person.forEach((person,index) => console.log(index + person.name));
console.log(person.filter(person => person.age > 30)
.map(person => person.name + "###"));
console.log(person.every(person => person.age > 30));
console.log(person.some(person => person.age > 30));
console.log(person.find(person => person.age == 50));
console.log(person.findIndex(person => person.age == 50));
// 导出
// 方式一
// export let name = "zhangsan";
// export function log(){
// console.log(name);
// }
// 方式二
// let name = "lisi";
// function log2(){
// console.log(name);
// }
// export{name,log2}
// 方式三
export default{
name : "wangwu",
log3 : function (){
console.log(1);
}
}
// 导入
import * as m1 from "./m1.js";
//import {name as name1,log} from "./m1.js";// 解构
//import m1 from "./m1.js";// default独有的
m1.default.log3();