js笔记

JS简介

• JS是什么
  • js是可以嵌入到html中，是 基于对象 和 事件驱动 的 脚本语言
    • 脚本语言：脚本语言又被称为扩建的语言，或者动态语言，是一种解释型语言，由解释器来运行，用来控制软件应用程序，脚本通常以文本保存，只在被调用时进行解释或编译
  • 特点：
    (1)交互性
    (2)安全性：js不能访问本地磁盘
    (3)跨平台：浏览器中都具备js解析器
• JS可以做什么
  • js能动态的修改(增删)html和css的代码
  • 能动态的校验数据
• JS组成
  • ECMAScript（核心）/BOM（浏览器对象模型）/DOM（文档对象模型）
• JS被引入的方式
  • 内嵌脚本

  • 内部脚本

  • 外部脚本
    首先先创建一个.js文件
    其次在html中引入
    在导入外部js文件的
    • onfocus: 获得焦点的事件
    • onblur:失去焦点的事件
      • 例：当输入框获得焦点的时候，提示输入的内容格式。当输入框失去焦点的时候，提示输入有误

    	name
    	
    	
    

    • onmouseover:鼠标悬浮的事件
    • onmouseout：鼠标离开的事件
      • 例：div元素 鼠标移入变为绿色 移出恢复原色

      		#d1{background-color: red;width:200px;height: 200px;}
      		
      
      		
      

    • onload:加载完毕的事件
      • 等到页面加载完毕在执行onload事件所指向的函数
      • 注意script的位置

  • 事件的绑定方式
    • 将事件和响应行为都内嵌到html标签中
      
    • 将事件内嵌到html中而响应行为用函数进行封装
    • 将事件和响应行为 与html标签完全分离
    • this关键字
      • this经过事件的函数进行传递的是html标签对象

  • 阻止事件的默认行为

    • IE：window.event.returnValue = false;

    • W3c：传递过来的事件对象.preventDefault();
      //部分ie版本支持W3c

      	if(e&&e.preventDefault){
      		alert("w3c");
      		e.preventDefault();
      	//IE标签
      	}else{
      		alert("ie");
      		window.event.returnValue = false;
      }
      
      //通过事件返回false也可以阻止事件的默认行为
      		点击我吧
      

  • 阻止事件的传播

    • IE：window.event.cancelBubble = true;

    • W3c：传递过来的事件对象.stopPropagation();

      if(e&&e.stopPropagation){
      	alert("w3c");
      	e.stopPropagation();
      //IE标签
      }else{
      	alert("ie");
      	window.event.cancelBubble = true;
      }
      

  js的bom

  • window对象

    • 弹框的方法：

      • 提示框：alert
      • 确认框：confirm(“确认信息”);
        • 有返回值：如果点击确定返回true 如果点击取消返回false
      • 输入框：prompt(“提示信息”);
        • 有返回值：如果点击确认返回输入框的文本，点击取消返回null

    • open方法：

      • window.open("url");

    • 定时器：

      setTimeout(函数,毫秒值);
      		setTimeout(
      			function(){
      				alert("xx");
      			},
      			3000
      		);
      clearTimeout(定时器的名称);
      		var timer;
      		var fn = function(){
      			alert("x");
      			timer = setTimeout(fn,2000);
      		};
      		var closer = function(){
      			clearTimeout(timer);
      		};
      		fn();
      setInterval(函数,毫秒值);
      clearInterval(定时器的名称)
      		var timer = setInterval(
      		function(){
      			alert("nihao");
      		},
      		2000
      	);
      	var closer = function(){
      		clearInterval(timer);
      	};
      

      • 定时器示例：注册后5秒钟跳转首页

  • location

    • location.href=“url”;

  • history

    • back();
    • forward();
    • go();

    后一页
    
    
    
    
    
    

  js的dom

  html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改
  在dom树当中 一切皆为节点对象
  菜鸟教程
  操作汇总