Day24 jQuery 基本教学(四)

CSS 与特效

JQ 的特效主要是协助快速控制 CSS，包含控制了你的 display 做显示或隐藏，或是淡入淡出 opacity 变化等等。另外还有所谓的 animate，帮你做 keyframe 上的 from 到 to 的过渡效果。

接下来讲一下逻辑控制、回圈、函数与物件

逻辑控制

1. (if/eles if/else)

if (number == 5) {
  console.log("number is 5");
} else if (number == 4) {
  console.log("number is 4");
} else if (number == 3) {
  console.log("number is 3");
} else if (number == 2) {
  console.log("number is 2");
} else if (number == 1) {
  console.log("number is 1");
} else {
  console.log("number is not  …

2. switch case

switch (number) {
  case 5:    
    console.log("number is 5 "); 
    break;   
  case 4: 
    console.log("number is 4 "); 
    break;
  case 3: 
    console.log("number is 3 ");
    break;
  case 2: 
    console.log("number is 2 "); 
    break;
  case 1: 
    console.log("number is 1 "); 
    break;
  default:
    console.log("number is not 1 to 5");
}

回圈控制

1. while

var times = 1;          
while (times < 5) {    
  console.log(times);  
  times++;            
}

2. do while

var times = 1;    
do {                   
  console.log(times);   
  times++;             
} while (times < 5)

3. while-Array

var nums = [1, 3, 5, 7, 9];
var i = 0;
while (i < nums.length) {
  console.log(nums[i]);  // 1, 3, 5, 7, 9
  i++;
}

4. For

function print(value, key) { console.log(value); }
var map = new Map();
map.set('name', 'Arch');
map.set('age', 29);
map.set('job', 'Engineer');
map.forEach(print);  
var map = new Map();
map.set("name", "Arch");
map.set("age", "29");
map.set("job", "engineer");
for (let [key, value] of map) {
  console.log(key + " : " + value);}
//console显示 "name : Arch", "age : 29", "job : engineer"

接下来介绍一下这几年的热门插件

• Tilted page scroll
  往下滑动照片的时候可以有3D的特效
• SVGMagic
  让你可以在网页中使用svg向量图
• Owl Carousel
  最简单达成图片轮播的插件
• fullPage
  整页下滑的插件，建立整页浏览的效果
• multiScroll
  整夜浏览 只是滑动效果更炫
• Splitchar
  字体特效
• BootstrapValidator、form validation jQuery plugin
  搭配form建立验证机制
• prettySocial
  实用! 直接建立社群分享button