angularJs 笔记

最新推荐文章于 2021-08-22 18:25:08 发布

榴莲不好吃

最新推荐文章于 2021-08-22 18:25:08 发布

阅读量2.4k

点赞数 2

分类专栏： angular 文章标签： angularjs

本文链接：https://blog.csdn.net/sllailcp/article/details/52702970

版权

angular 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

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

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

angular（网址：docs.angularjs.cn/api/mg/function/angular.element）

angular 插件地址（http://www.bootcdn.cn/angular.js/）

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>

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中引用

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>

- ng-options

>> for in

<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:解析注释（注释的写法 ） 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中去掉所有匹配的元素