JavaScript是互联网上最流行的脚本语言，所有现代的HTML都使用JavaScript。既然是脚本语言，那么它的特点就有一下三种：

    （1）弱类型；

    （2）解释型语言（不需要编译）；

    （3）逐行执行，一行代码错误，其后的代码块都不会继续执行；

    （4）<script>标签可直接嵌入到HTML文件中，位置是任意的，通常放在被修饰内容下面或者head标签中，但写成单独的js文件有利于结构和行为的分离

2.JavaScript 内容（附图）：

       其中ECMAScript是JavaScript的核心；

       DOM是文档对象模型（使用js操作网页）；

       BOM是浏览器对象模型（使用js操作浏览器）

3.JavaScript 信息的输出：

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

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

    （3）document.write( )：将内容直接写在HTML页面中，例：

4.JavaScript 变量：

    与 Java不同，ECMAScript 中的变量无特定的类型，定义变量时只用 var 运算符，可以将它初始化为任意值，变量的初始化格式：var 变量名 = 变量值；例：

    如果要定义多个变量，那么可以用将多个变量写在一行，用逗号进行分隔；例：

    变量名字的变量规则：    

    （1）由字母、数字、下划线、$符号构成

    （2）不可以以数字开头，不建议以下划线开头；

    （3） 严格区分大小写；

    （4）不可以是关键字和保留字

5.JavaScript 数据类型：

    JavaScript可以分为原始数据类型，引用数据类型两种：

    （1）原始数据类型：Number，String，Boolean，undefined，null

    Number：数值型，就是数字，包含正数、负数、整数、小数、0、NaN、Infinity（正无穷）、-Infinity（负无穷）；

    注意：NaN：not  a  number的缩写，表示该值不是一个数值（也属于Number）

    String：字符串：用双引号""或单引号''包起来的0个或多个字符，如果引号中什么也没有，那么这个字符串被称为空字符串

    Boolean：布尔型：包含true：表示真（成立）和false：表示假（不成立）两个值

    undefined：表示变量未定义，或变量被定义出来，但是没有被赋值

    null：表示一个变量没有指向任何一片存储空间，即变量存在，但是里面是空的，类似于Undefined

    （小提示：在Chrome浏览器控制台输出时，会发现Number类型为深蓝色，String为黑色，Boolean为浅蓝色，undefined和null都为浅灰色）

    （2）引用数据类型：

    Object（对象），Array（数组），Date（日期），RegExp（正则）。。等等

    （3）如何查看一个变量的数据类型（typeof 运算符）：        

             数值型数据：返回值为number   

             字符串型数据：返回值为string

             布尔型数据：返回值为boolean

             Undefined：返回值为undefined

             Null：返回值为Object（历史遗留问题，说明null也是一个对象）

             NaN：返回值为number

6.JavaScript 数据类型的转换：

    （1）在使用加法（+）运算符时，任何数据与字符串类型数据相加都为字符串类型数据；

        注（简单理解）： 在JavaScript 中空字符串""转换为false，非空字符串转换为true（除“0”，“1”外）；

                false转换为 0 或“0”，true转换为 1 或“1”；

                做逻辑判断的时候，null，undefined，""(空字符串)，0，NaN都默认为false；

                ==在比较的时候可以转换数据类型，===是严格比较，只要类型不匹配就返回false；

                    其实 == 的比较确实是转换成字符串来比较但，但是在布尔型转换为字符串之前，要先转换成 Number

（2）parseInt：将字符串转换成整数（只识别字符串中的数值）：

        注：会忽略字符串中的前后空格（当数值后的空格后面还有数值时，将不会再识别）；

               能够正确识别正负号，即保留正负号；

               在转换时，遇到非数值型的字符就会停止转换；

               如果字符串的第一个字符是非数值型的，那么转换的结果为NaN；

（3）parseFloat：将字符串转换成小数（识别小数点，注意事项同上）

（4）Number：将其它类型的数据转换成数值型，注意被转换的数据必须是纯数值构成，否则无法转换，其它注意事项同上

（5）页面中的信息框：

        alert（），弹出个提示框，只有确定；

        confirm（），弹出个确认框，有确定和取消；

        prompt（），弹出个输入框，可以输入内容；

测试了一下各个api的具体效果。在这里跟大家分享一下。

            这是我具体测试的代码：

           这是我servlet配置的路径：

            以下是访问这个ProductServlet后控制台打印的结果：

            从以上我们可以发现：

    1.getRealPath(....)，这个方法是返回给定资源的磁盘绝对路径，简单来说，就是以盘符开头的路径

    2.getRequestURI(....)与getRequestURL(....)这个两个方法，从名字上来说，一个是返回url（统一资源定位器）一个是返回

uri（统一资源标识符，用来唯一的标识一个资源），那么url跟uri有什么区别呢？比较结果后我们就知道，URL中包含URI，URL是

带协议，带端口号的。

    3.getContextPath(....)这个方法，其实就是用来返回工程名，或者说工程路径，看结果我们一目了然

    4.getServletPath(.....)这个方法，从结果中，我们可以分析得出，它其实就是在工程目录下，访问我们servlet的路径，或者说

servlet相对于我们工程的路径，在或者说，它就是我们在配置文件中配置的路径，但是不包括后面具体的请求资源名

    5.getPathInfo(.....)，这个方法其实就是返回我们具体请求资源的名称，或者说，相对于我们的servlet而言的请求路径

2、读取json文件的service层实现

3、controller对应的代码片段

4、html页面 将jsonarray转换成js对象

5、对js对象遍历 $.append动态添加到对应页面

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 在内容里面使用

<ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)"> <ion-segment-button value="friends"> Segment 在内容里面使用 </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"> 表单内使用 </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 //阻止在启动时生成生产提示 //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 // 定义常量  如果访问他的话，就叫访问状态对象 const state = {
  count: 1 } // mutations用来改变store状态, 如果访问他的话，就叫访问触发状态 const mutations = { //这里面的方法是用 this.$store.commit('jia') 来触发 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’)区触发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访问状态对象

使用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不能使用箭头函数，会改变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的参数就是上面定义的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 (异步状态)

在store.js添加actions

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定义常量 const state = { count: 1 } // mutations用来改变store状态 同步状态 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') //调用mutations下面的方法
    setTimeout(()=>{
      context.commit('jian')
    },2000) alert('我先被执行了，然后两秒后调用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:{ // 这里是数组的方式触发方法 ...mapMutations([ 'jia', 'jian' ]), // 换一中方式触发方法 用对象的方式 ...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 模块

适用于非常大的项目，且状态很多的情况下使用，便于管理

修改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') //调用mutations下面的方法
    setTimeout(()=>{
      context.commit('jian')
    },2000) alert('我先被执行了，然后两秒后调用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元素如下：

但是发现，原先的事件不能用于动态加载的元素，如上面加载的，加载形式如下：

无奈，只能上网寻求万能的大神了。

基本上提供的解决方案就两个，使用

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

或者

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

我先是使用.live尝试了下，发现gg，心灰意冷ing；本着试一试不要钱的心态又用.on试了下，结果令人惊喜啊！可以使用了，哎，这鬼玩意坑死人。

下面上针对我加载的界面元素写的绑定事件：

1. //查询条件class的加载和移除（适用于动态加载标签的情况--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插入到到对应的位置上

3.在wxss中import wxParse.wxss，并设置样式；比如‘wxParse-image’是富文本图片转化成image组件之后的类名，‘wxParse-p’是p标签转化成view组件后设置的类名

4.js

[C#后台]