【JQuery】（1）JQuery基础
JQuery基礎
2019-11-02 21:11:17 by沖沖
1、jQuery簡介
jQuery：輕量級、"寫的少，做的多"、JavaScript函數庫。
2、jQuery功能
- HTML元素選取
- HTML元素操作
- HTMLDOM遍歷和修改
- CSS操作
- HTML事件函數
- JavaScript特效和動畫
- Ajax異步操作
- 提供豐富的插件
3、jQuery版本
目前jQuery有三大版本：
1.x：兼容ie678，使用最為廣泛的，官方只做BUG維護，功能不再新增。因此一般項目來說，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日)。
2.x：不兼容ie678，很少有人使用，官方只做BUG維護，功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)。
3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，一般不會使用3.x版本的，很多老的jQuery插件不支持這個版本。目前該版本是官方主要更新維護的版本。最新版本：3.3.1（2018年1月20日）。
4、jQuery使用
① 官網https://jquery.com/download/下載
② CDN(內容分發網絡)加載
<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 可以確保當用戶向其請求文件時，會從離用戶最近的服務器上返回響應，這樣可以提高加載速度。
5、jQuery版本查看
在瀏覽器的 Console 窗口中輸入 $.fn.jquery 命令，可以查看當前 jQuery 使用的版本。
6、jQuery格式
基礎語法： $(selector).action()。
$(this).hide() //隱藏當前元素
$("p").hide() //隱藏所有 <p> 元素
$("p.test").hide() //隱藏所有 class="test" 的 <p> 元素
$("#test").hide() //隱藏所有 id="test" 的元素
7、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;
8、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") // 獲取選中的選項元素
9、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);
});
10、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
11、立即執行函數
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
12、jQuery Chaining
在相同的元素上運行多條 jQuery 命令，一條接著另一條。作用：瀏覽器不必多次查找相同的元素。
// "p1" 元素首先會變為紅色，然后向上滑動，再然后向下滑動
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
等價于
$("#p1").css("color","red");
$("#p1").slideUp(2000);
$("#p1").slideDown(2000);
總結
以上是生活随笔為你收集整理的【JQuery】（1）JQuery基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 浅述多参数水质分析仪使用注意事项
- 下一篇： The Wall (medium)