iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
1
自我挑戰組

30天學python系列 第 25

[Day25] Web 前端概述 - jQuery 入門

  • 分享至 

  • xImage
  •  

使用 jQuery

jQuery 概述

  • Write Less Do More,用更少的代碼來完成更多的工作。
  • 使用 CSS 選擇器來查找元素。
  • 使用 jQuery 方法來操作元素,解決瀏覽器兼容性問題、應用於所有元素並施加多個方法。

網頁中添加 jQuery

  1. 下載 jQuery 的開發版或壓縮版,可以從這下載 jQuery
  2. 從 CDN (內容分發網路) 加載 jQuery
    Google CDN:
    <head>
     <script src = ”http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js”>
     </script>
     </head>
    

查找元素

  • 選擇器
    • element / * / #id / .class / selector1, selector2
    • ancestor descendant / parent>child / previous+next / previous~siblings
  • 篩選器
    • 基本篩選器::not(selector) / :first / :last / :even / :odd / :eq(index) / :gt(index) / :lt(index) / :animated / :focus
    • 內容篩選器::contains('…') / :empty / :parent / :has(selector)
    • 可見性篩選器::hidden / :visible
    • 子節點篩選器::nth-child(expr) / :first-child / :last-child / :only-child
    • 屬性篩選器:[attribute] / [attribute='value'] / [attribute!='value'] / [attribute^='value'] / [attribute$='value'] / [attribute|='value' ] / [attribute~='value']
  • 表單::input / :text / :password / :radio / :checkbox / :submit / :image / :reset / :button / :file / :selected / :enabled / :disabled / :checked

執行操作

  • 內容操作
    • 獲取/修改內容:html() / text() / replaceWith() / remove()
    • 獲取/設置元素:before() / after() / prepend() / append() / remove() / clone() / unwrap() / detach() / empty() / add()
    • 獲取/修改屬性:attr() / removeAttr() / addClass() / removeClass() / css()
    • 獲取/設置表單值:val()
  • 查找操作
    • 查找方法:find() / parent() / children() / siblings() / next() / nextAll() / prev() / prevAll()
    • 篩選器:filter() / not() / has() / is() / contains()
    • 索引編號:eq()
  • 尺寸和位置
    • 尺寸相關:height() / width() / innerHeight() / innerWidth() / outerWidth() / outerHeight()
    • 位置相關:offset() / position() / scrollLeft() /scrollTop()
  • 特效和動畫
    • 基本動畫:show() / hide() / toggle()
    • 消失出現:fadeIn() / fadeOut() / fadeTo() / fadeToggle()
    • 滑動效果:slideDown()/ slideUp() / slideToggle()
    • 自定義:delay() / stop() / animate()
  • 事件
    • 文檔加載:ready() / load()
    • 用戶互動:on() / off()

鍊式操作

同一物件進行連續操作。

  • 檢測頁面是否可用
    < script >
        $ ( document ). ready ( function () { 
        });        
    
    </ script >
    
    < script >
        $ ( function () { 
        });        
    
    </ script >
    

jQuery 插件

  • jQuery Validation:為表單提供了驗證功能,讓客戶端表單驗證變得更簡單,同時提供可選的定制選項,以滿足應用程序各種需求。
  • jQuery Treeview:提供了一個無序的可折疊的樹形菜單。
  • jQuery Autocomplete:根據用戶輸入值進行搜尋和過濾,讓用戶快速找到並從預定值列表中選擇。
  • jQuery UI:一個 UI 小部件和 CSS 樣式表的集合。

避免和其他庫的衝突

  • 先引入其他庫再引入jQuery的情況。
    < script  src = " other.js " ></ script > 
    < script  src = " jquery.js " ></ script > 
    < script >
        jQuery . noConflict (); 
    jQuery ( function () { jQuery ( ' div ' ). hide ();     });         
    
    </ script >
    
  • 先引入jQuery再引入其他庫的情況。
    < script  src = " jquery.js " ></ script > 
    < script  src = " other.js " ></ script > 
    < script >
        jQuery ( function () { 
    jQuery ( ' div ' ). hide ();     });        
    
    </ script >
    

使用 Ajax

Ajax 非同步 JavaScript 及 XML (Asynchronous JavaScript and XML,AJAX),是一種在無需重新加載整個網頁的情況下,能夠更新部分網頁的技術。

  • 原生的 Ajax:主要使用 XmlHttpRequest 來完成請求的操作。
  • 基於 jQuery 的 Ajax:使用 XMLHttpRequest 或 ActiveXObject。

上一篇
[Day24] Web 前端概述 - 用 JavaScript 處理交互式行為
下一篇
[Day26] Web 前端概述 - Vue.js 入門
系列文
30天學python30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言