iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 16
0

jQuery是一套跨瀏覽器的JavaScript函式庫,簡化HTML與JavaScript之間的操作。

畫面載入完成後執行
window.onload = function() { 
    alert( "Hello jQuery" ); 
};
立即執行
$( document ).ready(function() {
 
    // Your code here.
 
});

預設避免與其他框架衝突,提供不同方式執行:

  • $():最常用
  • jQuery()
  • window.jQuery()

基本Selectors

<div id="title" class="title-content"></div>
#代表id
$("#title")

.代表class
$(".title-content")

代表全部
$("*")

代表div tag
$("div")

Conbined Selectors

<div id="title" class="title-content"></div>
#代表div的id=title
$("div#title")

.代表div的class是title-content的
$("div.title-content")

代表多個共用
$("div.class,h1,h2")

Hierarchy Selectors階層式選擇器概念跟CSS的一樣

$("table td")
$("tr > td")
$("label + input")

Index Selectors

$("a:first")
$("a:last")
$("a:lt(2)") index<2
$("a:eq(2)") index=2

Visibility Selectors

<div id="title" class="title-content"></div>
$("div:visible")
$("div:hidden")

還有很多Selector方法可以擷取到Client端的任何區塊的資料後,我們就可以拿來做事件的判斷

  • 控制內容 $("div").replaceWith("<div>replace</div>")$().empty();$().remove();$().appendTo();
  • 處理html Attribute $().attr()、 removeAttr()
  • 控制CSS $().css();$().addClass() removeClass() toggleClass()
  • 控制AJAX $.get()$.post()$.ajax()

學習資源

jQuery.org :https://learn.jquery.com/code-organization/concepts/
w3c :http://www.w3schools.com/jquery/


上一篇
Day15_View之JavaScript Basic Concept
下一篇
Day17_Model之EntityFramework-CodeFirst實作
系列文
從Asp.Net MVC5的起跑點認識現代網站30

尚未有邦友留言

立即登入留言