[JavaScript] jQuery 基礎語法和概念(1–1)

1. jQuery程式碼前面需寫 $()，並使用引入方式來撰寫

# index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Hi, everyone.</p>
<p id="test">This is p element of id="test".</p>
<p class="test">This is p element of class="test".</p>
<script>
...
jQuery程式碼放這邊
...
</script>

2. 當DOM加載，並頁面完全呈現時，會發生ready事件。接下來就是將事件寫在之後就緒後發生，並使用函式置入事件中。有三種寫法：

Approach 1：

$(document).ready(function)

Approach 2：

$().ready(function)

Approach 3：

$(function)

接下來就是jQuery重要的概念：選擇器抓取html的DOM元素方法

• jQuery 選擇器

3. 點擊後，隱藏全部<p>elements

$("p").click(function() {
  $("p").hide();
});

4. 點擊後，隱藏id=”test”的element (#id)

$("#test").click(function() {
  $("#test").hide();
});

5. 點擊後，隱藏class=”test”的element (.class)

$(".test").click(function() {
  $(".test").hide();
});

6. 點擊後，隱藏全部的element (*)

$("*").click(function() {
  $("*").hide();
});

7. 點擊後，隱藏全部的href attribute之element ([attribute])

$("*").click(function() {
  $("[href]").hide();
});

8. 所有<input>元素

$(":input")

9. 所有type=”text”的<input>元素

$(":text")

10. 所有type=”password”的<input>元素

$(":password")

11. 所有type=”radio”的<input>元素

$(":radio")

12. 所有type=”checkbox”的<input>元素

$(":checkbox")

13. 所有type=”submit”的<input>元素

$(":submit")

14. 所有type=”reset”的<input>元素

$(":reset")

15. 所有type=”button”的<input>元素

$(":button")

16. 所有type=”image”的<input>元素

$(":image")

17. 所有type=”file”的<input>元素

$(":file")

18. 所有enabled的<input>元素

$(":enabled")

19. 所有disabled的<input>元素

$(":disabled")

20. 所有selected的<input>元素

$(":selected")

21. 所有checked的<input>元素

$(":checked")

如果你覺得文章很棒或有幫助到您，不妨幫我點個拍手吧! 謝謝…