一文教你學會jQuery基礎

一、jQuery語法

基礎語法： $(selector).action()
文檔就緒事件：

$(document).ready(function(){
 
   // 開始寫 jQuery 代碼...
 
});

簡潔寫法（與以上寫法效果相同）

$(function(){
 
   // 開始寫 jQuery 代碼...
 
});

二、jQuery選擇器

元素選擇器：$(“p”)
id選擇器：$("#test")
class選擇器：$(".test")

三、jQuery事件

jQuery 事件方法語法：$(“p”).click();
常用的DOM事件：

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-m9b4M78o-1585022323123)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20200323172747061.png)]$

四、jQuery效果

1. 隱藏/顯示

hide()和show()

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

toggle()：可以使用 toggle() 方法來切換 hide() 和 show() 方法。

$("button").click(function(){
  $("p").toggle();
});

2. 淡入淡出

fadeIn() 方法：fadeIn() 用於淡入已隱藏的元素。

（1）語法：$(selector).fadeIn(speed,callback);

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

fadeOut() 方法：fadeOut() 方法用於淡出可見元素。

（1）語法：$(selector).fadeOut(speed,callback);

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

fadeToggle() 方法：fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。

（1）語法：$(selector).fadeToggle(speed,callback);

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

fadeTo() 方法：fadeTo() 方法允許漸變爲給定的不透明度（值介於 0 與 1 之間）

（1）語法：$(selector).fadeTo(speed,opacity,callback);

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

3. 滑動

slideDown() 方法：slideDown() 方法用於向下滑動元素。

（1）語法：$(selector).slideDown(speed,callback);

$("#flip").click(function(){
  $("#panel").slideDown();
});

slideUp() 方法：slideUp() 方法用於向上滑動元素。

（1）語法：$(selector).slideUp(speed,callback);

$("#flip").click(function(){
  $("#panel").slideUp();
});

slideToggle() 方法：slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。

（1）語法：$(selector).slideToggle(speed,callback);

$("#flip").click(function(){
  $("#panel").slideToggle();
});

4. 動畫

animate() 方法： animate() 方法用於創建自定義動畫。

（1）語法：$(selector).animate({params},speed,callback); 必須使用駝峯標記法書寫所有的屬性名。

$("button").click(function(){
  $("div").animate({left:'250px'});//把 <div> 元素往右邊移動了 250 像素
});

animate() - 操作多個屬性

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

animate() - 使用相對值

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

animate() - 使用預定義的值

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

animate() - 使用隊列功能

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

5. 停止動畫

stop()：stop() 方法用於在動畫或效果完成前對它們進行停止。

（1）語法：$(selector).stop(stopAll,goToEnd);

$("#stop").click(function(){
  $("#panel").stop();
});

6. Callback

Callback 函數在當前動畫 100% 完成之後執行。

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落現在被隱藏了");
  });
});

7. 鏈

鏈接（chaining）技術，允許我們在相同的元素上運行多條 jQuery 命令，一條接着另一條。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

五、jQuery HTML

1. 捕獲

獲得內容：

（1）text() - 設置或返回所選元素的文本內容

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

（2）html() - 設置或返回所選元素的內容

$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

（3）val() - 設置或返回表單字段的值

$("#btn1").click(function(){
  alert("值爲: " + $("#test").val());
});

獲取屬性：

$("button").click(function(){
  alert($("#runoob").attr("href"));
});

2. 設置內容和屬性

text() - 設置或返回所選元素的文本內容

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});

html() - 設置或返回所選元素的內容（包括 HTML 標記）

$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});

val() - 設置或返回表單字段的值

$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

text()、html() 以及 val() 的回調函數

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "舊 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

設置屬性 - attr()

$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

attr() 的回調函數

$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});

3. 添加元素

append() - 在被選元素的結尾插入內容
```
$("p").append("追加文本");
```
prepend() - 在被選元素的開頭插入內容
```
$("p").prepend("在開頭追加文本");
```
after() - 在被選元素之後插入內容
```
$("img").after("在後面添加文本");
```
before() - 在被選元素之前插入內容
```
$("img").before("在前面添加文本");
```

4. 刪除元素

remove() - 刪除被選元素（及其子元素）
```
$("#div1").remove();
```
empty() - 從被選元素中刪除子元素
```
$("#div1").empty();
```

過濾被刪除的元素

$("p").remove(".italic");//刪除 class="italic" 的所有 <p> 元素

5. CSS類

addClass() - 向被選元素添加一個或多個類

.important{
        font-weight:bold;
        font-size:xx-large;
}
.blue{
        color:blue;
}
$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

removeClass() - 從被選元素刪除一個或多個類

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

toggleClass() - 對被選元素進行添加/刪除類的切換操作

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

4. css()方法

返回css屬性

$("p").css("background-color");//返回首個匹配元素的 background-color 值

設置css屬性

$("p").css("background-color","yellow");

設置多個css屬性

$("p").css({"background-color":"yellow","font-size":"200%"});

5. jQuery尺寸

width()：width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。
height() ：height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）。
innerWidth()：innerWidth() 方法返回元素的寬度（包括內邊距）。
innerHeight()：innerHeight() 方法返回元素的高度（包括內邊距）。
outerWidth() ：outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。
outerHeight() ：outerHeight() 方法返回元素的高度（包括內邊距和邊框）。

六、jQuery遍歷

1. 向上遍歷DOM樹

parent()：parent() 方法返回被選元素的直接父元素。

parents()：parents() 方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 ()。

$(document).ready(function(){
  $("span").parents("ul");//返回所有 <span> 元素的所有祖先，並且它是 <ul> 元素
});

parentsUntil() ：parentsUntil() 方法返回介於兩個給定元素之間的所有祖先元素。

2. 向下遍歷DOM樹

children()：children() 方法返回被選元素的所有直接子元素。

$(document).ready(function(){
  $("div").children("p.1");//返回類名爲 "1" 的所有 <p> 元素，並且它們是 <div> 的直接子元素
});

find()：find() 方法返回被選元素的後代元素，一路向下直到最後一個後代。
```
$(document).ready(function(){
  $("div").find("*");//返回 <div> 的所有後代
});
```

3. 在 DOM 樹中水平遍歷

siblings()：siblings() 方法返回被選元素的所有同胞元素。

$(document).ready(function(){
  $("h2").siblings("p");//返回屬於 <h2> 的同胞元素的所有 <p> 元素
});

next() ：next() 方法返回被選元素的下一個同胞元素。
nextAll()：nextAll() 方法返回被選元素的所有跟隨的同胞元素。
nextUntil()：nextUntil() 方法返回介於兩個給定參數之間的所有跟隨的同胞元素。
```
$(document).ready(function(){
  $("h2").nextUntil("h6");
});
```
prev(), prevAll() & prevUntil() 方法：prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素。

4. 過濾

first()：first() 方法返回被選元素的首個元素。
last()：last() 方法返回被選元素的最後一個元素。
eq() ：eq() 方法返回被選元素中帶有指定索引號的元素。
filter()：filter() 方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
```
$(document).ready(function(){
  $("p").filter(".url");//返回帶有類名 "url" 的所有 <p> 元素
});
```
not() ：not() 方法返回不匹配標準的所有元素。not() 方法與 filter() 相反。
```
$(document).ready(function(){
  $("p").not(".url");
});
```

七、AJAX

1. load方法

load()：load() 方法從服務器加載數據，並把返回的數據放入被選元素中。

（1）語法：$(selector).load(URL,data,callback);

$("#div1").load("demo_test.txt");//把文件 "demo_test.txt" 的內容加載到指定的 <div> 元素中

$("#div1").load("demo_test.txt #p1");//把 "demo_test.txt" 文件中 id="p1" 的元素的內容，加載到指定的 <div> 元素中

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部內容加載成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

2. get() 和 post() 方法

$.get() 方法

（1）$.get(URL,callback);

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("數據: " + data + "\n狀態: " + status);
  });
});

（2）$.post(URL,data,callback);

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鳥教程",
        url:"http://www.runoob.com"
    },
    function(data,status){
        alert("數據: \n" + data + "\n狀態: " + status);
    });
});

八、其他

noConflict()方法：如果其他 JavaScript 框架也使用 $ 符號作爲簡寫怎麼辦？noConflict() 方法會釋放對 $ 標識符的控制，這樣其他腳本就可以使用它了。

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

var jq = $.noConflict();//也可以創建自己的簡寫。noConflict() 可返回對 jQuery 的引用，
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});

$.noConflict();
jQuery(document).ready(function($){//可以把 $ 符號作爲變量傳遞給 ready 方法。這樣就可以在函數內使用 $ 符號了 - 而在函數外，依舊不得不使用 "jQuery"
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});

JSONP

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP 實例</title>
    <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
    
    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';
    
    $('#divCustomers').html(html); 
});
</script>
</body>
</html>