Animated Progress Circle

static progress circle

 SVG屬性解説

stroke-dasharray: 實線長度, 空白長度

svg(viewbox="-50 -50 100 100")
 line(x1=-50,y1=0,x2=100,y2=0)
svg
 border: 1px solid #000
 width: 300px
 height: 300px
 line
  stroke: black
  //stroke-dasharray也可以寫在html的line屬性裡面
  stroke-dasharray: 6,15

Display
長度6長度6長度6長度6長度6長度15長度15長度15長度15

dash-strokearray也可以指定%數,100%等於整條線,所以
line
 stroke: black
 dash-strokearray: 100% 0%
 //這樣可以得到一條黑線
line
 stroke: black
 dash-strokearray: 0% 100%
 //這樣可以得到一條看不見的線

stroke-dashoffset: 偏移開始的位置

line裡面偏移數字等於x的減項

svg(viewbox="-50 -50 100 100")
 line(x1=-50,y1=0,x2=100,y2=0)
svg
 border: 1px solid #000
 width: 300px
 height: 300px
 line
  stroke: black
  stroke-dasharray: 6,15
  //向左縮了5
  //等於x1-5,x2-5
  stroke-dashoffset: 5

Display
↓ 向左縮了5,等於x1-5,x2-5

進階:圓形版

stroke-dashedarray

圓形的stroke-dashedarray 100%不是整條圓周,整條圓周的%算法是

//等於圓周長*100%
svg半徑(r)*2*3.14*100%

所以

svg(viewbox="-50 -50 100 100")
  circle(cx=0,cy=0,r=40)
svg
  border: 1px solid #000
  width: 300px
circle
  fill: none
  stroke: black
  stroke-dasharray: calc(40* 3.14 * 2 * 100%)
  //100%加不加都沒差,反正圓周總長度=圓周長

可以得到一個圓框

svg
  border: 1px solid #000
  width: 300px
circle
  fill: none
  stroke: black
  stroke-dasharray: 0% calc(40* 3.14 * 2 * 100%)

則可以得到一個透明圓框

circle: stroke-dashoffset

圓形預設由正右方往下畫出來的,所以要往上偏移25%的長度

//往上偏移25%的長度
svg半徑(r)*2*3.14*25%

動態圓形百分比

注意事項

  • 圓形從正右邊開始往下畫,不是從正上方開始往下,所以要用stroke-dashoffset偏移適當距離
  • 半徑×6.28×指定%數=實線長度,其餘部分為虛線長度
  • 動畫起始値為實線0,虛線長等於圓周長
svg(viewbox="-50 -50 100 100")
  circle(cx=0,cy=0,r=20)
  text(x=-11,y=4) 80%
svg
  border: 1px solid #000
  width: 300px
  circle
    fill: none
    stroke: #90a955
    animation: apc 5s infinite
  text
    font-size: 10px
    fill: #90a955
    
  
@keyframes apc
  0%
    //動畫裡面不知為何不能用calc
    //圓周長20*2*3.14=125.6
    //80%圓周長125.6*0.8=100.48
    //20%圓周長125.6*0.2=25.12
    //往上偏移25%:125.6*25%=31.4
    stroke-dasharray: 0,125.6
    stroke-dashoffset: 31.4
  100%
    stroke-dasharray: 100.48,25.12
    stroke-dashoffset: 31.4

Display
80%

DOM

意思

Document Object Mode
JavaScript找到html/css的節點node,並且控制或改變它

<h3>Document Object Mode</h3>
<p>has existed</p>
//document 總體變數
//找到網頁文件下的body tag 裡面包住的所有字,然後換成
document.body.innerHTML="ERRRRRRRRRRRRR!"
Display

如果沒有JavaScript的話,會長這樣

Document Object Mode

has existed

但是JavaScript改變了内容,所以變成

ERRRRRRRRRRRRR!

使用選擇器改變html, css内容

ID selector: getElementById()

div
 h1#heading My Dogs
 p Animal is the best friend
//getElementById("ID") ID選擇器,裡面不用加#
document.getElementById("heading").innerHTML="Your Cats"
Display

Your Cats

My Dogs變成Your Cats了

Animal is the best friend

tag selector: getElementsByTagName()

不像id只會出現一個,tag會出現很多次,所以要用迴圈批量命名

div
 p
 | The domestic 
 span.animal dog
 | is known as man's best friend. The 
 span.animal dog
 | was the first domesticated animal and has been widely kept as a working, hunting, and pet companion. According to recent coarse estimates, there are currently between 700 million and one billion 
 span.animal dog
 | s, making them the most abundant predators in the world.
//先命名變數
//注意element"s"
var span_els = document.getElementsByTagName("span");
//抓下來的tag是陣列形式(HTML collection)
//所以要這樣寫才能在console看到
//console.log(span_els[0])

//用迴圈批量改
for (var i = 0; i < span_els.length; i++) {
 span_els[i].innerHTML = "cat";
}
Display

The domestic cat is known as man’s best friend. The cat was the first domesticated animal and has been widely kept as a working, hunting, and pet companion. According to recent coarse estimates, there are currently between 700 million and one billion cats, making them the most abundant predators in the world.

dog全部變成cat了

class selector: getElementsByClassName()

class一樣會出現很多次,也要迴圈命名

div
 p
 | The domestic 
 span.animal dog
 | is known as man's best friend. The 
 span.animal dog
 | was the first domesticated animal and has been widely kept as a working, hunting, and pet companion. According to recent coarse estimates, there are currently between 700 million and one billion 
 span.animal dog
 | s, making them the most abundant predators in the world.
var animal_els = document.getElementsByClassName("animal");

for (var i = 0; i < animal_els.length; i++) {
 animal_els[i].innerHTML = "cat";
}
Display

The domestic cat is known as man’s best friend. The cat was the first domesticated animal and has been widely kept as a working, hunting, and pet companion. According to recent coarse estimates, there are currently between 700 million and one billion cats, making them the most abundant predators in the world.

dog全部變成cat了

其他選擇法:querySelector()

任意選擇一個class, tag, id…等任何元素
jQuery也是用此法選擇
效能比getElemetBy法好,但需要較新瀏覽器支援

div 
 h3#h3 Hey this's my dog
 p it's name is moko
//id的話要加#,class的話加.
document.querySelector("#h3").innerHTML=("Your cat is so cool")
Display

Your cat is so cool

標題變成cat了

it’s name is moko

可以往下選擇小孩元素:querySelectorAll()

選CSS的話母親跟小孩中間要加空格

div
 h1 About My 
 span.pet Dog
 hr
 p moko is a beautiful 
 span.pet dog
 br
 | she is my best 
 span.pet dog
 | friend
 br
 | I love my 
 span.pet dog
var pet_els=document.querySelectorAll("p .pet")
//得出一個node list,跟陣列很像
for(var i=0;i<pet_els.length;i++){
 pet_els[i].innerHTML="CAT"
}
Display

About My dog


moko is a beautiful CAT
she is my best CAT friend
I love my CAT

只有内文的dog被換成cat

進階:querySelector() 與 querySelectorAll 的差異

querySelector 只能選取單一元素,以及他的HTML部分而已
querySelectorAll 可以選取複數元素【陣列】,以及該元素所有資訊【nodeList】
※如果想抓到 nodeList 資訊的話,必須使用  querySelectorAll選擇器(不論想抓單一或複數元素)

.text SOME TEXT
var qs=document.querySelector(".text");
console.log(qs); //<div class="text">SOME TEXT</div>
//↑回報字串

var qsa=document.querySelectorAll(".text");
console.log(qsa); //出現複雜的nodeList,一個一個點開來看可以找到很多資訊

//注意:如果想要再網頁中使用 nodeList ,必須先轉換成陣列才可以

中括號:指定屬性

※querySelector、querySelectorAll 都可以使用

p(color="green") title1
p(color="green") title2
p(color="green") title3
p(color="green") title4
p(color="blue") title5
p(color="blue") title6
p(color="blue") title7
p(color="blue") title8
const greens=document.querySelectorAll("p[color='green']");

greens.forEach(green => green.style.color="#5aad6f");

Display

title1

title2

title3

title4

title5

title6

title7

title8

選取HTML屬性(Attribute)

用法一:不指定內容

h1(data-color="red") Red
h1 Blue
h1 Orange
h1 Green
document.querySelector("h1[data-color]") 
//"<h1 data-color='red'>Red</h1>"

如果data-color只有一個的話,querySelector會選到唯一的一個,但若data-color有數個的話,querySelector只會選到第一個

要讓第二個data-color也被選到的話,要使用querySelectorAll,並指定index

h1(data-color="red") Red
h1(data-color="blue") Blue
h1(data-color="orange") Orange
h1(data-color="Green") Green
document.querySelector("h1[data-color]") //"<h1 data-color='red'>Red</h1>"
document.querySelectorAll("h1[data-color]")[1]//"<h1 data-color='blue'>Blue</h1>"

用法二:指定名稱

h1(data-color="red") Red
h1(data-color="blue") Blue
h1(data-color="orange") Orange
h1(data-color="Green") Green
document.querySelector("h1[data-color='red']") //"<h1 data-color='red'>Red</h1>"

Magic Line

參考範例:CSS-TRICK

ul#nav
 li.current ABOUT
 li.2 STORY
 li INFO
 li TICKETS
 //li#line
ul
 position: relative

li
 display: inline-block
 padding: 0px
 margin-right: 10px
 color: #a3a3a3
 transition-duration: 0.5s
 font-size: 26px
 position: relative
 &:hover
  color: #000
//下底線樣式
#line
 position: absolute
 //初始位置(可以去console帶函數算出來)
 left: 40px
 width: 90px
 border-bottom: 3px solid #000
//加入下底線
$("#nav").append("<li id='line'></li>");

//滑鼠觸發
//hover(移進去的動作, 移出後的動作);
$("li").hover(
 //移入
 function() {
 $("#line").stop().animate({
 left: $(this).position().left,
 width: $(this).width()
 })
 },

 //移出
 function() {
 $("#line").stop().animate({
 left: "40px",
 width: "90px"
 })
 }
);

原生版本

var nav = document.querySelector("#nav");
var createLine = document.createElement("li");
createLine.id = "line";

nav.appendChild(createLine);
var now = document.querySelector("#now");
var li = document.querySelectorAll(".li");
for (i = 0; i < li.length; i++) {
 li[i].addEventListener("mouseover",
 function() {
 createLine.style.left = this.offsetLeft + "px";
 createLine.style.width = this.offsetWidth + "px";
 }
 );
 li[i].addEventListener("mouseout",
 function() {
 createLine.style.left = now.offsetLeft + "px";
 createLine.style.width = now.offsetWidth + "px";
 }
 )
}

Display

jQuery動畫:animate()

可以變動CSS長、寬、大小等屬性,做出動畫的效果

animate()結構

.animate({
    "CSS 屬性": "值",
    "CSS 屬性": "值",
    "CSS 屬性": "值"
}, 動畫時間)

範例

#ani click me
#ani
 width: 300px
 height: 100px
 border: 1px solid #000
 text-align: center
 line-height: 75px
 font-size: 20px
 background-color: #90a955
 color: #fff
$("#ani")
 //滑鼠進入
 .mouseover(
  function(){
   //在.animate前面加stop(),滑鼠拿走後不會繼續執行動畫
   $("#ani").stop().animate(
    {
     //"CSS屬性": "值"
     "font-size": "40px"
     //毫秒
    },500)
  //滑鼠移出
  .mouseout(
   function(){
    $("#ani").stop().animate(
     {"font-size": "20px"}
     ,500)
   } 
  );
 })

點擊添加class:toggleClass()

原生JavaScript寫法

功能

點一下添加class,再點一下移除class

.box
.box
 width: 500px
 height: 300px
 border: 1px solid #000
 background-image: url(https://goo.gl/yI3IYK)
 background-size: cover
 cursor: pointer

.img
 background-image: url(https://goo.gl/MvqA8n)
 background-size: cover
$(".box").click(
 function(){
  //toggleClass裡面的class不用加.
  $(this).toggleClass("img");
 }
);

Python 數字

除法

Python 2 的【/】記號表示整數除法,除法結果不會保留小數

>>>3/2
1

Python 3 的除法就可以算出小數了

>>>3/2
1.5

 解決方法:在Python 2 算出小數除法

除數或被除數有小數點(flow)

#除數或被除數有小數點
>>>3.0/2
1.5
#所以這樣做也可以
>>>3/2.0
1.5

使用float函數

#float用在3或是2都可以
>>>float(3)/2
1.5

使用module:future

#future module幫助在Python 2 套用Python 3 的功能
#匯入future後,之後的code就不用擔心除法問題了
>>>from __future__ import division
>>>3/2
1.5

次方

#2的3次方
>>>2**3
8

>>>4**5
1024

#根號4
>>>4**0.5
2

變數

#宣告變數
>>>a=5
>>>a
5

>>>a+a
10

#更新變數
>>>a=10
>>>a
10

#變數的計算
>>>a=a+a
>>>a
20

小數的計算

>>>0.1+0.2-0.3
5.551115123125783e-17

#原因:小數在python存成分數,所以加減為分數加減的接近値
#0.1 代表 1/10
#0.2 代表 1/5
#0.3 代表 1/3

#解決法:round()
>>>round(0.1+0.2-0.3)
0

#解決法:int()格式化
>>>int(0.1+0.2-0.3)
0

 

動畫收合:fadeIn(), slideDown(), fadeToggle(), slideToggle()

fadeIn()  fadeOut()

淡入與淡出

等於加上opacity的動態變化

功能介紹:點開任一PROBLEM後,點選其他PROBLEM會産生

  1. 原ANSWER收合
  2. 新ANSWER展開
撰寫方法:命令系統在每次點擊時執行
  1. 收合所有ANSWER
  2. 展開指定ASNWER
ul
 li
  div.problem PROBLEM A
  div.ans ANSWER A
 li
  div.problem PROBLEM B
  div.ans ANSWER B
 li
  div.problem PROBLEM C
  div.ans ANSWER C
 li
  div.problem PROBLEM D
  div.ans ANSWER D
ul
 display: inline-block  
li
 display: block
 margin: 10px   

.problem
 padding: 10px 15px 10px 15px
 background-color: #90a955
 color: #fff    
.ans
 padding: 15px
 background-color: #ebf9de
 display: none
$("li").click(
 function() {
  //淡出關閉所有answer
  $(".ans").fadeOut();
  //打開指定的answer
  $(this).find(".ans").fadeIn();
 }
);
Display
  • PROBLEM A
    ANSWER A
  • PROBLEM B
    ANSWER B
  • PROBLEM C
    ANSWER C
  • PROBLEM D
    ANSWER D

slideDown()  slideUp()

滑下與滑上

等於加上height的動態變化

//CSS HTML同上
$("li").click(
 function() {
  //滑上關閉所有answer
  $(".ans").slideUp();
  //滑下打開指定的answer
  $(this).find(".ans").slideDown();
 }
);
Display
  • PROBLEM A
    ANSWER A
  • PROBLEM B
    ANSWER B
  • PROBLEM C
    ANSWER C
  • PROBLEM D
    ANSWER D

fadeToggle

淡出的開關

點一下PROBLEM打開,再點一下收起來

//CSS HTML同上
$("li").click(
 function() {
  $(this).find(".ans").fadeToggle();
 }
);
Display
  • PROBLEM A
    ANSWER A
  • PROBLEM B
    ANSWER B
  • PROBLEM C
    ANSWER C
  • PROBLEM D
    ANSWER D

slideToggle

滑出的開關

點一下PROBLEM打開,再點一下收起來

//CSS HTML同上
$("li").click(
 function() {
  $(this).find(".ans").slideToggle();
 }
);

EXCEL函數 vlookup

使用情境

手上有一筆清單及資料庫如下

資料庫

A B
中文 日文
紅色 レッド
藍色 ブルー
綠色 グリーン
黃色 イエロー
黑色 ブラック
白色 ホワイト
棕色 ブラウン
粉紅色 ピンク

資料清單

C
紅色
藍色
棕色

想要資料清單自動比對出日文翻譯,如下

比對後的資料清單

C D
紅色 レッド
藍色 ブルー
棕色 ブラウン

vlookup參數解説

vlookup共有4個値:

=vlookup(①清單一列, ②資料庫多列或一列, ③目標資料的欄數, ④結果回報)
  • vlookup只能比對縱向列資料,如果是橫向欄資料必須使用hlookup比對
  • ①參數:資料清單,也就是【C:C】
    C
    紅色
    藍色
    棕色
  • ②參數:資料庫,可以選取多欄或單欄,這邊選取兩欄,即為【A:B】
    A B
    中文 日文
    紅色 レッド
    藍色 ブルー
    綠色 グリーン
    黃色 イエロー
    黑色 ブラック
    白色 ホワイト
    棕色 ブラウン
    粉紅色 ピンク
  • ③參數:尋找値在②參數的第幾欄中。本例要找的日文在資料庫的第2欄,於是填【2】
  • ④參數:填【0】,代表資料庫找不到的話回傳N/A

所以本例的函數要寫成

=vlookup(C:C, A:B, 2, 0)

算好後按儲存格的右下角小十字,自動填滿整欄
可以得出

C D
紅色 レッド
藍色 ブルー
棕色 ブラウン

補充

  • 結果欄D欄充滿函數,導致檔案變得很大,可以用選擇性貼上【貼上値】,使檔案輕量化
  • vlookup法只能回報單一結果資料,若要回報多重結果,可以參考這篇

物件導向

使用共同物件,做出其他很多的類似物件,簡化物件數

Object Types

聯想:貓咪有不同毛色,品種,但他們都是動物

1  建立基盤:改寫物件為建構子函數constrator function

//物件形式
var winstonTeen = {
    "nickname": "Winsteen",
    "age": 15,
    "x": 100,
    "y": 200
};
var winstonAdult = {
    "nickname": "Mr. Winst-a-lot",
    "age": 30,
    "x": 229,
    "y": 200
};

//建構子形式,改寫上方資料如下
var Winston = function(nickname, age, x, y) {
    this.nickname = nickname;
    this.age = age;
    this.x = x;
    this.y = y;
};

2  建構資料:用new 呼叫建構子函數

//物件形式
/*****************
var winstonTeen = {
    "nickname": "Winsteen",
    "age": 15,
    "x": 20,
    "y": 50
};
var winstonAdult = {
    "nickname": "Mr. Winst-a-lot",
    "age": 30,
    "x": 229,
    "y": 50
};
****************/

//建構子函數
var Winston = function(nickname, age, x, y) {
    this.nickname = nickname;
    this.age = age;
    this.x = x;
    this.y = y;
};

//new 呼叫建構子函數
var winstonTeen = new Winston("Winsteen", 15, 100, 200);
var winstonAdult = new Winston("Mr. Winst-a-lot", 30, 229, 200);
//之後可以用WinstonTeen/winstonAdult呼叫物件資料
//Winston.nickname→"Winsteen"

現在物件資料模型建構完成了,但還沒有連接上畫圖函數,所以看不到東西

Object Methods

聯想:貓咪除了會鳴叫還會吃飯

Methods:利用prototype原型,連接建構子與畫圖(或其他)函數,使資料具現化

//建構子←資料屬性
var Winston = function(nickname, age, x, y) {
 this.nickname = nickname;
 this.age = age + "yrs old";
 this.x = x;
 this.y = y;
};

background(255, 255, 255);
//1.1 prototype 連接建構子與畫圖函數←行為
//1.2 裡面的物件資料要用this指定
Winston.prototype.draw = function() {
 // face
 fill(255, 255, 0);
 ellipse(this.x, this.y, 90, 90);
 fill(46, 46, 41);
 // eyes
 ellipse(this.x - 20, this.y - 20, 15, 15);
 ellipse(this.x + 24, this.y - 25, 15, 15);
 fill(252, 65, 65);
 // mouth
 ellipse(this.x + 13, this.y + 18, 40, 40);

 //txt
 var txt = this.nickname + ", " + this.age;
 text(txt, this.x - 40, this.y - 60);
};

//3 嘗試接其他函數:talk
Winston.prototype.talk = function() {
 text("I'm Winston!", this.x - 30, this.y + 70);
};

//new 呼叫建構子函數
var winstonTeen = new Winston("Winsteen", 15, 100, 200);
var winstonAdult = new Winston("Mr. Winst-a-lot", 30, 229, 200);

//2 prototype接好後,呼叫draw
winstonTeen.draw();
winstonAdult.draw();

//4 呼叫talk函數
winstonTeen.talk();
winstonAdult.talk();
Display

參考:ProcessingJS呈現在網頁的方法
12345678999999999999999999999999999999999999999

See the Pen OOD by Ian Chen (@ianchen0419) on CodePen.

Object Inheritance

聯想:貓咪會鳴叫,狗狗會吠叫,但他們都是相似動物,一樣會吃飯,睡覺,有年齡。

ood

  1. 建立母親建構子(共同資料屬性)
  2. 母親建構子的Method(共同行為)
  3. 建立小孩1建構子,用call宣告繼承母親的資料屬性
  4. 補足小孩1的獨特資料屬性
  5. create宣告繼承母親的Method行為
  6. 補足小孩1的獨特Method行為
  7. 同3456,建立小孩2建構子
  8. 資料建構完畢,開始印出來
  9. 用new呼叫各小孩自己的建構子
canvas#mycanvas
   /************************
   ****母親區Creature*******
   ************************/
  background(255, 255, 255);
  //1 Creature 共通資料屬性母建構子
  var Creature = function(nickname, age, x, y) {
   this.nickname = nickname;
   this.age = age + "yrs old";
   this.x = x;
   this.y = y;
  };
  //2 Creature Method  母建構子的共通行為
  Creature.prototype.talk = function() {
   text("SUPPP!?!?!?!??!", this.x - 40, this.y + 70);
  };

  /************************
   ****小孩1區Hopper********
   ************************/

  //3 繼承母資料屬性
  var Hopper = function(nickname, age, x, y) {
   //call後面是母資料屬性的資料
   Creature.call(this, nickname, age, x, y);

   //4 省略小孩獨特資料屬性
   //補充:增加小孩獨特資料屬性方法
   //this.cover = cover;
  };
  //5 繼承母行為method
  Hopper.prototype = Object.create(Creature.prototype);

  //6.1 增加小孩獨特行為method
  Hopper.prototype.draw = function() {

   //face
   fill(230, 230, 250);
   ellipse(this.x, this.y, 60, 100);

   //eyes
   fill(0, 0, 0);
   line(this.x + 10, this.y - 25, this.x + 25, this.y - 25);
   line(this.x - 10, this.y - 25, this.x + 5, this.y - 25);

   //month
   fill(252, 65, 65);
   triangle(this.x, this.y + 20, this.x + 10, this.y + 10, this.x + 20, this.y + 20);
   //txt
   fill(0, 0, 139);
   var txt = this.nickname + ", " + this.age;
   text(txt, this.x - 40, this.y - 60);
  };
  //6.2 增加小孩獨特行為2
  Hopper.prototype.hooray = function() {
   text("Hooooray!!!", this.x - 30, this.y + 70);
  };

  /************************
   ****小孩2區Winston********
   ************************/

  //3 繼承母資料屬性
  var Winston = function(nickname, age, x, y) {
   Creature.call(this, nickname, age, x, y);
  };

  //4 省略小孩獨特資料屬性
  //5 繼承母行為method
  Winston.prototype = Object.create(Creature.prototype);

  //6 增加小孩獨特行為method
  Winston.prototype.draw = function() {
   // face
   fill(255, 255, 0);
   ellipse(this.x, this.y, 90, 90);
   // eyes
   fill(46, 46, 41);
   ellipse(this.x - 20, this.y - 20, 15, 15);
   ellipse(this.x + 24, this.y - 25, 15, 15);
   // mouth
   fill(252, 65, 65);
   ellipse(this.x + 13, this.y + 18, 40, 40);
   var txt = this.nickname + ", " + this.age;
   text(txt, this.x - 50, this.y - 60);
  };

  /**********資料建構完畢,下面印出來*************/

  /******呼叫Hopper跟Hopper2.0*********/

  //A 呼叫資料(等於建立小孩的物件資料)
  var lilHopper = new Hopper("Little Hopper", 15, 50, 240);
  var bigHopper = new Hopper("Big Hopper", 30, 50 + 200, 240);
  //B 呼叫行為(實體化)
  bigHopper.draw();
  bigHopper.hooray();
  lilHopper.draw();
  lilHopper.talk();

  /******呼叫Winston跟Winston2.0*********/

  //A 呼叫資料(等於建立小孩的物件資料)
  var winstonTeen = new Winston("Winsteen", 15, 50, 70);
  var winstonAdult = new Winston("Mr. Winst-a-lot", 30, 50 + 200, 70);
  //B 呼叫行為(實體化)
  winstonTeen.draw();
  winstonTeen.talk();
  winstonAdult.draw();
Display

See the Pen OOD2 by Ian Chen (@ianchen0419) on CodePen.

jQuery 收合選單:show(), hide(), toggle()

show()

顯示指定物件,等於在該物件添加display: none屬性

ul
 li
  div.problem PROBLEM A
  div.ans ANSWER A
 li
  div.problem PROBLEM B
  div.ans ANSWER B
 li
  div.problem PROBLEM C
  div.ans ANSWER C
 li
  div.problem PROBLEM D
  div.ans ANSWER D
ul
 display: inline-block  
li
 display: block
 margin: 10px   

.problem
 padding: 10px 15px 10px 15px
 background-color: #90a955
 color: #fff    
.ans
 padding: 15px
 background-color: #ebf9de
 display: none
$("li").click(
 function() {
  //find往下找子元素
  //show顯示指定物件
  $(this).find(".ans").show();
 }
);

hide()

隱藏指定物件,在元素添加display: none屬性

功能介紹:改編上一個範例:點開任一PROBLEM後,點選其他PROBLEM會産生

  1. 原ANSWER收合
  2. 新ANSWER展開

撰寫方法:命令系統在每次點擊時執行

  1. 收合所有ANSWER
  2. 展開指定ASNWER
//HTML與CSS跟上例相同
$("li").click(
 function() {
  //1 hide 收合所有ANSWER
  $(".ans").hide();
  //2 show 顯示指定PROBLEM
  $(this).find(".ans").show();
 }
);

toggle()

像電燈般開闔物件

效果:

  1. 點擊PROBLEM,開啓ANSWER
  2. 再點擊一次該PROBLEM,關閉ANSWER
//HTML與CSS跟上例相同
$("li").click(
 function() {
  //toggle 像電燈般開闔物件
  $(this).find(".ans").toggle();
 }
);