js导读

'''js属于编写运行在浏览器上的脚本语言js采用ECMAScript语法操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录操作DOM:文档对象模型 '''

js引入

// js/1.jsres.onclick = function () {  // res点击会触发一个功能    this.style.height = "100px";  // this => res    this.style.backgroundColor = "yellow";    this.style.borderRadius = "50%";

 写在 与之间

js选择器

    
     
    
     
//上述结果一个都匹配不到//注意:虽然id可以重复,但是js中却无法唯一标识识别,为了可以唯一标识识别,我们要确保标签id名的唯一性// document对象 文档对象:整个页面中的所有对象,通过document可以获取文档中的所有对象    
     
    
     
// 上述操作能获得到第一个id="box", 但是第二个永远取不到, 所以id还是不能重复js中如何定义变量名?var num = 10;如何查看变量名?不能用print(num),这个操作是调用浏览器使用打印机①弹出框查看 alert(num)②浏览器控制台查看 console.log(num);③将内容书写在页面中 document.write(num);④断点调试②④使用的比较多  
     
     
     
     
     
      1
     
     
      2
     

事件

var box = document.querySelector('.box');// 元素对象.事件名 = 函数box.onclick = function() {    // 具体功能代码块; this代表就是激活该事件的元素对象    this.style.color = 'red'; // 将box的字体颜色修改为红色}

操作页面文档

// 1. 通过选择器获取页面元素对象(指定的标签)// 2. 为该对象绑定事件// 3. 通过事件中的功能操作元素对象// i) 修改内容: innerText | innerHTML// ii) 修改样式// iii) 修改类名var box = document.querySelector('.box'); // 获取页面元素box.onclick = function () {  // 绑定事件    // 修改内容    // this.innerText = "innerText";  // 不能解析html标签    // this.innerHTML = "innerHTML";  // 可以解析html标签    // 修改样式 => 修改的是行间式 => 优先级高于所有内联外联样式(没有设置!important前提下)    // this.style.color = "green";    // this.style.fontSize = "12px";    // 修改类名    // this.className = "box1";  // 直接修改类名, 会丢失之前类名下的属性们    // 在原类名基础上添加类型    this.className += " box1"; // 多类名之间用空格隔开, 所有做字符串拼接时一定需要添加空格    // 清除类名    this.className = "";  // 将类名等于空字符串就是置空类名}

计算后样式

//什么是计算后样式?内联式和外联式书写的样式都是计算后样式// 如何获取提取设置好的样式属性值var box = document.querySelector('.box');var ftSize = box.style.fontSize;  // 这种方式操作的永远是行间式console.log(">>>>>>>>>>>>>>>>" + ftSize);// 内联或外联设置(getComputedStyle也能获取到行间式的设置).box {    font-size: 100px;}// 如何获取计算后样式// getComputedStyle(元素对象, 伪类).属性名var box = document.querySelector('.box');var ftSize = getComputedStyle(box, null).fontSize;console.log(ftSize);  // 100px

数据类型

// 1.定义变量var num = 10;var s = "hello js";console.log(num, "<<>>", s);console.log("%d  %s", num, s);// 将字符串赋值给页面元素对象,直接在页面上打印box.innerText = s;//命名规范：// 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）// 区分大小写// 不能出现关键字及保留字// var var = 30;  // 出错

值类型

// Number: 数字类型var a1 = 10;var a2 = 3.14// String: 字符串var s1 = "123";var s2 = '456';// undefined: 未定义var u1;var u2 = undefined;// Boolean: 布尔var b1 = true;var b2 = false;// typeof() 来查看数据类型eg:console.log(a1,typeof(a1));注意:js不直接操作内存

引用类型

// Object:对象类型=>可以当做字典来使用var obj = {};// Function:函数类型var func = function(){}// Null =>空对象var n = null;

常用对象类型

// 数组a = new Array(1, 2, 3, 4, 5);a = [5, 4, 3, 2, 1];  // 语法糖// 时间对象var a = new Date();//当前时间// a = new Date("2019-3-1 12:00:00");  // 设定的时间console.log(a.getFullYear());//年console.log(a.getDay()); // 周几console.log(a.getMonth()); // 月份(从0开始)console.log(a.getDate()); // 几号// 浏览器cookie 需要前后台交互,存储临时状态 如:过期时间,七天免登陆//正则re = /\d{2}/g;res = 'a1b23c456'.match(re);console.log(res);结果:(2) ["23", "45"]re =/[abc]/gi; //a或b或cres = 'aBc'.match(re);console.log(res);结果:(3) ["a", "B", "c"]// 总结:// 1.正则 /正则语法/// 2.参数g 全文匹配// 3.参数i 不区分大小写

数组与对象（字典）的使用

var arr = [3,5,2,1,4];console.log(arr[1]);var dic = {'name':'henry','age':18,'little-name':'zz'};console.log(dic['name']);console.log(dic['age']);console.log(dic.name);console.log(dic.age);console.log(dic['little-name']);// dic中所有的key都是string类型, value可以为任意类型// dic中key可以通过中括号及 .语法访问值,当key不满足js命名规范时,只能使用中括号语法