JavaScript是互聯(lián)網(wǎng)上最流行的腳本語言，所有現(xiàn)代的HTML都使用JavaScript。既然是腳本語言，那么它的特點就有一下三種：

    （1）弱類型；

    （2）解釋型語言（不需要編譯）；

    （3）逐行執(zhí)行，一行代碼錯誤，其后的代碼塊都不會繼續(xù)執(zhí)行；

    （4）<script>標(biāo)簽可直接嵌入到HTML文件中，位置是任意的，通常放在被修飾內(nèi)容下面或者h(yuǎn)ead標(biāo)簽中，但寫成單獨的js文件有利于結(jié)構(gòu)和行為的分離

2.JavaScript 內(nèi)容（附圖）：

       其中ECMAScript是JavaScript的核心；

       DOM是文檔對象模型（使用js操作網(wǎng)頁）；

       BOM是瀏覽器對象模型（使用js操作瀏覽器）

3.JavaScript 信息的輸出：

    （1）alert( )方法：以提示框的形式在頁面輸出 ，例;

    （2）console.log( )方法：在控制臺輸出信息，例：

    （3）document.write( )：將內(nèi)容直接寫在HTML頁面中，例：

4.JavaScript 變量：

    與 Java不同，ECMAScript 中的變量無特定的類型，定義變量時只用 var 運(yùn)算符，可以將它初始化為任意值，變量的初始化格式：var 變量名 = 變量值；例：

    如果要定義多個變量，那么可以用將多個變量寫在一行，用逗號進(jìn)行分隔；例：

    變量名字的變量規(guī)則：    

    （1）由字母、數(shù)字、下劃線、$符號構(gòu)成

    （2）不可以以數(shù)字開頭，不建議以下劃線開頭；

    （3） 嚴(yán)格區(qū)分大小寫；

    （4）不可以是關(guān)鍵字和保留字

5.JavaScript 數(shù)據(jù)類型：

    JavaScript可以分為原始數(shù)據(jù)類型，引用數(shù)據(jù)類型兩種：

    （1）原始數(shù)據(jù)類型：Number，String，Boolean，undefined，null

    Number：數(shù)值型，就是數(shù)字，包含正數(shù)、負(fù)數(shù)、整數(shù)、小數(shù)、0、NaN、Infinity（正無窮）、-Infinity（負(fù)無窮）；

    注意：NaN：not  a  number的縮寫，表示該值不是一個數(shù)值（也屬于Number）

    String：字符串：用雙引號""或單引號''包起來的0個或多個字符，如果引號中什么也沒有，那么這個字符串被稱為空字符串

    Boolean：布爾型：包含true：表示真（成立）和false：表示假（不成立）兩個值

    undefined：表示變量未定義，或變量被定義出來，但是沒有被賦值

    null：表示一個變量沒有指向任何一片存儲空間，即變量存在，但是里面是空的，類似于Undefined

    （小提示：在Chrome瀏覽器控制臺輸出時，會發(fā)現(xiàn)Number類型為深藍(lán)色，String為黑色，Boolean為淺藍(lán)色，undefined和null都為淺灰色）

    （2）引用數(shù)據(jù)類型：

    Object（對象），Array（數(shù)組），Date（日期），RegExp（正則）。。等等

    （3）如何查看一個變量的數(shù)據(jù)類型（typeof 運(yùn)算符）：        

             數(shù)值型數(shù)據(jù)：返回值為number   

             字符串型數(shù)據(jù)：返回值為string

             布爾型數(shù)據(jù)：返回值為boolean

             Undefined：返回值為undefined

             Null：返回值為Object（歷史遺留問題，說明null也是一個對象）

             NaN：返回值為number

6.JavaScript 數(shù)據(jù)類型的轉(zhuǎn)換：

    （1）在使用加法（+）運(yùn)算符時，任何數(shù)據(jù)與字符串類型數(shù)據(jù)相加都為字符串類型數(shù)據(jù)；

        注（簡單理解）： 在JavaScript 中空字符串""轉(zhuǎn)換為false，非空字符串轉(zhuǎn)換為true（除“0”，“1”外）；

                false轉(zhuǎn)換為 0 或“0”，true轉(zhuǎn)換為 1 或“1”；

                做邏輯判斷的時候，null，undefined，""(空字符串)，0，NaN都默認(rèn)為false；

                ==在比較的時候可以轉(zhuǎn)換數(shù)據(jù)類型，===是嚴(yán)格比較，只要類型不匹配就返回false；

                    其實 == 的比較確實是轉(zhuǎn)換成字符串來比較但，但是在布爾型轉(zhuǎn)換為字符串之前，要先轉(zhuǎn)換成 Number

（2）parseInt：將字符串轉(zhuǎn)換成整數(shù)（只識別字符串中的數(shù)值）：

        注：會忽略字符串中的前后空格（當(dāng)數(shù)值后的空格后面還有數(shù)值時，將不會再識別）；

               能夠正確識別正負(fù)號，即保留正負(fù)號；

               在轉(zhuǎn)換時，遇到非數(shù)值型的字符就會停止轉(zhuǎn)換；

               如果字符串的第一個字符是非數(shù)值型的，那么轉(zhuǎn)換的結(jié)果為NaN；

（3）parseFloat：將字符串轉(zhuǎn)換成小數(shù)（識別小數(shù)點，注意事項同上）

（4）Number：將其它類型的數(shù)據(jù)轉(zhuǎn)換成數(shù)值型，注意被轉(zhuǎn)換的數(shù)據(jù)必須是純數(shù)值構(gòu)成，否則無法轉(zhuǎn)換，其它注意事項同上

（5）頁面中的信息框：

        alert（），彈出個提示框，只有確定；

        confirm（），彈出個確認(rèn)框，有確定和取消；

        prompt（），彈出個輸入框，可以輸入內(nèi)容；

測試了一下各個api的具體效果。在這里跟大家分享一下。

            這是我具體測試的代碼：

           這是我servlet配置的路徑：

            以下是訪問這個ProductServlet后控制臺打印的結(jié)果：

            從以上我們可以發(fā)現(xiàn)：

    1.getRealPath(....)，這個方法是返回給定資源的磁盤絕對路徑，簡單來說，就是以盤符開頭的路徑

    2.getRequestURI(....)與getRequestURL(....)這個兩個方法，從名字上來說，一個是返回url（統(tǒng)一資源定位器）一個是返回

uri（統(tǒng)一資源標(biāo)識符，用來唯一的標(biāo)識一個資源），那么url跟uri有什么區(qū)別呢？比較結(jié)果后我們就知道，URL中包含URI，URL是

帶協(xié)議，帶端口號的。

    3.getContextPath(....)這個方法，其實就是用來返回工程名，或者說工程路徑，看結(jié)果我們一目了然

    4.getServletPath(.....)這個方法，從結(jié)果中，我們可以分析得出，它其實就是在工程目錄下，訪問我們servlet的路徑，或者說

servlet相對于我們工程的路徑，在或者說，它就是我們在配置文件中配置的路徑，但是不包括后面具體的請求資源名

    5.getPathInfo(.....)，這個方法其實就是返回我們具體請求資源的名稱，或者說，相對于我們的servlet而言的請求路徑

2、讀取json文件的service層實現(xiàn)

3、controller對應(yīng)的代碼片段

4、html頁面 將jsonarray轉(zhuǎn)換成js對象

5、對js對象遍歷 $.append動態(tài)添加到對應(yīng)頁面

6、效果如下圖

Segment 在頭部使用

<ion-header> <ion-toolbar> <ion-segment [(ngModel)]="icons" color="secondary"> <ion-segment-button value="camera"> <ion-icon name="camera">帶iocn</ion-icon> </ion-segment-button> <ion-segment-button value="bookmark"> 頭部使用Segment <ion-icon name="bookmark"></ion-icon> </ion-segment-button> </ion-segment> </ion-toolbar> </ion-header>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

    

Segment 在內(nèi)容里面使用

<ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)"> <ion-segment-button value="friends"> Segment 在內(nèi)容里面使用 </ion-segment-button> <ion-segment-button value="enemies"> 可以綁定一個事件(ionChange) </ion-segment-button> </ion-segment>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

    

Segment 在表單里面使用

<form [formGroup]="myForm"> <ion-segment formControlName="mapStyle" color="danger"> <ion-segment-button value="standard"> Standard </ion-segment-button> <ion-segment-button value="hybrid"> 表單內(nèi)使用 </ion-segment-button> <ion-segment-button value="sat"> Satellite </ion-segment-button> </ion-segment> </form>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

    

<ion-segment [(ngModel)]="change"> <ion-segment-button value="apple"> 蘋果 </ion-segment-button> <ion-segment-button value="pie"> 梨 </ion-segment-button> </ion-segment> <div [ngSwitch]="change"> <div *ngSwitchCase="'apple'">
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

    

 npm install vuex --save
    


        

            1
        

    

2： 在main.js 主入口js里面引用store.js

import Vue from 'vue' import App from './App' import router from './router' import store from './vuex/store' //引用store.js Vue.config.productionTip = false //阻止在啟動時生成生產(chǎn)提示 //vue實例 new Vue({
 el: '#app',
 router,
 store, //把store掛在到vue的實例下面 template: '<App/>',
 components: { App }
})
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

    

3：在store.js里引用Vuex

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //注冊Vuex // 定義常量  如果訪問他的話，就叫訪問狀態(tài)對象 const state = {
  count: 1 } // mutations用來改變store狀態(tài), 如果訪問他的話，就叫訪問觸發(fā)狀態(tài) const mutations = { //這里面的方法是用 this.$store.commit('jia') 來觸發(fā) jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
} //暴露到外面，讓其他地方的引用 export default new Vuex.Store({
  state,
  mutations
})
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

    

4：在vue組件中使用

使用$store.commit(‘jia’)區(qū)觸發(fā)mutations下面的加減方法

<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{$store.state.count}}</h5> <p> <button @click="$store.commit('jia')">+</button> <button @click="$store.commit('jian')">-</button> </p> </p> </template> <!-- 加上scoped是css只在這個組件里面生效，為了不影響全局樣式 --> <style scoped> h5{ font-size: 20px; color: red; } </style>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

    

5：state訪問狀態(tài)對象

使用computed計算

<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="$store.commit('jia')">+</button> <button @click="$store.commit('jian')">-</button> </p> </p> </template> <script> import {mapState} from 'vuex' export default{
  name:'hello', //寫上name的作用是，如果你頁面報錯了，他會提示你是那個頁面報的錯，很實用 // 方法一 // computed: { //  count(){ //   return this.$store.state.count + 6 //  } // } // 方法二 需要引入外部 mapState computed:mapState({
   count:state => state.count + 10 }) // ECMA5用法 // computed:mapState({ //  count:function(state){ //   return state.count //  } // }) //方法三 // computed: mapState([ //  'count' // ]) } </script>

<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="jia">+</button> <button @click="jian">-</button> </p> </p> </template> <script> import {mapState,mapMutations} from 'vuex' export default{
  name:'hello', //寫上name的作用是，如果你頁面報錯了，他會提示你是那個頁面報的錯，很實用 //方法三 computed: mapState([ 'count' ]),
  methods:{
   ...mapMutations([ 'jia', 'jian' ])
  }
 } </script>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

    

2：getters計算屬性

getter不能使用箭頭函數(shù)，會改變this的指向

在store.js添加getters

 // 計算 const getters = {
  count(state){ return state.count + 66 }
} export default new Vuex.Store({
  state,
  mutations,
  getters
})
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

    

//count的參數(shù)就是上面定義的state對象 
//getters中定義的方法名稱和組件中使用的時候一定是一致的,定義的是count方法，使用的時候也用count，保持一致。 
組件中使用

<script> import {mapState,mapMutations,mapGetters} from 'vuex' export default{
  name:'hello',
  computed: {
   ...mapState([ 'count' ]),
   ...mapGetters([ 'count' ])
  },
  methods:{
   ...mapMutations([ 'jia', 'jian' ])
  }
 } </script>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

    

3：actions (異步狀態(tài))

在store.js添加actions

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定義常量 const state = { count: 1 } // mutations用來改變store狀態(tài) 同步狀態(tài) const mutations = {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
} // 計算屬性 const getters = {
  count(state){ return state.count + 66 }
} // 異步狀態(tài) const actions = {
  jiaplus(context){
    context.commit('jia') //調(diào)用mutations下面的方法
    setTimeout(()=>{
      context.commit('jian')
    },2000) alert('我先被執(zhí)行了，然后兩秒后調(diào)用jian的方法') }, jianplus(context){ context.commit('jian') }
} export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

        

            29
        

        

            30
        

        

            31
        

        

            32
        

        

            33
        

        

            34
        

        

            35
        

        

            36
        

        

            37
        

        

            38
        

        

            39
        

        

            40
        

        

            41
        

        

            42
        

        

            43
        

        

            44
        

    

在組件中使用

<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="jia">+</button> <button @click="jian">-</button> </p> <p> <button @click="jiaplus">+plus</button> <button @click="jianplus">-plus</button> </p> </p> </template> <script> import {mapState,mapMutations,mapGetters,mapActions} from 'vuex' export default{
  name:'hello',
  computed: {
   ...mapState([ 'count' ]),
   ...mapGetters([ 'count' ])
  },
  methods:{ // 這里是數(shù)組的方式觸發(fā)方法 ...mapMutations([ 'jia', 'jian' ]), // 換一中方式觸發(fā)方法 用對象的方式 ...mapActions({
    jiaplus: 'jiaplus',
    jianplus: 'jianplus' })
  }
 } </script> <style scoped> h5{ font-size: 20px; color: red; } </style>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

        

            29
        

        

            30
        

        

            31
        

        

            32
        

        

            33
        

        

            34
        

        

            35
        

        

            36
        

        

            37
        

        

            38
        

        

            39
        

        

            40
        

        

            41
        

        

            42
        

        

            43
        

        

            44
        

        

            45
        

        

            46
        

        

            47
        

        

            48
        

    

4：modules 模塊

適用于非常大的項目，且狀態(tài)很多的情況下使用，便于管理

修改store.js

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 1 } const mutations = {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
} const getters = {
  count(state){ return state.count + 66 }
} const actions = {
  jiaplus(context){
    context.commit('jia') //調(diào)用mutations下面的方法
    setTimeout(()=>{
      context.commit('jian')
    },2000) alert('我先被執(zhí)行了，然后兩秒后調(diào)用jian的方法') }, jianplus(context){ context.commit('jian') }
}

//module使用模塊組的方式 moduleA const moduleA = { state, mutations, getters, actions }

// 模塊B moduleB const moduleB = { state: { count:108
  }
} export default new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB,
  }
})

參考文章：https://blog.csdn.net/qq_35129893/article/details/78363211?locationNum=2&fps=1

原本綁定事件如下：

針對的HTML元素如下：

但是發(fā)現(xiàn)，原先的事件不能用于動態(tài)加載的元素，如上面加載的，加載形式如下：

無奈，只能上網(wǎng)尋求萬能的大神了。

基本上提供的解決方案就兩個，使用

$('element').live('click',function(){})

或者

$('父元素').on('click', '子元素', function(){})

我先是使用.live嘗試了下，發(fā)現(xiàn)gg，心灰意冷ing；本著試一試不要錢的心態(tài)又用.on試了下，結(jié)果令人驚喜??！可以使用了，哎，這鬼玩意坑死人。

下面上針對我加載的界面元素寫的綁定事件：

1. //查詢條件class的加載和移除（適用于動態(tài)加載標(biāo)簽的情況--on事件需要jquery在1.6以上）  
2. $('.value_list').on('click','a,span',function(){  
3.     $(this).addClass('a-time').siblings().removeClass('a-time');  
4. ;  
5. 
   

2.在wxml中import wxParse.wxml,并把template插入到到對應(yīng)的位置上

3.在wxss中import wxParse.wxss，并設(shè)置樣式；比如‘wxParse-image’是富文本圖片轉(zhuǎn)化成image組件之后的類名，‘wxParse-p’是p標(biāo)簽轉(zhuǎn)化成view組件后設(shè)置的類名

4.js

[C#后臺]