【JQuery】（1）JQuery基礎

時間 2019-11-18

標籤 JQuery jquery 基礎欄目 JQuery 简体版

原文原文鏈接

JQuery基礎

2019-11-02 21:11:17 by沖沖css

一、jQuery簡介

jQuery：輕量級、"寫的少，作的多"、JavaScript函數庫。html

二、jQuery功能

HTML元素選取
HTML元素操做
HTMLDOM遍歷和修改
CSS操做
HTML事件函數
JavaScript特效和動畫
Ajax異步操做
提供豐富的插件

三、jQuery版本

目前jQuery有三大版本：node

1.x：兼容ie678，使用最爲普遍的，官方只作BUG維護，功能再也不新增。所以通常項目來講，使用1.x版本就能夠了，最終版本：1.12.4 (2016年5月20日)。jquery

2.x：不兼容ie678，不多有人使用，官方只作BUG維護，功能再也不新增。若是不考慮兼容低版本的瀏覽器可使用2.x，最終版本：2.2.4 (2016年5月20日)。瀏覽器

3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，通常不會使用3.x版本的，不少老的jQuery插件不支持這個版本。目前該版本是官方主要更新維護的版本。最新版本：3.3.1（2018年1月20日）。服務器

四、jQuery使用

① 官網https://jquery.com/download/下載網絡

② CDN(內容分發網絡)加載app

<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

目前，在百度、又拍雲、新浪、谷歌和微軟的服務器都存有 jQuery 。若是你的站點用戶是國內的，建議使用百度、又拍雲、新浪等國內CDN地址，若是你站點用戶是國外的可使用谷歌和微軟（國內訪問外網不穩定）。例如：異步

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

CDN優點：CDN 能夠確保當用戶向其請求文件時，會從離用戶最近的服務器上返回響應，這樣能夠提升加載速度。ide

五、jQuery版本查看

在瀏覽器的 Console 窗口中輸入 $.fn.jquery 命令，能夠查看當前 jQuery 使用的版本。

六、jQuery格式

基礎語法： $(selector).action()。

$(this).hide() //隱藏當前元素
$("p").hide() //隱藏全部 <p> 元素
$("p.test").hide() //隱藏全部 class="test" 的 <p> 元素
$("#test").hide() //隱藏全部 id="test" 的元素

七、jQuery入口函數

// 第一種
$(document).ready(function(){
    // 執行代碼
});

// 第二種
$(function(){
    // 執行代碼
});

對比：JavaScript入口函數

window.onload = function () {
    // 執行代碼
}

jQuery 入口函數與 JavaScript 入口函數的區別：

① jQuery 的入口函數是在全部的HTML標籤(DOM)都加載以後，纔會執行。

JavaScript 的 window.onload 事件是等到全部內容，包括外部圖片之類的文件加載完後，纔會執行。

② jQuery 的入口函數能夠執行屢次，第N次都不會將上次的結果覆蓋。

JavaScript 的 window.onload 事件只能執行一次，若是是第二次，就會覆蓋第一次的結果。

<!-- 屢次調用$(document).ready()不會覆蓋前一次 -->
<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> 
    <script src="test1.js"></script>
    <script src="test2.js"></script>
</body> 
</html>
<!-- // test1.js
$(function(){
    $(document.body).append("$(document).ready()1 is now been executed!!!<br/>"); 
});
// -->
<!-- // test2.js
$(function(){
    $(document.body).append("$(document).ready()2 is now been executed!!!<br/>"); 
});
// -->
<!-- // 頁面輸出
$(document).ready()1 is now been executed!!!
$(document).ready()2 is now been executed!!!
// -->

<!-- 屢次調用window.onload，後一次會覆蓋前一次 -->
window.οnlοad=func1;
window.οnlοad=func2;

八、jQuery選擇器

jQuery選擇器用於選取對應的HTML元素，格式是以美圓符號開頭：$()。

jQuery 選擇器基於元素的 id、類、元素類型、屬性、屬性值等查找/選擇HTML元素。

（1）基於已經存在的CSS選擇器

$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
        $("#test").hide();
        $(".test").hide();
    });
});

$("*")                              // 選取全部元素
$(this)                             // 選取當前 HTML 元素
$("p.intro")                        // 選取 class 爲 intro 的 <p> 元素
$("p:first")                        // 選取第一個 <p> 元素
$("ul li:first")                    // 選取第一個 <ul> 元素的第一個 <li> 元素
$("ul li:first-child")              // 選取每一個 <ul> 元素的第一個 <li> 元素
$("[href]")                         // 選取帶有 href 屬性的元素
$("a[target='_blank']")             // 選取全部 target 屬性值等於 "_blank" 的 <a> 元素
$("a[target!='_blank']")            // 選取全部 target 屬性值不等於 "_blank" 的 <a> 元素
$(":button")                        // 選取全部 type="button" 的 <input> 元素 和 <button> 元素
$("button")                         // 選取全部 <button> 元素
$("tr:even")                        // 選取偶數位置的 <tr> 元素
$("tr:odd")                         // 選取奇數位置的 <tr> 元素
$("#id",".class")                   // 複合選擇器
$("div p span")                     // 層級選擇器
$("div>p")                          // 父子選擇器（div裏面全部p元素）
$("div+p")                          // 相鄰元素選擇器（div後面第一個p元素）
$("div~p")                          // 兄弟選擇器（div後面全部p元素，要求是同級別的p元素）
$("div p:eq(2)")                    // 索引選擇器（div裏面第三個p元素，索引從0開始）
$("a[href='www.baidu.com']")        // 屬性選擇器
$("p:contains(test)")               // 內容過濾選擇器，包含text內容的p元素
$(":emtyp")                         // 內容過濾選擇器，全部空標籤（不包含子標籤和內容的標籤）
$(":hidden")                        // 全部隱藏元素 visible 
$("input:enabled")                  // 選取全部啓用的表單元素
$(":disabled")                      // 全部不可用的元素
$("input:checked")                  // 獲取全部選中的複選框單選按鈕等
$("select option:selected")         // 獲取選中的選項元素

九、jQuery事件

（1）用戶動做/行爲 -- 觸發/激發 -- DOM事件/響應 -- 調用事件的方法

// 給p元素指定一個點擊事件
$("p").click();

// 給點擊事件添加實現函數
$("p").click(function(){
    // 動做觸發後執行的代碼
});

（2）DOM事件

① 鼠標事件：click(), dblclick(), mouseenter(), mouseleave(), mousedown(), mouseup(), hover()

② 鍵盤事件：keypress(), keydown(), keyup()

③ 表單事件：submit(), change(), focus(), blur()

④ 文檔/窗口事件：load(), resize(), scroll()

$("document").ready()方法：在HTML元素加載完畢後必須執行的函數。
bind()方法：向某HTML元素綁定事件（舊方法，如今使用on()來綁定事件）

// 給某元素綁定一個事件
$("p").bind("click",function(){
    alert("...");
});

on()方法：向某HTML元素綁定事件。
off()方法：移除全部 <p> 元素上的 click 事件。

// 移除全部 <p> 元素上的 click 事件：
$("button").click(function(){
        $("p").off("click"); 
});

event.preventDefault() 方法：阻止元素髮生默認的行爲。

// 防止連接打開 URL 
$("a").click(function(event){
    event.preventDefault();
});

event.target屬性：返回哪一個 DOM 元素觸發了事件。（能夠判斷事件是否因事件冒泡被處理）

// 返回哪一個 DOM 元素觸發了事件。
$("p, button, h1").click(function(event){
    $("div").html("經過 " + event.target.nodeName + " 元素觸發。");
});

event.type屬性：返回哪一種事件類型被觸發.

// 返回哪一種事件類型被觸發：
$("p").on("click dblclick mouseover mouseout",function(event){
$("div").html("Event: " + event.type);
});

十、jQuery效果

（1）顯示/隱藏 -- hide(), show(), toggle()

// 點擊id=hide的元素，觸發隱藏事件
$("#hide").click(function(){
  $("p").hide();
});
// 點擊id=show的元素，觸發顯示事件
$("#show").click(function(){
  $("p").show();
});
// 第一個參數指定顯示/隱藏的速度（毫秒數），第二個參數指定顯示/隱藏後的回調函數
$("#show").click(function(){
  $("p").show(1000,function(){ alert("show occurred!"); });
});
// toggle()是hide()和show()的結合
$("#hide").click(function(){
  $("p").toggle(1000,function(){
     alert("自己是隱藏，點擊則顯示；自己是顯示，點擊則隱藏"); 
});

① 第二個可選參數callback函數補充：

callback既能夠是函數名，也能夠是匿名函數。若是callback的函數名後加括號，會馬上執行函數體，而不是等到顯示/隱藏完成後才執行。若是匿名函數寫成當即執行函數的形式，也是會當即執行，而不是等到顯示/隱藏完成後才執行。
$(selector)選中的元素的個數爲n個，則callback函數會執行n次。若是此時callback函數是當即執行的形式，那麼就只會執行一次，並且是當即執行，而不是等到顯示/隱藏完成後才執行。若是callback函數不是當即執行函數的形式，就會在顯示/隱藏以後，再執行屢次。

// 在隱藏效果徹底實現後，執行回調函數
$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落如今被隱藏了");
  });
});
// 沒有回調函數，警告框會在隱藏效果完成前彈出
$("button").click(function(){
  $("p").hide(1000);
  alert("段落如今被隱藏了");
});

② hide() 等於 $("selector").css("display","none")

（2）淡入/淡出 -- fadeIn(), fadeOut(), fadeToggle(), fadeTo()

$("button").click(function(){
  // 淡入已隱藏的元素
  $("#div1").fadeIn();
  $("#div2").fadeIn(1000);
  $("#div3").fadeIn("slow",function(){alert("slow fade in");});
  // 淡出已顯示的元素
  $("#div2").fadeOut();
  // 在fadeIn()與fadeOut()方法之間進行切換：若是元素已淡出，則fadeToggle()會向元素添加淡入效果。若是元素已淡入，則fadeToggle()會向元素添加淡出效果。
  $("#div3").fadeToggle();
  // 漸變爲給定的不透明度（值介於 0 與 1 之間）
  $("#div4").fadeTo(1000,0.5);
});

注意：fadeTo()必須帶參數。

（3）滑動 -- slideDown(), slideUp(), slideToggle()

$("button").click(function(){
  // 滑入已隱藏的元素
  $("#div1").slideIn();
  $("#div2").slideIn(1000);
  $("#div3").slideIn("slow",function(){alert("slow fade in");});
  // 滑出已顯示的元素
  $("#div2").slideOut();
  // 在slideIn()與slideOut()方法之間進行切換：若是元素已滑出，則slideToggle()會向元素添加滑入效果。若是元素已滑入，則slideToggle()會向元素添加滑出效果。
  $("#div3").slideToggle();
});

（4）動畫

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

https://www.runoob.com/jquery/jquery-animate.html

（5）中止動畫/效果

stop() 方法用於中止全部 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫，在它們完成以前就中止。

https://www.runoob.com/jquery/jquery-stop.html

十一、當即執行函數

IIFE (Immediately Invoked Function Expression)

// 函數聲明/具名函數
function test(){
  alert("hello");
}
// 函數表達式
var fn = function(){
  alert("hello");
}
// 匿名函數
function(){
  alert("hello");
}

（1）匿名函數轉化爲當即執行函數

兩種常見形式：( function(){…} )() 和 ( function (){…} () )

// 使用()，！，+，-，=等運算符都能起到當即執行的做用
(function(args){ alert(args); })(123);  //輸出123

(function(args){ alert(args); }(123));  //輸出123

!function(args){ alert(args); }(123);   //輸出123

+function(args){ alert(args); }(123);   //輸出123

-function(args){ alert(args); }(123);   //輸出123

var fn = function(args){ alert(args); }(123);  //fn=123

（2）具名函數轉化爲當即執行函數

// 使用()，！，+，-，=等運算符都能起到當即執行的做用
(function test(args){ alert(args); })(123);  //輸出123

(function test(args){ alert(args); }(123));  //輸出123

!function test(args){ alert(args); }(123);   //輸出123

+function test(args){ alert(args); }(123);   //輸出123

-function test(args){ alert(args); }(123);   //輸出123

十二、jQuery Chaining

在相同的元素上運行多條 jQuery 命令，一條接着另外一條。做用：瀏覽器沒必要屢次查找相同的元素。

// "p1" 元素首先會變爲紅色，而後向上滑動，再而後向下滑動
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

等價於

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。