JS 基础

JavaScript 组成

  • 核心ECMAScript
  • 文档对象模型 dom
  • 浏览器对象模型 bom

数据类型

  • string
  • number 包括整数和小数
  • typeof/typeof() 判断数据类型
  • boolean 类型
  • undefined: 声明一个变量单不赋值;
  • 复杂类型: 数组 和 object
  • Function
  • Null
  • 函数没有return时 返回值undefined

空类型

  • null 空,什么也没有,应该没有值
  • "" 空字符串
  • undefined 应该有值,但是没有赋值
  • undefined == null 它们都没有值
  • undefined === null 类型不同, null为对象
  • null +10 = 10;
  • undefined + 10 = NaN, NaN (not a number)

数据类型的转换

显示转换
  • Number()
    1. 如果是数字值,返回本身
    2. 如果字符串中包含有效的浮点格式,将其转换为浮点数值
    3. 如果是空字符串,将其转换为0
    4. 如果字符串中包含非以上格式,则将其转换为NaN
  • parseInt()
    1. 忽略字符串前面的空格,直至找到第一个非空字符
    2. 如果第一个字符不是数字符号或者负号,返回NaN
    3. 如果第一个字符是数字,则继续解析直至字符串解析完毕或者遇到一个非数字符号为止
    4. 如果是小数,会转成整数(向下取整)
  • parseFloat()
    1. 与parseInt一样,唯一的区别是会保留上小数
  • String()
  • .toString()
  • Boolean()
  • isNaN() 判断一个变量是否为 非 [数字/纯数字字符串];

      console.log(isNaN(4));  //false
      var a = "234a"
      console.log(isNaN(a))	//true
      console.log(isNaN(parseInt(a)));  // false
      console.log(isNaN("1234"))	// false
      console.log(isNaN("123.4"))	// false
      console.log(isNaN(123.4))	// false
    
    
隐式转换
  • 所有算术运算符运算时都会进行转换;
  • +号连接字符串时转换为字符串;
  • !! 转换boolean值: var b = !!a;//相当于b=Boolean(a);

运算符

  • 算术运算符: + - * / % () += -= *= /= %=
  • 自增自减运算符: ++ --
  • 逻辑运算符: && || !
  • 比较运算符: > < >= <= == === != !===
  • 赋值运算符: =
  • 逗号运算符
  • 三元运算符
  • NaN 自己不等于自己==, === 均不等于自己

流程控制

  • 流程控制: if, switch-case
  • 循环控制: while, do-while, for, break, continue

document对象

  • document. write("") 直接将内容添加到body标签内当前已有内容之后.
  • document. writeln("") write 区别在于同时在内容结尾添加换行;
  • document. getElementById("") 通过id获取元素;
  • js 修改元素样式, 样式style.backgroundColor/width/display/

      document.getElementById("yes").style.backgroundColor = "red";
    
    
  • 获取表单的值 var txt = $(“input”).value; . 只有表单才有值,其他元素没有值!

变量作用域

  • 写在最外层, 函数体外的变量为全局变量;
  • 写在函数体内部,但是没有var声明的变量也是全局变量;
  • 写在函数体内部的声明变量为局部变量;

一些知识点

  • 不跳转的a标签
      <a href =”javascript:;”>  </a>
      <a href=”javascript:void(0)”> </a>  
    
  • <html>标签之外的内容会显示到<body>标签内; 20170911150510833276695.jpg

20170911150510840419603.png

常见事件

事件名 描述
onclick 鼠标单击
ondblclick 鼠标双击
onkeyup 按下并释放键盘上的一个键时触发
onchange 文本内容或下来菜单中的选项发生改变
onfocus 获取焦点
onblur 失去焦点
onmouseover 鼠标悬停
onmouseout 鼠标移出
onload 网页文档加载事件
onunload 关闭网页时事件
onsubmit 表单提交事件
onreset 重置表单时事件
oninput  
  • focus() 方法, 让某个表单自动获取光标
txt.focus(); // txt 获取光标
  • select()方法, 选择表单
txt.select();// 选择表单txt

函数

  • 函数声明 function fn() {}
  • arguments 对象, 存储了实参
	// 尽量要求形参和实参相互匹配

    function fn(a,b) {        
    //  console.log(fn.length); 返回的是 函数的 形参的个数
        
    // console.log(arguments.length);  返回的是正在执行的函数的 实参的个数
    // arguments  里面存放的是 [1,2]  
        
    	if(fn.length == arguments.length)        
    	{            
    		console.log(a+b);        
    	}else{
    		console.error("对不起,参数不匹配,参数正确的个数应该是" + fn.length);
    	}
    }    
    fn(1,2);
  • div.one$*10 可以生成 10个 div 名字 从 one1 开始到 one10

变量提升

  • 值不提升
  • 变量的声明被提升
var num = 10;
fun();
function fun(){
	console.log(num);// undefined

	var num = 20;
}
// 相当于转为为下面代码

var num = 10;
fun();
function fun() {
	var num;   
	// 带有var 的变量 提升到 function 作用域的最顶层
    
	// 只提升变量  ,不给值
    
	console.log(num);    
	num = 20;
}

offset 家族

  • offsetWidth offsetHeight 盒子实际大小
  • offsetWidth = widht + border + padding
  • offsetLeft offsetTop 距离上级盒子(带有定位)左边/上边的位置;
  • 没有offsetBottom offsetRight属性;
  • offsetParent 上级元素(带有定位)
  • parentNode 最近上级元素

scroll 家族

  • window.onscroll = function(){} 监听屏幕滚动
  • scrollTop 网页隐藏在屏幕上方的距离
  • scrollTop 兼容写法: var scrolltop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  • window.scrollTo 滚动到指定坐标

event 属性

属性 介绍
data 返回拖拽对象的URL字符串
width 该窗口或框架的宽度
height 该窗口或框架的高度
pageX 光标相对于该网页的水平位置(ie无)
pageY 光标相对于该网页的垂直位置(ie无)
screenX 光标相对于该屏幕的水平位置
screenY 光标相对于该屏幕的垂直位置
target 该事件被传送到的对象
type 时间的类型
clientX 光标相对于该网页的水平位置
clientY 光标相对于该网页的垂直位置
  • ie678 中pageX 的获取方式 pageY = clientY + document.documentElement.scrollTop

  • event 兼容 var event = event || window.event;

  • 清除页面上被选中的文字/内容 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

  • 判断当前对象

var targetId = event.target ? event.target.id : event.srcElement.id;

阻止事件冒泡

  • event.stopPropagation() event.cancelBubble = true
if(event && event.stopPropagation)
{
	event.stopPropagation();  //  w3c 标准
}else{
	event.cancelBubble = true;  // ie 678  ie浏览器
}


client 属性

  • clientWidth 可视区域的宽度
  • scrollWidth 可滑动区域的宽度

面向对象

  • function 用于生成构造函数
  • propotype 用于添加原型方法
	function Person(name,age) {
        this.name = name;
        this.age = age;
    }
    // 构造函数的外面
    Person.prototype.showName = function() {
        alert("我的名字"+ this.name);
    }
    Person.prototype.showAge = function() {
        alert("我的年龄"+ this.age);
    }
    var xiaomi = new Person("刘德华",18);
    var dami = new Person("张学友",18);
    xiaomi.showName();
    alert(xiaomi.showName == dami.showName);