邂逅Javascript

Lesson 8 :  jQuery 入門

Javascript library

<div id="good"></div>
<div class="product"></div>

$("#good").hide();
$(".product").fadeOut();
$(".product").fadeIn(500);
$("#good").html("yaaaa");
$("#good").val("good");
$("#good").addClass("product");
$(".product").fadeOut();
$("#good").removeClass("product");

基本用法

<div id="intro"></div>
<button id="btn">click me</button>


var counter = 0;

//寫法一
$("#btn").click(handler);
var handler = function(){
  $("#intro").html(counter++);
}

//寫法二
$("#btn").click(function(){
  $("#intro").html(counter++);
});

事件處理

範例

<div id="content">
  <button class="btn" value="1">1</button>
  <button class="btn" value="2">2</button>
  <button class="btn" value="3">3</button>
  <button id="clear">clear</button>
  <div id="result"></div>
</div>

$(".btn").click(function(){
  var val = $(this).val();
  $("#result").append(val);
});

$("#clear").click(function(){
  $("#result").empty();
})

http://codepen.io/anon/pen/oXKOKV

範例二

<div id="content">
Hello World.
</div>

<button id="show_me">show</button>
<button id="hide_me">hide</button>

$("#show_me").click(function(){
  $("#content").fadeIn();
});

$("#hide_me").click(function(){
  $("#content").fadeOut(1000);
});

http://codepen.io/anon/pen/YyKqNK

範例三

<ul id="list">
  <li>google</li>
  <li>yahoo</li>
  <li>amazon</li>
  <li>apple</li>
  <li>facebook</li>
  <li>netappstore</li>
</ul>

$("#list li").click(function(){
  if($(this).hasClass("active")){
    $(this).removeClass("active");
  }else{
    $(this).addClass("active");
  }
});

http://codepen.io/anon/pen/bVbwgX

.active{
  background-color:red;
}
li{
  padding: 5px;
}