目錄——Web第三階段:Javascrip和Jquery和EasyUI

待整理(以下表格部分來源於菜鳥教程)

 

JavaScript

輕量級的腳本語言

 

一些命令:

輸出數據:

  • 使用 window.alert() 彈出警告框。
  • 使用 document.write() 方法將內容寫到 HTML 文檔中。
  • 使用 innerHTML 寫入到 HTML 元素。
  • 使用 console.log() 寫入到瀏覽器的控制檯。

document.getElementById(id) :獲取元素

document.getElementById("").innerHTML=:修改獲取元素中HTML中的內容

document.write() 僅僅向文檔輸出寫內容。,如果在文檔已完成加載後執行 document.write,修改所有內容,整個 HTML 頁面將被覆蓋。

 

一些規範:

  1. 註釋方式、運算符、條件語句與Java相同
  2. ";"可以帶也可以不帶,作用是可以在同一行寫多條命令
  3. 會忽略多餘的空格,可以自行選擇添加增加可讀;可以在字符串內通過\對代碼行進行換行。
  4. 一個好的編程習慣是,在代碼開始處,統一對需要的變量進行聲明。
  5. 對象方法通過添加 () 調用
  6. 對大小寫敏感
  7. 可以使用索引位置來訪問字符串中的每個字符,字符串的索引從 0 開始,可以在字符串添加轉義字符“\”來使用引號
  8. === 爲絕對相等,即數據類型與值都必須相等;==值相等即可,!==爲不絕對相等
  9. 寫HTML代碼時在外面加引號
  10.  默認是在代碼的最後一行自動結束

 

關於變量:

  1. 使用var定義變量,一般稱爲聲明變量;
  2. 多個變量以","分隔,可以橫跨多行,但是不可以賦同一個值;
  3. 未使用值來聲明的變量,其值實際上是 undefined;有聲明爲局部變量,不可刪除,無聲明可爲全局變量,可刪除,在 HTML 中, 全局變量是 window 對象: 所有數據變量都屬於 window 對象,所以可以通過window.變量名來調用;
  4. 數組是一種特殊的對象,typeof返回的是object;
  5. null是一個只有一個值的特殊類型。表示一個空對象引用,typeof返回的是object;
  6. undefined 是一個沒有設置值的變量,typeof 一個沒有值的變量會返回 undefined,任何變量都可以通過設置值爲 undefined 來清空。

  7. 在 JavaScript 中, null 用於對象, undefined 用於變量,屬性和方法,對象只有被定義纔有可能爲 null,否則爲 undefined。

  8.  5 種不同的數據類型
     string
    number
    boolean
    object
    3 種對象類型(都返回object類型)
    Object
    Date
    Array
    2 個不包含任何值的數據類型
    null
    undefined
    function 
    特殊說明
    NaN 的數據類型是 number
    數組(Array)的數據類型是 object
    日期(Date)的數據類型爲 object
    null 的數據類型是 object
    未定義變量的數據類型爲 undefined

  9. String()和.toString可以將數字、日期、布爾值等轉換爲字符串

    toExponential() 把對象的值轉換爲指數計數法。
    toFixed() 把數字轉換爲字符串,結果的小數點後有指定位數的數字。
    toPrecision() 把數字格式化爲指定的長度。
  10. Number()可以將字符串、布爾值(0、1)、日期(.getTime()同效)等轉換爲數字

    parseFloat() 解析一個字符串,並返回一個浮點數。
    parseInt() 解析一個字符串,並返回一個整數。
  11. 浮點型數據使用注意事項:
    JavaScript 中的所有數據都是以 64 位浮點型數據(float) 來存儲。

    所有的編程語言,包括 JavaScript,對浮點型數據的精確度都很難確定:

    var x = 0.1;
    var y = 0.2;
    var z = x + y            // z 的結果爲 0.3
    if (z == 0.3)            // 返回 false

    爲解決以上問題,可以用整數的乘除法來解決:

    var z = (x * 10 + y * 10) / 10;       // z 的結果爲 0.3

    更多內容可以參考:JavaScript 中精度問題以及解決方案

 

常見的事件(處理表單驗證,用戶輸入,用戶行爲及瀏覽器動作):其他

onchange HTML 元素改變
onclick 用戶點擊 HTML 元素
onmouseover 用戶在一個HTML元素上移動鼠標
onmouseout 用戶從一個HTML元素上移開鼠標
onkeydown 用戶按下鍵盤按鍵
onload 瀏覽器已完成頁面的加載

 

關於正則表達式

1、test()(返回true、false)、exec()(返回結果)

正則表達式修飾符:

修飾符 可以在全局搜索中不區分大小寫:

修飾符 描述
i 執行對大小寫不敏感的匹配。
g 執行全局匹配(查找所有匹配而非在找到第一個匹配後停止)。
m 執行多行匹配。

正則表達式模式:

方括號用於查找某個範圍內的字符:

表達式 描述
[abc] 查找方括號之間的任何字符。
[0-9] 查找任何從 0 至 9 的數字。
(x|y) 查找任何以 | 分隔的選項。

元字符是擁有特殊含義的字符:

元字符 描述
\d 查找數字。
\s 查找空白字符。
\b 匹配單詞邊界。
\uxxxx 查找以十六進制數 xxxx 規定的 Unicode 字符。

量詞:

量詞 描述
n+ 匹配任何包含至少一個 n 的字符串。
n* 匹配任何包含零個或多個 n 的字符串。
n? 匹配任何包含零個或一個 n 的字符串。

 

作用

1、數據驗證

典型的數據驗證有:

  • 必需字段是否有輸入?
  • 用戶是否輸入了合法的數據?
  • 在數字字段是否輸入了文本?
屬性 描述
disabled 規定輸入的元素不可用
max 規定輸入元素的最大值
min 規定輸入元素的最小值
pattern 規定輸入元素值的模式
required 規定輸入元素字段是必需的
type  規定輸入元素的類型

完整列表,請查看 HTML 輸入屬性

 

記錄至表單驗證(菜鳥教程)

 

 

Jquery

 

  • 入口函數
  1. Jquery入口函數
    $(document).ready(function(){ // 開始寫 jQuery 代碼... });
    $(function(){ // 開始寫 jQuery 代碼... });    //簡潔寫法(與以上寫法效果相同):
    使用說明:防止文檔在完全加載(就緒)之前運行 jQuery 代碼,即在 DOM 加載完成後纔可以對 DOM 進行操作
  2. JavaScript 入口函數:
    window.onload = function () { // 執行代碼 }
  3. jQuery 入口函數與 JavaScript 入口函數的區別
    jQuery 的入口函數是在 html 所有標籤(DOM)都加載之後,就會去執行。
    JavaScript 的 window.onload 事件是等到所有內容,包括外部圖片之類的文件加載完後,纔會執行。

 

  • 一些規範:
  1. 選擇器都以美元符號開頭:$()
  2. "" 表示全部,# 選擇id,. 選擇class
  3. 事件格式:

    頁面中指定一個點擊事件:$("p").click();

    定義什麼時間觸發事件。您可以通過一個事件函數實現:$("p").click(function(){ // 動作觸發後執行的代碼!! });

  4.  

 

EasyUI

別的介紹先不整理,記錄一下數據庫不同時在現有代碼基礎上進行修改時的一些困惑和解決。(商品列表顯示)

逆向工程生成對應自己數據庫的文件,對pojo進行序列化

修改jsp中的field中的屬性和顯示名稱即可,該屬性個數無需與數據庫完全一致,僅添加展示屬性即可,但屬性名要與數據庫保持一致。

對應的Service,ServiceImpl,Controller實現及配置文件的相關修改。

 

 

 

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章