Angular复习笔记

            《复习笔记》

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

    最后编辑于
    ©著作权归作者所有,转载或内容合作请联系作者
    • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
      沈念sama阅读 200,527评论 5 470
    • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
      沈念sama阅读 84,314评论 2 377
    • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
      开封第一讲书人阅读 147,535评论 0 332
    • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
      开封第一讲书人阅读 54,006评论 1 272
    • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
      茶点故事阅读 62,961评论 5 360
    • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
      开封第一讲书人阅读 48,220评论 1 277
    • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
      沈念sama阅读 37,664评论 3 392
    • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
      开封第一讲书人阅读 36,351评论 0 254
    • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
      沈念sama阅读 40,481评论 1 294
    • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
      茶点故事阅读 35,397评论 2 317
    • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
      茶点故事阅读 37,443评论 1 329
    • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
      沈念sama阅读 33,123评论 3 315
    • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
      茶点故事阅读 38,713评论 3 303
    • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
      开封第一讲书人阅读 29,801评论 0 19
    • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
      开封第一讲书人阅读 31,010评论 1 255
    • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
      沈念sama阅读 42,494评论 2 346
    • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
      茶点故事阅读 42,075评论 2 341

    推荐阅读更多精彩内容

    • 《复习笔记》 一、ajax ajax:无刷新从服务器取数据; 缓存:浏览器针对同一个网址只会访问一次 aja...
      2e9a10d418ab阅读 300评论 0 2
    • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
      200813阅读 1,583评论 0 3
    • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
      clark124阅读 3,452评论 1 19
    • 今天无事!
      甲午之印阅读 100评论 0 0
    • 1,核徐老一稿事实 2,问马总是H5,还是视频化 3,刀具企业:天下大势风云变幻,掘隧行业,刀王争霸。中华派,苦练...
      数星星的夜晚阅读 165评论 0 0