JQuery 基礎篇

使⽤ JQuery

JQuery 起⼿式 $(function(){ // jQuery methods go here... }); $(this).hide() - hides the current element. $("p").hide() - hides all

elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test".

選擇器

This is a heading

This is a paragraph.

Click me to hide paragraphs button> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); $(“p”) 選擇 p 元素 $(“.class”) 選擇 class $(“#id”) 選擇 id

Hide, Show Hide

This is a paragraph with little content.

This is another small paragraph.

$(document).ready(function(){ $("button").click(function(){ $("p").hide(1000); }); }); $(“p”).hide
 $(“p”).show
 $(“p”).toggle

事件

Enter this paragraph.

$(document).ready(function(){ $("#p1").mouseenter(function(){ alert("You entered p1!"); }); }); $(“p”).click
 $(“p”).dbclick
 $(“p”).mouseenter
 $(“p”).mouseleave
 $(“p”).mousedown
 $(“p”).mouseup
 $(“p”).hover
 $(“p”).focus
 $(“p”).blur

FadeIn, FadeOut Hide

This is a paragraph with little content.

This is another small paragraph.

$(document).ready(function(){ $("button").click(function(){ $("p").fadeOut(3000); }); }); $(“p”).fadeIn()
 $(“p”).fadeOut()
 $(“p”).fadeOut(“slow")
 $(“p”).fadeOut(3000)
 $(“p”).fadeToggle()

Slide Hide

This is a paragraph with little content.

This is another small paragraph.

$(document).ready(function(){ $("button").click(function(){ $("p").slideUp(); }); }); $(“p”).slideDown()
 $(“p”).slideUp()
 $(“p”).slideToggle()

Get Hide

This is a paragraph with little content.

This is another small paragraph.

$(document).ready(function(){ $("button").click(function(){ alert($(“p”).text()) }); }); $(“p”).text() $(“p”).html() $(“p”).val()

Set Hide

This is a paragraph with little content.

This is another small paragraph.

$(document).ready(function(){ $("button").click(function(){ $(“p”).text(“Hello”) }); }); $(“p”).text(“Hello”) $(“p”).html(“Hello”) $(“p”).val(“Hello”)

Add Hide

This is a paragraph with little content.

This is another small paragraph.

$(document).ready(function(){ $("button").click(function(){ $(“p”).append(“Hello”) }); }); $(“p”).append(“Hello”) $(“p”).prepend(“


Hello


 ”) $(“p”).before(“Hello”) $(“p”).after(“Hello”)

Remove Hide

This is a paragraph with little content.

This is another small paragraph.

$(document).ready(function(){ $("button").click(function(){ $(“p”).remove() }); }); $(“p”).remove() $(“p”).empty()

CSS Class Hide

This is a paragraph with little content.

This is another small paragraph.

$(document).ready(function(){ $("button").click(function(){ $(“p”).addClass(“blue”) }); }); $(“p”).addClass(“blue”) $(“p”).removeClass(“blue”)

CSS Hide

This is a paragraph with little content.

This is another small paragraph.

$(document).ready(function(){ $("button").click(function(){ $(“p”).css(“color”, “blue”) }); }); $(“p”).css(“color”,“blue”)

數字的平⽅函數呢？

Javascript 觸發 現在時間

Hello

利⽤ Bootstrap 的 Button ?

Javascript String 函數

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var sln = txt.length; document.getElementById(“demo"). innerHTML = sln 26

Javascript Array

var list = [‘A’, ‘B’, ‘C’] document.getElementById(“demo"). innerHTML = list[0] ABC

計數器