jquery angularjs angular 相关详细总结备忘
noConflict() 方法释放变量 $ 的 jQuery 控制权。
使用 noConflict() 方法为 jQuery 变量规定新的名称：
var jq=$.noConflict();
$.param(object,trad) 创建数组或对象的序列化表示形式。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
trad 可选。布尔值，指定是否使用参数序列化的传统样式。
$("div").text($.param(personObj));
//如何统一管理全局函数？
//法一：扩展方法：extend整合全局函数
jQuery.extend({//扩展的东西（参数）是以json对象的形式来出现的；
myFunction:function () {
console.log("222");
},
})
//调用全局函数
$(document).ready(function () {
$.myFunction();
$.myFunction1("3333");
})
//法二：jquery命名空间，避免各插件命名冲突的问题，把全局函数封装到对象中；
jQuery.myPlugin = {//为全局函数创建另一个命名空间；
functionOne:function () {}
}
//调用：
$.myPlugin.functionOne();
jquery.extend(object);为扩展jquery类本身.为类添加新的方法
jquery.fn.extend(object);给jquery对象添加方法
（function( $, window, document, undefined ){}）{
$.fn.extend({
test:function(){
alert($(this).attr("id"));
}
});
}(jquery,window,document)
（function( $, window, document, undefined ){}）{
$.extend({
test:function(){
alert("好好活着");
}
});
}(jquery,window,document)
(function(parameter){
alert(parameter);
})("立即执行函数传递参数");
自调函数，函数定义好之后自动执行
好处是，不会产生任何全局变量。缺点是无法重复执行。对于插件来说，是最合适不过的了。不会产生任何全局变量，同时一次引用就够了。
jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。
注意：1. 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
2. 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。
var settings = $.extend({}, defaults, options);
jQuery 实用工具
$.grep() 函数使用指定的函数过滤数组中的元素，并返回过滤后的数组。
$.isArray() 判断指定参数是否是一个数组
$.isFunction() 判断指定参数是否是一个函数
$.isNumeric() 判断指定参数是否是一个数字值
$.isPlainObject() 判断指定参数是否是一个纯粹的对象
$.makeArray() 函数用于将一个类似数组的对象转换为真正的数组对象。
$.sub() 创建一个新的jQuery副本，其属性和方法可以修改，而不会影响原来的jQuery对象
$.parseHTML() 将HTML字符串解析为对应的DOM节点数组
$.parseJSON() 将符合标准格式的JSON字符串转为与之对应的JavaScript对象
$.parseXML() 将字符串解析为对应的XML文档
$.now() 返回当前时间
$.Callbacks() 指一个多用途的回调函数列表对象，提供了一种强大的方法来管理回调函数列对。
jquery 获取绑定事件
var eventsData = $.data(domObj,'events') || $._data(domObj,'events');
只能获取到使用jquery方法绑定的参数 on ,live 等。如果是直接写到元素上的事件是不能获取的，使用其他非jquery设置的事件也是无法获取的
call,apply,bind的共同点都可以改变this的指向，而不同点呢，就是返回值不同，call,apply的返回值取决于目标函数是否存在返回值，
而bind是返回一个新的函数，并把this指向这个函数。而call，apply的区别就是参数的区别，apply是接受一个数组，而call只能接受单个单个的参数
var callbacks = $.Callbacks();
callbacks.add( fn1 );
// 输出: foo!
callbacks.fire( "foo!" );
callbacks.add( fn2 );
// 输出: bar!, fn2 says: bar!
callbacks.fire( "bar!" );
function scope(controllerId,apply) {
scope= angular.element(document.getElementById(''+controllerId)).scope();//angular.element($('[ng-controller]'))
if(apply)
scope.$apply();
return scope;
};
jQuery插件开发
(function($) {
$.myPlugin = {
sum: function(array) {
var total = 0;
return total;
},
}
}(jQuery));
绑定事件时传递参数
$(selector).on(event,childSelector,data,function,map)
$(selector).trigger(event,eventObj,param1,param2,...)
$("p").on("mouseover mouseout",function(){
$("p").toggleClass("intro");多个事件绑定同一个函数
});
$(:text").bind("keyup", function(event) {
event = event || window.event;
var target = event.target; //这个就是触发事件的控件
});
$("#cbutton1").bind("click",{"id":"111","name":"aaa"},getData);
function getData(event){
alert(event.data.id);
}
$("#foo").html();//相当于dom对象的innerHTML
$ obj.prop('outerHTML'); //相当于dom对象的outerHTML
var $cr=$("#cr"); //jquery对象
var cr = $cr[0]; //dom对象
也可写成：
var cr=$cr.get(0);
var cr=document.getElementById("cr"); //dom对象
var $cr = $(cr); //转换成jquery对象
$('').attr()返回的是html对象
$('').prop()返回的是DOM对象
attr和prop的使用场景：
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();（如'checked','selected','disabled'等）
3.其他则使用attr();
event.currentTarget 在事件冒泡阶段内的当前 DOM 元素
event.data 包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.delegateTarget 返回当前调用的 jQuery 事件处理程序所添加的元素
event.preventDefault() 阻止事件的默认行为
event.target 返回哪个 DOM 元素触发事件
event.relatedTarget 返回当鼠标移动时哪个元素进入或退出
event.stopPropagation() 阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知
event.type 返回哪种事件类型被触发
event.result 包含由被指定事件触发的事件处理程序返回的最后一个值
event.timeStamp 返回从 1970 年 1 月 1 日到事件被触发时的毫秒数
trigger() 触发绑定到被选元素的所有事件
triggerHandler() 触发绑定到被选元素的指定事件上的所有函数
$.proxy() 接受一个已有的函数，并返回一个带特定上下文的新的函数
$.holdReady() 用于暂停或恢复.ready() 事件的执行
https://my.oschina.net/zengfr/
---------------------------------------------------------------------------------------------------------------------------------
scope 下面3个重要的方法:
1. $digest(): 脏值检查循环；
2. $watch(): 监听；
3. $apply(): 上下文执行表达式. $applyAsync();
AngularJS 参考手册
AngularJS 指令
本教程用到的 AngularJS 指令 :
指令 描述
ng-app 定义应用程序的根元素。
ng-bind 绑定 HTML 元素到应用程序数据
ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符
ng-bind-template 规定要使用模板替换的文本内容
ng-blur 规定 blur 事件的行为
ng-change 规定在内容改变时要执行的表达式
ng-checked 规定元素是否被选中
ng-class 指定 HTML 元素使用的 CSS 类
ng-class-even 类似 ng-class，但只在偶数行起作用
ng-class-odd 类似 ng-class，但只在奇数行起作用
ng-click 定义元素被点击时的行为
ng-cloak 在应用正要加载时防止其闪烁
ng-controller 定义应用的控制器对象
ng-copy 规定拷贝事件的行为
ng-csp 修改内容的安全策略
ng-cut 规定剪切事件的行为
ng-dblclick 规定双击事件的行为
ng-disabled 规定一个元素是否被禁用
ng-focus 规定聚焦事件的行为
ng-form 指定 HTML 表单继承控制器表单
ng-hide 隐藏或显示 HTML 元素
ng-href 为 the <a> 元素指定链接
ng-if 如果条件为 false 移除 HTML 元素
ng-include 在应用中包含 HTML 文件
ng-init 定义应用的初始化值
ng-jq 定义应用必须使用到的库，如：jQuery
ng-keydown 规定按下按键事件的行为
ng-keypress 规定按下按键事件的行为
ng-keyup 规定松开按键事件的行为
ng-list 将文本转换为列表 (数组)
ng-model 绑定 HTML 控制器的值到应用数据
ng-model-options 规定如何更新模型
ng-mousedown 规定按下鼠标按键时的行为
ng-mouseenter 规定鼠标指针穿过元素时的行为
ng-mouseleave 规定鼠标指针离开元素时的行为
ng-mousemove 规定鼠标指针在指定的元素中移动时的行为
ng-mouseover 规定鼠标指针位于元素上方时的行为
ng-mouseup 规定当在元素上松开鼠标按钮时的行为
ng-non-bindable 规定元素或子元素不能绑定数据
ng-open 指定元素的 open 属性
ng-options 在 <select> 列表中指定 <options>
ng-paste 规定粘贴事件的行为
ng-pluralize 根据本地化规则显示信息
ng-readonly 指定元素的 readonly 属性
ng-repeat 定义集合中每项数据的模板
ng-selected 指定元素的 selected 属性
ng-show 显示或隐藏 HTML 元素
ng-src 指定 <img> 元素的 src 属性
ng-srcset 指定 <img> 元素的 srcset 属性
ng-style 指定元素的 style 属性
ng-submit 规定 onsubmit 事件发生时执行的表达式
ng-switch 规定显示或隐藏子元素的条件
ng-transclude 规定填充的目标位置
ng-value 规定 input 元素的值
过滤器解析 AngularJs 过滤器。
AngularJS 事件
AngularJS 支持以下事件:
ng-click
ng-dbl-click
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-keydown
ng-keyup
ng-keypress
ng-change
事件解析： Angular 事件。
AngularJS 验证属性
$dirty
$invalid
$error
验证解析：Angular 验证。
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
AngularJS 全局 API
转换
API 描述
angular.lowercase() 将字符串转换为小写
angular.uppercase() 将字符串转换为大写
angular.copy() 数组或对象深度拷贝
angular.forEach() 对象或数组的迭代函数
比较
API 描述
angular.isArray() 如果引用的是数组返回 true
angular.isDate() 如果引用的是日期返回 true
angular.isDefined() 如果引用的已定义返回 true
angular.isElement() 如果引用的是 DOM 元素返回 true
angular.isFunction() 如果引用的是函数返回 true
angular.isNumber() 如果引用的是数字返回 true
angular.isObject() 如果引用的是对象返回 true
angular.isString() 如果引用的是字符串返回 true
angular.isUndefined() 如果引用的未定义返回 true
angular.equals() 如果两个对象相等返回 true
JSON
API 描述
angular.fromJson() 反序列化 JSON 字符串
angular.toJson() 序列化 JSON 字符串
基础
API 描述
angular.bootstrap() 手动启动 AngularJS
angular.element() 包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。
angular.module() 创建，注册或检索 AngularJS 模块
全局 API 解析 ：Angular API。
https://my.oschina.net/zengfr/
--------------------------------------------------------------------------------------------------------------
angular10 组件间传值与通信
方法1 @Input 父级组件向子组件传递
方法2 EventEmitter, @output 子组件传递消息给父组件 子组件创建事件 EventEmitter 对象，使用@output公开出去 父组件监听子组件@output出来的方法，然后处理事件
方法3 使用 @ViewChild 一般用于父组件给子组件传递信息,或者父组件调用子组件的方法
方法4 service进行通讯，两个组件同时注入某个服务
[]实现了数据流从组件到模板，()实现了数据流从模板到组件，两者一结合[()]就实现了双向绑定。
[ngModel]="manualCode" (ngModelChange)="manualCode=$event;"
等价于下面这样的写法：[(ngModel)]="manualCode"
使用前缀形式的语法：<input bindon-ngModel="currentUser.firstName">
angular cli --host --skip-tests