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