jquery.pdf

JQuery 基礎篇

使⽤ JQuery <head> <script src="https://ajax.googleapis.com/ajax/libs/ jquery/3.5.1/jquery.min.js"></script> </head>

JQuery 起⼿式 $(function(){ // jQuery methods go here... }); $(this).hide()
- hides the current element. $("p").hide() - hides all <p> elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test".

選擇器 <h2>This is a heading</h2> <p>This is a paragraph.</p> <button>Click
me to hide paragraphs</ button> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); $(“p”) 選擇 p 元素 $(“.class”) 選擇 class $(“#id”) 選擇 id

Hide, Show <button>Hide</button> <p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p> $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000); }); }); $(“p”).hide  $(“p”).show  $(“p”).toggle

事件 <p id="p1">Enter this paragraph.</p> $(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 <button>Hide</button> <p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p> $(document).ready(function(){ $("button").click(function(){ $("p").fadeOut(3000); }); }); $(“p”).fadeIn()  $(“p”).fadeOut()  $(“p”).fadeOut(“slow")  $(“p”).fadeOut(3000)  $(“p”).fadeToggle()

Slide <button>Hide</button> <p>This is a paragraph with little content.</p> <p>This
is another small paragraph.</p> $(document).ready(function(){ $("button").click(function(){ $("p").slideUp(); }); }); $(“p”).slideDown()  $(“p”).slideUp()  $(“p”).slideToggle()

Get <button>Hide</button> <p>This is a paragraph with little content.</p> <p>This
is another small paragraph.</p> $(document).ready(function(){ $("button").click(function(){ alert($(“p”).text()) }); }); $(“p”).text() $(“p”).html() $(“p”).val()

Set <button>Hide</button> <p>This is a paragraph with little content.</p> <p>This
is another small paragraph.</p> $(document).ready(function(){ $("button").click(function(){ $(“p”).text(“Hello”) }); }); $(“p”).text(“Hello”) $(“p”).html(“Hello”) $(“p”).val(“Hello”)

Add <button>Hide</button> <p>This is a paragraph with little content.</p> <p>This
is another small paragraph.</p> $(document).ready(function(){ $("button").click(function(){ $(“p”).append(“Hello”) }); }); $(“p”).append(“Hello”) $(“p”).prepend(“  <p>Hello</p>  ”) $(“p”).before(“Hello”) $(“p”).after(“Hello”)

Remove <button>Hide</button> <p>This is a paragraph with little content.</p> <p>This
is another small paragraph.</p> $(document).ready(function(){ $("button").click(function(){ $(“p”).remove() }); }); $(“p”).remove() $(“p”).empty()

CSS Class <button>Hide</button> <p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p> $(document).ready(function(){ $("button").click(function(){ $(“p”).addClass(“blue”) }); }); $(“p”).addClass(“blue”) $(“p”).removeClass(“blue”)

CSS <button>Hide</button> <p>This is a paragraph with little content.</p> <p>This
is another small paragraph.</p> $(document).ready(function(){ $("button").click(function(){ $(“p”).css(“color”, “blue”) }); }); $(“p”).css(“color”,“blue”)

數字的平⽅函數呢？

Javascript 觸發 <button onclick=“document.getElementById(‘demo’).innerHTML=Date()"> 現在時間 </button> <p id="demo"></p> <button onclick=“alert(‘Hello’)“>
Hello </button>

利⽤ Bootstrap 的 Button ?

Javascript String 函數 <p id="demo"></p> var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var
sln = txt.length; document.getElementById(“demo"). innerHTML = sln 26

Javascript Array <p id="demo"></p> var list = [‘A’, ‘B’, ‘C’]
document.getElementById(“demo"). innerHTML = list[0] ABC

計數器

jquery.pdf

jquery.pdf

darrenyaoyaoyao

More Decks by darrenyaoyaoyao

Other Decks in Programming

Featured

Transcript

JQuery 基礎篇

使⽤ JQuery <head> <script src="https://ajax.googleapis.com/ajax/libs/ jquery/3.5.1/jquery.min.js"></script> </head>

JQuery 起⼿式 $(function(){ // jQuery methods go here... }); $(this).hide()

選擇器 <h2>This is a heading</h2> <p>This is a paragraph.</p> <button>Click

Hide, Show <button>Hide</button> <p>This is a paragraph with little content.</p>

事件 <p id="p1">Enter this paragraph.</p> $(document).ready(function(){ $("#p1").mouseenter(function(){ alert("You entered p1!");

FadeIn, FadeOut <button>Hide</button> <p>This is a paragraph with little content.</p>

Slide <button>Hide</button> <p>This is a paragraph with little content.</p> <p>This

Get <button>Hide</button> <p>This is a paragraph with little content.</p> <p>This

Set <button>Hide</button> <p>This is a paragraph with little content.</p> <p>This

Add <button>Hide</button> <p>This is a paragraph with little content.</p> <p>This

Remove <button>Hide</button> <p>This is a paragraph with little content.</p> <p>This

CSS Class <button>Hide</button> <p>This is a paragraph with little content.</p>

CSS <button>Hide</button> <p>This is a paragraph with little content.</p> <p>This

數字的平⽅函數呢？

Javascript 觸發 <button onclick=“document.getElementById(‘demo’).innerHTML=Date()"> 現在時間 </button> <p id="demo"></p> <button onclick=“alert(‘Hello’)“>

利⽤ Bootstrap 的 Button ?

Javascript String 函數 <p id="demo"></p> var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var

Javascript Array <p id="demo"></p> var list = [‘A’, ‘B’, ‘C’]

計數器