angularJs 笔记

转载请注明出处:http://blog.csdn.net/sllailcp/article

 

看到有说笔记乱的,因为笔记是好久之前边自学边随手写的,所以当时没整理,现在隔了太久,笔记太长,且当时写的很多小例子都忘了,所以就过来粗略的整理下。

 

angular(网址:docs.angularjs.cn/api/mg/function/angular.element)

angular 插件地址(http://www.bootcdn.cn/angular.js/)

<html ng-app>

ng-app:初始化,不写的话,程序不执行;可以写在html上还可以写到标签上;

 

function Angulars($scope,$rootScope){
$scope.name='hellow';
$rootScope.age=30'';
}
$rootScope:作用域是全局
<span style="font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px;">先遍历局部的如果局部没有再遍历全局的</span>

 

<div ng-controller="Angulars"></div>

ng-click:指令  点击(和click相似)

视图影响数据,数据再影响视图

ng-model

 

金钱格式化:currency(美元),
{{inpone.money * inpone.num | currency:'¥‘}}

 

$scope.$watch

-监听数据变化

-三个参数 

用法:

$scope.$watch('box.money' , function(){ ...  })//box.money前面不要加$scope,监听box.money的变化
$scope.$watch('inpone' , function(){ ...  },true)//后面加true,前面inpone,是监听整体是的
$scope.$watch($scope.fn , function(newval,oldval){ ...  },true)//newval最新的值,old老值

 

$timeout:$timeout和setTimeout用法是一样的

$scope.$apply//监听数据有没有变化,一单有变化就会影响视图
<span style="white-space:pre">	</span>setTimeout(function(){
<span style="white-space:pre">		</span>$scope.$apply(function(){
<span style="white-space:pre">			</span>$scope.name="hahahha";
<span style="white-space:pre">		</span>})
<span style="white-space:pre">	</span>})

 

模块化:

var m1=angular.module('myApp',[]);
m1.controller//局部作用域
m1.controller('Aa',['$scope',function($scope){
<span style="white-space:pre">	</span>$scope.name="哈哈哈!";
}])
//中括号的第一个'$scope'是防止代码压缩后出现$s,这种状况,这个'$scope'对应的是function($scope)里面的参数(不可改变的形参)

 

angular.bind();绑定事件

function show(n1,n2){
alert(n1);
alert(n2);
alert(this);
}
angular.bind(document,show,3)(4);
<span style="font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px;"> 如果需要改变this的指向,可以用 $.proxy() </span>

 

angular.copy();  //拷贝对象

var a = {
<span style="white-space:pre">	</span>name : 'hello'
};
var b = {
<span style="white-space:pre">	</span>age : '20'
};
var c = angular.copy(a,b);   //a把所有值覆盖给了b
console.log(b);

 

angular.extend();   //对象继承

indentity//参数传递的是什么,打印的就是什么

noop()//空函数,没有内容。

lowercase()//转小写

uppercase()//转大写

 

element//  选择元素

eg:angular.element(id).css('background','red');

 

bootstrap

ng-app不加的情况下,再点击的情况下初始化如下:
angular.bootstrap(document,['myApp'])//初始化在document身上;
可以进行多次初始化:
angular.bootstrap(aDiv[0],['myApp1']);
angular.bootstrap(aDiv[1],['myApp2']);

 

m1.run();//初始化全局数据

m1.run(['$rootScope'],function($rootScope){
<span style="white-space:pre">	</span>$rootScope.name="hellow word";
})

 

过滤器:| 名称

currency 金钱
number  数字分隔(有小数时,默认保存3位数,后面可以传参)  | number:4  保留4位小数;
lowercase/uppercase:转大小写;
json 格式化了json代码
limitTo  截取的操作(数组,字符串) | limitTo: 2  只截取前两位
date   针对时间的(把毫秒进行格式化)  | date :'yyyy'(有参数好多) 格式啊成日期
orderBy  排序;  |orderBy:'age'  以age排序;  $scope.name=[{color:'red',age:'10'},{color:'yellow',age:'20'},{color:'green',age:'30'}]
filter 过滤(按value中的值过滤key值)   |filter :'10'   就会把{color:'red',age:'10'}这一条匹配出来。

 

过滤器的扩展:

组合使用:  |limitTo:2 | uppercase   截取前两个字符并且转为大写
js使用过滤器
m1.controller('Aa',['$scope','$filter',function($scope,$filter){
	$scope.name=$filter('date')('2343423','hh');
}])
html中引用
{{name}}

 

 

自定义过滤器:

-angular.module

》controller/run

》filter

m1.filter('firstUpper',function(){//firstUpper是自定义的过滤器
<span style="white-space:pre">	</span>return function(str,num){
<span style="white-space:pre">		</span>console.log(2)
<span style="white-space:pre">		</span>return str.charAt(0).toUpperCase()+str.substring(1);
<span style="white-space:pre">	</span>}<span style="white-space:pre">	</span>
})
<pre name="code" class="javascript" style="font-size: 15px; line-height: 24px;">html中引用

{{ name| firstUpper : 2}}

 

angular.isDate  是不是时间对象

angular.isDefined 判断元素是存在的

angular.isUndefined  判断元素是不存在的   

angular.isFunction 是不是函数

angular.isNumber 判断是不是是数字

angular.isObiect 判断是不是对象

angular.isString 判断是不是字符串

angular.isElement 判断是不是一个元素

判断当前的angularJs库的版本

判断两个元素是否相等

forEach 用来遍历元素

formJson/toJson 对json的解析

 辅助方法 ;;参数传递的是什么,计算得结果就是这个参数

indentity//参数传递的是什么,打印的就是什么

var str='hellow'
 angular.indentity(str);
结果:hellow

 

 

ng-app

ng-controller

ng-repeat:遍历

 

orEach 用来遍历元素:

$scope.allPrice=function(){
    $scope.allprice=0;
    angular.forEach($scope.dataList,function(data,index,array){
        $scope.allprice+=parseInt(data.price)
    })
    return $scope.allprice
}<div style="margin: 0px; font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px;"><span style="white-space:pre">	</span>@scope.dataList=['aaa','bbb','ccc']</div><div style="margin: 0px; font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px;">
</div><div style="margin: 0px; font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px;"><ul></div><div style="margin: 0px; font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px;"><span style="white-space: pre;"></span><span style="white-space:pre">	</span><li ng-repeat="data in dataList">{{data}}</li></div><div style="margin: 0px; font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px;"></ul></div>

 

 

callee:返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文. 

callee是arguments 的一个属性成员,它表示对函数对象本身的引用,这有利于匿名 

arguments.callee['Sort'+arg]=!arguments.callee['Sort'+arg];  //Sort(arg)是个函数

 

 

ng-repeat 指令

- $index  //遍历索引号

- $first  //只要是集合的第一项就会返回真(true),其余项会返回假(false)

- $middle //只要是集合的第一项和最后一项就会返回真(true),其余项会返回假(false)

- $last   //只要是集合的最后一项就会返回真(true),其余项会返回假(false)

- $even   //只要是集合的奇数行就会返回真(true),其余项会返回假(false)

- $odd   //只要是集合的偶数行就会返回真(true),其余项会返回假(false)

- ng-repeat-start

- ng-repeat-end

eg:
<tr ng-repeat="data in nameList1">
   <td>{{ $first }}</td>
</tr>

 

form中的指令

- ng-selected  选中的一项

- ng-change  改变内容

- ng-copy 复制内容时触发

- ng-cut 剪切内容时触发

- ng-paste 粘贴内容时触发

eg:
 <input type="checkbox" ng-model='aaa'>
<select>
    <option>北京</option>
    <option ng-selected="aaa">广州</option>
    <option>上海</option>
</select>
<input type="text" ng-model="bb" ng-change='bb="hellow"'>{{bb}}               
<input type="text" ng-copy="cc='true'">{{cc}}
<input type="text" ng-cut="dd='true'">{{dd}}
<input type="text" ng-paste="ee='true'">{{ee}}

 

ng-disabled  //按钮禁用

-服务$interval //禁用相关的操作(对按钮不起作用)

ng-readonly

ng-checked

ng-value  //不用加{{ text }},如果不加ng-,要等到js加载完后才解析这个表达式

eg:
        <input type="button" value="{{textVal}}" ng-disabled="isDisabled">
        <input type="text" value="{{textVal}}" ng-readonly="isDisabled">
        <input type="checkbox" value="{{textVal}}" ng-checked="isDisabled">

 

 

$interval(function(){},1000);

$timeout(function(){},1000);

$interval.cancel(timer)//清楚定时器

 

 

ng-bind //跟ng-value 作用相似

ng-cloak //没有解析完,也不现实表达式,提高用户体验度

ng-bind-template//多个表达式ng-bind-template=“{{text1}},{{text2}}”

ng-bind-html //把表达式中的标签添加到页面中;

-http:www.bootcdn.cn/angular.js/(http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-sanitize.min.js)

ng-non-bindable //不让表达式解析,写的是什么,解析的就是什么,一般用的不多

eg:
<div ng-bind="textVal"></div>
<div ng-bind-template="{{textVal1}},{{textVal2}},{{textVal3}}"></div>

 

ng-class  //<div ng-class="{red:true,yellow:true}">{{ text }}</div>   red和yellow都是类的名字,ng-class="{{ sClass }}"要用表达式的方式

ng-style  //<div ng-style="{color:'red',background:'blue'}">{{ text }}</div>    ng-style="{{ style }}"要用表达式的方式 ng-style="{display:$first ? 'block' :  'none'}"

ng-href   //一单表达式没加载完,是看不见href的值的,是有好处的。

ng-src    //同上

ng-attr-(suffix) //自定义属性  eg:ng-attr-title="{{ text }}"

 

 

ng-show //元素的显示隐藏  通过css样式操作  ng-show="true" (false);

ng-hide //元素的隐藏显示   通过css样式操作  ng-show="true" (false);

ng-if  //不是通过css样式操作,而是对dom节点操作,删除添加节点

ng-switch  //

 -on

 -default

 -when

ng-open       //ng-open="true"

 

ng-init   //初始化 

ng-include//包含一段代码(引入到页面中)

ng-model  //扩展

 - ng-model-options

 - updateOn   (   ng-model-options="{updateOn:'blur'}"   )

 

ng-controller  //可以面向对象得写法

 - as    //Fn as a1    {{ a1.text }}    //a1表示构造函数所创建出来的对象

 

 

标签指令:::::

<a>

<select>

  -  ng-options

>>  for in

<textarea>

<input>

<form>

  - novalidate // 阻止表单默认的行为

 

 

表单验证:

$valid //有效的,验证成功的话返回true

$invalid  //无效的,验证成功的话返回false同上面相反

$pristine //原始值,验证的值没有经过修改,就是true,一旦修改过就是false

$dirty  //同上相反

$error  //验证失败或者通过,所有的验证信息都在这里面,(可以利用这个进行复杂开发)

---注意---

- name   通过name的方式进行查找

- 要写ng-model

 

type

 - email

 - number

 - url

required

ng-minlength

ng-maxlength

ng-pattern

 

表单验证中可自定义的css。。。。。;

 .class

-  .ng-valid{ 验证成功的样式   }  

-  .ng-invalid{ 验证失败的样式   }

-  .pristine{}

-  .drity{}

 

 

 

angularJs自定义指令

- angular.module

  >>controller

  >>run

  >>filter

  >>directive   //m1.driective('Ass',function(){ return{} })    

    -  restrict  //标签形式的指令 restrict:'E' E表示element   restrict:'A' A:对应的属性   restrict:'C' C:解析成class   restrict:'M' M:解析注释(注释的写法  <!-- directive:hello -->)  restrict:'AECM'又是标签又是属性

    -  replace  //替换原有标签  (true)

    -  template  //模板的方式 template  :'<div>hellow</div>'

    -  templateUrl  //

    -  scope  //独立的作用域   scope:true  还有隔离作用域scope:{}

       绑定方式{}中::   @:绑定的普通的字符串    =:解析的数据     &:父级的函数的绑定传递方式

     scope:{ myId : '@'  }        
         <div my-id="div1"></div>
         <div my-id="div2"></div>
或者
        scope:{ myId : '@aaa'  }
         <div aaa="div2"></div>

 

    -  controller  //controller:['$scope',function($scope){ $scope.name='hellow'  }]

 

  >>directive 

    >>link  //  link:function(scope,element,attr){...}

     - scope  //作用域  scope.name

     -elelment  //每一个的最外层的div元素   elelment.delegate('input','click',function(){})

     -attr  //标签上的属性 attr.myId

     -reController  //和require配置选项有关系的

     

注意:::模板中页面中调用的都是m1.directive(...)中的名字

 

angular.equals()://判断两个值是否相等 相等会返回true,否则返回false

 

-directive   注意:------scope.$apply() //刷新视图-----------------

   >> transclude   //transclude :true

      - ng-transclude   //<h1 ng-transclude></div>

   >> require   // require :hi   (hi是要引入指令的名字)   reController(依赖require 引入的指令)

      - ^   //  父级的身上找  eg:    require : ^hellow   (注:hellow是当前指令的父级) 如果是同级,就不用^   eg:<hi hellow></hi>

      - ?   //  容错的处理  (不存在的话不会报错)  一般的?和^一起使用    eg: require : ?^hellow

 

 

directive中的controller 和link  的区别

link :dom指令的当前操作 link,针对当前内部  ;    

controller多调用指令中的共享 ,指令与指令之间的交互,公有的方法可以被别的指令找到

 

angularJs服务

 

$http

 - method

 - url

 - success

 - error

 -简写方式

 

常规写法:

$http({
    method:'GET',
    method:'data.PHP',
}).success(function(data,state,headers,config){
    console.log(data); 
}).error(function(){
    console.log(data);
})

简写方式:

$http.get('data.php').success(function(data,state,headers,config){
    console.log(data); 
})

 

wd=angular&cb=JSON_CALLBACK  //

wd=//是要搜索的关键字

快速输入时,会每个字符发送一个请求,为了提高性能可以进行延迟处理(搜索经常用的方法)

 

$location

 - absUrl()  //得到网址信息的绝对地址

 - path()  //(可以设置可以获取)$location.path('aaa')  跟路由挂钩的(有历史记录前进后退的)

 - replace()  //  $location.path('aaa').replace()   (会替换之前的路径 ,没有历史记录前进后退的)

 - hash()  //  $location.hash('hellow')

 - search()  //  $location.seach({'age':'20'})

 - url()  // 得到网址信息(不是绝对信息)

 - host()  //主机名192.168.10.23

 - port()  //端口号 (端口:8080)

 - protocol()  //协议(http协议)

 

 

$anchorScroll //锚点跳转的服务功能  也是一个方法$anchorScroll()

 - 例子:锚点跳转

 

$cacheFactory  //缓存服务  var ach=$cacheFactory('myCache',{capacity:2})   myCache为缓存的id名字  capacity为缓存的长度

   - info()   //缓存的信息 ach.info()

   - put()  //设置缓存  ach.push('name','ss')     ach.push('age','20')

   - get()   //获取缓存   ach.get('name')

   - remove()  //清除缓存   ach.remove('name')   清除后,就找不到name这一条缓存

 

$log   //服务

 -log()  //调试 跟console.log()类似   $log.log()

 - info()  //

 - warn()  //警告$log.warn()

 - error()  //报错$log.error()

 

$interpolate  //插值服务  (注:有点难理解)

 

$q   //服务  有点类似jQuery中的延迟对象 对异步操作进行功能扩展  var dfd=$q.defer();

 - promise的实现  //返回promise对象  return dfd.promise

 - defer()

 - resolve() //成功时候触发的方法  dfd.resolve

 - reject() //失败时候触发的方法

 - notify() //实时通知处理

 - then() //监听成功失败的回调处理

 

angularJS的供应商

 

 服务的相关初始配置操作

 - congif

   - provider

   - $interpolate  //$interpolateProvider

      >>startSymbol()//改变表达式的头部符号{{   $interpolateProvider.startSymbol('@@')

      >>endSymbol/改变表达式的尾部符号  }}     

   - $log   //$logProvider

      >>debugEnabled()  //$logProvider.debugEnabled(true)  // 控制台下显示$log.debug()是显示的

   - $anchorScroll   //$anchorScrollProvider

      >>disableAutoScrolling()   //$anchorScrollProvider.disableAutoScrolling()    禁止自动跳转

                                   加上服务的方法,就可以手动的跳转   $anchorScroll()

eg:
m1.config(['$interpolateProvider',function($interpolateProvider){
 $interpolateProvider.startSymbol('@@');
 $interpolateProvider.endSymbol('@@');
}])
m1.controller('aa',['$scope','$interpolate',function($scope,$interpolate){
 $scope.name="hellow"
}])
<div ng-controller="aa">@@name@@</div>

 

eg:
m1.config(['$anchorScrollProvider',function(){
 $anchorScrollProvider.disableAutoScrolling()    //禁止自动跳转
}])

m1.controller('aa',['$scope','$location','$anchorScroll',function($scope,$location,$anchorScroll){
 $scope.changes(id){
  $location.hash(id);
  $anchorScroll()   //加上服务的方法,就可以手动的跳转
 }
}])

 

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

angularJs的自定义服务

-module

  - filter()    //

  - directive()    //

  - factory()    //自定义服务 m1.factory('myRandom',function(){...})

  - provider()    // 自定义服务 m1.provider('myRandom',function(){...})

    >>区别    //都是可以自定义服务,但是provider()可以配置操作

    >>$get    //

m1.factory('myRandom',function(){
<span style="white-space:pre">	</span>return {
<span style="white-space:pre">		</span>show:function(){
<span style="white-space:pre">			</span>return Math.random()
<span style="white-space:pre">		</span>} 
<span style="white-space:pre">	</span>} 
})
m1.controller('myAn',['$scope','myRandom',function($scope,myRandom){
<span style="white-space:pre">	</span>$scope.name=myRandom.show()
}]);



m1.provider('myProvi',function(){
<span style="white-space:pre">	</span>return {
<span style="white-space:pre">	</span>age:20,//改写的对象
<span style="white-space:pre">		</span>$get:function(){
<span style="white-space:pre">			</span>return {
<span style="white-space:pre">				</span>name:this.age,
<span style="white-space:pre">				</span>show:function(){
<span style="white-space:pre">					</span>return this.name+':hi';
<span style="white-space:pre">				</span>} 
<span style="white-space:pre">			</span>} 
<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span>}
})

m1.controller('myAn',['$scope','myProvi',function($scope,myProvi){
<span style="white-space:pre">	</span>$scope.name=myProvi.show();
}]);


可以修改myProvi下面的值,例如:
m1.config(['myProviProvider',function(myRandomProvider){
<span style="white-space:pre">	</span>console.log(myRandomProvider);
<span style="white-space:pre">	</span>myRandomProvider.age='angularJs';
}]);

 

angularJs的自定义服务

   模块之间的通信

     - provider好处     //可以以js文件的形式引进来,angular.module('myApp2',[myApp1])方式引入

   service()     //不常用   针对构造函数的方式定义服务,面向对象的开发

     - 构造函数

   constant()     //不常用  可以进行配置获取的 

     - 设置常量

   value()     //不常用  不可以进行配置获取的 

     - 区别

 

provider好处:

var m1=angular.module('myApp1',[])
var m2=angular.module('myApp2',[])
m1.provider('myServe',function(){})
<div style="margin: 0px; font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px;"><div ng-app="myApp2"></div><div style="margin: 0px; font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px;"><span style="white-space: pre;"></span>这里引用myServe是得不到结果的,因为myServe是在m1中,要想得到结果,必须引入myApp1  </div><div style="margin: 0px; font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px;"><span style="white-space: pre;"></span>方法: var m2=angular.module('myApp2',[myApp1])</div><div style="margin: 0px; font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px;"></div></div>

 

service() 构造函数:

m1.service('myServe',FnServe)
function FnServe(){
<span style="white-space:pre">	</span>this.name="hellow";
}
FnServe.prototype.age="20";

m1.controller('Aaa',['$scope','myServe',function($scope,myServe){
<span style="white-space:pre">	</span>console.log(myServe.name)
<span style="white-space:pre">	</span>console.log(myServe.age)
}])

 

constant() 和value() :

m1.constant('myServe','hellow nihao');
m1.value('myServe','hellow nihao');
对于她们俩,如果写m1.config(['myServe',function(myServe){...}]) //myServe后面不用加Provider
m1.config(['myServe',function(myServe){
<span style="white-space:pre">	</span>console.log(myServe)  //调用value时会出错
}]) 

 

<-----------------------------------注意:有的时候插件引入后会报错,原因是,版本angular.js和插件的不同----------------------------------->

angularJs的插件使用

- ngSanitize

- ngRoute //实现单页面的路由的方式    插件地址:http://cdn.bootcss.com/angular.js/1.3.8/angular-route.min.js

- 版本的问题

- ng-view   //切换视图主体的部分  <div ng-view></div>

    $routeProvider   //m1.config(['$routeProvider',function(){}]);   //供应商的方式;

》when       //  .when('/aaaa / : num',{templateUrl:'temp2.html'})

- template/templateUrl

     - controller

  》otherwise  // 初始化ng-view里面的内容

             - redirectTo    //redirectTo :'/aaaa'

$routeParams   //$routeParams接受 :num这个参数

 

-事件  m1.run(['$rootScope',function(){}])初始化全局数据

     >>$on   //绑定事件(例如绑定到$rootScope上)   $rootScope.$on('$routeChangeStart',function(){})   可接受参数;例如 event(angular模拟的一个event和js的event类似) current(当前的路径对应的数据值) pre(前一个的路径)

        >>$routeChangeStart   //第一个参数,路由在切换之前触发的事件

        >>$routeChangeSuccess/Error   //

 

 

m1.config//供应商的方式;

eg:
m1.config(['$routeProvider',function($routeProvider){
//console.log($routeProvider)
$routeProvider
.when('/aaa',{
<span style="white-space:pre">	</span>//template:'<div>北京北京北京北京北京北京北京北京北京北京</div>'
<span style="white-space:pre">	</span>templateUrl:'temp.html'
})
.when('/bbb',{
<span style="white-space:pre">	</span>templateUrl:'temp2.html'
})
.when('/ccc',{
<span style="white-space:pre">	</span>templateUrl:'temp3.html'
})
}])

<div>
    <a href="#aaa">北京</a>
    <a href="#bbb">上海</a>
    <a href="#ccc">广州</a>
</div>
<div ng-view></div>

或者用$location服务的方式;
<div>
    <a href="" ng-click="$location.path('aaa')">北京</a>
    <a href="" ng-click="$location.path('bbb')">上海</a>
    <a href="" ng-click="$location.path('ccc')">广州</a>
</div>
<div ng-view></div>


m1.run(['$rootScope',function($rootScope){
$rootScope.$on('$routeChangeSuccess',function(event){
console.log(event)
})
}])

 

以下主要给大家汇总了一下angular.element的方法,十分的详细,这里推荐给大家 参考下。

addClass()-为每个匹配的元素添加指定的样式类名

after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点

append()-在每个匹配元素里面的末尾处插入参数内容

attr() - 获取匹配的元素集合中的第一个元素的属性的值

bind() - 为一个元素绑定一个事件处理程序

children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选

clone()-创建一个匹配的元素集合的深度拷贝副本

contents()-获得匹配元素集合中每个元素的子元素,包括文字和注释节点

css() - 获取匹配元素集合中的第一个元素的样式属性的值

data()-在匹配元素上存储任意相关数据

detach()-从DOM中去掉所有匹配的元素

empty()-从DOM中移除集合中匹配元素的所有子节点

eq()-减少匹配元素的集合为指定的索引的哪一个元素

find() - 通过一个选择器,jQuery对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代

hasClass()-确定任何一个匹配元素是否有被分配给定的(样式)类

html()-获取集合中第一个匹配元素的HTML内容

next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器,那么只有紧跟着的兄弟元素满足选择器时,才会返回此元素

on() - 在选定的元素上绑定一个或多个事件处理函数

off() - 移除一个事件处理函数

one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次

parent() - 取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器

prepend()-将参数内容插入到每个匹配元素的前面(元素内部)

prop()-获取匹配的元素集中第一个元素的属性(property)值

ready()-当DOM准备就绪时,指定一个函数来执行

remove()-将匹配元素集合从DOM中删除。(同时移除元素上的事件及 jQuery 数据。)

removeAttr()-为匹配的元素集合中的每个元素中移除一个属性(attribute)

removeClass()-移除集合中每个匹配元素上一个,多个或全部样式

removeData()-在元素上移除绑定的数据

replaceWith()-用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

text()-得到匹配元素集合中每个元素的合并文本,包括他们的后代

toggleClass()-在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类

triggerHandler() -为一个事件执行附加到元素的所有处理程序

unbind() - 从元素上删除一个以前附加事件处理程序

val()-获取匹配的元素集合中第一个元素的当前值

wrap()-在每个匹配的元素外层包上一个html元素

 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值