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

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

    推荐阅读更多精彩内容

    • 《复习笔记》 一、ajax ajax:无刷新从服务器取数据; 缓存:浏览器针对同一个网址只会访问一次 ...
      2e9a10d418ab阅读 434评论 0 1
    • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
      200813阅读 1,568评论 0 3
    • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
      clark124阅读 3,451评论 1 19
    • 突然间,发现,我身边的一切都与时间有关,在最近的一段时间里。 其实,我最讨厌的便是时间,以前总觉得它无情,没有一点...
      孤寂的猫生阅读 184评论 0 1
    • 类继承结构 CAAnimation CAAnimation是一个抽象动画类,是所有动画类的父类,不能直接使用,应该...
      cod_mm阅读 220评论 0 0