码迷,mamicode.com
首页 > Web开发 > 详细

js大致复习第一遍

时间:2019-05-02 00:01:33      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:阻止事件冒泡   move   函数名   元素对象   elb   层次结构   自己的   构造   opp   

$JavaScript初级-----基础知识

什么是JS(布莱登 艾奇)
  • 是一门脚本语言:不需要编译,直接运行
  • 是一门解释性的语言:遇到一样代码就解释一行代码
  • 是一门动态类型的语言---不解析
  • 是一门基于对象的语言---不解释
  • 是一门弱类型的语言,声明变量的时候都使用var
三个部分
  • ECMAScript标准: js的基本的语法
    * DOM: 文档对象模型(document object model)
    * BOM: 浏览器对象模型 (browser object model)
    • DOM的作用:操作页面的元素
    • DOM树:把html页面或者是xml文件看成是一个文档,文档就是一个对象,这个文档中所有的标签都是元素,元素也可以看成是对象,标签(元素,对象)有很多,还有嵌套的关系,组成的这种层次结构,可以模拟成树形结构图,简称:树状图 ,就是DOM树

      数据类型
  • number数据类型----无论是整数还是小数都是number数据类型的
    * string数据类型----字符串,获取字符串的长度:变量名.length
    * boolean数据类型---两个值,true,false
    * null----只有一个,null
    * undefined----只有一个,undefined,一个变量声明了,没有赋值
    * object---对象-----面向对象的时候讲解

基本类型(简单类型,值类型):number,string,boolean
复杂类型(引用类型):object
空类型:undefined,null

基本类型的值在栈上
复杂类型的对象在堆上,地址(引用)在栈上
值类型之间传递的是值
引用类型之间传递的是引用(地址)
类型转换

其他类型转数字
parseInt()---->转整数
parseFloat()--->转小数
Number()---->转数字-----要比上面两个严格
其他类型转字符串
toString()
String()
其他类型转布尔类型
Boolean()---->要么是true要么是false

运算符
  • 算术运算符: + - * / %
    * 复合运算符: += -= *= /= %=
    * 赋值运算符: = 优先级别是最低的
    * 一元运算符: ++ -- ++在前,先自增再运算;++在后,先运算再自增
    * 三元运算符: ? :
    * 关系运算符:> < >= <= == === != !== (结果是布尔类型)
    * 逻辑运算符: && || ! 与或非 (结果是布尔类型)
流程控制

流程控制: 代码的执行过程
顺序结构:代码的执行的顺序,从上到下,从左到右(不严谨)
分支结构: if,if-else ,if-esle if,switch-case ,三元表达式
循环结构:while 循环,do-while,for循环 for-in循环
总结分支:如果只有一个分支,就用if
如果有两个分支,就用if-else
如果多个分支,一般是范围的,推荐使用if-else if
如果多个分支,一般是具体的值,推荐使用switch-case
总结循环:
while:先判断后循环,有可能一次循环都不执行
do-while:至少执行一次循环体,再判断
for循环:知道了循环的次数,推荐使用for循环

数组
  • break:在循环中遇到这个关键字,直接跳出当前所在的循环
    • continue:在循环中遇到这个关键字,直接进行下一次循环
    • 数组:存储一组有序的数据,数据类型可以不一样
    • 数组的作用:一次性存储多个数据
    • 数组元素:数组中存储的每个数据,叫数组元素,存储了5个数据,有5个数组元素
    • 数组的长度:数组的元素的个数,叫数组的长度:数组名.length--->就是长度,数组的长度是可以改变的
    • 索引(下标):存储数组元素的编号,从0开始,到数组的长度-1结束
    • 索引是用来存储和读取数组元素的
    • 遍历数组:通过循环的方式找到数组中的每个数据
    • 冒泡排序:
    <script>
      //冒泡排序:把所有的数据按照一定的顺序进行排列(从小到大,从大到下)
      var arr = [10, 0, 100, 20, 60, 30];
      //循环控制比较的轮数
      for (var i = 0; i < arr.length - 1; i++) {
        //控制每一轮的比较的次数
        for (var j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j] < arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
          }
        }
      }
      console.log(arr);
    </script>

数组定义的方式:
通过构造函数定义数组
var 数组名=new Array();空数组 Array()就是构造函数
var 数组名=new Array(长度);是设置数组的初始的长度,长度是可以改变的
var 数组名=new Array(值,值,值...);定义数组并设置数组中的元素值
字面量的方式定义数组
var 数组名=[];空数组
var 数组名=[10];这个数组有一个元素,值是10,长度是1
数组变量for(var i=0;i<数组名.length;i++){ }

函数

函数定义:

     function 函数名(){
          函数体
     }

函数调用:

     函数名();
参数

形参:函数定义的时候函数名字后面的小括号里的变量就是参数,是不需要写var
实参:函数调用的时候小括号里传入的变量或者是值,都是实参
* 返回值:函数中如果有return,那么这个函数就有返回值
* 如果函数中没有return,那么这个函数没有返回值
* 如果函数中有return,但是后面什么内容都没有,这个函数没有明确返回值
* 如果一个函数没有明确的返回值,函数调用了,并且接收了,那么此时接收的结果undefined
* 如果直接输出函数名字,那么是这个函数的代码

     无参数无返回值的函数
      function f1(){
   
     }
     有参数无返回值的函数,2个参数
      function f2(x,y){
    
        }
      无参数有返回值的函数
     function f3(){
          return 100;
     }
     有参数有返回值的函数
      function f4(x){
         return "您好";
    }

arguments

  • arguments----->可以获取函数调用的时候,传入的实参的个数
  • arguments是一个对象,是一个伪数组
  • arguments.length--->是实参的个数
  • arguments[索引]---->实参的值
作用域,变量,预解析

作用域:变量的使用范围

  • 全局作用域:全局变量在任何位置都可以使用的范围
  • 局部作用域:局部变量只能在某个地方使用---函数内
  • 作用域链:在一个函数中使用一个变量,先在该函数中搜索这个变量,找到了则使用,找不到则继续向外面找这个变量,找到则使用,一直找到全局作用域,找不到则是undefined

变量:

  • 全局变量:只要是在函数外面声明的变量都可以看成或者是理解成是全局变量
  • 局部变量:在函数中定义的变量

预解析:在执行代码之前做的事情

  • 变量的声明和函数的声明被提前了,变量和函数的声明会提升到当前所在的作用域的最上面
  • 函数中的变量声明,会提升到该函数的作用域的最上面(里面)
  • 如果有多对的script标签都有相同名字的函数,预解析的时候是分段的,互不影响
编程思想:面向对象,过程
  • 面向过程:凡事亲力亲为,所有的事情的过程都要清楚,注重的是过程
  • 面向对象:提出需求,找到对象,对象解决这个问题,我们要结果,注重的是结果
    面向对象的特性:封装,继承,多态,(抽象性)
对象

对象:有属性和方法,具体特指的某个事物
变量 instanceof 对象------->布尔类型,判断这个变量是不是这个类型的
属性----特征
方法----行为
对象分三种:内置对象,自定义对象,浏览器对象
* 内置对象:系统提供的
* 自定义对象:自己写的
* 浏览器对象:浏览器的

创建对象

创建的对象的3种方式:

  • 通过调用系统的构造函数创建对象 new Object()
    var obj1=new Object();
  • 自定义构造函数创建对象
    var obj2=new 自定义构造函数();
  • 字面量的方式创建对象
    var obj3={};
JSON

JSON格式的数据,都是键值对,成对的数据

var json={
    "name":"小明",
    "age":18,
    "sex":"boy"
     };
设置,获取属性值

对象设置属性的值的写法

  • 对象.属性名字=值;----点语法
  • 对象["属性的名字"]=值;-----

对象获取属性的值的写法

  • 对象.属性
  • 对象["属性"]
遍历对象
var obj={
      "name":"林子闲",
      "age":20,
      "sex":"男",
      "wife":"乔韵"
    };

 for(var key in obj){   //key---是一个变量,这个变量中存储的是遍历的对象的属性的名字
     console.log(key+"========"+obj[key]);
 }
Math方法
  • Math.ceil()---向上取整
  • Math.floor()---向下取整
  • Math.Pi----圆周率的值
  • Math.Max()---一组数字中的最大值
  • Math.Min()---一组数字中的最小值
  • Math.abs()----绝对值
  • Math.random()---随机数字
  • Math.sqrt()----开平方
  • Math.pow()----一个数字的多少次幂
new的执行过程

new的时候,系统做了什么事?

  1. 开辟空间,存储创建的新的对象
  2. 把this设置为当前的对象
  3. 设置属性和方法的值
  4. 返回当前的新的对象

三大系列

offset系列:

  • (父级元素margin+父级元素padding+父级元素border+自己的margin)
  • offsetLeft:元素距离左边位置的值
  • offsetTop:元素距离上面位置的值
  • offsetWidth:获取元素的宽度(有边框)
  • offsetHeight:获取元素的高度(有边框)

scroll系列:卷曲

  • scrollLeft:元素向左卷曲出去的距离
  • scrollTop:元素向上卷曲出去的距离
  • scrollWidth:元素中内容的实际的宽度,如果没有内容,或者内容很少,元素的宽度
  • scrollHeight:元素中内容的实际的高度,如果没有内容,或者内容很少,元素的高度

client系列:

  • clientWidth:可视区域的宽度,没有边框
  • clientHeight:可视区域的高度,没有边框
  • clientLeft:左边框的宽度
  • clientTop:上边框的宽度
  • clientX:可视区域的横坐标
  • clientY:可视区域的纵坐标

&JavaScript中级-----Webapi

获取元素
- 根据id从整个的文档中获取元素---返回的是一个元素对象
document.getElementById("id属性的值")
- 根据标签的名字获取元素-----返回的是元素对象组成的伪数组
document.getElementsByTagName("标签的名字");
- 根据name属性的值获取元素
document.getElementsByName("name属性的值");
- 根据类样式的名字获取元素
document.getElementsByClassName("类样式的名字");
- 根据选择器获取元素
document.querySelector("选择器");返回一个对象
- 根绝选择器获取元素
document.querySelectorAll("选择器");返回数组,多个元素组成的
元素的样式操作
  • 操作基本标签的属性 —— src,title,alt,href,id属性
  • 操作表单标签的属性 —— name,value,type,checked,selected,disabled,readonly
  • 对象.style.属性=值;
  • 对象.className=值;
事件
  • 事件:就是一件事,有 事件源 触发 和 响应
  • this关键字----如果是在当前的元素的事件中使用this,那么this就是当前的对象

    对象,元素,节点
  • 内置对象:系统自带的对象
    • 自定义对象:自己写的对象
    • BOM对象:浏览器对象
    • DOM对象:------->通过DOM方式获取的元素得到的对象
  • document:页面中的顶级对象
  • 元素:element:页面中的标签 标签---元素---对象(通过DOM的方式来获取这个标签,得到了这个对象,此时这个对象叫DOM对象)
  • 节点:Node:页面中所有的内容,标签,属性,文本
    节点的作用:为了将来获取很多节点,得到节点中的标签(元素),识别节点中的标签元素 节点的类型:1标签节点,2属性节点,3文本节点 * nodeType:节点的类型,1---标签节点,2----属性节点,3---文本节点 * nodeName:标签节点--大写的标签名字,属性节点---小写的属性名字,文本节点---`#text` * nodeValue:标签---null,属性---属性的值,文本---文本内容 * if(node.nodeType==1&&node.nodeName=="P")那么这就肯定是一个p标签

  • 根元素:html标签

阻止超链接默认跳转
  • return false;
自定义属性
- 自定义属性:标签原本没有这个属性,为了存储数据,程序员自己添加的属性
- 自定义属性无法直接通过DOM对象的方式获取或者设置
  - 对象.getAttribute("自定义属性名字");获取自定义属性的值
  - 对象.setAttribute("属性名字","值");设置自定义属性及值
- 移除自定义属性
   - 对象.removeAttribute("属性的名字");
元素的创建(3种)
1 document.write("标签代码及内容"); 如果在页面加载完毕后创建元素.页面中的内容会被干掉

2 父级对象.innerHTML="标签代码及内容";

3 document.createElement("标签名字");得到的是一个对象
    * 父级元素.appendChild(子级元素对象);
    * 父级元素.inerstBefore(新的子级对象,参照的子级对象);
    * 移除子元素 —— 父级元素.removeChild(要干掉的子级元素对象);
事件的绑定(3种)
1. 对象.on事件名字=事件处理函数      如果是多个相同事件注册用这种方式,最后一个执行之前的会被覆盖
    my$("btn").onclick=function(){};  
2. 对象.addEventListener("没有on的事件名字",事件处理函数,false);    `IE678不支持`
    my$("btn").addEventListener("click",function(){},false);
3. 对象.attachEvent("有on的事件名字",事件处理函数);           `谷歌火狐不支持`
    my$("btn").attachEvent("onclick",function(){});
addEventListener 和attachEvent的兼容代码

function addEventListener(element,type,fn) {
      if(element.addEventListener){
        element.addEventListener(type,fn,false);
      }else if(element.attachEvent){
        element.attachEvent("on"+type,fn);
      }else{
        element["on"+type]=fn;
      }
    }
事件解绑
1. 对象.on事件类型=null;
2. 对象.removeEventListener("没有on的事件类型",事件处理函数名字,false);
3. 对象.detachEvent("有on的事件类型",事件处理函数);
获当前节点的节点,元素
    //获取当前节点的父级节点
    console.log(my$("uu").parentNode);
    //获取当前节点的父级元素
    console.log(my$("uu").parentElement);
    //获取当前节点的子级节点
    console.log(my$("uu").childNodes);
    //获取当前节点的子级元素
    console.log(my$("uu").children);
    //获取当前节点的第一个子级节点
    console.log(my$("uu").firstChild);
    //获取当前节点的第一个子级元素
    console.log(my$("uu").firstElementChild);
    //获取当前节点的最后一个子级节点
    console.log(my$("uu").lastChild);
    //获取当前节点的最后一个子级元素
    console.log(my$("uu").lastElementChild);
    //获取当前节点的前一个兄弟节点
    console.log(my$("uu").previousSibling);
    //获取当前节点的前一个兄弟元素
    console.log(my$("uu").previousElementSibling);
    //获取当前节点的后一个兄弟节点
    console.log(my$("uu").nextSibling);
    //获取当前节点的后一个兄弟元素
    console.log(my$("uu").nextElementSibling);
写入,innerText innerHTML
document.getElementsByTagName("p").innerHTML="<p>这是一个p</p>";  不仅文本,还能标签等
document.getElementsByTagName("p").innerText="这是一个p";  只能作用于文本
document.write("<p>这是一个p</p>")    是document对象的一个方法,重绘,既替换之前的整个页面,用的不多
事件冒泡
事件冒泡:
元素A中有元素B,都有相同的事件,里面的元素的事件触发了,外面元素的事件也会触发.可以是多个元素嵌套

阻止事件冒泡:
1. e.stopPropagation(); IE8不支持      e —— 事件参数对象,
2. window.event.cancelBubble=true; 火狐不支持     window.event —— 事件参数对象,和e是一样的 
定时器
定时器会返回自己的id值,是window对象,但window在写时可省略
复用性定时器
var timeId=window.setInterval(函数,时间);   页面加载完毕后,每过一定时间后执行函数
window.clearInterval(定时器的id值);    清理定时器

一次性定时器
var timeId=setTimeout("alert('hello')",1000);   页面加载完成后,一定时间后只执行一次函数
clearTimeout(timeId);

js大致复习第一遍

标签:阻止事件冒泡   move   函数名   元素对象   elb   层次结构   自己的   构造   opp   

原文地址:https://www.cnblogs.com/huihuihero/p/10801056.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!