Javascript

Javascript学习笔记

javascript基础+BOM+DOM

Posted by ShawCai on Monday, July 8, 2019

TOC

Javascript基础

输出语句

  1. alert(s) 弹框

  2. document.write(s) 将字符串输出到界面

  3. console.log(s) 开发者模式显示日志

检查类型

var a=1
console.log(typeof a)
//控制台输出: number

数据类型

  • Number
  • String
  • Boolean
  • null :typeof 为 object
  • undefinied
  • object

对象

基础

  1. 类似于python的字典类型

  2. 获取属性值的方式

    • object[属性名]
    • object.属性名

  3. 检查对象是否含有属性名
    属性名 in 对象

工厂模式创建对象

构造函数

//构造函数
function Person(name,age,gender){
    this.name=name;
    this.age=age;
    this.gender=gender;
}
var per= new Person("张三"，18，"男")

强制转换

  1. String(a)

  2. Number(a)
    非数字字符串–>NaN
    null–>0
    undefined—>NaN
    true–>1
    false–>0

  3. parseInt() 对于非字符串型数据 先转换成字符串
    true–>undefined

  4. parseFloat()

进制数

  1. 二进制 0b

  2. 十六进制 0x

  3. parseInt(a,进制)

函数

创建函数

function fun(){}
fun();

var fun=function(){};
fun();

立即执行函数

(func(a=3,b=5){
 console.log(a+b);
})()

数组

  1. 数组中的元素可以是任意类型

  2. 数组函数

    • push() 在数组结尾插入元素

    • upshift() 在数组开头插入元素

    • pop()删除数组结尾元素

    • slice(start,end) 负数代表倒数第几个元素；作用：截取开始索引位置到结束索引位置的元素（不包括结束位置）

      arr.slice(0,1);

    • splice(start,count)负数同上，第二个参数表示删除参数的数量；作用：删除范围里的元素;第三个参数以后表示在start索引前插入新的元素

      arr.splice(0,1,"1","2");

  3. sort函数 sort函数笔记

  4. 数组遍历（IE8以上的浏览器）

    arr.foreach(function(){
   console.log("hello");
});
//function可以传参
//第一个参数是正在遍历的元素
//第二个元素是索引值

正则表达式

reg=/[^abc]/;     //不包含abc
reg=/^abc$/;      //^开始符号，$结束符号
reg=/a{1,3}b/;    //a出现1到3次
reg=/.*/;          //.表示任意字符，*出现任意次，+出现1到无穷次
reg=/^\s/g;        //g为全局匹配模式，/s为空格
//注意reg=字面量和reg=new RegEXP()在转义的区别

定时调用

//将一个函数每隔一段时间执行一次
/*
 *——参数：
 *  1.回调函数
 *  2.时间间隔，单位毫秒
 *——返回值
 *  返回一个Number类型的数据，
 *  这个数字用来作为定时器的唯一标识
*/
var timer = setInterval(function({
    count.innerHTML=num++;
},1000);

//关闭定时器
/*
 *clearInterval()可以接受任意类型的参数
 *如果参数是个有效的定时器标识，那么可以停止
 *若不为有效，也不会报错
*/
clearInterval(timer);

延时调用

/*
 *延时调用一个函数不马上执行，而是隔一段时间以后调用
 *而且只会执行一次
*/
var timer=setTimeout(function(){
    console.log("延时调用");
},1000);

JSON

//javascript对象转JSON字符串
var obj = {name:"张三"，age:18,gender:"男"}
var str = JSON.stringify(obj)
//将JSON字符串转换成Javescript对象
var obj1 = JSON.parse(str)

DOM(文档对象模型)

文档加载

网页按照从上到下的顺序执行，因此script大多数情况放在HTML代码尾部；若放于里,可以(下例)

window.onload=function(){
    var btn=document.getElementById("btn");
}

DOM查询

获取元素的方法

  1. document.getElementById() 通过id属性获取一个对象

  2. document.getElementsByTagName()
    通过标签名获取一组元素对象

  3. document.getElementByName()
    通过name属性获取一组元素对象

  4. document.getElementsByClassName()
    通过class获取一组元素对象，不支持IE8以及以下的浏览器

读取元素属性

  1. 元素.id, 元素 .name, 元素.value

  2. 元素.className

获取元素节点的子节点

  1. getElementsByTagName
  2. childNodes
    表示当前节点的所有子节点（包括文本节点–>元素间的空格）–>不常用
  3. children
    当前节点的所有子节点（不包括文本节点）
  4. firstChild
    当前元素的第一个节点（包括文本节点）
  5. lastChild
    当前节点的最后一个节点（包括文本节点）

使用DOM操作CSS

  1. 使用 元素.style 的方式只能获取内联样式，无法获取样式表的样式

  2. getComputedStyle(element,null)

    • 返回样式属性集合

      //获取元素宽度
getComputedStyle(btn,null)['width']

    • IE8及以下不支持(提供兼容措施)

    兼容各种浏览器

  3. 获取其他样式

    • scrollTop 垂直滚动条滚动的距离
    • scrollLeft 水平滚动条滚动的距离
    • scrollHeight 元素可滚动区域的高度
    • clientHeight 可视高度
      用途：判断滚动条是否滚动到底部
      实现：scrollHeight-scrollTop<=clientHeight
      滚动条滚动事件：onScroll

事件对象

定义

  • 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数。
  • 事件对象中封装了当前事件的一切信息，比如：鼠标的坐标，键盘哪个按键被按下，鼠标滚轮滚动的方向。

代码示例

/*
IE8及以下浏览器中，响应函数触发时，浏览器不会传递事件对象，事件对象是作为window对象的属性保存的。
*/
element.onmousemove=function(event){
    event = event || window.event;  //考虑兼容性
    x = event.clientX;
}

事件冒泡

p114

事件委派

将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件

事件绑定

  1. addEventListener

    /*不支持IE8以及以下浏览器，事件执行顺序同添加顺序一致
传入的this是触发事件的元素
false表示捕获阶段不执行
*/
element.addEventListener("click",function(){
	alter(1);
},false);

  2. attachEvent

    /*仅支持IE8及以下浏览器
	this是window
*/
element.attachEvent("onclick",function(){
alter(1); 
});

  3. 兼容

兼容

BOM(浏览器对象模型)

Window

  • 代表的当前浏览器的信息，通过该对象来识别不同的浏览器

  • 由于历史原因，Navigator对象的大部分属性都已经不能帮助我们识别浏览器了

  • 一般我们只会使用userAgent来判断浏览器信息：用userAgent可以区分火狐、Chrome、IE8|9|10，但无法区分IE11(Edge)

  • //区分IE11
if ("ActiveXObject" in window){
  alter("IE浏览器")
}

Screen

History

  1. 作用：对象可以用来操作浏览器向前或向后翻页

  2. 属性
    length：返回浏览器历史列表中的 URL 数量

  3. 方法：

    • back() 加载 history 列表中的前一个 URL。
    • forward() 加载 history 列表中的下一个 URL。
    • go(int) 加载 history 列表中的某个具体页面。
      1:向前跳转一个页面 = forward()
      2:向前跳转两个页面
      -1:向后跳转一个界面 = back()
      -2:向后跳转两个界面

Location

  1. 作用：封装了浏览器地址栏的url信息

  2. 跳转地址：

    • 直接修改location属性
    • location.assign(url)
    • location.replace(url) 用新的界面替换当前界面，无法回退（不能使用history.back()方法）

  3. 重新加载当前界面：
    location.reload(Boolean): 传true清空缓存

「真诚赞赏，手留余香」

SleepyXU.C Blog

真诚赞赏，手留余香

使用微信扫描二维码完成支付

FEATURED TAGS
blog css git html javascript ss/ssr