美文网首页我爱编程
Angular.js复习笔记1

Angular.js复习笔记1

作者: 2e9a10d418ab | 来源:发表于2017-05-11 09:19 被阅读0次

          《复习笔记》

    一、ajax

    ajax:无刷新从服务器取数据;

    缓存:浏览器针对同一个网址只会访问一次

    ajax防止缓存方法:

    添加随机数【随机因子】

    ajax注意:文件编码格式要保持一直

    从后台取数据传过来的都是字符串

    ajax:不允许跨域取数据

    创建post请求:

    oAjax.open('post',url,true);

    oAjax.setRequestHeader('Content-type','Application/x-www-form-urlencoded');

    oAjax.send(json2url(json.data));

    创建get请求:

    oAjax.open('get',urk,true);

    oAjax.send();

    转换data格式:

    function json2url(json){

     var arr = [];

     for(var name in json){

    arr.push(name + '=' + json[name])

    }

    return arr.join('&');

    }

    eval:就是把字符串解析成js可移执行的任何代码

    jsonp:跨域取数据

    实现原理:动态添加script标签

    script:是一次性标签;改变src属性需要重新加载执行

    onkeydown:键盘按下事件

    onkeyup:键盘抬起事件

    event:存储或描述事件更加详细的信息

    event.clientX;

    event.clientY;

    event.keyCode;

    event.cancelBubble = true;//兼容低版本IE 阻止事件冒泡

    event.stopprapagation  //标准浏览器 阻止事件冒泡

    事件冒泡:

    子元素的事件可以传递给父元素,如果父元素有相同的事件,会触发,否则会继续往上冒泡

    事件捕获:Obj.setCapture();//IE独有的

    把多有的精力都放到某一个事件上,点击页面任何地方都相当域在点  击这个按钮;

     释放捕获:obj.releaseCapture();//IE独有的;

    事件绑定[监听]:

    obj.addEventListener(事件名,函数名,false);事件名不加on;

    obj.attachEvent(事件名,函数名);事件名必须加on;

    同一个元素,同一个事件,需要执行不同的方法;

      删除事件绑定:

    obj.removeEventListener(事件名,函数名,false);//事件名不加on;

    obj.detachEvent(on+"事件名",函数名);

    事件委托:

    把子元素的事件委托给父元素来执行;

    oTarget = oEvent.srcElement || oEvent.target;

    if(oTarget.targName == 'UL'){

    //code

     }

    阻止事件:

     组织事件的兼容写法:

    1、if(event.preventDfault){

     event.preventDefault();//标准浏览器

    }else{

     event.returnValue=false;//IE浏览器

    }

    2、return false 常用的组织事件方式,但后面的代码不会再触发

    事件移除:removeEventListener(event,function);

    事件源:

     IE:?window.event.srcElement

    标准:event.target;

    -----------------------------------------------------------------------------------

    键码:

     ctrl:ctrlKey

     shift:shiftKey

     alt:altKey

    -----------------------------------------------------------------------------------

    jsonp:

    跨域取数据;

    script是一次性的;src属性需要加载执行;

    事件冒泡:

    子元素的事件可以传递给父元素,父元素有相同事件会执行,否则会一直网上冒泡;

    取消事件冒泡:

    oEvent.cancelBubble = true;

    事件捕获:

    obj.setCapture();IE独有的;

    事件释放捕获:

    obj.releaseCapture();IE独有的;

    事件绑定:

    obj.addEventListener(sEv,fn,false);-->事件名不加on;

    obj.attachEvent('on'+sEv,fn); --->事件名必须加on;

    事件解除绑定:

    obj.removeEventListener(sEv,fn,false);--->事件名不加on;

    obj.detachEvent('on'+sEv,fn); --->事件名必须加on;

    事件委托:

    把子元素的事件委托给父元素来执行;

    oTarget = oEvent.srcElement || oEvent.target;

    if(oTarget.tagName == 'UL'){

     //code;

    }

    ------------------------------------------------------------------------------------

    键码:

    ctrl:ctrlKey

    shift:shiftKey

    alt:altKey

    ----------------------------------------------

    AngularJS

    概念:Angular.js是一个MVC的框架,致力于解决ajax开发过程中的问题;由google团队开发;现在最新版本是4.1.0;文件需要放到服务器环境下执行;

    angular支持模块化开发;

    上课我们使用1.3.10;

    1:主版本号

    3:次版本号

    10: 修订号;

    M:model数据;

    V:view视图;

    C:controller控制器;

    官网: angularjs.org;

    angular.bind();改变this的指向;

    angular.bind(改变后的this的值,改变哪个函数的this,参数1,参数2···),改变后返回一个新的函数,新函数需要调用执行;

    angularJS:

      是一个MVC的框架,致力于解决ajax开发过程中的问题

    //angular.element().ready();类似于window.onload

    angular.element(document).ready(function(){

    var oDiv = document.getElementById('box');

    angular.element(oDiv).on('click',function(){

    angular.element(this).css('background','red');

    })

    })

    function show(a,b){

    alert("this:"+this+'\n'+"a:"+a+'\n'+"b:"+b);

    }

    //show();//window

    //angular.bind 改变this指向

    var c = angular.bind(12,show,"1212","3443");

    c();

    var arr = [1,2,3];

    var arr1 = [];

    //angular.copy 克隆

    angular.copy(arr,arr1);

    console.log(arr1);

    var arr = [12232,2323,232];

    //检测arr是不是一个数组 angular.isArray; 值为布尔值

    alert(angular.isArray(arr));

    var oDate = new Date();

    //检测其是不是一个日期对象 angular.isDate; 值为布尔值

    alert(angular.isDate(oDate));

    var str1 = "wellcom to bj";

    //angular.uppercase()转大写

    console.log(angular.lowercase(str1));

    var str2 = "WELLCOM TO BJ";

    //angular.lowercase()小写

    console.log(angular.uppercase(str2));

    //angular.equals();比较a,b是否相等 ***经过angular转换之后 NaN == NaN

    var a = NaN;

    var b = NaN;

    alert(angular.equals(a,b));

    //angular.forEach(循环谁,fn(key,value))循环 value:值 key:下标

    var arr = ["tiger","monkey","dog","pig","elephent"];

    angular.forEach(arr,function(value,key){

    console.log(value+":"+key);

    //value:值

    //key:下标

    })

    ---------------------------------------------------------

    命名空间:

    以ng- 开头

    得到数据:

    ng-model="数据名字" 针对天生就产生数据的标签,比如input标签;

    展示数据:

    方法1.{{数据名字}}

    ng-bind="数据名字":好处在于错误的时候不会出现模板标记

    开启angular的应用模式:

    ng-app

    ***ng-app一个页面只能出现一次;

     解决方法:

    ng-init:初始化数据

    ng-init="数据"

    angular中的事件:

    去掉on,加上ng-开头;

    ng-click:

    ng-mouseover:

    ng-mouseout:

    ng-show="true/false" 是否显示;

    ng-hide="true/false" 是否隐藏;

    ng-repeat:循环

       

    • {{value}}
    • angular控制器:

      1:定义控制器;

      1>.定义一个模块:

      var app = angular.module(模块的名字,[依赖的模块],配置函数);

      前两个参数是必须的,最后一个不是必须的;

      第二个参数如果有依赖的模块,就写,没有就空着;

      2>.定义一个控制器:

      app.controller('控制器的名字',function($scope){

      $scope.a = 12;

      });

      2:使用一个控制器;

       ng-controller="控制器的名字"

       展示数据:{{a}}

      相关文章

        网友评论

          本文标题:Angular.js复习笔记1

          本文链接:https://www.haomeiwen.com/subject/hmontxtx.html