標籤彙整:jQuery

【Vue.js】ready指令 API串接

説明

用ready串接後台API

範例

API載入純文字

#app
 p {{text}}
const vm=new Vue({
 el: "#app",
 data: {
  text: ""
  },
 ready: function(){
  $.ajax({
   url: "https://awiclass.monoame.com/api/command.php?type=get&name=notifydata",
   success: function(res){
    vm.text=res;
    }
   })
  }
 
})

Display

哈囉!! 這邊是你用AJAX載入的純文字公告!!

API載入JSON

要先轉換成JSON格式,否則會變成純字串

#app
 ul
  li(v-for="item in items") 【{{item.name}}】${{item.price}}
const vm=new Vue({
 el: "#app",
 data: {
  items: []
  },
 ready: function(){
  $.ajax({
   url: "https://awiclass.monoame.com/api/command.php?type=get&name=itemdata",
   success: function(res){
    vm.items=JSON.parse(res); //轉換成JSON格式
    }
   })
 }
 
})

Display

  • 【吹風機】$300
  • 【麥克筆】$9000
  • 【筆記型電腦】$54555
  • 【Iphone 9】$32000
  • 【神奇海螺】$5000
  • 【PSP1007】$2000
  • 【鍵盤】$3500

jQuery AJAX

功能

不刷新頁面也能完成前後端的溝通。

  • HTML + PHP + MySQL :必須刷新頁面
  • HTMP + Ajax + PHP + MySQL:不必刷新頁面

以 Facebook 的按讚功能為例
使用者按讚→資料庫更新讚數→網頁顯示讚數+1

透過 Ajax 的輔助,這一連串的動作都可以不刷新網頁而達成。
使用者不必中斷滑到一半的閱讀體驗。

結構

  • form tag,使用 HTTP Method
  • 引入 jQuery
  • 準備處理資料庫溝通的 php 檔案,跟 HTML 放在同一個資料夾底下
  • 準備好 MySQL 資料表

範例

前端

//HTTP Method
form(method="POST")
 input(type="text" placeholder="email")
 input(type="password" placeholder="password")
 input(type="submit")
 p
const email=document.querySelectorAll("input")[0];
const password=document.querySelectorAll("input")[1];
const submit=document.querySelectorAll("input")[2];
const alert=document.querySelector("p");


submit.addEventListener("click", function(e){
 //clear submit default
 e.preventDefault();
 $.ajax({
 type: "POST",//對應 form 的 method
 url: "insert.php",//指定 php 檔案
 data: {
 //要傳送的值。php超全域變數: js變數
 email: email.value, 
 password: password.value
 },
 //若傳送成功
 success: function(re){
 //若php回應值=="success"
 if(re=="success"){
 alert.textContent="register successful"
 }else{
 alert.textContent="register fail"
 }
 }
 });
})

後端

+----------+------+-----+---------------+
| Field    | Type | Key | Extra         |
+----------+------+-----+---------------+
| ID       | int  | PRI | auto_increment|
| email    | text |     |               |
| password | text |     |               |
+----------+------+-----+---------------+
<?php

mysql_connect("localhost", "root", "");//MySQL連線
mysql_select_db("register");//選擇資料庫

//$_POST['email']與$_POST['password']是ajax定義好的超全域變數
//防止隱碼注入攻擊
$_POST['email']=mysql_escape_string($_POST['email']);
$_POST['password']=mysql_escape_string($_POST['password']);

//帳號與密碼寫入資料庫
$save=mysql_query("INSERT INTO member (email, password) VALUES('$_POST[email]','$_POST[password]')");


if(!$save){
 
 echo "fail";//若寫入失敗回傳fail

}else{
 
 echo "success";//成功則回傳success
}


?>

 

直接在文章編輯器寫CSS,JS的方法

方法

  1. 文章編輯→點選編輯視窗右上角的「文字」標籤
  2. 找到要套用CSS/JS目標元素HTML碼,上方鍵入<style>標籤,將CSS碼貼上去,並且刪除所有空白行與註解
  3. 在目標元素HTML碼下方鍵入<script>標籤,將原生JS碼貼上去,並且刪除所有空白行與註解

jQuery解法

上述方法可以成功執行CSS/原生JS碼的情況,但JS使用到jQuery的情況下,就要用特殊解法

 

wordpress本身就會引jQuery,所以撰寫時可以省去加入src

 

//不用寫這個
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

 

WordPress的文字編輯過濾器會預設編成文章<p>,所以直接使用jQuery在網頁顯示上會變成這種情況

 

<p>
 <script>
 //jQuery程式碼
 </script>
</p>
解決:打開佈景主題的編輯器Editor,在functions.php貼上這一段碼,取消文字編輯過濾器,然後我們就可以得到正常的 script tag

 

/*Toggle wpautop*/
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
如果佈景主題只找到style.css,表示此佈景為子佈景,修改母佈景的function.php後再套用回原來的子佈景就可以執行!

 

接下來,回到文章,在jQuery外面包一層ready(),變成這樣

 

<script>
jQuery(document).ready(function( $ ){
//jQuery程式碼
});
</script>
刪除 jQuery 程式碼所有空白行,註解,並且確保程式碼簡潔
大功告成!

 

沒有使用外掛寫jQuery的範例

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");
 }
);

動畫收合: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();
 }
);

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();
 }
);

Ajax

説明

使用外部(後台)資料,不用自己建構資料模型。

步驟

  1. 使用ajax串接後台api
  2. 印出資料,success:成功
  3. 將function内資料外接
  4. 之後使用tododata變數,可以在外部編輯這筆資料

範例

div#notify
// 3 將function内資料外接
var tododata;

// 1 使用ajax串接後台api
$.ajax(
 {
  url: "https://goo.gl/PBvlqI",
 // 2 印出資料,success:成功
  success: function(res){
   $("#notify").text(res);
   tododata=res;
  }
 }
);

// 4 之後使用tododata變數,可以在外部編輯這筆資料
Display

(按下載入不安全的代碼後顯示)

應用:JSON與ajax結合

  1. 製作html清單模板
  2. 定義外部api
  3. ajax串接,ajax裡面是物件形式
    • 連接url變數
    • 成功:傳回參數→結果→外接
    • JSON.parse(文字)→物件結構
  4. 製作迴圈,準備列印資料
    • 迴圈下的api資料
    • 代換變數
    • 載入代換後的新模板
  5. 建立打勾項目
    • 取代class
    • 定義打勾class
.todolist
 h3 我的代辦清單
 hr
 ul#listitem
 //li(class="{{class}}") {{num}}. {{name}} {{date}}
*
font-family: 微軟正黑體
 
body
 padding: 30px

.todolist
 display: inline-block
 padding: 20px
 border: solid 3px
 
 & ul
  padding: 0px

 & li
  list-style: none
  width: 300px
  padding: 5px

 .done
  &:before
  content: " ✔ "
  color: red
// 1 製作html清單模板
var html="<li class='{{class}}'>{{num}}.{{name}} {{date}}</li>";
// 2 定義外部api
var api="https://goo.gl/PBvlqI";
// 3.3 定義外接資料
var data;

// 3 ajax串接,ajax裡面是物件形式
$.ajax({
 // 3.1 連接url變數
 url: api,
 // 3.2 成功:傳回參數→結果→外接
 success: function(res){
 // 3.3 JSON.parse(文字)→物件結構
 // console.log(JSON.parse(res));
 data=JSON.parse(res);
 
 // 4 製作迴圈,準備列印資料
 for(i=0;i<data.length;i++){
 // 4.1 迴圈下的api資料
 var item=data[i]
 // 5.2 定義打勾class
 // if簡寫(檢査項目==true)?"是的話傳値":"否的話傳値"
 var now_class=(item.done)==true?"done":"";
 
 
 // 4.2 代換變數
 var new_html=
 html.replace("{{num}}",i+1)
 .replace("{{name}}",item.name)
 .replace("{{date}}",item.date)
 // 5 建立打勾項目
 // 5.1 取代class
 .replace("{{class}}",now_class);
 
 // 4.3 載入代換後的新模板
 $("#listitem").append(new_html);
 }
 }
});
Display

CODEPEN

購物清單

資料模型製作、存取與修改

步驟

  1. 開始建構資料模型
    定義一個陣列
  2. 陣列裡面要有物件,開始編號
  3. 定義資料清單html模板:項目與總價
    • 將内部”取代成’
    • 清除換行空格
    • 將變動資料抽換成取代定義符號
  4. 製作迴圈,跑出item_html模板
  5. 建立一個取代變數,將html模板的取代資訊用2的資料代掉(re_item_html)
    • 取代數字
    • 取代名稱(定義變數item=list[i],呼叫陣列list裡面的物件name)
    • 取代價格
  6. 定義渲染函數showlist
  7. 先執行一次showlist
  8. 製作功能
    建立新增按鈕功能

    • 新增輸入的資料,push,裡面用{}代表一連串動作
    • 用val接收input資料
    • 重新執行一次showlist
  9. 建立刪除按鈕功能:選取刪除按鈕
    • 製作每個刪除按鈕的id:取代用符號{{del}}
    • 將{{del}}取代成自定義編號del_i
    • 刪除按鈕自定義編號
    • 選取刪除用定義編號
  10. 建立移除功能
    • 建立移除函數,鎖定移除値id(id是一個數字)
    • splice(陣列中第幾筆資料,之中的第幾個)
    • 抓取刪除用的id,新增取代用屬性{{item_del}}
    • 將{{item_id}}取代為序數
    • 定義id為序數
    • remove(id),id為陣列中第幾項資料,所以是數字
    • parseInt,將資料轉換為數字
    • 抓取刪除按鈕裡面的屬性(再透過上面replace轉化id値)
  11. 合計欄位
    • 先執行出html模板
    • 宣告變數 var re_total_html取代{{tot}}
    • 定義變數total_price
    • 製作total_price加總的動作
    • 使用parseInt定義内部項目為數字

範例

#buylist
 h1 My Buylist 購物清單
 .item.control_panel
  label 商品名
  input#input_name(placeholder="名稱...")
  label 價錢
  input#input_price(placeholder="100")
  span.add +新增
 #list
  //- li.item 1.吹風機
  //- .price 100
  //- .del ×
  //- li.item 2.吹風機
  //- .price 100
  //- .del ×
  //- li.item 3.吹風機
  //- .price 100
  //- .del ×
  //- li.item 4.吹風機
  //- .price 100
  //- .del ×
  //- li.item 5.吹風機
  //- .price 100
  //- .del ×
  //- li.item.total 合計
  //- .price 100
$black: #444
$yellow: #ffc954
$red: #ff3d4a
$white: #f3f3f3

*
 // border: 1px solid $black
 position: relative
 font-family: 'Noto Sans TC'
 font-weight: 400
 transition-duration: 0.5s

html,body
 width: 100%
 height: 100%
 margin: 0
 display: flex
 justify-content: center
 align-items: center
 background-color: $yellow

#buylist
 position: absolute
 padding: 20px
 border: 4px solid $black
 background-color: $white
 box-shadow: 0px 0px 30px rgba(0,0,0,0.2)

 h1
 padding: 20px
 margin-top: -20px
 margin-left: -20px
 margin-right: -20px
 border-bottom: 4px solid $black
 background-color: $red
 color: $white

#list
 padding: 5px
 margin-top: 10px

.item
 padding: 5px
 list-style: none
 border: 3px solid $black
 margin-top: 10px
 font-weight: 400

 input
 width: 100px
 border: 3px solid $black
 padding: 2px

 .price
 display: inline-block
 position: absolute
 padding-left: 8px
 padding-right: 8px
 right: 50px
 background-color: $yellow

 &:before
 content: "$ "

 .del
 display: inline-block
 position: absolute
 // 上下0,左右6
 padding: 0px 6px
 right: 10px
 cursor: pointer
 &:hover
 background-color: $red
 color: #fff

 .add
 cursor: pointer
 margin-left: 10px
 padding: 5px
 border: 3px solid $black

 &:hover
 background-color: $red
 color: #fff

.control_panel
 padding: 20px


.total
 background-color: $red
 color: $white
 font-weight: 400
 .price
 background-color: transparent
var list = [];

// 2 陣列裡面要有物件,開始編號
list = [
 {name: "吹風機",
 price: 300}, 
 {name: "麥克筆",
 price: 9000}, 
 {name: "筆記型電腦",
 price: 54555}, 
 {name: "iPhone 9",
 price: 32000}, 
 {name: "神奇海螺",
 price: 5000}, 
];

// 3 定義資料清單html模板:項目與總價
// 3.1 將内部"取代成'
// 3.2 清除換行空格
// 3.3 將變動資料抽換成取代定義符號

// 9.1 製作每個刪除按鈕的id:取代用符號{{del}}
// 10.3 抓取刪除用的id,新增取代用屬性{{item_del}}

var item_html="<li class='item' >{{num}}.{{name}}<div class='price'>{{price}}</div><div class='del' id={{del}} data-del={{item_del}}>×</div></li>";

var total_html="<li class='item total'>合計<div class='price'>{{tot}}</div></li>";

// 6 定義渲染函數showlist
function showlist() {

 // 8.4 每次執行:全部清空後執行
 $("#list").html("");

 // 11.3 定義變數total_price
 var total_price = 0;

 // 4 製作迴圈,跑出item_html模板
 for(var i=0; i<list.length; i++) {

 // 5 建立一個取代變數,將html模板的取代資訊用2的資料代掉(re_item_html)
 var item = list[i];
 // 9.3 刪除按鈕自定義編號
 var del_i = "del_" + i;
 // 10.5 定義id為序數
 var id = i;

 // 11.4 製作total_price加總的動作
 // 11.5 使用parseInt定義内部項目為數字
 total_price += parseInt(item.price);

 var re_item_html =
 // 5.1 取代數字
 item_html.replace("{{num}}", i + 1)
 // 5.2 取代名稱(定義變數item=list[i],呼叫陣列list裡面的物件name)
 .replace("{{name}}", item.name)
 // 5.3 取代價格
 .replace("{{price}}", item.price)
 // 9.2 將{{del}}取代成自定義編號del_i
 .replace("{{del}}", del_i)
 // 10.4 將{{item_id}}取代為序數
 .replace("{{item_del}}", id);

 $("#list").append(re_item_html);

 // 9 建立刪除按鈕功能,選取刪除按鈕
 // 9.4 選取刪除用定義編號
 $("#" + del_i).click(
 function() {
 // 10.6 remove(id),id為陣列中第幾項資料,所以是數字
 // 10.7 parseInt,將資料轉換為數字
 // 10.8 抓取刪除按鈕裡面的屬性(再透過上面replace轉化id値)
 remove(parseInt($(this).attr("data-del")));
 }
 );

 }
 // 11 合計欄位

 //11.2 宣告變數 var re_total_html取代{{tot}}
 var re_total_html = total_html.replace("{{tot}}", total_price);

 // 11.1 先執行出html模板
 $("#list").append(re_total_html);
}

// 7 先執行一次showlist
showlist();

// 7**:資料建構完畢,接下來製作功能

// 8 建立新增按鈕功能

$(".add").click(
 function() {

 // 8.1 新增輸入的資料,push,裡面用{}代表一連串動作
 list.push({
 // 8.2 用val接收input資料
 name: $("#input_name").val(),
 price: $("#input_price").val()
 });
 // 8.3 重新執行一次showlist
 showlist();

 }

);

// 10 建立移除功能
// 10.1 建立移除函數,鎖定移除値id(id是一個數字)
// 10.2 splice(陣列中第幾筆資料,之中的第幾個)
function remove(id) {
 list.splice(id, 1);
 showlist();
}
Display

CODEPEN