JavaEE 之 jQuery 簡化 JavaScript

資料 ? 青牛 ? 于 2019-06-28 15:33:10 ? 594 閱讀

4.1 jQuery概述

4.1.1 什么是jQuery

jQuery由美國人John Resig于2006年創建
jQuery是目前最流行的JavaScript程序庫,它是對JavaScript對象和函數的封裝 jquery 把所有的操作都封裝成相應 的方法

通俗的說jquery先寫好很多的JS方法 然后我們通過外部引用 用人家已經寫好的方法就可以了

它的設計思想是write less,do more(用更少的代碼完成更多的功能)
file

JavaScript 是js原生技術 jQuery 框架技術(使用更簡單 但是功能更豐富)

4.1.2 jQuery用途

  1. 訪問和操作DOM元素(最常用) --> document對象進行了深入的封裝 DOM document object Model

  2. 控制頁面樣式

  3. 對頁面事件進行處理

擴展新的jQuery插件與Ajax技術完美結合(echarts 統計圖)

總結來看

jQuery能做的JavaScript也都能做,但使用jQuery能大幅提高開發效率

4.2 jQuery入門程序

4.2.1 下載并導入jQuery

第一步 去官網下載jquery

進入jQuery官網:jQuery
file

file
此處需要注意,jquery分為兩個版本,一個開發版和一個發布版,對比如下

file
而我們使用的就是jquery-1.9.1.js 這是jquery 的版本號為1.9.1的開發版js庫;

將其放入我們項目的js文件夾
file

在需要的頁面引入即可
file

4.2.2 jQuery入門使用

4.2.2.1 jQuery的語法結構
file

工廠函數 $() :將DOM對象轉化為jQuery對象

選擇器 selector:獲取需要操作的DOM 元素

方法action():jQuery中提供的方法,其中包括綁定事件處理的方法

“$”等同于“ jQuery ”

4.2.2.2 jQuery對象與DOM對象

file

4.2.2.3 DOM對象與jquery對象的轉換(了解)

file
file
4.3 jQuery入門總結
file

4.4 jQuery練習:案例支持 : 優化人員管理系統的JS操作

我們使用jQuery的目的很簡單就是簡化我們現有操作,那么接下來我們也是按數據的 添加 修改 刪除 查詢 操作來看下 jQuery到底給我們做了怎么樣的優化

前期準備,一定要看好是否已經引用了jquery文件
file

已經引入了沒有什么問題,那么怎么看引入的是否正確呢?

執行下面的代碼即可
file

如果頁面可以彈出Hello,Jquery的話就說明jquery已經正常工作了,為啥?因為上面的代碼

是將document對象通過工廠構造函數 $() 轉換為jquery對象后調用這個對象的 ready()方法,然后在ready()方法的參 數里面寫了一個

匿名JS方法編寫彈窗消息,而這個ready方法就是頁面加載的時候出發執行的方法,所以頁面加載可以看到消息說明 jqueyr正在工作;

我們準備玩了jquery,我們就可以使用jquery完成我們的代碼優化了

4.4.1 查詢優化

jQuery 主要針對JavaScript進行了封裝,把好多以前的屬性調用都封裝成了方法,所以用起來更加便捷; 那現在讓我們找到我們已經寫好的查詢方法

file
在查詢方法中jQuery可以幫助我們優化的有兩處

  1. 按ID獲取頁面數據

以前我們是這么寫的
file

現在有了jquery你就可以這么寫了

file
怎么樣是不是方便了不少

  1. 給標簽之間的的內容賦值

以前我們是這么寫的
file

現在你可以這么寫
file

驗證是否報錯
file

功能正常,這也驗證了jQuery所倡導的,用更少的代碼完成更多的功能?

4.4.2 添加優化

之前的添加代碼
file

現在的添加代碼
file

優化了什么呢?

file
4.4.3 刪除優化

刪除操作中并不涉及對DOM對象的操作,所以jQuery也幫不上什么忙

4.4.4 更新優化

更新優化就很多了,我們先來看看更新優化之前的代碼

展示要更新的JS

JavaScript原生的
file

此處我們需要注意一個細節,就是jQuery展示和隱藏標簽也是采用的方法,如果你想隱藏某個標簽

$(selector).hide();

如果你想顯示某個標簽

$(selector).show();

舉個例子:

JavaScript原生的隱藏form表單的寫法

file
jquery優化后的隱藏form表單的寫法

file
怎么樣是不是很靈活?

最后我們再檢查檢查哪里需要優化吧;

JavaScript原生的顯示添加form的JS
file

jquery優化之后的

file
到此 人員管理系統的JS部分優化完畢

核心知識點 : 數據的操作方式 進行簡化 --> 數據分析

jquery 本身是一個非常偉大的JS框架

jquery 非常簡單的 document 操作 --> 前段工程師

版權聲明:原創作品,允許轉載,轉載時務必以超鏈接的形式表明出處和作者信息。否則將追究法律責任。來自海牛部落-青牛,http://hainiubl.com/topics/36800
點贊
成為第一個點贊的人吧 :bowtie:
回復數量: 0
    暫無評論~~
    • 請注意單詞拼寫,以及中英文排版,參考此頁
    • 支持 Markdown 格式, **粗體**、~~刪除線~~、`單行代碼`, 更多語法請見這里 Markdown 語法
    • 支持表情,可用Emoji的自動補全, 在輸入的時候只需要 ":" 就可以自動提示了 :metal: :point_right: 表情列表 :star: :sparkles:
    • 上傳圖片, 支持拖拽和剪切板黏貼上傳, 格式限制 - jpg, png, gif,教程
    • 發布框支持本地存儲功能,會在內容變更時保存,「提交」按鈕點擊時清空
    Ctrl+Enter
    江西快三下期预测 捕鱼大师现金版app下载 多乐彩11选5规则 天津麻将规则算钱 jdb龙王捕鱼打法 湖南麻将规则 金牌六尾金牌三尾中特 捕鱼达人单机版无需网络 麻将什么牌算赢 全民欢乐捕鱼3期礼包码 南宁牌封胡怎么算