Angular.js复习笔记1

      《复习笔记》

一、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)