jquery
楔子
需求一：有html標(biāo)簽關(guān)系如下，請找到所有的含有a標(biāo)簽的li標(biāo)簽
<div>
<ul>
<li class="city">北京</li>
<li class="city"><a href="">上海</a></li>
<li class="city">天津</li>
</ul>
</div>
<script>
var objs = document.getElementsByClassName('city')
for(var i=0;i< objs.length;i++){
arry_a = objs[i].getElementsByTagName('a')
if(arry_a.length>0){
console.log(objs[i]
)
}
}
</script>
原生js實(shí)現(xiàn)
$('li').has('a')
jqeury實(shí)現(xiàn)
需求二：將上面的li標(biāo)簽實(shí)現(xiàn)隔行換色效果
var objs = document.getElementsByClassName('city')
for(var i=0;i< objs.length;i++){
if(i%2==0){
objs[i].style.backgroundColor = 'lightblue'
}else{
objs[i].style.backgroundColor = 'lightyellow'
}
}
原生js實(shí)現(xiàn)
$('li:odd').css('background-color','lightblue')
$('li:even').css('background-color','lightyellow')
jquery實(shí)現(xiàn)
需求三：點(diǎn)擊按鈕，顯示頁面中的三個div，并給div添加文本內(nèi)容
<!--樣式-->
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: green;
margin-top: 20px;
display: none;
}
</style>
<span><!--</span><span>body標(biāo)簽</span><span>--></span>
<span><</span><span>button</span><span>></span>操作<span></</span><span>button</span><span>></span>
<span><</span><span>div</span><span>></</span><span>div</span><span>></span>
<span><</span><span>div</span><span>></</span><span>div</span><span>></span>
<span><</span><span>div</span><span>></</span><span>div</span><span>></span></pre>
<script>
var oBtn = document.getElementsByTagName('button')[0];
var divArr = document.getElementsByTagName('div');
oBtn.onclick = function () {
for (var i = 0; i < divArr.length; i++) {
divArr[i].style.display = "block";
divArr[i].innerHTML = "趙云";
}
}
</script>
原生js實(shí)現(xiàn)
<script src="jquery3.4.1.js"></script>
<script>
var oBtn = $('button'); //根據(jù)標(biāo)簽名獲取元素
var oDiv = $('div'); //根據(jù)標(biāo)簽名獲取元素
oBtn.click(function(){
oDiv.show(2000).html('趙云');//顯示盒子，設(shè)置內(nèi)容
})
</script>
jquery實(shí)現(xiàn)
盡管，你現(xiàn)在啥也不知道，你就知道用上了jquery咱們寫代碼節(jié)省了很多操作，便利了很多就OK了～～～
jqeury介紹
為什么要使用jQuery
jQuery 的兩大特點(diǎn)
鏈?zhǔn)骄幊蹋罕热?code>.show()和.html()可以連寫成.show().html()。
隱式迭代：隱式 對應(yīng)的是 顯式。隱式迭代的意思是：在方法的內(nèi)部進(jìn)行循環(huán)遍歷，而不用我們自己再進(jìn)行循環(huán)，簡化我們的操作，方便我們調(diào)用。
什么是 jQuery
jQuery 是 js 的一個庫，封裝了我們開發(fā)過程中常用的一些功能，方便我們調(diào)用，提高開發(fā)效率。
js庫是把我們常用的復(fù)雜功能封裝到簡單的方法中，我們用的時候，將庫直接引入然后調(diào)用方法即可。
初期，主要學(xué)習(xí)如何使用jQuery操作DOM，其實(shí)就是學(xué)習(xí)jQuery封裝好的那些功能API。
這些API的共同特點(diǎn)是：幾乎全都是方法。所以，在使用jQuery的API時，都是方法調(diào)用，也就是說要加小括號()，小括號里面是相應(yīng)的參數(shù)，參數(shù)不同，功能不同。
版本說明
jQuery 有三個大版本：
1.x版本：最新版為 v1.11.3。
2.x版本：最新版為 v2.1.4（不再支持IE6、7、8）。
3.x版本。
jQuery的使用
使用 jQuery 的基本步驟
下載：jQuery有兩個文件，一個是jquery-3.4.1.js(未壓縮版)，一個是jquery-3.4.1.min.js(壓縮版,推薦項(xiàng)目上線時使用)
關(guān)于jQuery的相關(guān)資料：
官網(wǎng)：http://jquery.com/
官網(wǎng)API文檔：http://api.jquery.com/
漢化API文檔：http://www.css88.com/jqapi-1.9/
jquery 在線手冊 ：http://hemin.cn/jq/
注意：導(dǎo)包的代碼一定要放在js代碼的最上面。
jQuery 的入口函數(shù)和$符號
入口函數(shù)（重要）
原生 js 的入口函數(shù)指的是：window.onload = function() {};如下：
//原生 js 的入口函數(shù)。頁面上所有內(nèi)容加載完畢，才執(zhí)行。
//不僅要等文本加載完畢，而且要等圖片也要加載完畢，才執(zhí)行函數(shù)。
window.onload = function () {
alert(1);
}
原聲js入口函數(shù)
jQuery的入口函數(shù)，有以下幾種寫法：
寫法一：文檔加載完畢，圖片不加載的時候，就可以執(zhí)行這個函數(shù)。
$(document).ready(function () {
alert(1);
})
寫法二：文檔加載完畢，圖片不加載的時候，就可以執(zhí)行這個函數(shù)。（寫法一的簡潔版）
$(function () {
alert(1);
});
寫法三：文檔加載完畢，圖片也加載完畢的時候，在執(zhí)行這個函數(shù)。
$(window).ready(function () {
alert(1);
})
jQuery入口函數(shù)與js入口函數(shù)的區(qū)別：
區(qū)別一：書寫個數(shù)不同：
Js 的入口函數(shù)只能出現(xiàn)一次，出現(xiàn)多次會存在事件覆蓋的問題。
jQuery 的入口函數(shù)，可以出現(xiàn)任意多次，并不存在事件覆蓋問題。
區(qū)別二：執(zhí)行時機(jī)不同：
Js的入口函數(shù)是在所有的文件資源加載完成后，才執(zhí)行。這些文件資源包括：頁面文檔、外部的js文件、外部的css文件、圖片等。
jQuery的入口函數(shù)，是在文檔加載完成后，就執(zhí)行。文檔加載完成指的是：DOM樹加載完成后，就可以操作DOM了，不用等到所有的外部資源都加載完成。
文檔加載的順序：從上往下，邊解析邊執(zhí)行。
jQuery的$符號
jQuery 使用$符號原因：書寫簡潔、相對于其他字符與眾不同、容易被記住。
jQuery占用了我們兩個變量：$和 jQuery。當(dāng)我們在代碼中打印它們倆的時候：
<script src="jquery-3.3.1.js"></script>
<script>
console.log($);
console.log(jQuery);
console.log($===jQuery);
</script>
從打印結(jié)果可以看出，$ 代表的就是 jQuery。
js中的DOM對象 和 jQuery對象比較（重點(diǎn)，難點(diǎn)）
二者的區(qū)別
通過 jQuery 獲取的元素是一個jq對象數(shù)組，其中包含著原生JS中的DOM對象。舉例：
針對下面這樣一個div結(jié)構(gòu)：
<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>
通過原生 js 獲取這些元素節(jié)點(diǎn)的方式是：
var myBox = document.getElementById("app"); //通過 id 獲取單個元素
var boxArr = document.getElementsByClassName("box"); //通過 class 獲取的是偽數(shù)組
var divArr = document.getElementsByTagName("div"); //通過標(biāo)簽獲取的是偽數(shù)組
通過 jQuery 獲取這些元素節(jié)點(diǎn)的方式是：（獲取的都是數(shù)組）
//獲取的是數(shù)組，里面包含著原生 JS 中的DOM對象。
console.log($('#app'));
console.log($('.box'));
console.log($('div'));
總結(jié)：jQuery 就是把 DOM 對象重新包裝了一下，讓其具有了 jQuery 方法。
二者的相互轉(zhuǎn)換
1、 DOM 對象 轉(zhuǎn)為 jQuery對象：
$(js對象);
2、jQuery對象 轉(zhuǎn)為 DOM 對象：
jquery對象[index]; //方式1（推薦）
jquery對象.get(index); //方式2
jQuery對象轉(zhuǎn)換成了 DOM 對象之后，可以直接調(diào)用 DOM 提供的一些功能。如：
$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';
jQuery查找標(biāo)簽
選擇器
基本選擇器、層級選擇器、屬性選擇器
今天來學(xué)習(xí)一下jQuery 選擇器。jQuery選擇器是jQuery強(qiáng)大的體現(xiàn)，它提供了一組方法，讓我們更加方便的獲取到頁面中的元素。
基本選擇器
$("#id") //id選擇器
$("tagName") //標(biāo)簽選擇器
$(".className") //class選擇器
$("*") //通用選擇器
$("div.c1") // 交集選擇器 找到有含有c1類的div標(biāo)簽
$("#id, .className, tagName") //并集選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
float: left;
}
</style>
</head>
<body>
<div></div>
<div id="box"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>
<script type="text/javascript" src="jquery3.4.1.js"></script>
<script type="text/javascript">
//入口函數(shù)
$(function(){
//三種方式獲取jquery對象
var jqBox1 = $("#box");
var jqBox2 = $(".box");
var jqBox3 = $('div');
//操作標(biāo)簽選擇器
jqBox3.css('width', '100');
jqBox3.css('height', 100);
jqBox3.css('background-color', 'red');
jqBox3.css('margin-top', 10);
//操作類選擇器(隱式迭代，不用一個一個設(shè)置)
jqBox2.css("background", "green");
jqBox2.text('哈哈哈')
</span><span>//</span><span>操作id選擇器</span>
jqBox1.css("background", "yellow"<span>);
})
</span></script>
</body>
</html>
jquery選擇器示例代碼
效果如下：
層級選擇器
$("x y");// x的所有后代y（子子孫孫）
$("x > y");// x的所有兒子y（兒子）
$("x + y")// 找到所有緊挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
//獲取ul中的li設(shè)置為粉色
//后代：兒孫重孫曾孫玄孫....
var jqLi = $("ul li");
jqLi.css("margin", 5);
jqLi.css("background", "pink");
</span><span>//</span><span>子代：親兒子</span>
<span>var</span> jqOtherLi = $("ul>li"<span>);
jqOtherLi.css(</span>"background", "red"<span>);
});
</span></script>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</ul>
</body>
</html>
示例代碼
效果如下：
屬性選擇器
$('[href]') //找所有含href屬性的標(biāo)簽
$('a[href]') //找所有含href屬性的a標(biāo)簽
$('a[title="luffy"]') //找所有title屬性是luffy的a標(biāo)簽
$('a[title="baidu"]') //找所有title屬性不是百度的a標(biāo)簽
$('a[href^="https"]') //找所有href屬性以https開頭的a標(biāo)簽
$('a[href$="html"]') //找所有href屬性以html結(jié)尾的a標(biāo)簽
$('a[href*="i"]') //找所有href屬性中含有i的a標(biāo)簽
$('a[href][title="luffy"]') //找所有含有href屬性且title屬性=luffy的a標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<h2 class="title">屬性元素器</h2>
<!--<p class="p1">我是一個段落</p>-->
<ul>
<li id="li1">分手應(yīng)該體面</li>
<li class="what" id="li2">分手應(yīng)該體面</li>
<li class="what">分手應(yīng)該體面</li>
<li class="heihei">分手應(yīng)該體面</li>
</ul>
<form action="" method="post">
<input name="username" type='text' value="1" checked="checked" />
<input name="username1111" type='text' value="1" />
<input name="username2222" type='text' value="1" />
<input name="username3333" type='text' value="1" />
<button class="btn-default">按鈕1</button>
<button class="btn-info">按鈕1</button>
<button class="btn-success">按鈕1</button>
<button class="btn-danger">按鈕1</button>
</form>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"><span>
$(</span><span>function</span><span>(){
</span><span>//</span><span>標(biāo)簽名[屬性名] 查找所有含有id屬性的該標(biāo)簽名的元素</span>
$('li[id]').css('color','red'<span>);
</span><span>//</span><span>匹配給定的屬性是what值得元素</span>
$('li[class=what]').css('font-size','30px'<span>);
</span><span>//</span><span>[attr!=value] 匹配所有不含有指定的屬性，或者屬性不等于特定值的元素</span>
$('li[class!=what]').css('font-size','50px'<span>);
</span><span>//</span><span>匹配給定的屬性是以某些值開始的元素</span>
$('input[name^=username]').css('background','gray'<span>);
</span><span>//</span><span>匹配給定的屬性是以某些值結(jié)尾的元素</span>
$('input[name$=222]').css('background','greenyellow'<span>);
</span><span>//</span><span>匹配給定的屬性是以包含某些值的元素</span>
$('button[class*=btn]').css('background','red'<span>)
})
</span></script>
</html>
示例代碼
效果如下：
篩選器
基本篩選器
:first // 第一個
:last // 最后一個
:eq(index)// 索引等于index的那個元素
:even // 匹配所有索引值為偶數(shù)的元素，從 0 開始計(jì)數(shù)
:odd // 匹配所有索引值為奇數(shù)的元素，從 0 開始計(jì)數(shù)
:gt(index)// 匹配所有大于給定索引值的元素
:lt(index)// 匹配所有小于給定索引值的元素
:not(元素選擇器)// 移除所有滿足not條件的標(biāo)簽
:has(元素選擇器)// 根據(jù)含有某個后代篩選
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本過濾選擇器</title>
</head>
<body>
<ul>
<li>哈哈哈哈，基本過濾選擇器</li>
<li>嘿嘿嘿</li>
<li>天王蓋地虎</li>
<li>小雞燉蘑菇</li>
</ul>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript"><span>
$(</span><span>function</span><span>(){
</span><span>//</span><span>獲取第一個 :first ,獲取最后一個 :last</span>
<span>//</span><span>奇數(shù)</span>
$('li:odd').css('color','red'<span>);
</span><span>//</span><span>偶數(shù)</span>
$('li:even').css('color','green'<span>);
</span><span>//</span><span>選中索引值為1的元素 *</span>
$('li:eq(1)').css('font-size','30px'<span>);
</span><span>//</span><span>大于索引值1</span>
$('li:gt(1)').css('font-size','50px'<span>);
</span><span>//</span><span>小于索引值1</span>
$('li:lt(1)').css('font-size','12px'<span>);
})
</span></script>
</html>
示例代碼
效果如下：
表單篩選器
type篩選器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
其他屬性篩選器
:enabled
:disabled
:checked
:selected
篩選器方法
//找兄弟
$("#id").siblings();// 兄弟們，不包含自己，.siblings('#id')，可以在添加選擇器進(jìn)行進(jìn)一步篩選
//找弟弟
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") #直到找到id為i2的標(biāo)簽就結(jié)束查找，不包含它
//找哥哥
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
//找祖輩
$("#id").parent()
$("#id").parents() // 查找當(dāng)前元素的所有的父輩元素（爺爺輩、祖先輩都找到）
$("#id").parentsUntil('body') // 查找當(dāng)前元素的所有的父輩元素，直到遇到匹配的那個元素為止，這里直到body標(biāo)簽，不包含body標(biāo)簽，基本選擇器都可以放到這里面使用。
//找兒子
$("#id").children();// 兒子們
//過濾
$("div").first() // 獲取匹配的第一個元素
$("div").last() // 獲取匹配的最后一個元素
$("div").eq(n) // 索引值等于指定值的元素，n是索引
$("div").not() // 從匹配元素的集合中刪除與指定表達(dá)式匹配的元素
$("div").find("p") //后代選擇器，在所有div標(biāo)簽中找后代的p標(biāo)簽
$("div").filter(".c1") // 交集選擇器，從結(jié)果集中過濾出有c1樣式類的
$("div").has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<p class="p1">
<span>我是第一個span標(biāo)簽</span>
<span>我是第二個span標(biāo)簽</span>
<span>我是第三個span標(biāo)簽</span>
</p>
<button>按鈕</button>
</div>
<ul>
<li class="list">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
<span>//</span><span>獲取第n個元素 數(shù)值從0開始</span>
$('span').eq(1).css('color','#FF0000'<span>);
</span><span>//</span><span>獲取第一個元素 :first :last 點(diǎn)語法 ：get方法 和set方法</span>
$('span').last().css('color','greenyellow'<span>);
$(</span>'span').first().css('color','greenyellow'<span>);
</span><span>//</span><span>查找span標(biāo)簽的父元素（親的）</span>
$('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'<span>});
</span><span>//</span><span>選擇所有的兄弟元素（不包括自己）</span>
$('.list').siblings('li').css('color','red'<span>);
</span><span>//</span><span>查找所有的后代元素</span>
$('div').find('button').css('background','yellow'<span>);
</span><span>//</span><span>不寫參數(shù)代表獲取所有子元素。</span>
$('ul').children().css("background", "green"<span>);
$(</span>'ul').children("li").css("margin-top", 10<span>);
</span></script>
</html>
示例代碼
效果如下：
jQuery綁定事件(更多)
為button按鈕綁定單擊事件，單機(jī)按鈕彈出警告框
$('button').click(
function () {
alert('wahaha')
}
)
jQuery操作標(biāo)簽
標(biāo)簽內(nèi)文本操作
html標(biāo)簽元素中所有的內(nèi)容
//獲取值：獲取選中標(biāo)簽元素中所有的內(nèi)容
$('#box').html();
//設(shè)置值：設(shè)置該元素的所有內(nèi)容 會替換掉 標(biāo)簽中原來的內(nèi)容
$('#box').html('<a );
text標(biāo)簽元素的文本內(nèi)容
//獲取值：獲取選中標(biāo)簽元素中的文本內(nèi)容
$('#box').text();
//設(shè)置值：設(shè)置該所有的文本內(nèi)容
$('#box').text('<a );
注意：text()方法接收的值為標(biāo)簽的時候 不會被渲染為標(biāo)簽元素 只會被當(dāng)做值渲染到瀏覽器中
文檔標(biāo)簽操作
之前js中咱們學(xué)習(xí)了js的DOM操作,也就是所謂的增刪改查DOM操作。通過js的DOM的操作，大家也能發(fā)現(xiàn)，大量的繁瑣代碼實(shí)現(xiàn)我們想要的效果。那么jQuery的文檔操作的API提供了便利的方法供我們操作我們的文檔。
看一個之前我們js操作DOM的例子：
var oUl = document.getElementsByTagName('ul')[0];
var oLi = document.createElement('li');
oLi.innerHTML = '趙云';
oUl.appendChild(oLi);
插入標(biāo)簽
append和appendTo
//追加某元素，在父元素中添加新的子元素。子元素可以為：stirng | element（js對象） | jquery元素
父元素.append(子元素)
//追加到某元素，子元素添加到父元素
子元素.appendTo(父元素)
//append
var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$('ul').append('<li>1233</li>');
$('ul').append(oli);
$('ul').append($('#app'));
//appendTo
$('<li>天王蓋地虎</li>').appendTo($('ul')).addClass('active')
PS:如果追加的jquery對象原本在文檔樹中，那么這些元素將從原位置上消失。簡言之，就是移動操作。
prepend和prependTo
// 前置添加， 添加到父元素的第一個位置
父元素.prepend(子元素)；
// 前置添加， 添加到父元素的第一個位置
子元素.prependTo(父元素)；
// prepand
$('ul').prepend('<li>我是第一個</li>')
// prependTo
$('<a href="#">路飛學(xué)誠</a>').prependTo('ul')
after和insertAfter
// 在匹配的元素之后插入內(nèi)容
兄弟元素.after(要插入的兄弟元素)；
要插入的兄弟元素.inserAfter(兄弟元素)；
$('ul').after('<h4>我是一個h3標(biāo)題</h4>')
$('<h5>我是一個h2標(biāo)題</h5>').insertAfter('ul')
before和insertBefore
// 在匹配的元素之前插入內(nèi)容
兄弟元素.before(要插入的兄弟元素)；
要插入的兄弟元素.inserBefore(兄弟元素)；
//示例
$('ul').before('<h3>我是一個h3標(biāo)題</h3>')
$('<h2>我是一個h2標(biāo)題</h2>').insertBefore('ul')
刪除標(biāo)簽remove、detach和empty
//刪除節(jié)點(diǎn)后，事件也會刪除（簡言之，刪除了整個標(biāo)簽）
$(selector).remove();
// 刪除節(jié)點(diǎn)后，事件會保留
$(selector).detach();
// 清空選中元素中的所有后代節(jié)點(diǎn)
$(selector).empty();
// remove
$('ul').remove();
// detach
var $btn = $('button').detach()
$('ul').append($btn) //此時按鈕能追加到ul中
//empty
$('ul').empty() //清空掉ul中的子元素，保留ul
修改標(biāo)簽replaceWith和replaceAll
// selector被替換：將所有匹配的元素替換成指定的string、js對象、jquery對象。
$(selector).replaceWith(content);
// selector被替換：將所有的匹配的元素替換成p標(biāo)簽。
$('<p>哈哈哈</p>')replaceAll(selector);
// replaceWith
$('h5').replaceWith('<a href="#">hello world</a>') //將所有的h5標(biāo)題替換為a標(biāo)簽
$('h5').replaceWith($('#app')); //將所有h5標(biāo)題標(biāo)簽替換成id為app的dom元素
// replaceAll
$('<br/><hr/><button>按鈕</button>').replaceAll('h4')
克隆標(biāo)簽clone
// 克隆匹配的DOM元素
$(選擇器).clone();
$('button').click(function() {
// 1.clone()：克隆匹配的DOM元素
// 2.clone(true)：元素以及其所有的事件處理并且選中這些克隆的副本(簡言之，副本具有與真身一樣的事件處理能力)
$(this).clone(true).insertAfter(this);
})
屬性操作
attr()設(shè)置屬性值、者獲取屬性值
//獲取值：attr()設(shè)置一個屬性值的時候 只是獲取值
$('div').attr('id')
$('div').attr('class')
//設(shè)置值
$('div').attr('class','box') //設(shè)置一個值
$('div').attr({name:'hahaha',class:'happy'}) //設(shè)置多個值
removeAttr()移除屬性
//刪除單個屬性
$('#box').removeAttr('name');
$('#box').removeAttr('class');
//刪除多個屬性
$('#box').removeAttr('name class');
prop()
// 查看屬性
$(selector).prop(property)
// 設(shè)置屬性
$(selector).prop(property,value)
// 設(shè)置多個屬性
$(selector).prop({property:value, property:value,...})
$('input').attr('checked')
"checked"
$('input').prop('checked')
true
$('input').prop('cheched',false) //設(shè)置取消選中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="all">全選</button>
<button id="reverse">反選</button>
<button id="cancel">取消</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>愛好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>金老板</td>
<td>開車</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>alex</td>
<td>抽煙、喝酒、燙頭</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>苑昊（苑局）</td>
<td>不洗頭、不翻車、不要臉</td>
</tr>
</tbody>
</table>
<script src="jquery3.4.1.js"></script>
<script>
// 點(diǎn)擊全選按鈕 選中所有的checkbox
// DOM綁定事件方法
// $("#all")[0].onclick = function(){}
// jQuery綁定事件方法
$("#all").click(function () {
$(":checkbox").prop('checked', true);
});
// 取消
$("#cancel").on("click", function () {
$(":checkbox").prop('checked', false);
});
// 反選
$("#reverse").click(function () {
// 1. 找到所有選中的checkbox取消選中
// $("input:checked").prop('checked', false);
// // 2. 找到?jīng)]有選中的checkbox選中
// $("input:not(:checked)").prop('checked', true);
//你會發(fā)現(xiàn)上面這么寫，不行，為什么呢？因?yàn)槟阕隽说谝徊讲僮髦螅僮龅诙讲僮鞯臅r候，所有標(biāo)簽就已經(jīng)全部取消選中了，所以第二步就把所有標(biāo)簽選中了
<span>//</span><span> 方法1. for循環(huán)所有的checkbox,挨個判斷原來選中就取消選中，原來沒選中就選中</span>
<span>var</span> $checkbox = $(":checkbox"<span>);
</span><span>for</span> (<span>var</span> i=0;i<$checkbox.length;i++<span>){
</span><span>//</span><span> 獲取原來的選中與否的狀態(tài)</span>
<span>var</span> status = $($checkbox[i]).prop('checked'<span>);
$($checkbox[i]).prop(</span>'checked', !<span>status);
}
</span><span>//</span><span> 方法2. 先用變量把標(biāo)簽原來的狀態(tài)保存下來</span>
<span>//</span><span> var $unchecked = $("input:not(:checked)");</span>
<span>//</span><span> var $checked = $("input:checked");</span>
<span>//
// $unchecked.prop('checked', true);
// $checked.prop('checked', false);
})
</script>
</body>
</html>
表格全選、反選示例
class類屬性
addClass添加類名
// 為每個匹配的元素添加指定的類名。
$('div').addClass("box");//追加一個
$('div').addClass("box box2");//追加多個
removeClass移除類名
// 從所有匹配的元素中刪除全部或者指定的類。
$('div').removeClass('box')；//移除box類
$('div').removeClass();//移除全部的類
var tag = false;
$('span').click(function(){
if(tag){
$('span').removeClass('active')
tag=false;
}else{
$('span').addClass('active')
tag=true;
}
})
通過添加刪除類，來實(shí)現(xiàn)元素的顯示隱藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.active{
color: red;
}
</style>
</head>
<body>
<ul>
<li class="item">張三</li>
<li class="item">李四</li>
<li class="item">王五</li>
</ul>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$(</span>'ul li').click(<span>function</span><span>(){
</span><span>//</span><span> this指的是當(dāng)前點(diǎn)擊的DOM對象 ,使用$(this)轉(zhuǎn)化jquery對象</span>
$(<span>this</span>).addClass('active').siblings('li').removeClass('active'<span>);
})
})
</span></script>
</body>
</html>
實(shí)際示例
toggleClass類的切換
// 如果存在（不存在）就刪除（添加）一個類。
$('div').toggleClass('box')
$('span').click(function(){
//動態(tài)的切換class類名為active
$(this).toggleClass('active')
})
val 表單控件value屬性
// 獲取值：用于表單控件中獲取值，比如input textarea select等等
$(selector).val()
// 設(shè)置值：
$('input').val('設(shè)置了表單控件中的值')；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="">
<input type="radio" name="sex" value="112" />男
<!-- 設(shè)置cheked屬性表示選中當(dāng)前選項(xiàng) -->
<input type="radio" name="sex" value="11" checked="" />女
<input type="radio" name="sex" value="11" />gay
<input type="checkbox" value="a" checked=""/>吃飯
<input type="checkbox" value="b" />睡覺
<input type="checkbox" value="c" checked=""/>打豆豆
<!-- 下拉列表 option標(biāo)簽內(nèi)設(shè)置selected屬性 表示選中當(dāng)前 -->
<select name="timespan" id="timespan" class="Wdate" >
<option value="1">8:00-8:30</option>
<option value="2" selected="">8:30-9:00</option>
<option value="3">9:00-9:30</option>
</select>
<input type="text" name="" id="" value="111" />
</form>
</body>
<script type="text/javascript" src="jquery3.4.1.js"></script>
<script type="text/javascript">
$(</span><span>function</span><span>(){
</span><span>//</span><span> 一、獲取值</span>
<span>//</span><span>1.獲取單選框被選中的value值</span>
console.log($('input[type=radio]:checked'<span>).val())
</span><span>//</span><span>2.復(fù)選框被選中的value,獲取的是第一個被選中的值</span>
console.log($('input[type=checkbox]:checked'<span>).val())
</span><span>//</span><span>3.下拉列表被選中的值</span>
<span>var</span> obj = $("#timespan option:selected"<span>);
</span><span>//</span><span> 獲取被選中的值</span>
<span>var</span> time =<span> obj.val();
console.log(time);
</span><span>//</span><span> 獲取文本</span>
<span>var</span> time_text =<span> obj.text();
console.log(</span>"val:"+time+" text"+<span> time_text );
</span><span>//</span><span>4.獲取文本框的value值</span>
console.log($("input[type=text]").val())<span>//</span><span>獲取文本框中的值</span>
<span>//</span><span> 二.設(shè)置值</span>
<span>//</span><span>1.設(shè)置單選按鈕和多選按鈕被選中項(xiàng)</span>
$('input[type=radio]').val(['112'<span>]);
$(</span>'input[type=checkbox]').val(['a','b'<span>]);
</span><span>//</span><span>2.設(shè)置下拉列表框的選中值，必須使用select</span>
<span>/*</span><span>因?yàn)閛ption只能設(shè)置單個值，當(dāng)給select標(biāo)簽設(shè)置multiple。
那么我們設(shè)置多個值,就沒有辦法了，但是使用select設(shè)置單個值和多個值都可以
</span><span>*/</span><span>
$(</span>'select').val(['3','2'<span>])
</span><span>//</span><span>3.設(shè)置文本框的value值</span>
$('input[type=text]').val('試試就試試'<span>)
})
</span></script>
</html>
示例
css樣式
// css(直接修改css的屬性來修改樣式)
$("div").css('color'); //獲取
$("p").css("color", "red"); //設(shè)置
$("p").css({"color":"red","background-color":"yello"}); // 設(shè)置多個
盒子樣式屬性
內(nèi)容 : 寬度(width)和高度(height)
// 寬度
.width() //獲取寬度 返回匹配元素中第一個元素的寬，一個沒有單位的數(shù)值
.width( value ) //設(shè)置寬度
//高度
.height() //獲取高度 返回匹配元素中第一個元素的高，一個沒有單位的數(shù)值
.height( value ) //設(shè)置高度
內(nèi)容+padding :寬度(innerWidth)和高度(innerHeight)
// 內(nèi)部寬
.innerWidth() // 獲取
.innerWidth(value);//設(shè)置
// 內(nèi)部高
.innerHeight() // 獲取
.innerHeight(value); //設(shè)置
內(nèi)容+padding+border :寬度(outerWidth)和高度(outerHeight)
// 外部寬
.outerWidth() //獲取第一個匹配元素 ：內(nèi)容+padding+border的寬
.outerWidth(true) //獲取第一個匹配元素：內(nèi)容+padding+border+margin的寬
.outerWidth(value) //設(shè)置多個，調(diào)整的是“內(nèi)容”的寬
//外部高
.outerHeight() //第一個匹配元素：獲取內(nèi)容+padding+border的高
.outerHeight(true) //第一個匹配元素：獲取內(nèi)容+padding+border+margin的高
.outerHeight( value ) //設(shè)置多個，調(diào)整的是“內(nèi)容”的高
滾動條距離屬性
// 水平方向
.scrollLeft() //獲取
.scrollLeft( value )//設(shè)置
// 垂直方向
.scrollTop() //獲取
.scrollTop( value ) //設(shè)置
jQuery動畫效果
jQuery提供的一組網(wǎng)頁中常見的動畫效果，這些動畫是標(biāo)準(zhǔn)的、有規(guī)律的效果；同時還提供給我們了自定義動畫的功能。
顯示動畫
方式一：無參數(shù)，表示讓指定的元素直接顯示出來。其實(shí)這個方法的底層就是通過display: block;實(shí)現(xiàn)的。
$("div").show();
方式二：通過控制元素的寬高、透明度、display屬性，逐漸顯示，例如：3秒后顯示完畢。
$('div').show(3000);
方式三：和方式二類似，也是通過控制元素的寬高、透明度、display屬性，逐漸顯示。
$("div").show("slow");
slow 慢：600ms
normal 正常：400ms
fast 快：200ms
參數(shù)說明
方式四：動畫執(zhí)行完后，立即執(zhí)行回調(diào)函數(shù)。
//show(毫秒值，回調(diào)函數(shù);
$("div").show(5000,function () {
alert("動畫執(zhí)行完畢！");
});
總結(jié)：上面的四種方式幾乎一致：參數(shù)可以有兩個，第一個是動畫的執(zhí)行時長，第二個是動畫結(jié)束后執(zhí)行的回調(diào)函數(shù)。
隱藏動畫
方式參照上面的show()方法的方式。如下：
$(selector).hide();
$(selector).hide(1000);
$(selector).hide("slow");
$(selector).hide(1000, function(){});</pre>
練習(xí) ： 實(shí)現(xiàn)點(diǎn)擊按鈕顯示盒子，再點(diǎn)擊按鈕隱藏盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
200px;
height: 200px;
background-color: green;
border: 1px solid red;
display: none;
}
</style>
</head>
<body>
<div id="box">
</div>
<button id="btn">隱藏</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
<span>//</span><span>jquery 提供了一些方法 show() hide() 控制元素顯示隱藏</span>
<span>var</span> isShow = <span>true</span><span>;
$(</span>'#btn').click(<span>function</span><span>(){
</span><span>if</span><span>(isShow){
$(</span>'#box').show('slow',<span>function</span><span>(){
$(</span><span>this</span>).text('盒子出來了'<span>);
$(</span>'#btn').text('顯示'<span>);
isShow </span>= <span>false</span><span>;
})
}</span><span>else</span><span>{
$(</span>'#box').hide(2000,<span>function</span><span>(){
$(</span><span>this</span>).text(''<span>);
$(</span>'#btn').text('隱藏'<span>);
isShow </span>= <span>true</span><span>;
})
}
})
</span></script>
</html>
實(shí)現(xiàn)點(diǎn)擊按鈕顯示盒子，再點(diǎn)擊按鈕隱藏盒子
開關(guān)式顯示隱藏動畫
$('#box').toggle(3000,function(){});
顯示和隱藏的來回切換采用的是toggle()方法：就是先執(zhí)行show()，再執(zhí)行hide()。
代碼如下：
$('#btn').click(function(){
$('#box').toggle(3000,function(){
$(this).text('盒子出來了');
if ($('#btn').text()=='隱藏') {
$('#btn').text('顯示');
}else{
$('#btn').text('隱藏');
}
});
})
滑入和滑出
1、滑入動畫效果：（類似于生活中的卷簾門）:下拉動畫，顯示元素。
$(selector).slideDown(speed, 回調(diào)函數(shù));
注意：省略參數(shù)或者傳入不合法的字符串，那么則使用默認(rèn)值：400毫秒（同樣適用于fadeIn/slideDown/slideUp）
2、滑出動畫效果：上拉動畫，隱藏元素。
$(selector).slideUp(speed, 回調(diào)函數(shù));
3、滑入滑出切換動畫效果：
$(selector).slideToggle(speed, 回調(diào)函數(shù));
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
300px;
height: 300px;
display: none;
background-color: green;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script><span>
$(</span><span>function</span><span> () {
</span><span>//</span><span>點(diǎn)擊按鈕后產(chǎn)生動畫</span>
$("button:eq(0)").click(<span>function</span><span> () {
</span><span>//</span><span>滑入動畫： slideDown(毫秒值，回調(diào)函數(shù)[顯示完畢執(zhí)行什么]);</span>
$("div").slideDown(2000, <span>function</span><span> () {
alert(</span>"動畫執(zhí)行完畢！"<span>);
});
})
</span><span>//</span><span>滑出動畫</span>
$("button:eq(1)").click(<span>function</span><span> () {
</span><span>//</span><span>滑出動畫：slideUp(毫秒值，回調(diào)函數(shù)[顯示完畢后執(zhí)行什么]);</span>
$("div").slideUp(2000, <span>function</span><span> () {
alert(</span>"動畫執(zhí)行完畢！"<span>);
});
})
$(</span>"button:eq(2)").click(<span>function</span><span> () {
</span><span>//</span><span>滑入滑出切換（同樣有四種用法）</span>
$("div").slideToggle(1000<span>);
})
})
</span></script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切換</button>
<div></div>
</body>
</html>
示例
淡入淡出動畫
1、淡入動畫效果：讓元素以淡淡的進(jìn)入視線的方式展示出來。
$(selector).fadeIn(speed, callback);
2、淡出動畫效果：讓元素以漸漸消失的方式隱藏起來
$(selector).fadeOut(1000);
3、淡入淡出切換動畫效果：通過改變透明度，切換匹配元素的顯示或隱藏狀態(tài)。
$(selector).fadeToggle('fast', callback);
參數(shù)的含義同show()方法。
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
300px;
height: 300px;
display: none;
/*透明度*/
opacity: 0.5;
background-color: red;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script><span>
$(</span><span>function</span><span> () {
</span><span>//</span><span>點(diǎn)擊按鈕后產(chǎn)生動畫</span>
$("button:eq(0)").click(<span>function</span><span> () {
// //淡入動畫用法1: fadeIn(); 不加參數(shù)
$("div").fadeIn();
// //淡入動畫用法2: fadeIn(2000); 毫秒值
// $("div").fadeIn(2000);
// //通過控制 透明度和display
<span>//</span><span>淡入動畫用法3: fadeIn(字符串); slow慢：600ms normal正常:400ms fast快：200ms</span><span>
// $("div").fadeIn("slow");
// $("div").fadeIn("fast");
// $("div").fadeIn("normal");
<span>//</span><span>淡入動畫用法4: fadeIn(毫秒值，回調(diào)函數(shù)[顯示完畢執(zhí)行什么]);</span><span>
// $("div").fadeIn(5000,function () {
// alert("動畫執(zhí)行完畢！");
// });
})
</span><span>//</span><span>滑出動畫</span>
$("button:eq(1)").click(<span>function</span><span> () {
// //滑出動畫用法1: fadeOut(); 不加參數(shù)
$("div").fadeOut();
// //滑出動畫用法2: fadeOut(2000); 毫秒值
// $("div").fadeOut(2000); //通過這個方法實(shí)現(xiàn)的：display: none;
// //通過控制 透明度和display
<span>//</span><span>滑出動畫用法3: fadeOut(字符串); slow慢：600ms normal正常:400ms fast快：200ms</span><span>
// $("div").fadeOut("slow");
// $("div").fadeOut("fast");
// $("div").fadeOut("normal");
<span>//</span><span>滑出動畫用法1: fadeOut(毫秒值，回調(diào)函數(shù)[顯示完畢執(zhí)行什么]);</span><span>
// $("div").fadeOut(2000,function () {
// alert("動畫執(zhí)行完畢！");
// });
})
$(</span>"button:eq(2)").click(<span>function</span><span> () {
</span><span>//</span><span>滑入滑出切換</span>
<span>//</span><span>同樣有四種用法</span>
$("div").fadeToggle(1000<span>);
})
$(</span>"button:eq(3)").click(<span>function</span><span> () {
</span><span>//</span><span>改透明度</span>
<span>//</span><span>同樣有四種用法</span>
$("div").fadeTo(1000, 0.5, <span>function</span><span> () {
alert(</span>1<span>);
});
})
})
</span></script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切換</button>
<button>改透明度為0.5</button>
<div></div>
</body>
</html>
示例
自定義動畫
語法：
$(selector).animate({params}, speed, callback);
作用：執(zhí)行一組CSS屬性的自定義動畫。
第一個參數(shù)表示：要執(zhí)行動畫的CSS屬性（必選）
第二個參數(shù)表示：執(zhí)行動畫時長（可選）
第三個參數(shù)表示：動畫執(zhí)行完后，立即執(zhí)行的回調(diào)函數(shù)（可選）
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
left: 20px;
top: 30px;
100px;
height: 100px;
background-color: green;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script>
jQuery(function () {
$("button").click(function () {
var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
var json2 = {
"width": 100,
"height": 100,
"left": 100,
"top": 100,
"border-radius": 100,
"background-color": "red"
};
</span><span>//</span><span>自定義動畫</span>
$("div").animate(json, 1000, <span>function</span><span> () {
$(</span>"div").animate(json2, 1000, <span>function</span><span> () {
alert(</span>"動畫執(zhí)行完畢！"<span>);
});
});
})
})
</span></script>
</head>
<body>
<button>自定義動畫</button>
<div></div>
</body>
</html>
示例
停止動畫
$(selector).stop(true, false);
第一個參數(shù)：
true：后續(xù)動畫不執(zhí)行。
false：后續(xù)動畫會執(zhí)行。
第二個參數(shù)：
true：立即執(zhí)行完成當(dāng)前動畫。
false：立即停止當(dāng)前動畫。
參數(shù)說明
PS：參數(shù)如果都不寫，默認(rèn)兩個都是false。實(shí)際工作中，直接寫stop()用的多。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list</span>-<span>style: none;
}
.wrap {
330px;
height: 30px;
margin: 100px auto </span>0<span>;
padding</span>-<span>left: 10px;
background</span>-<span>color: pink;
}
.wrap li {
background</span>-<span>color: green;
}
.wrap </span>> ul ><span> li {
</span><span>float</span><span>: left;
margin</span>-<span>right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
100px;
text</span>-<span>decoration: none;
color: #</span>000<span>;
line</span>-<span>height: 30px;
text</span>-<span>align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</span></style>
<script src="jquery-3.3.1.js"></script>
<script>
<span>//</span><span>入口函數(shù)</span>
$(document).ready(<span>function</span><span> () {
</span><span>//</span><span>需求：鼠標(biāo)放入一級li中，讓他里面的ul顯示。移開隱藏。</span>
<span>var</span> jqli = $(".wrap>ul>li"<span>);
</span><span>//</span><span>綁定事件</span>
jqli.mouseenter(<span>function</span><span> () {
$(</span><span>this</span>).children("ul").stop().slideDown(1000<span>);
});
</span><span>//</span><span>綁定事件(移開隱藏)</span>
jqli.mouseleave(<span>function</span><span> () {
$(</span><span>this</span>).children("ul").stop().slideUp(1000<span>);
});
});
</span></script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一級菜單1</a>
<ul>
<li><a href="javascript:void(0);">二級菜單2</a></li>
<li><a href="javascript:void(0);">二級菜單3</a></li>
<li><a href="javascript:void(0);">二級菜單4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">二級菜單1</a>
<ul>
<li><a href="javascript:void(0);">二級菜單2</a></li>
<li><a href="javascript:void(0);">二級菜單3</a></li>
<li><a href="javascript:void(0);">二級菜單4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">三級菜單1</a>
<ul>
<li><a href="javascript:void(0);">三級菜單2</a></li>
<li><a href="javascript:void(0);">三級菜單3</a></li>
<li><a href="javascript:void(0);">三級菜單4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
示例：鼠標(biāo)懸停，彈出下拉菜單
上方代碼中，關(guān)鍵的地方在于，用了stop函數(shù)，再執(zhí)行動畫前，先停掉之前的動畫。
jQuery的事件操作
1、綁定事件
bind(type,data,fn)
描述：為每一個匹配元素的特定事件（像click）綁定一個事件處理器函數(shù)。
type (String) : 事件類型
data (Object) : (可選) 作為event.data屬性值傳遞給事件對象的額外數(shù)據(jù)對象
fn ( Function) : 綁定到每個匹配元素的事件上面的處理函數(shù)
參數(shù)說明
示例：當(dāng)每個p標(biāo)簽被點(diǎn)擊的時候，彈出其文本
$("p").bind("click", function(){
alert( $(this).text() );
});
你可以在事件處理之前傳遞一些附加的數(shù)據(jù)。
function handler(event) {
//event.data 可以獲取bind()方法的第二個參數(shù)的數(shù)據(jù)
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
常見事件：
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...}) //內(nèi)容發(fā)生變化，input，select等
keyup(function(){...})
mouseover/mouseout
mouseenter/mouseleave
mouseover事件是如果該標(biāo)簽有子標(biāo)簽，那么移動到該標(biāo)簽或者移動到子標(biāo)簽時會連續(xù)觸發(fā)，mouseenter事件不管有沒有子標(biāo)簽都只觸發(fā)一次，表示鼠標(biāo)進(jìn)入這個對象
通過返回false來取消默認(rèn)的行為并阻止事件起泡。
$("form").bind("submit", function() { return false; })
或通過event.preventDefault() 方法阻止事件起泡
$("form").bind("submit", function(event){
event.stopPropagation();
});
2、解綁事件
unbind(type,fn);
描述：bind()的反向操作，從每一個匹配的元素中刪除綁定的事件。
如果沒有參數(shù)，則刪除所有綁定的事件。
如果把在綁定時傳遞的處理函數(shù)作為第二個參數(shù)，則只有這個特定的事件處理函數(shù)會被刪除。
type (String) : (可選) 事件類型
fn(Function) : (可選) 要從每個匹配元素的事件中反綁定的事件處理函數(shù)
參數(shù)說明
示例：把所有段落的所有事件取消綁定
$("p").unbind()
將段落的click事件取消綁定
$("p").unbind( "click" )
3.補(bǔ)充 一次性事件
one(type,data,fn)
描述：為每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數(shù)。在每個對象上，這個事件處理函數(shù)只會被執(zhí)行一次。其他規(guī)則與bind()函數(shù)相同
type (String) : 事件類型
data (Object) : (可選) 作為event.data屬性值傳遞給事件對象的額外數(shù)據(jù)對象
fn (Function) : 綁定到每個匹配元素的事件上面的處理函數(shù)
參數(shù)說明
示例：當(dāng)所有段落被第一次點(diǎn)擊的時候，顯示所有其文本。
$("p").one("click", function(){
//只有第一次點(diǎn)擊的時候才會觸發(fā)，再次點(diǎn)擊不會觸發(fā)了
alert( $(this).text() );
});
4.事件委托（事件代理）
通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。
舉個列子：有三個同事預(yù)計(jì)會在周一收到快遞。為簽收快遞，有兩種辦法：一是三個人在公司門口等快遞；二是委托給前臺MM代為簽收。現(xiàn)實(shí)當(dāng)中，我們大都采用委托的方案（公司也不會容忍那么多員工站在門口就為了等快遞）。前臺MM收到快遞后，她會判斷收件人是誰，然后按照收件人的要求簽收，甚至代為付款。這種方案還有一個優(yōu)勢，那就是即使公司里來了新員工（不管多少），前臺MM也會在收到寄給新員工的快遞后核實(shí)并代為簽收。
原理：利用冒泡的原理，把事件加到父級上，觸發(fā)執(zhí)行效果。
作用：
1.性能要好
2.針對新創(chuàng)建的元素，直接可以擁有事件
事件源 :
跟this作用一樣(他不用看指向問題，誰操作的就是誰),event對象下的
使用情景：
?為DOM中的很多元素綁定相同事件；
?為DOM中尚不存在的元素綁定事件；
<body>
<ul>
<li class="luffy">路飛</li>
<li>路飛</li>
<li>路飛</li>
</ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
</span><span>//</span><span>通過on()方法</span>
$('ul').on('click','#namei,.luffy',<span>function</span><span>(){
console.log(</span><span>this</span><span>);
})
//未來追加的元素
$('ul').append('<a id="namei">娜美</a>')
}
</script>
示例
語法：在選定的元素上綁定一個或多個事件處理函數(shù)
on(type,selector,data,fn);
events( String) : 一個或多個空格分隔的事件類型
selector( String) : 一個選擇器字符串，用于過濾出被選中的元素中能觸發(fā)事件的后代元素
data: 當(dāng)一個事件被觸發(fā)時，要傳遞給事件處理函數(shù)的event.data。
fn:回調(diào)函數(shù)
參數(shù)說明
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登錄注冊示例</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form id="myForm">
<label for="name">姓名</label>
<input type="text" id="name">
<span class="error"></span>
<label for="passwd">密碼</label>
<input type="password" id="passwd">
<span class="error"></span>
<input type="submit" id="modal-submit" value="登錄">
</form>
<script src="jquery3.4.1.js"></script>
<script>
function myValidation() {
// 多次用到的jQuery對象存儲到一個變量，避免重復(fù)查詢文檔樹
var $myForm = $("#myForm");
$myForm.find(":submit").on("click", function () {
// 定義一個標(biāo)志位，記錄表單填寫是否正常
var flag = true;
$myForm.find(":text, :password").each(function () {
var val = $(this).val();
if (val.length <= 0 ){
var labelName = $(this).prev("label").text();
$(this).next("span").text(labelName + "不能為空");
flag = false;
}
});
return flag;
});
// input輸入框獲取焦點(diǎn)后移除之前的錯誤提示信息
$myForm.find("input[type!='submit']").on("blur", function () {
$(this).next(".error").text("");
})
}
myValidation()
</script>
</body>
</html>
表單驗(yàn)證
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 99;
}
.modal {
300px;
height: 200px;
background</span>-<span>color: white;
position: absolute;
top: </span>50%<span>;
left: </span>50%<span>;
margin</span>-top: -<span>100px;
margin</span>-left: -<span>150px;
z</span>-index: 1000<span>;
}
.hide {
display: none;
}
</span></style>
<script src="jquery3.4.1.js"></script>
</head>
<body>
<button id="add">新增</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>愛好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>金老板</td>
<td>開車</td>
<td>
<button class="fire">開除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>alex</td>
<td>抽煙、喝酒、燙頭</td>
<td>
<button class="fire">開除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>苑昊（苑局）</td>
<td>不洗頭、不翻車、不要臉</td>
<td>
<button class="fire">開除</button>
</td>
</tr>
</tbody>
</table>
<div class="cover hide"></div>
<div class="modal hide">
<div>
<label>姓名：
<input type="text" id="name">
</label>
</div>
<div>
<label>愛好：
<input type="text" id="hobby">
</label>
</div>
<button id="cancel" type="button">取消</button>
<button id="submit" type="button">提交</button>
</div>
<script>
// 定義一個清空輸入框并且隱藏模態(tài)框的方法
function hideModal(){
// 1. 清空input的值
$("#name,#hobby").val('');
// 2. 隱藏起來
$(".cover,.modal").addClass('hide');
}
// 開除按鈕的功能
$("table").on('click', '.fire', function () { //我們先去學(xué)冒泡事件、事件委托然后再回來學(xué)這個例子，事件里面都是用的匿名函數(shù)，這里用on是因?yàn)槲覀円獙⑿绿砑舆M(jìn)來的每行里面的button標(biāo)簽?zāi)軌蚶^承這個點(diǎn)擊刪除的事件
// 點(diǎn)擊開除按鈕要做的事兒————把當(dāng)前行移除掉
//this --> 觸發(fā)當(dāng)前點(diǎn)擊事件的DOM對象
$(this).parent().parent().remove(); // 鏈?zhǔn)讲僮?br />
});
// 新增按鈕的功能
$("#add").click(function () {
// 點(diǎn)擊新增按鈕要做的事兒
// 1. 移除cover和modal的hide樣式
$(".cover,.modal").removeClass('hide');
});
// 點(diǎn)擊modal中的cancel按鈕
$("#cancel").click(function () {
hideModal();
});
</span><span>//</span><span> 點(diǎn)擊modal中的submit按鈕</span>
$("#submit").click(<span>function</span><span> () {
</span><span>//</span><span> 1. 獲取用戶輸入的值</span>
<span>var</span> name = $("#name"<span>).val();
</span><span>var</span> hobby = $("#hobby"<span>).val();
</span><span>//</span><span> 2. 隱藏模態(tài)框，清空輸入框</span>
hideModal();
// 3. 創(chuàng)建一個tr標(biāo)簽，把數(shù)據(jù)塞進(jìn)去
var trEle = document.createElement("tr");
$(trEle).append('<td><input type="checkbox"></td>');
$(trEle).append('<td>' + name + '</td>');
var tdTmp = document.createElement('td');
tdTmp.innerText = hobby;
$(trEle).append(tdTmp);
$(trEle).append('<td><button class="fire">開除</button></td>')
// 4. 把上一步的tr追加到表格的tbody后面
$('tbody').append(trEle);
});
//先用下面這種方式寫，你會發(fā)現(xiàn)一些問題，我們新添加的每一行數(shù)據(jù)里面的那個button標(biāo)簽點(diǎn)擊刪除的時候沒有效果
// // 點(diǎn)擊modal中的submit按鈕
// $("#submit").on('click', function () { #這個和直接$('submit').click(function ...)是一樣的
// // 1. 獲取用戶輸入的值
// var name = $("#name").val();
// var hobby = $("#hobby").val();
// // 2. 隱藏模態(tài)框，清空輸入框
// hideModal();
// // 3. 創(chuàng)建一個tr標(biāo)簽，把數(shù)據(jù)塞進(jìn)去
// var trEle = document.createElement("tr");
// $(trEle).append('<td><input type="checkbox"></td>');
// $(trEle).append('<td>' + name + '</td>');
// var tdTmp = document.createElement('td');
// tdTmp.innerText = hobby;
// $(trEle).append(tdTmp);
// $(trEle).append('<td><button class="fire">開除</button></td>')
// // 4. 把上一步的tr追加到表格的tbody后面
// $('tbody').append(trEle);
// })
</script>
</body>
</html>
表格操作
補(bǔ)充內(nèi)容：
jquery除了咱們上面講解的常用知識點(diǎn)之外，還有jquery 插件、jqueryUI知識點(diǎn)
jqueryUI 官網(wǎng)：
https://jqueryui.com/
jqueryUI 中文網(wǎng)：
http://www.jqueryui.org.cn/
jquery插件內(nèi)容包含
官網(wǎng)demo：
https://www.oschina.net/project/tag/273/jquery
里面包含了jquery插件效果和實(shí)現(xiàn)代碼，大家可以好好的玩一下了！
總結(jié)
- 上一篇： 广东网络借贷中介整改验收，留给平台的时间
- 下一篇： uvm_reg_predictor——寄