js笔记

1.javaScript--->是一种强大的脚本语言
    脚本语言：无法独立执行，必须嵌入到其他语言中结合使用
    编程语言：独立写程序，可独立运行。
    
    1.javaScript组成
        ECMAScript:基础语法
        DOM:文档对象模型，对HTML中的 标签进行操作
        BOM：浏览器对象模型，对浏览器进行操作
    
    2.引入方式：
        内部脚本：
            <script type=”text/javascript”>
                JavaScript的代码
            </script>
        外部引入
            <script  type=”text/javascript”  src=”javascript文件路径” ></script>
            
2.基本数据类型
    1.变量命名规则：    必须以字母或下划线开头，中间可以是数字、字符或下划线
                        不能使用js关键字如function this class
                        严格区分大小写
    2.定义格式：var 变量名=变量值
    
    3.基本数据类型
        string
        boolean
        number
        null
        undefined
    4.运算符
        比较运算符< <= > >= != == ===   //=== 全等，值和类型均相等
        逻辑运算符 && || ！
        
    5.typeof可得到变量的类型
        如果变量为引用类型或null，返回object
        
    6.引用数据类型：
        js中不存在类的概念，所处理的引用类型都是对象
        创建对象：
            var str = new String();//和java相同
            var str = new String;  //js独有的方式


3.正则对象
    获取对象：
        var reg = new RegExp("表达式");--->开发中基本不用
        接量方式val reg=/^  ...  $/------严格检查
        普通方式val reg=/  ...  /-------只要有就符合
        直接量方式的正则是对象，不是字符串，别用引号
    校验方式：
        reg.test(string);  //返回boolean值
        

4.js数组对象--->可看成Java中的ArrayList
    对象创建方式:    1.    var arr = [1,2,3,”a”,true]; //常用的JS数组。 长度5。可以为空
                    2.    var arr = new Array();   //创建一个数组对象，数组长度默认为0
                    3.    var arr = new Array(4);    //创建了长度为4的数组
                    4.    var arr = new Array(“a”,”b”,true);    //创建了一个数组，长度3,数组元素是”a”,”b”,true
    常用操作：    arr.length
                arr[index]
                join("连接符");  //不改变数组内容 返回字符串
                arr.reverse();   //反转，改变原数组，有返回值
                arr.pop();          //删除操作
                arr.push('a',...);        //追加1个或多个元素，返回新长度
                
5.全局函数
        eval(string);    //把字符串作为js脚本执行 参数只能是基本数据类型
        编码和解码：
            encode（） //把字符串编码为URI
            decode（）    //解码某个编码URI
            
            URI是统一资源标识符。  标识资源详细名称。    //URI标识资源的详细名称，包含资源名。
            URL是统一资源定位器。 定位资源的网络位置。    //URL定位资源的网络位置。包含http:

        字符串转数字：
            parseInt();  //解析一个字符串并返回一个整数  
            parseFloat();  //返回一个浮点
            注意事项：如果字符串的某个字符从字面值上无法转为数字，那么从该字符开始停止转换，
            仅返回前面正确的转换值。如果第一个字符就无法转，返回NaN
            
6.函数定义
        function 函数名（参数列表）{        //参数列表无需使用var关键字
            函数体
        }
        匿名函数定义：
            var 函数名=function（a,b）{
                
            }
            函数名（1，2）
        a.JavaScript函数调用执行完毕一定有返回值，值及类型根据 return决定，
            如果未return具体值，返回值为undefined；
        b.JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义；
        c.因为JavaScript不存在函数重载，所以JavaScript仅根据方法名来调用函数，即使实参与函数的形参不匹配，也不会影响正常调用；
        d.如果形参未赋值，就使用默认值undefined

7自定义对象
        function 对象名(){
            函数体
        }
        var 对象名 = {属性名1:”属性值1”, 属性名2:”属性值2”, 属性名3:”属性值3”……}; //冒号分割，逗号隔开
        
        对象名.name=value    //修改或创建属性,有name则修改属性值为value，没有则创建name并赋值
        对象名[name]=value    //修改或创建属性,有name则修改属性值为value，没有则创建name并赋值,[]里面的属性值可以动态获取(可以写表达式，如this.name)
8.BOM对象
    一般情况下，window代表了BOM对象，window是js内置对象，调用方法时可省略不写
    消息框： alert（）；
            confirm（）该方法有返回值，用户通过选择“确定”或者“取消”，方法结束会返回boolean类型的值。
    定时器：循环定时器：setInterval(调用方法,毫秒值);
            停止循环定时器：clearInterval()
            一次性定时器：setTimeout(调用方法,毫秒值);
            停止一次性定时器：clearTimeout()
    location对象：设置href属性可跳转到对应的路径
        //【得到数据】获取到当前的location的对象
        var value = location.href;
        //警告对话框显示路径
        alert(value);
        //【设置数据】设置location的对象 location.href = URL,跳转到相应的路径
        location.href = "http://www.itheima.com";
        
        
        
        
        
        

1.   DOM对象概述（文档对象模型）

DOM是将标记型文档（HTML）中所有内容都封装成对象，通过操作对象的属性或者方法，来达到操作或改变HTML展示效果的目的

2.   DOM树

HTML对象会被浏览器加载并解析到内存中，生成DOM树：

 

l  每个标签会被加载成 DOM树上的一个元素节点对象。

l  每个标签的属性会被加载成DOM树上的一个属性节点对象

l  每个标签的内容体会被加载成DOM树上的一个文本节点对象

l  整个DOM树，是一个文档节点对象，即DOM对象。

特点：

l  必定有一个根节点

l  每个节点都是节点对象

l  除根节点外每个节点都有一个父节点

l  出叶子节点外每个节点都有一个或多个子节点

l  在js中document代表当前文档对象的引用

3.   通过文档对象获取元素对象

l  getElementById();：通过ID获取对应元素对象如果找不到，返回null

l  getElementsByName();：通过元素的name属性获取符合要求的所有元素

l  getElementsByTagName();：通过元素的元素名属性获取符合要求的所有元素

l  getElementsByClassName();：通过元素的class属性获取符合要求的所有元素

除第一个外，可以获取到元素节点对象 数组；如果找不到，返回 空数组，注：获取某个/某些元素节点对象，必须保证元素节点对象被先加载到内存中

 

 

补充：

1.document方法：

creatElement(“节点名称”);:创建子元素对象

creatTestNode(“文本”)；：创建文本节点

2.element方法：

appendChild(子元素);：添加子元素

removeChild(子元素);:删除子元素（节点）

 

parentElement;:获取父元素；，也可用parentNode

children；父元素获取所有子元素数组

3.表格属性：

rows;返回所有行的数组

cells:返回行中所有单元格数组

 

4元素对象常见属性

1. value：获取元素对象属性值，采用=“新属性值“ 方式修改属性值，下同
2. className: 获取元素对象class属性值
3. innerHTML: 获取元素对象内容体

 

5.js事件

页面上的特效

事件源：专门产生事件的组件

事件：由事件源所产生的动作或事情

监听器：专门处理事件源所产生的事情

注册/绑定监听器：让监听器监听事件源是否有指定事件产生

 

6.常见的js事件

1. 点击事件：onclick=”run()”
2. 焦点事件：

a)       获取焦点事件（onfocus）

b)       失去焦点事件（onblur）

1. 域内容改变事件：onchange
2. 加载完毕事件：onload
3. 表单提交事件：onsubmit

<form onsubmit=”return run()”>  return boolean返回值，表示是否组织表单数据提交

1. 键位弹起事件（onkeyup）
2. 常用鼠标事件

a)       鼠标移入事件（onmouseover）

b)       鼠标移出事件（onmonseout）

7.js事件绑定方式

1. 元素事件句柄绑定：将事件以元素属性的方式写到标签内部，进而绑定对应函数：

注：this指代当前元素对象，onlick=“run1(), run2(), run3()”,根据绑定事件按顺序执行这三个函数

1. DOM绑定方式：
   1. Document.getElementById(“uname”).onclick=function(){}

注意，这中绑定方式，只能被触发一次

2     匿名函数可绑定多个函数

 

 

来源：https://www.cnblogs.com/liuxuelin/p/12310929.html