04_jQuery

文章目錄

- 一、jQuery介紹
- - 1.1、jQuery概述
  - - 1.2、jQuery特點
    - 1.3 為什么要用jQuery
- 二、引入jQuery
- - 2.1、直接引入
  - 2.2、CDN引入
- 三、jQuery語法
- - 3.1、基本使用
  - 3.2、jQuery事件及常用事件方法
  - 3.3、jQuery選擇器（重點）
  - - 3.3.1、基本選擇器
    - 3.3.2、層次選擇器
    - 3.3.3、表單選擇器
    - 3.3.4、過濾選擇器
    - - 3.3.4.1、基本過濾選擇器
      - 3.3.4.2、可視化過濾選擇器
      - 3.3.4.3、屬性過濾選擇器
  - 3.4、jQuery遍歷
- 四、jQuery DOM（重點）
- - 4.1、設置和獲取HTML、文本值
  - 4.2、節點操作
  - 4.3、屬性操作
  - 4.4、CSS操作
- 五、jQuery效果（了解）
- - 5.1、隱藏和顯示
  - 5.2、淡入淡出

一、jQuery介紹

1.1、jQuery概述

jQuery是一個快速、簡潔的JavaScript代碼庫。jQuery設計的宗旨是“Write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript操作方式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

1.2、jQuery特點

具有獨特的鏈式語法；

支持高效靈活的CSS選擇器；

擁有豐富的插件；

兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1.3 為什么要用jQuery

目前網絡上有大量開源的JavaScript框架，但是jQuery是目前最流行的JavaScript框架，而且提供了大量的擴展。很多大公司都在使用 jQuery，例如：Google、Microsoft、IBM、Netflix。

二、引入jQuery

2.1、直接引入

去jQuery官網(Download jQuery | jQueryopen in new window)下載，放入服務器的合適目錄中，在頁面中直接引用。

<head><!-- 注意這里的script標簽要成對 --><script src="js/jquery-3.4.1.min.js"></script>
</head>

2.2、CDN引入

CDN的全稱是Content Delivery Network，即內容分發網絡，使用戶就近獲取所需內容，降低網絡擁塞，提高用戶訪問響應速度和命中率。

BootCDN是貓云open in new window聯合Bootstrap 中文網open in new window共同支持并維護的前端開源項目免費CDN服務，致力于為Bootstrap、jQuery、React、Vue.js一樣優秀的前端開源項目提供穩定、快速的免費CDN加速服務。

BootCDN

<head><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

三、jQuery語法

3.1、基本使用

$(document).ready(匿名函數)表示頁面加載完畢，執行匿名函數。

$(匿名函數)是$(document).ready(匿名函數)的簡寫。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery Start</title><script src="js/jquery-3.4.1.min.js"></script><script>$(document).ready(function () {console.log("hello jquery");});$(function () {console.log("hello jquery");});</script>
</head>
<body>
</body>
</html>

$(選擇器).action()通過選取HTML元素，并對選取的元素執行某些操作。

選擇器表示查找HTML元素的選擇器，和CSS中的選擇器是通用的；
action()執行對元素的操作。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery Start</title><script src="js/jquery-3.4.1.min.js"></script><script>$(function () {$("#p1").text("...");//修改#p1元素的內容$(".c1").hide();//隱藏class為c1的元素});</script>
</head>
<body><p id="p1">這是一個段落</p><p class="c1">這是另一個段落</p>
</body>
</html>

3.2、jQuery事件及常用事件方法

什么是事件？頁面對不同訪問者的響應叫做事件。

事件處理程序指的是當HTML中發生某些事件時所調用的方法。

常見 DOM 事件：

鼠標事件	鍵盤事件	表單事件	文檔/窗口事件
`click`	`keypress`	`submit`	`load`
`dblclick`	`keydown`	`change`	`resize`
`mouseenter`	`keyup`	`focus`	`scroll`
`mouseleave`		`blur`	`unload`

jQuery 事件方法語法：

在 jQuery 中，大多數 DOM 事件都有一個等效的jQuery方法。

頁面中指定一個點擊事件：

$("p").click();

下一步指定動作觸發后執行的操作

$("p").click(function(){// 動作觸發后執行的代碼!
});

總結：也就是說，不傳參數是點擊，傳參數是設置觸發事件后對應的操作。

3.3、jQuery選擇器（重點）

作用：獲取元素，相當于JavaScript中DOM操作document.getElementXXX()；

JQuery選擇器基于元素的Id、類型、屬性、屬性值等，查找或選擇HTML元素，它基于已經存在的CSS選擇器，除此之外，它還有一些自定義的選擇器。

3.3.1、基本選擇器

ID選擇器

$("#id")，通過id獲取jQuery元素

類選擇器

$(".className")，通過元素的類名來獲取jQuery元素

元素選擇器

$("elementName")，通過元素名來獲取jQuery元素

通配選擇器

$("*")，匹配所有元素

選擇器合并

$("選擇器1,選擇器2,選擇器3, ....")，將每個選擇器匹配到的元素合并到一起返回

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>基本選擇器</title><script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script><script>$(function() {//#btn1  id選擇器//click() 單擊事件$("#btn1").click(function() {//id選擇器//css() css設置$("#p1").css("color", "blue").css("border", "1px solid black").text("hello");//$("#p1").css("border", "1px solid black");});$("#btn2").click(function() {//類選擇器$(".pclass").css("background-color", "cornflowerblue");});$("#btn3").click(function() {//元素選擇器$("p").css("color", "chartreuse");});$("#btn4").click(function() {//通配選擇器$("*").css("background-color", "chocolate");});$("#btn5").click(function() {//選擇器合并$("#p1,h1").css("color", "green");});});</script></head><body><p id="p1">這是段落1</p><p class="pclass">這是段落2</p><p class="pclass">這是段落3</p><p>這是段落4</p><h1>這是一級標題</h1><button id="btn1">id選擇器</button><button id="btn2">類選擇器</button><button id="btn3">元素選擇器</button><button id="btn4">通配選擇器</button><button id="btn5">選擇器合并</button></body>
</html>

3.3.2、層次選擇器

通過DOM元素之間的層次關系來獲取特定元素，后代元素、子元素、相鄰元素和同輩元素等。

$("x y")選取x元素里的所有后代元素y
$("parent>child")選取parent元素下的child子元素
$("prev+next")選取緊接在prev元素后的next元素
$("prev~siblings")選取prev元素之后的所有siblings元素

注意：

$("div span")會選取div里所有的span元素
$("div>span")只會選取div直屬的span子元素

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>層次選擇器</title><script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script><script>$(function() {/*div p 后面所有的子元素div>p 緊挨著的子元素* */$("#btn1").click(function() {//div中所有的p元素$("div p").css("color", "cornflowerblue");});$("#btn2").click(function() {//div下一級的所有p元素$("div>p").css("color", "chartreuse");});$("#btn3").click(function() {//緊接在div后的p元素$("div+p").css("color", "yellow");});$("#btn4").click(function() {//div后面所有的p元素$("div~p").css("color", "yellow");});$("#btn5").click(function() {//div后面所有的元素$("div~*").css("color", "gray");});//$("div").next().css("color", "yellow");//$("div").nextAll().css("color", "yellow");});</script></head><body><div><p>這是段落1</p><span><p>這是段落2</p><span><p>這是段落3</p></span></span><p>這是段落4</p></div><p>這是段落5</p><h5>這是五級標題</h5><p>這是段落6</p><button id="btn1">div中所有的p元素</button><button id="btn2">div中下一級p元素</button><button id="btn3">緊接在div后的p元素</button><button id="btn4">div后面所有的p元素</button><button id="btn5">div后面所有的元素</button></body>
</html>

3.3.3、表單選擇器

為了使用戶能夠更加靈活地操作表單，jQuery中專門加入了表單選擇器。利用表單選擇器，能夠極其方便地獲取到表單的某個或某些類型的元素。

$(":input")查詢所有表單元素，包括：input、textarea、select、button
$(":text")查詢所有``元素
$(":password")查詢所有``元素
$(":radio")查詢所有``元素
$(":checkbox")查詢所有``元素

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表單選擇器</title><script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script><script>$(function() {$("#btn1").click(function() {/*:text 文本框val() 文本框中的內容* */var $txt = $(":text").val();console.log($txt);});$("#btn2").click(function() {/*:password密碼框* */var $pwd = $(":password").val();console.log($pwd);});$("#btn3").click(function() {/*prop() 獲取/設置元素的屬性attr() 獲取/設置元素的屬性javascript setAttribute() getAttribute()：checkbox 多選框* */console.log($(":checkbox").prop("checked"));});$("#btn4").click(function() {/*:radio 單選按鈕* */console.log($(":radio").prop("checked"));});$("#btn5").click(function() {var $txt = $("div>:text").val();console.log($txt);});$(".divclass1").css("color", "yellow");$(".divclass2").css("border", "1px solid black");$(".divclass3").css("background-color", "cadetblue");});</script></head><body>文本框<input type="text" /><br/>密碼框<input type="password" /><br/>多選框<input type="checkbox" /><br/>單選按鈕<input type="radio" /><br/><div>div里面的text<input type="text"/></div><button id="btn1">文本框</button><button	id="btn2">密碼框</button><button	id="btn3">多選框</button><button id="btn4">單選按鈕</button><button id="btn5">div里面的text</button><!-- bootstrap --><div class="divclass1 divclass2 divclass3">1111</div></body>
</html>

3.3.4、過濾選擇器

過濾選擇器主要是通過特定的過濾規則來篩選出所需的DOM元素。

3.3.4.1、基本過濾選擇器

:first $(“p:first”)選取第一個p元素

:last $(“p:last”) 選取最后一個p元素

:even偶數元素 $(“tr:even”) 所有偶數tr元素

:odd奇數元素 $(“tr:odd”) 所有奇數 tr元素

:eq(index) $(“ul li:eq(3)”) 列表中第四個元素(index從0開始)

:gt(no) $(“ul li:gt(3)”)列出index大于3的元素

:lt(no) 小于…元素

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>基本過濾選擇器</title><script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script><style>table, tr, td, th{border: 1px solid black;}table {border-collapse: collapse;width: 500px;text-align: center;}td[colspan]{text-align: left;}</style><script>$(function() {/*基本過濾選擇器:first 第一個元素:last  最后一個元素:even  偶數:eq(index) 第index個元素:gt(index) 大于index的元素:lt(index) 小于index的元素* */$("tr:first,tr:last").css("background-color", "blue");$(".info:even").css("background-color", "cyan");$(".info:odd").css("background-color", "burlywood");$("p:eq(3)").css("color", "yellow");$("p:gt(0)").css("border", "1px solid yellow");$("p:lt(3)").css("border", "1px solid black");});</script></head><body><table><tr><th>姓名</th><th>性別</th><th>年齡</th></tr><tr class="info"><td>zhangsan</td><td>男</td><td>20</td></tr><tr class="info"><td>Tom</td><td>男</td><td>10</td></tr><tr class="info"><td>Lucy</td><td>女</td><td>10</td></tr><tr class="info"><td>Robin</td><td>男</td><td>20</td></tr><tr><td colspan="3">備注：這是一個信息表</td></tr></table><p>這是段落1</p><p>這是段落2</p><p>這是段落3</p><p>這是段落4</p></body>
</html>

3.3.4.2、可視化過濾選擇器

$("div:hidden") 選擇所有的被hidden的div元素

$("div:visible") 選擇所有的可視化的div元素

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>可視化過濾選擇器</title><script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script><script>$(function() {$("#div2").hide();//隱藏//$("#div2").show();//顯示/*:hidden 隱藏的元素:visible 可見的元素 * */$("#btn1").click(function() {$("div:hidden").show();});$("#btn2").click(function() {$("div:visible").hide();});$("div[aaa]").text("*****");});</script></head><body><div id="div1">111111111111111111111111111</div><div id="div2">2222222222222222222222222222</div><button id="btn1">讓隱藏的元素顯示</button><button id="btn2">讓顯示的元素隱藏</button><div aaa="bbb"></div></body>
</html>

調查問卷

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>可視化選擇器</title><style>#input_lang {display: none;}</style><script src="js/jquery-3.4.1.min.js"></script><script>$(function () {$('#ch_other').click(function () {$('#input_lang:hidden').show()})$('.lang').click(function () {$('#input_lang:visible').hide()})})</script>
</head>
<body><div><p>請選擇你心目中最好的編程語言</p><p>Java<input class="lang" type="radio" name="lang" /></p><p>Python<input class="lang" type="radio" name="lang" /></p><p>JavaScript<input class="lang" type="radio" name="lang" /></p><p>PHP<input class="lang" type="radio" name="lang" /></p><p>Kotlin<input class="lang" type="radio" name="lang" /></p><p>其他 <input id="ch_other" type="radio" name="lang" /></p><p id="input_lang"><input type="text" name="input_lang" /></p></div>
</body>
</html>

3.3.4.3、屬性過濾選擇器

$("div[id]") 選擇所有含有id屬性的div元素，$(“div[id]:eq(2)”)

$("input[name='newsletter']") 選擇所有的name屬性等于’newsletter’的input元素

$("input[name!='newsletter']") 選擇所有的name屬性不等于’newsletter’的input元素

$("input[name^='news']") 選擇所有的name屬性以’news’開頭的input元素

$("input[name$='news']") 選擇所有的name屬性以’news’結尾的input元素

$("input[name*='man']") 選擇所有的name屬性包含’man’的input元素

$("input[id][name$='man']") 可以使用多個屬性進行聯合選擇，該選擇器是得到所有的含有id屬性并且name屬性以man結尾的元素

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>屬性過濾選擇器</title><script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script><script>$(function() {//$("p[class]") 選取含有class屬性的p標簽//$("p[class]").css("border", "1px solid black");//$("p[id=p1]") 選擇id屬性為p1的標簽//$("p[id=p1]").css("color", "yellow");//$("p[id!=p1]") 選擇id屬性不等于p1的標簽//$("p[id!=p1]").css("color", "yellow");//$("p[class^=pclass]") 選擇class屬性以pclass開頭的標簽//$("p[class^=pclass]").css("color", "yellow");//$("p[class$=1]") 選擇class屬性以1結尾的標簽//$("p[class$=1]").css("color", "yellow");//$("p[class*=p]") 選擇class屬性包含p的標簽//$("p[class*=p]").css("color", "yellow");		$("p[id][class^=p]").css("color", "yellow");});</script></head><body><p id="p1" class="pclass">這是段落1</p><p class="pclass1">這是段落2</p><p class="pclass2">這是段落3</p><p class="p2">這是段落4</p><p>這是段落5</p></body>
</html>

3.4、jQuery遍歷

查詢到的元素可能不只一個，有時我們需要循環遍歷，這時需要使用each()方法來完成。

each()方法的參數是函數，每次循環都會調用一次這個函數。

在函數內部可以使用$(this)來獲取當前遍歷到的元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>遍歷</title><script src="js/jquery-3.4.1.min.js"></script><script>$(function () {$("p").each(function () {console.log($(this).text());});});</script>
</head>
<body><p>段落1</p><p>段落2</p><p>段落3</p><p>段落4</p><p>段落5</p>
</body>
</html>

next()等價于$("prev + next")，緊接在prev元素后的next元素

nextAll()等價于$("prev～siblings")，prev元素之后的所有siblings元素

siblings()選擇所有同輩節點

children()獲取匹配元素的所有子元素

parent() 獲取匹配元素的父元素

parents()獲取匹配元素的所有父元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>遍歷</title><script src="js/jquery-3.4.1.min.js"></script><script>$(function () {//之后的元素console.log($("#div1").next().text());//之后的所有元素$("#div1").nextAll().each(function () {console.log($(this).text());});//同輩節點$("#p3").siblings().each(function () {$(this).css("color", "#eeaabb");});//所有子節點$("#div1").children().css("border", "1px solid black");});</script>
</head>
<body><div id="div1"><p>段落1</p><p>段落2</p></div><p id="p3">段落3</p><p>段落4</p><p>段落5</p>
</body>
</html>

四、jQuery DOM（重點）

4.1、設置和獲取HTML、文本值

HTML的操作方法

html()：獲取元素的HTML
html(val)：設置元素的HTML

文本內容的操作方法

text()：獲取元素的文本內容
text(txt)：設置元素的文本內容

value的操作方法

val()：獲取元素的value內容
val(val)：設置元素的value內容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登錄</title><style>table {width: 500px;margin: auto;}</style><script src="js/jquery-3.4.1.min.js"></script><script>//非空校驗function checkEmpty(id, infoId, info) {if($(id).val() == '') {$(infoId).text(info);return false;}return true;}//校驗所有function checkAll() {if(checkEmpty("#username", "#usernameInfo", "用戶名不能為空") && checkEmpty("#password", "#passwordInfo", '密碼不能為空')) {return true;}return false;}function clearInfo(infoId) {$(infoId).text("");}$(function () {$("#username").blur(function () {checkEmpty("#username", "#usernameInfo", "用戶名不能為空");}).focus(function () {clearInfo("#usernameInfo");});$("#password").blur(function () {checkEmpty("#password", "#passwordInfo", '密碼不能為空');}).focus(function () {clearInfo("#passwordInfo");});$("#fm").submit(function (e) {if(!checkAll()) {e.preventDefault();}});});</script>
</head>
<body><form id="fm" action="#" method="post"><table><tr><td><label for="username">賬號</label></td><td><input id="username" type="text"/></td><td><span id="usernameInfo"></span></td></tr><tr><td><label for="password">密碼</label></td><td><input id="password" type="password"/></td><td><span id="passwordInfo"></span></td></tr><tr><td colspan="3" style="text-align: center;"><button type="submit">登錄</button></td></tr></table></form>
</body>
</html>

4.2、節點操作

創建節點

$(html)，該方法會根據傳入的html字符串返回一個DOM對象

插入節點
append()向每個匹配的元素內部追加內容
appendTo()
將所有匹配的元素追加到指定的元素中

使用該方法是顛倒了常規的$(A).append(B)的操作，即不是將B追加到A中，而是將A追加到B中
prepend()每個匹配的元素內部前置內容
prependTo()
將所有匹配的元素前置到指定的元素中

使用該方法是顛倒了常規的$(A).prepend(B)的操作，即不是將B前置到A中，而是將A前置到B中
after()在每個匹配的元素之后插入內容
insertAfter()
將所有匹配的元素插入到指定元素的后面

使用該方法是顛倒了常規的$(A).after(B)的操作，即不是將B插入到A后面，而是將A插入到B后面
before()在每個匹配元素之前插入內容
insertBefore()
將所有匹配的元素插入到指定的元素的前面

使用該方法是顛倒了常規的$(A).before(B)的操作，即不是將B插入到A前面，而是將A插入到B前面
查找結點

通過選擇器查找

刪除節點
remove()
從DOM中刪除所有匹配的元素

當某個節點用remove()方法刪除后，該節點所包含的所有后代節點將同時被刪除
empty()該方法不刪除節點，而是清空節點，它能清空元素中的所有后代節點

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>元素操作</title><script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script><style>#main {margin: 0 auto;/*設置整個盒子居中,一定要設置寬度*/width: 500px;}p {text-align: center;/*設置段落中的內容居中*/}table {width: 500px;border-collapse: collapse;/*去除邊框中間的空白區域*/}table, tr, td {border: 1px solid black;}</style><script>/*$(html) 創建表示html的節點append() 在元素內部追加* */function addItem() {//獲取tablevar $tb = $("#tb1");//獲取表示行的節點var $line = $("<tr></tr>");//創建存放姓名的單元格var $tdName = $("<td></td>");//獲取表單中的姓名var $txtName = $("#username").val();//設置單元格的內容$tdName.text($txtName);//創建存放年齡的單元格var $tdAge = $("<td></td>");//獲取表單中的年齡var $txtAge = $("#age").val();//設置單元格的內容$tdAge.text($txtAge);//創建存放電話的單元格var $tdTel = $("<td></td>");//獲取表單中的電話var $txtTel = $("#tel").val();//設置單元格的內容$tdTel.text($txtTel);//創建存放刪除按鈕的單元格var $tdDel = $("<td></td>");//創建按鈕var $btnDel = $("<button>刪除</button>");$btnDel.prop("type", "button");//為刪除按鈕設置單擊事件,刪除按鈕所在行$btnDel.click(function() {$(this).parent().parent().remove();});//將按鈕放入單元格中$tdDel.append($btnDel);//在行中追加元素$line.append($tdName);$line.append($tdAge);$line.append($tdTel);$line.append($tdDel);//將行追加到table中$tb.append($line);}$(function() {$("#btnAdd").click(function() {addItem();});});</script></head><body><div id="main"><div id="divform"><form><p><label>姓名</label><input type="text" id="username" /></p><p><label>年齡</label><input type="text" id="age" /></p><p><label>電話</label><input type="text" id="tel"/></p><p><button type="button" id="btnAdd">添加</button></p></form></div><hr/><div id="divtable"><table id="tb1"><tr><td>姓名</td><td>年齡</td><td>電話</td><td>操作</td></tr></table></div></div></body>
</html>

另一個案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="js/jquery-3.4.1.min.js"></script><script>$(function () {$("#allToRight").click(function () {$("#selectLeft option").each(function () {$("#selectRight").append($(this));});});$("#allToLeft").click(function () {$("#selectRight option").each(function () {$("#selectLeft").append($(this));});});$("#checkToRight").click(function () {$("#selectLeft option").each(function () {if($(this).prop("selected")) {$("#selectRight").append($(this));}});});$("#checkToLeft").click(function () {$("#selectRight option").each(function () {if($(this).prop("selected")) {$("#selectLeft").append($(this));}});});});</script>
</head>
<body><div id="s1" style="float:left;"><div><select id="selectLeft" multiple="multiple" style="width:100px;height:200px;"><option>Java</option><option>Python</option><option>C++</option><option>C#</option><option>JavaScript</option></select></div><div><button id="checkToRight" type="button">選中添加到右邊</button><br/><button id="allToRight" type="button">全部添加到右邊</button></div></div><div id="s2" style="float: left;"><div><select id="selectRight" multiple="multiple" style="width:100px;height:200px;"><option>Perl</option></select></div><div><button id="checkToLeft" type="button">選中添加到左邊</button><br/><button id="allToLeft" type="button">全部添加到左邊</button></div></div>
</body>
</html>

4.3、屬性操作

attr(name)讀取指定屬性的值

attr(name, value)設置指定屬性的值

removeAttr(name)刪除指定屬性
prop()
如果有相應的屬性，返回指定屬性值
如果沒有相應的屬性，返回值是空字符串
處理元素本來就有的屬性
attr()
如果有相應的屬性，返回指定屬性值
如果沒有相應的屬性，返回值是undefined
處理自定義屬性

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>全選</title><script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script><script>$(function() {$("#btnAll").click(function() {var $hobbys = $(".hobby");$hobbys.each(function() {//$(this)表示當前遍歷到的元素$(this).prop("checked", true);});});$("#btnNo").click(function() {var $hobbys = $(".hobby");$hobbys.each(function() {$(this).prop("checked", false);});});$("#btnOpt").click(function() {var $hobbys = $(".hobby");$hobbys.each(function() {var $state = $(this).prop("checked");$(this).prop("checked", !$state);});});$("#allOrNot").change(function() {var $hobbys = $(".hobby");var $state = $(this).prop("checked");$hobbys.each(function() {$(this).prop("checked", $state);});});});</script></head><body><form><p>你喜歡的運動是?<input id="allOrNot" type="checkbox"/>全選/全不選</p><p><input type="checkbox" class="hobby" />足球<input type="checkbox" class="hobby" />籃球<input type="checkbox" class="hobby" />乒乓球<input type="checkbox" class="hobby" />拳擊</p><p><button type="button" id="btnAll">全選</button><button type="button" id="btnNo">全不選</button><button type="button" id="btnOpt">反選</button><button type="submit">提交</button></p></form></body>
</html>

4.4、CSS操作

css(name)獲取指定名稱的樣式值

css(name,value)設置指定名稱的樣式值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS</title><script src="js/jquery-3.4.1.min.js"></script><script>$(function () {$("#p1").css("text-align", "right");});</script>
</head>
<body><p id="p1">這是一個段落</p>
</body>
</html>

五、jQuery效果（了解）

5.1、隱藏和顯示

hide()隱藏html元素

show()顯示html元素

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="js/jquery-3.4.1.min.js"></script><script>$(function(){$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});});</script>
</head>
<body><p>如果你點擊“隱藏” 按鈕，我將會消失。</p><button id="hide">隱藏</button><button id="show">顯示</button>
</body>
</html>

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可選的speed參數規定隱藏/顯示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可選的callback參數是隱藏或顯示完成后所執行的函數名稱。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="js/jquery-3.4.1.min.js"></script><script>$(document).ready(function(){$("button").click(function(){//$("p").hide(1000);//$("p").hide("slow");//$("p").hide("fast");$("p").hide(1000, function(){alert("Hide() 方法已完成!");});});});</script>
</head>
<body><button>隱藏</button><p>這是個段落，內容比較少。</p><p>這是另外一個小段落</p>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.4.1.min.js"></script>
<script>$(document).ready(function(){$("button").click(function(){$("p").toggle();});});
</script>
</head>
<body><button>隱藏/顯示</button><p>這是一個文本段落。</p><p>這是另外一個文本段落。</p>
</body>
</html>

5.2、淡入淡出

fadeIn()用于淡入已隱藏的元素

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="js/jquery-3.4.1.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000);});});</script>
</head><body><p>以下實例演示了 fadeIn() 使用了不同參數的效果。</p><button>點擊淡入 div 元素。</button><br><br><div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

fadeOut()方法用于淡出可見元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.4.1.min.js"></script>
<script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeOut();$("#div2").fadeOut("slow");$("#div3").fadeOut(3000);});});
</script>
</head><body><p>以下實例演示了 fadeOut() 使用了不同參數的效果。</p><button>點擊淡出 div 元素。</button><br><br><div id="div1" style="width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="js/jquery-3.4.1.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeToggle();$("#div2").fadeToggle("slow");$("#div3").fadeToggle(3000);});});</script>
</head>
<body><p>實例演示了 fadeToggle() 使用了不同的 speed(速度) 參數。</p><button>點擊淡入/淡出</button><br><br><div id="div1" style="width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>