初學wex5,先理理讓人容易混淆的三個概念：
一 基本概念：
1 wex5組件，顧名思義，在編輯窗口右側的組件集合里的，都是wex5基於開源自創的組件，並封裝了一套自已的方法。目的是為了方便。相關方法在api有提示，操作中也有提示。
2 js對像
JavaScript 中的所有事物都是對象：字符串、數值、數組、函數...
此外，JavaScript 允許自定義對象。
二 對像獲取與取值方法
1 wex5
this.comp() 效能較低，但操作方便
取值方法：this.comp().val()
this.comp().$domNode
取值方法為 this.comp().$domNode.innerHtml 這樣可以取出一個節點元素比如div里的text值
如果想轉換成DOM節點，方法為this.comp().$domNode,轉換成DOM節點,為什么呢？因為有些js 方法，wex5的組件和方法都沒有，我們又想操作某個元素，就必須這么操作
this.getElementByXid() 通過Xid得到組件，性能優於 this.comp()
取值方法為：this.getElementByXid().val
(注意)取值方法，一個是val(), 一個是val，帶不帶()不一樣。
2 js對象
js對像獲取與方法，網上一大堆,簡單總結一下
$('*').css('background','red'); //選擇本頁所有元素
$(this.getElementByXid("div1")).css('background','red'); //選擇Xid值為div1的元素
$('li').css('background','red'); //返回所有li元素
$('.x-col-10').css('background','red'); //返回所有class類為.x-col-10的元素
$(".x-titlebar-left").css('background','red'); //返回class為x-titlebar-left的元素
$("[src]").css('width','290px'); //返回所有帶src屬性的元素
$("id").hide() id選擇器
這里說明一下，有些非wex5的組件沒有Xid,可以手動增加id屬性，用js的id選擇器選擇后操作
比如：color,video,audio 標簽
jQuery方法*/
/*if($(this.getElementByXid("div1")).css("display")=='none'){
$(this.getElementByXid("div1")).show(); //顯示div1元素
}else{
$(this.getElementByXid("div1")).hide(); //隱藏div1元素
}*/
/*if($(this.getElementByXid("image1")).css("display")=='none'){
$(this.getElementByXid("image1")).show(400); //在400毫秒內顯示div1元素
}else{
$(this.getElementByXid("image1")).hide(400); //在400豪秒內隱藏div1元素
}*/
//$(this.getElementByXid("image1")).toggle(400); //上面四行的整合（以后不再提示）
/*if($(this.getElementByXid("div1")).css("display")=='none'){
$(this.getElementByXid("div1")).slideDown("slow"); //下滑顯示div1
}else{
$(this.getElementByXid("div1")).slideUp("slow"); //上滑隱藏div1
}*/
//$(this.getElementByXid("div1")).slideToggle("slow");
/*if($(this.getElementByXid("div1")).css("display")=='none'){
$(this.getElementByXid("div1")).fadeIn("slow"); //淡入div1
}else{
$(this.getElementByXid("div1")).fadeOut("slow"); //淡出div1
}*/
//$(this.getElementByXid("div1")).fadeToggle("slow");
//$(this.getElementByXid("image1")).animate({height:'50px',width:"50px"}); //將image1的高度和寬度都動畫變成50px
//$(this.getElementByXid("image1")).animate({height:'+=50px',width:"+=50px"}); //將image1的高度和寬度都動畫增加50px
//$(this.getElementByXid("row2")).remove(); //刪除row2及其子元素
//$(this.getElementByXid("row2")).empty(); //刪除row2子元素，保留frow2
/*if($(this.getElementByXid("row2")).hasClass("blue")){
$(this.getElementByXid("row2")).removeClass('blue') ; //給row2添加blue類
}else{
$(this.getElementByXid("row2")).addClass('blue') ; //給row2去除blue類
}*/
//$(this.getElementByXid("row2")).toggleClass('blue') ;
過濾選擇器*/
//$("img[src$='jpg']").css('width','290px'); //返回所有屬性src以jpg結尾的image元素
//$("img[src*='head.jpg']").css('width','290px'); //返回屬性src包含head.jpg的img元素
//$('lidd').css('background','red'); //返回偶數行的li元素
//$('li:even').css('background','red'); //返回奇數行的li元素
//$('li:first').css('background','red'); //返回第一個li元素
//$('li:last').css('background','red'); //返回最后一個li元素
//$('li:eq(2)').css('background','red'); //返回第二個li元素
//$('li:gt(2)').css('background','red'); //返回第二個以后的li元素
//$('li:lt(2)').css('background','red'); //返回第二個以前的li元素
//$("li:not(:empty)").css('background','red'); //返回不為空的li元素
//$("div:empty").css('background','red'); //返回空的div元素
//$("li div:contains('冀')").css('background','red'); //在li元素下面選擇文本包含冀的div元素
//$("li div:has(input)").css('background','red'); //在li元素下面，選擇有子元素input的div元素
//$("li:visible").css('background','red'); //選擇可見的li元素
//$("ul li:nth-child(3n + 1)").css('background','red'); //選擇3n+1（n=1,2,3.。。。）的li元素
這么多方法，其實在開發中多多少少要用到，大家還是要多看一點。只用wex5的東西，有時也有限。這里只做一些說明。
三 組件關系：
js歷史悠久， wex5組件基於各種框架而成，是明顯的父子關系。
即：
wex5的組件方法中，可以執行js的方法，而在js的方法中，無法執行wex5的方法。
舉個例子：
在wex5的事件更新中，直接寫js的方法，很好。返過來，在js中寫this.comp()什么的，認不了。想想也是啊，父親是認不了兒子的行為的。兒子不僅認識父親的方法，還自建一套。
四 執行順序
js的執行速度最快，會在頁面完成后執行。
而wex5的組件，需要modeLoad,初始化完成后才能執行。即使是modelParamsRecive也不能優於js
那問題來了，我如果頁在中同時用了js與wex5,如何控制執行順序呢？
如果把js代碼放到頁面中，它會先於其它執行，方法是把js方法裝到wex5的組件方法中去，進行一次方法套用。
還是這個例子。如果把
$(".true").show();
$(".wrong").hide(); 放到頁面之外，直接執行，執行是 執行了，值的改變就會成了馬后炮。
在混合開發中，會遇到很多組件與方法共生共用的情況，大家要區別對待，不能盲寫盲從，如果提示方法未定義，組件不存在，看看是不是把js和wex5的東西 用混用錯了。
相關視頻制作完成，上傳優酷。教學app制作中。我是邯鄲戲曲開發，tel：15175073123,qq:1017945251
掃描二維碼，看高清教學視頻。