javascript（js）部分笔记

HBuilder笔记：前后端的交互
请求外部JS：
<script>
1.获取元素  定义变量的关键字var
    (1.)在整个文档下  获取 元素 通过 ID名
        var oTxt = document.getElementById('txt');
        var oTxt = document.getElementById('bnt');
    (2.)通过标签名获取元素
        var oInp = document.getElementByTagName('input');
        console.log(oInp,oInp[0],oInp[1],oInp.length);          //console打印与echo一样   .+要打印的值
                            下标              长度
    (3.)通过class类名获取元素
        var oInp = document.getElementByClassName('int');
        console.log(oInp);
        console.log(oInp[0]);
    (4.)通过name名获取元素
        var oUser = document.getElementByName('user');
        console.log(oUser[0]);
2.给按钮绑定点击事件的响应函数
    oInp[1].onclick = function(){               //绑定点击事件的固定格式
        console.log('事件绑定成功');
        3.获取按钮值
        var btnValue = oInp[1].value;
        4.把获取的按钮值传输给输入框
        oInp[0].value = btnValue;               //'='赋值语句
    }
</script>
一般连接JS在最后，CSS在开头。CSS是和HTML同时加载，JS需要先加载库文件，放到最后可以加快页面的响应时间。
src和href的区别:
    href:用于在当前文档与引用资源之间确定联系。
    src: 是用于外部资源所在位置在请求src资源会将其指向的资源文件下载用应用于当前文档中。
    <script src=''></script> <img src=''/>
    
    当浏览器读取到带src的元素，会暂停其他资源的下载和处理，直到当前的文件下载处理完成，把JS放到底部而不是头部。
    
    <link rel='stylesheet' href='' />
    浏览器会识别当前文档为CSS文件，会采用并下载资源，并且也不会停止对当前文档的处理。
函数：
在JS中函数声明形式定义函数：函数在声明时，代码不会执行，需要调用函数才会执行(调用函数的方法：函数名+();)
function fn(){
    console fen()
}
fn();
全局变量：script直接定义，全局任意位置都可以被访问
局部变量：在函数体内部使用var关键字声明的变量  局部可访问  全局访问不到
自增自减：a++：是先执行表达式后再自增，执行表达式时使用的是a的原值。前置 先做自己，再做其他（新值）
          ++a：是先自增再执行表达示，执行表达式时使用的是自增后的a。后置 先做其他，再做自己（旧值）
          
JS数据类型：typeof 用于检测基本数据类型
1.基本数据类型
    1.Number     数值型：
        整数、负数、小数、NAN(not a number)
    2.string     字符串：
        用单引号或则双引号进行包裹 ‘hello’
    3.Boolean    布尔型
        true false
    4.Null        空值
        空对象指针、空值   使用typeof检测输出object
    5.undefined 声明未定义
        声明了变量但是未赋值
2.复杂数据类型
    1.对象      Oject
        创建对象的方式：
            1.构造函数形式：
                var obj = new object();
                console.log(obj);      //结果{}
                obj.name='111';            //添加 对象.新属性名=新属性值；修改：对象.属性名=新属性值；
            2.字面量：对象的属性值可以为任意数据类型
                var obj={
                name:‘李四’，
                age:18，
                hobby:['1',2],
                sayName:function(){
                        console.log('name为李四')
                    }
                }
                访问对象属性值：console.log(boj,name);
                输出数组中的2：console.log(obj.hobby[1]);
                输出函数的方法：obj.sayName();
                新增：obj.tel='123456';
                删除对象的属性：delete obj.name;     //不可以删两条，要一条一条的删
                删除对象的属性值：delete obj.hobby[0];
    2.数组      Array
        1.构造函数形式：
            var arr =new Array（）；        //arr任意定义
            console.log(arr);    //结果[]
            arr[0]=‘hello’；
            arr[5]='world';
            console.log(arr)    //结果['hello',,,'world']
        2.字面量：
            var arr=[1,'hello',[3,4,5],undefined,null,true，function(){console.log('111')}];   //数组的值可存放任意数据类型
            执行函数：
            arr[5]();              //输出结果就是最后的function(){console.log('111')}的值111
            console.log(arr[2][1]);//输出结果就是第三个数组的第二个数  4
        删除数组：
        删除数组最后一个：arr.pop();
        删除数组第一个：arr.shift();
        删除数组指定的一个：arr.splice(1,2);  1-->开始索引；2-->删除个数0
    3.函数 Function
        定义函数方法：
            1.函数声明形式
                function fn1(){
                         函数名
                }
                函数调用：fn1()
            2.函数表达式：
                var fn2 = function(){
                    console.log('111');
                }
实参和形参：
    形参：形式参数 占位符 不确定的项
    实参：实际的值  可以是任意数据类型
    function fn3(a,b){
            console,log(a+b);            //形参
    }
    fn3(1,2);                           //实参

选项卡：
this关键字：当前执行该事件的对象
onmouseout 鼠标移出
innerHTML  可向指定位置连接文本
任何元素与字符串的加法都会实现字符串的拼接
定位：
    absolute绝对定位  脱离文档流
    若父级元素存在定位，则以父级元素的坐标为起点进行移动
    若父级元素不存在定位，则向向上依次查找，直到查找到body点进行移动
    
    fixed 固定定位 脱离文档流
    永远以可视区窗口的body的坐标进行移动
    
    relative 相对定位 不脱离文档六
    以自身的所在位置为起点进行移动
    
    定位都是通过 top left right bottom 四个属性进行移动
    可通过z-index属性设置层级

js三大组成部分：
ECMAScript：
用于规定js的基本语法、数据类型、特点
DOM：文档对象模型  全称：Document Oject Model
文档：代表整个HTML文档
对象：代表网页中每一个部分都可以转化为一个对象
模型：是指使用模型来表示对象之间的关系，这样方便我们获取对象
节点：
    整个文档是文档节点    每个HTML元素是元素节点    HTML元素内的文本是文本节点    每个HTML属性是属性节点    注释是注释节点、
常用节点属性;
            ondename    nodetype    nodevalue
文档节点      #document       9          null
元素节点     标签名         1          null
属性节点     属性名         2         属性值
文本节点     #text          3        文本内容
事件：文档或浏览器窗口中发生的一些特定的交互瞬间
在IE8以下的浏览器中，不会将空白文本当成字节点，所以childNodes属性在IE8中会返回4个元素，其他浏览器是9个
BOM：浏览器对象模型
通过class获取元素在使用时会出现有什么问题
兼容问题，IE8一下版本不兼容，解决问题如下：
获取class为box1里的div：或使用标签名，或者ID名获取。
document。qureySelector（）：需要一个选择器的字符串作为参数  使用该方法总会返回唯一的元素，如果满足条件的元素存在多个，那么只会返回第一个
document.querySelectorALL():即使符合条件的元素只有一个，也会返回数组，使用方法和querySelector（）一样
DOM增删改查：
1.增：appendChild(追加为子元素)
    父节点.insertBefore(新节点，原指定的节点)     //在指定的子节点前插入节点
2.删：
    父节点.removerchild(子节点)        //用来删除父节点中的一个子节点
    a+=b -->  a=a+b

=============================================AJAX===========================================
ajax  异步    同时执行代码    用于创建快速动态网页技术        以下所有的  '名'  都是自定义的    可以定义为xhr
无需重新加载整个页面的情况下，更新部分网页（局部刷新）
jq：jquery   用JS封装的库    开源的文件较大
定义Ajax：
1、初始化对象：
     var  名 = new XMLHttpRequest();兼容高版本浏览器
     var  名 = new ActiveXObject('Microsoft.XMLHttp');低版本浏览器
     为了考虑兼容性：
     方法一：if(window.XMLHttpRequest){var  名 = new XMLHttpRequest();}else{var  名 = new ActiveXObject('Microsoft.XMLHttp');}
     方法二：var 名 =  new XMLHttpRequest()  | |   new ActiveXObject('Microsoft。XMLHttp');       //用到了非布尔值的或运算
     非布尔值的或运算:如果第一个值为true，输出第一个值；如果第一个值为false，输出第二个值。只要有一个值成立就成立
     非布尔值的与运算:如果第一个值为true，输出第二个值；如果第一个值为false，输出第一个值。两个值都成立才成立
2、链接服务器：
     名.open(method,url,true/fslse)
       method:get/post(get不安全，一般用post)    url:路径，任意的文件类型           true:异步加载       false: 同步加载，会阻塞流畅度
     名.open('传输方式','路径.php','true/false')；
3、发送请求：
     名.send（null）；
4、监听服务器返回数据：
     名.onreadystatechange = function(){
    //判断状态值与http状态码
    if(名.readystate == 4){
        if(名.status ==200){
        
        }
           }
    }
       ajax的XMLHttpRequest不是一次完成的，而是经过多种状态获取的结果
       0-->未初始化    还没有调用open方法
       1-->启动          调用open 但还没有send（发送请求）
       2-->发生          调用send方法  但还没有接收到回应
       3-->接受          已经接收到部分响应数据
       4-->完成          已经接收到全部的响应数据，可以在客户端使用
       HTTP状态码：五大类    200-->交互成功
       1××---->请求收到，继续处理   100---客户必须发送请求
       2××---->操作成功收到，分析处理过程   200---交互成功
       3××---->完成此请求，必须进一步处理
       4××---->请求包含一个错误无法完成或者不能完成  一般是文件错误
       5××---->服务器执行一个完全有效请求失败
       500----->服务器内部错误，503 服务器过载或者维修  505 服务器不支持或拒绝请求头指定的http版本
强制类型转换：
将其他数据类型转换为布尔值  强制转换函数：Boolean();
数值型==>布尔值：除0、NAN为false  其余为true
字符串==>布尔值：除空字符串为false  其余都为true
字符串==>number：字符串为纯数字  直接转换
把其他数据类型==>数值型：Number();   空字符串和空格都为0
把其他数据类型==>字符串：String();
null和undefined==>布尔值都为false
字符串中存在非数值类型会输出Nan
parseInt('200px');   输出200       转化为整形
parseFloat();   转化为小数
布尔值==>number：true->1    false->0    undefined->Nan     null->0