iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
0
自我挑戰組

網頁排版個人學習筆記系列 第 13

DAY13-jQuery| 環境建置

  • 分享至 

  • xImage
  •  

Sublime的jQuery 環境建置

  • jQuery環境建置程式碼:
    • 如想自行於檔案中寫入自己的jQuery檔案 all.js中,寫法
$(document).ready(function(){
所有jQuery需寫在此範圍內
});
  • jQuery要去指定元素寫法 ($錢字號再加括號單引號,類似css的選擇器意思)
$('放class元素 或 html標籤,如有多個用逗號,隔開即可')
  • 選擇器範例程式碼
$('h1').hide(); /*HTML標籤選擇*/

$('.header').hide();  /*Class 選擇*/

$('#box').hide();  /*ID 選擇*/
  • 在jQuery環境建置加入選擇器
$(document).ready(function(){
    $('h1').hide();
});

把jQuery加入檔案中

<script src="jQuery官網內下載的js檔案"></script>

想確認jQuery是否有載入寫的網頁中,測試方式

  • 用sublime開啟資料夾
  • 檔案1: index.html
    • index.html的<head></head>內寫入jQuery核心檔案<script src="jQuery官網內下載的js檔案 w"></script>
  • 於body內隨便寫一些測試用字 ex: <h1>123456</h1>
<!DOCTYPE html>
<html lang="zh-tw">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="js/jquery-3.4.1.min.js"></script>/*jQuery核心檔案*/
</head>
  • 檔案2: all.js 內寫入程式
$(document).ready(function(){
    所有jQuery需寫在此範圍內
});
  • 檔案index.html內載入all.js檔案
<!DOCTYPE html>
<html lang="zh-tw">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="js/jquery-3.4.1.min.js"></script>/*jQuery核心檔案*/
  <script src="js/all.js"></script> /*我們給jQuery的指令寫此檔案內*/
</head>
  • 開啟all.js 於jQuery環境內寫入 $('h1').hide();
$(document).ready(function(){
    $('h1').hide();
});
  • 用chrome開啟index.html ,按F12(開發人員工具)
    • 右方三點選取"show console drawer"
  • 重新整理瀏覽器後發現原先寫的123456 就消失了
    • 因為於all.js寫入 $('h1').hide();
      https://ithelp.ithome.com.tw/upload/images/20190912/20119743x9Lnt9q0XW.png

CODEPEN內的jQuery 環境建置

  • CODEPEN左方點選"Pen"新增一個環境
  • 進入後,各自到CSS 與 JS 做個別設定(別忘記儲存XD),就可以開始寫程式囉!!
  • 寫好Save後就可複製上方網址做分享動作

https://ithelp.ithome.com.tw/upload/images/20190912/201197435egEFXc414.png


上一篇
jQuery| 安裝方式
下一篇
DAY14-jQuery| 用jQuery產生動畫效果
系列文
網頁排版個人學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言