jQuery基礎——選擇器、效果
1、使用JS的痛處
在學習和使用js的過程當中發現了js的一些痛處：javascript
一、書寫繁瑣，代碼量大。css
二、代碼複雜。html
三、動畫效果很難實現。使用定時器，要當心各類定時器的清除。各類操做和處理事件很差實現。java
四、瀏覽器的兼容性。jquery
一樣是實現點擊按鈕後，展現三個div欄，並在div欄顯示內容：編程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 100%;
height: 50px;
margin: 10px 0px 0px 0px;
display: none;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">展現</button>
<div></div>
<div></div>
<div></div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var oBtn = document.getElementsByTagName('button')[0];
var oDivs = document.getElementsByTagName('div');
oBtn.onclick = function () {
for (var i=0;i<oDivs.length;i++) {
oDivs[i].style.display = 'block';
oDivs[i].innerHTML = 'div展現了';
}
}
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 100%;
height: 50px;
margin: 10px 0px 0px 0px;
display: none;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">展現</button>
<div></div>
<div></div>
<div></div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
/*
使用js的一些痛處：
書寫繁瑣，代碼量大
代碼複雜
動畫效果很難實現。使用定時器，要當心各類定時器的清除。各類操做和處理事件很差實現
瀏覽器的兼容性
*/
// jquery就解決了上面的問題
$(function() {
$('#btn').click(function () { // #btn:經過id選擇器取到元素
$('div').css('display', 'block');
$('div').html('div展現了');
})
})
</script>
</html>
2、jQuery和JavaScript的區別
一、類型不一樣
Javascript是一門編程語言，咱們用它來編寫客戶端瀏覽器腳本；jQuery是javascript的一個庫，包含多個可重用的函數，用來輔助咱們簡化javascript開發。瀏覽器
二、功能範圍不一樣
jQuery能作的javascipt都能作到，而javascript能作的事情，jQuery不必定能作到。dom
注意：通常狀況下，是庫的文件，該庫中都會拋出來構造函數或者對象，若是是構造函數，那麼使用new關鍵字建立對象，若是是對象直接調用屬性和方法。編程語言
三、執行時間的不一樣
window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。ide
$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。
四、編寫個數不一樣
window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個
$(document).ready()能夠同時編寫多個，而且均可以獲得執行
五、簡化寫法不一樣
window.onload沒有簡化寫法
$(document).ready(function(){})能夠簡寫成$(function(){});
3、DOM文檔加載的步驟
一、解析HTML結構。
二、加載外部腳本和樣式表文件。
三、解析並執行腳本代碼。
四、DOM樹構建完成。
五、加載圖片等外部文件。
六、頁面加載完畢。
注意：須要注意的是DOM數先構建完成，才加載圖片等外部文件。
4、jquery文件引入和加載
jquery-3.3.1.js 較大，通常是用在開發環境下。
jquery-3.3.1.min.js 更小，通常是用在生產環境下。
一、直接寫在<script>裏的js代碼
不寫window.onload的代碼執行順序是從上到下。
所以會在DOM加載的第三步：解析並執行腳本代碼時運行。
二、寫在window.onload = function() { }裏的js代碼
window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。
所以通常是在DOM加載的第五步、第六步時運行。
window.onload = function () {
// 若是不寫window.onload()代碼的執行順序————從上到下
// window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。
var oDiv = document.getElementById('box');
console.log(oDiv);
alert(111);
}
三、書寫jquery的方式，入口函數（jquery是js的一個庫文件，既然是庫文件，那麼就會跑出來一個構造函數或者對象）
$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。
所以是在DOM文檔加載的第四步以後運行。
// 若是沒有引入jquery: $ is not defined
console.log($);
/* 構造函數
ƒ ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery…
*/
//jquery是js的一個庫文件，既然是庫文件，那麼就會跑出來一個構造函數或者對象
//書寫jquery的方式，入口函數
// $(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢(DOM文檔加載的第四步)
$(document).ready(function () {
alert(222);
})
//等價
$(function () {
alert(333);
})
jquery文件引入代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery文件的引入</title>
</head>
<body>
<script type="text/javascript">
// window.onload = function () {
// // 若是不寫window.onload()代碼的執行順序————從上到下
// // window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。
// var oDiv = document.getElementById('box');
// console.log(oDiv);
// alert(444);
// }
// alert(222);
</script>
<div id="box">
</div>
</body>
<script src="./jquery-3.3.1.js"></script>
<script type="text/javascript">
// 若是沒有引入jquery: $ is not defined
console.log($);
/* 構造函數
ƒ ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery…
*/
//jquery是js的一個庫文件，既然是庫文件，那麼就會跑出來一個構造函數或者對象
//書寫jquery的方式，入口函數
// $(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢(DOM文檔加載的第四步)
$(document).ready(function () {
alert(222);
})
//等價
$(function () {
alert(333);
})
window.onload = function () {
// 若是不寫window.onload()代碼的執行順序————從上到下
// window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。
var oDiv = document.getElementById('box');
console.log(oDiv);
alert(111);
}
alert(444);
</script>
</html>
5、jquery選擇器——基礎選擇器
jquery選擇器的用法其實跟css選擇器用法相似，只是代碼的書寫不一樣。
注意：使用jquery的時候要有入口函數——回調函數。
// 方式一：
$(function () {
函數體;
})
// 方式二：
$(dociment).ready(function () {
函數體;
})
一、id選擇器
console.log($('#brother'));
$('#brother').css('color','red'); // 設置樣式，把字體修改成紅色
二、標籤選擇器
//(1)設置一個值
$('a').css('color','yellow');
//(2)設置多個值，設置多個值的時候使用對象存儲 key:value
$('a').css({'color':'yellow','font-size':'24px'});
三、類選擇器
$('.li3').css('background','green');
四、通配符選擇器*（使用不是不少）
console.log($('*'));
/* 取出了全部標籤
jQuery.fn.init(17) [html, head, meta, title, style, body,
ul, li#brother, li, a, li.li3, li, li, li, li,
script, script, prevObject: jQuery.fn.init(1)]
*/
// 應用：實現清空整個界面的元素
$('*').html('');
代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基礎選擇器</title>
<style type="text/css">
/*#brother {*/
/*color: red;*/
/*font-size: 24px*/
/*}*/
</style>
</head>
<body>
<ul>
<li id="brother">路飛學城1</li>
<li><a href="https://www.luffycity.com">路飛學城2</a></li>
<li class="li3">路飛學城3</li>
<li>路飛學城4</li>
<li>路飛學城5</li>
<li>路飛學城6</li>
<li>路飛學城7</li>
</ul>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 使用jquery的時候，要有入口函數
/*等價
$(function () {
alert(333);
})
*/
// 回調函數
$(document).ready(function () {
//基礎選擇器
//1.id選擇器
console.log($('#brother'));
$('#brother').css('color','red'); // 設置樣式，把字體修改成紅色
//2.標籤選擇器
//(1)設置一個值
// $('a').css('color','yellow');
//(2)設置多個值，設置多個值的時候使用對象存儲 key:value
$('a').css({'color':'yellow','font-size':'24px'});
//3.類選擇器
$('.li3').css('background','green');
//4.通配符選擇器 *（使用不是不少）
console.log($('*'));
/* 取出了全部標籤
jQuery.fn.init(17) [html, head, meta, title, style, body,
ul, li#brother, li, a, li.li3, li, li, li, li,
script, script, prevObject: jQuery.fn.init(1)]
*/
// 應用：實現清空整個界面的元素
$('*').html('');
})
</script>
</html>
6、jquery選擇器——層級選擇器
一、後代選擇器 div p
$('div p').css('color','red');
$('#box p').css('color','red');
二、子代選擇器 div > p
$('#box>p').css('color','green'); // '小雞燉蘑菇' 因爲不是子代，沒有變爲綠色
三、毗鄰選擇器 #father+p
匹配緊接着選中元素的兄弟
$('#father+p').css('font-size','24px'); // 僅僅修改了「我是你老母」
四、兄弟選擇器 #father~p
匹配選中元素的全部兄弟（本身除外）
$('#father~p').css('background','blueviolet');
代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基礎選擇器</title>
<style type="text/css">
/*#brother {*/
/*color: red;*/
/*font-size: 24px*/
/*}*/
</style>
</head>
<body>
<ul>
<li id="brother">路飛學城1</li>
<li><a href="https://www.luffycity.com">路飛學城2</a></li>
<li class="li3">路飛學城3</li>
<li>路飛學城4</li>
<li>路飛學城5</li>
<li>路飛學城6</li>
<li>路飛學城7</li>
</ul>
<div id="box">
<p id="father">天王蓋地虎</p>
<p>我是你老母</p>
<p>寶塔鎮河妖</p>
<p>蘑菇放香蕉</p>
<div id="box2">
<p>小雞燉蘑菇</p>
</div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 回調函數
$(document).ready(function () {
//層級選擇器
//1.後代選擇器 div p
$('div p').css('color','red');
$('#box p').css('color','red');
//2.子代選擇器 div > p
$('#box>p').css('color','green'); // '小雞燉蘑菇' 因爲不是子代，沒有變爲綠色
//3.毗鄰選擇器 匹配全部緊接着選中元素的兄弟 #father+p
$('#father+p').css('font-size','24px');
//4.兄弟選擇器 匹配全部兄弟 #father~p
$('#father~p').css('background','blueviolet');
console.log($('li'));
//5.獲取第一個元素
$('li:first').css('font-size','32px');
//6.獲取最後一個元素
$('li:last').css('font-size','32px');
$('li:eq(2)').css('color','orange'); //eq(0)是第一個元素，eq(2)是第三個元素
})
</script>
</html>
其中還有基本過濾選擇器的內容：
一、獲取第一個元素
$('li:first').css('font-size','32px');
二、獲取最後一個元素
$('li:last').css('font-size','32px');
三、獲取給定索引值的元素
$('li:eq(2)').css('color','orange'); //eq(0)是第一個元素，eq(2)是第三個元素
7、jquery選擇器——基本過濾選擇器
一、:first 獲取第一個元素
同上節所示。
$('li:first').text('真的嗎');
上例中選擇到li標籤中第一個，並用text方法修改文本內容。
二、:last 獲取最後一個元素
同上節所示。
$('li:last').html('我是最後一個元素？')
上例中選擇到li標籤中最後一個，並用html方法修改文本內容。
三、:odd匹配全部索引值爲奇數的元素，從0開始計數
// :odd匹配全部索引值爲奇數的元素，從0開始計數（所以一、3是紅色）
$('li:odd').css('color','red');
四、:even匹配全部索引值爲偶數的元素，從0開始計數
// :even匹配全部索引值爲偶數的元素，從0開始計數(所以0、2是綠色)
$('li:even').css('color','green');
五、:eq(index)獲取給定索引值的元素 從0開始計數
// :eq(index)獲取給定索引值的元素 從0開始計數
// 選中索引值爲1的元素
$('li:eq(1)').css('font-size','32px');
六、:gt(index) 匹配全部大於給定索引值的元素
// :gt(index) 匹配全部大於給定索引值的元素
// 大於索引值1
$('li:gt(1)').css('font-size','50px');
七、:lt(index) 匹配全部小於給定索引值的元素
// :lt(index) 匹配全部小於給定索引值的元素
// 小於索引值1
$('li:lt(1)').css('font-size','12px');
代碼示例：
<!DOCTYPE html>
<html lang="en">
<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">
$(function() {
// 獲取第一個：first,獲取最後一個：last
// $('li:first').text('真的嗎');
// $('li:last').html('我是最後一個元素？')
// :odd匹配全部索引值爲奇數的元素，從0開始計數（所以一、3是紅色）
$('li:odd').css('color','red');
// :even匹配全部索引值爲偶數的元素，從0開始計數(所以0、2是綠色)
$('li:even').css('color','green');
// :eq(index)獲取給定索引值的元素 從0開始計數
// 選中索引值爲1的元素
$('li:eq(1)').css('font-size','32px');
// :gt(index) 匹配全部大於給定索引值的元素
// 大於索引值1
$('li:gt(1)').css('font-size','50px');
// :lt(index) 匹配全部小於給定索引值的元素
// 小於索引值1
$('li:lt(1)').css('font-size','12px');
})
</script>
</html>
8、jquery選擇器——屬性選擇器
一、標籤名[屬性名] 查找全部含有id屬性的該標籤名的元素
//標籤名[屬性名] 查找全部含有id屬性的該標籤名的元素
$("li[id]").css('color','red'); // 選取li標籤中有id屬性的
二、標籤名[attr=value] 匹配給定的屬性是某個特定值的元素
//[attr=value] 匹配給定的屬性是某個特定值的元素
$('li[class=what]').css('font-size','30px'); // 選取li標籤中class屬性的值爲"what"的
三、[attr!=value] 匹配全部不含有指定的屬性，或者屬性不等於特定值的元素
//[attr!=value] 匹配全部不含有指定的屬性，或者屬性不等於特定值的元素
$('li[class!=what]').css('color','darkgreen'); // 選取li標籤中class屬性的值不爲"what"的
四、[attr^=value]匹配給定的屬性是以某些值開始的元素
//[attr^=value]匹配給定的屬性是以某些值開始的元素
$('input[name^=username]').css('background','grey'); // 選取input標籤中name屬性以"username"開頭的
五、[attr$=value]匹配給定的屬性是以某些值結尾的元素
//[attr$=value]匹配給定的屬性是以某些值結尾的元素
$('input[name$=222]').css('background','yellow'); // 選取input標籤中name屬性以'222'結尾的
六、[attr*=value]匹配給定的屬性是以包含某些值的元素
//[attr*=value]匹配給定的屬性是以包含某些值的元素
$("button[class*='btn']").css('background','#0000FF'); // 選取button標籤中class屬性中包含'btn'的
代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
</head>
<body>
<div id="box">
<h2 class="title">屬性元素器</h2>
<p class="p1">我是一個段落</p>
<ul>
<li id="li1">分手應該體面</li>
<li class="what" id="li2">分手應該體面</li>
<li class="what">分手應該體面</li>
<li class="heihei">分手應該體面</li>
</ul>
<form action="" method="post">
<input name="username" type='text' value="1" checked="checked"></input>
<input name="username1111" type='text' value="1"></input>
<input name="username2222" type='text' value="1"></input>
<input name="username3333" type='text' value="1"></input>
<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.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 屬性選擇器
//標籤名[屬性名] 查找全部含有id屬性的該標籤名的元素
$("li[id]").css('color','red'); // 選取li標籤中有id屬性的
//[attr=value] 匹配給定的屬性是某個特定值的元素
$('li[class=what]').css('font-size','30px'); // 選取li標籤中class屬性的值爲"what"的
//[attr!=value] 匹配全部不含有指定的屬性，或者屬性不等於特定值的元素
$('li[class!=what]').css('color','darkgreen'); // 選取li標籤中class屬性的值不爲"what"的
//[attr^=value]匹配給定的屬性是以某些值開始的元素
$('input[name^=username]').css('background','grey'); // 選取input標籤中name屬性以"username"開頭的
//[attr$=value]匹配給定的屬性是以某些值結尾的元素
$('input[name$=222]').css('background','yellow'); // 選取input標籤中name屬性以'222'結尾的
//[attr*=value]匹配給定的屬性是以包含某些值的元素
$("button[class*='btn']").css('background','#0000FF'); // 選取button標籤中class屬性中包含'btn'的
})
</script>
</html>
9、jquery選擇器——篩選選擇器
篩選選擇器基於鏈式調用，運用點語法（get方法、set方法）實現。
一、獲取第n個元素 數值從0開始
//獲取第n個元素 數值從0開始
$('span').eq(1).css('font-size','30px'); // 選擇到第二個span標籤
二、first()獲取第一個元素
//first()獲取第一個元素
$('span').first().css('background','red');
三、last()獲取最後一個元素
//last()獲取最後一個元素
$('span').last().css('color','greenyellow');
四、.parent() 選擇父親元素
//.parent() 選擇父親元素
console.log($('span').parent()); // jQuery.fn.init(1) ——》0: p.p1
$('span').parent('.p1').css({width:'300px',height:'300px',background:'yellow'});
五、.siblings()選擇全部的兄弟元素
//.siblings()選擇全部的兄弟元素
$('.list').siblings('li').css('color','red'); // 僅選擇到了class='list'的li標籤的兄弟
六、.find()查找全部的後代元素
//.find()
//查找全部的後代元素
$('div').find('button').css('background','#313131'); // div標籤的後代中查找到button標籤
代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>篩選選擇器</title>
</head>
<body>
<div id="box">
<p class="p1">
<span>我是第一個span標籤</span>
<span>我是第二個span標籤</span>
<span>我是第三個span標籤</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.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 鏈式調用，點語法：get方法 set方法
//獲取第n個元素 數值從0開始
$('span').eq(1).css('font-size','30px'); // 選擇到第二個span標籤
//first()獲取第一個元素
$('span').first().css('background','red');
//last()獲取最後一個元素
$('span').last().css('color','greenyellow');
//.parent() 選擇父親元素
console.log($('span').parent()); // jQuery.fn.init(1) ——》0: p.p1
$('span').parent('.p1').css({width:'300px',height:'300px',background:'yellow'});
//.siblings()選擇全部的兄弟元素
$('.list').siblings('li').css('color','red'); // 僅選擇到了class='list'的li標籤的兄弟
//.find()
//查找全部的後代元素
$('div').find('button').css('background','#313131'); // div標籤的後代中查找到button標籤
})
</script>
</html>
10、jquery對象和DOM對象轉換
一、DOM對象轉換爲jQuery對象
// dom對象
var oDiv = document.getElementById('box');
// jQuery對象
console.log($(oDiv)); // jQuery.fn.init [div#box]
// 因爲$(oDiv)是jquery對象，所以可使用jquery方法：click()
$(oDiv).click(function () {
alert(111);
})
二、jQuery對象轉換爲DOM對象
// 第一種方式：$('button')[0]
console.log($('button')[0]); // <button>隱藏</button>
// 第二種方式：$('button').get(0)
console.log($('button').get(0)); // <button>隱藏</button>
代碼示例以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery和dom對象轉換</title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
天王蓋地虎
</div>
<button>隱藏</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// dom對象轉換爲jquery對象
var oDiv = document.getElementById('box');
console.log($(oDiv)); // jQuery.fn.init [div#box]
// 因爲$(oDiv)是jquery對象，所以可使用jquery方法：click()
$(oDiv).click(function () {
alert(111);
})
// jquery對象轉換爲dom對象
// 第一種方式：
console.log($('button')[0]); // <button>隱藏</button>
// 第二種方式：
console.log($('button').get(0)); // <button>隱藏</button>
var isShow = true;
$('button').get(0).onclick = function () {
// alert(222);
if (isShow) {
$('#box').hide(); // jquery方法，點擊按鈕後隱藏
$(this).text('顯示');
isShow = false;
} else {
$('#box').show();
$(this).text('隱藏');
isShow = true;
}
}
</script>
</html>
注意：把button從jquery對象轉換爲dom對象；並使用jquery方法實現點擊隱藏和點擊顯示。
var isShow = true;
$('button').get(0).onclick = function () {
// alert(222);
if (isShow) {
$('#box').hide(); // jquery方法，點擊按鈕後隱藏
$(this).text('顯示');
isShow = false;
} else {
$('#box').show();
$(this).text('隱藏');
isShow = true;
}
}
11、jQuery的效果——顯示隱藏(show\hide\toggle)
在javascript中實現隱藏和顯示有三種方法：
一、經過.css設置屬性，來控制隱藏、顯示
// 經過.css設置屬性，來控制隱藏、顯示
$('#btn').click(function () {
$('#box').css('display','block');
})
二、jQuery提供了方法show()、hide()控制元素顯示隱藏
show：
1.概念：顯示隱藏的匹配元素。
2.語法：show(speed,callback)參數。
3.參數：speed：三種預約速度之一的字符串('show','normal','fast')或表示動畫時長的毫秒值(如：1000毫秒==1秒)
callback：在動畫完成時執行的函數，每一個元素執行一次。
hide：
hide(speed,callback)跟show使用方法相似，表示隱藏顯示的元素。
能夠經過show()和hide()方法，來動態控制元素的顯示隱藏。
var isShow = true;
$('#btn').click(function () {
if (isShow) {
// show(speed,callback)
$('#box').show('show',function () {
// alert(111);
$(this).text('盒子出來了');
isShow = false;
$('#btn').text('隱藏');
})
} else {
// 動畫時長的毫秒值2000ms
$('#box').hide(2000,function () {
$(this).text('盒子消失了');
isShow = true;
$('#btn').text('顯示');
})
}
})
三、toggle開關，若是元素是可見的，切換爲隱藏的；若是元素是隱藏的，切換爲可見的。
若是是僅僅顯示和隱藏盒子，不須要操做文字，推薦使用toggle方法。
$('#btn').click(function () {
$('#box').toggle(3000,function () {
alert(111);
});
})
代碼示例以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>效果——顯示隱藏</title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
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">
// 一、經過.css設置屬性，來控制隱藏、顯示
// $('#btn').click(function () {
// $('#box').css('display','block');
// })
// 二、jQuery提供了一些方法show() hide()控制元素顯示隱藏
/*
var isShow = true;
$('#btn').click(function () {
if (isShow) {
// show(speed,callback)
$('#box').show('show',function () {
// alert(111);
$(this).text('盒子出來了');
isShow = false;
$('#btn').text('隱藏');
})
} else {
// 動畫時長的毫秒值2000ms
$('#box').hide(2000,function () {
$(this).text('盒子消失了');
isShow = true;
$('#btn').text('顯示');
})
}
})
*/
//三、toggle 開關，若是元素顯示則隱藏，反之亦然
// 若是是僅僅顯示和隱藏盒子，不須要操做文字，推薦使用toggle方法
$('#btn').click(function () {
$('#box').toggle(3000,function () {
alert(111);
});
})
</script>
</html>
12、jquery的效果——slide高度變化顯示隱藏
一、slideDown：經過高度變化（向下增大）來到動態地顯示全部匹配的元素，在顯示完成後觸發一個回調函數。用法和參數跟上面相似。
二、slideUp：經過高度變化（向上減少）來動態地隱藏全部匹配的元素，在隱藏完成後可選地觸發一個回調函數。用法和參數跟上面相似。
下例中運用hover來觸發回調，鼠標浮動其上觸動顯示和隱藏：
$(function () {
$('#btn').hover(function () {
$('#box').slideDown(2000);
},function () { // 第二個回調函數
$('#box').slideUp('slow');
})
})
三、slideToggle：經過高度變化來切換全部匹配元素的可見性，並在切換完成後可選地觸發一個回調函數。和toggle用法相似。
$('#btn').click(function () {
$('#box').slideToggle('fast');
})
代碼示例以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>效果——slide</title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
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">
/*
$(function () {
$('#btn').hover(function () {
$('#box').slideDown(2000);
},function () { // 第二個回調函數
$('#box').slideUp('slow');
})
})
*/
$('#btn').click(function () {
$('#box').slideToggle('fast');
})
</script>
</html>
十3、jQuery的效果——fade不透明度變化
一、fadeIn：經過不透明度的變化來實現全部匹配元素的淡入效果，並在動畫完成後可選地觸發一個回調函數。
這個動畫只調整元素的不透明度，也就是說全部匹配的元素的高度和寬度不會發生變化
二、fadeOut：經過不透明度的變化來實現全部匹配元素的淡出效果，並在動畫完成後可選地觸發一個回調函數。
這個動畫只調整元素的不透明度，也就是說全部匹配的元素的高度和寬度不會發生變化。
三、fadeTo：把全部匹配元素的不透明度以漸進方式調整到指定的不透明度，並在動畫完成後可選地觸發一個回調函數。
這個動畫只調整元素的不透明度，也就是說全部匹配的元素的高度和寬度不會發生變化。
四、fadeToggle：經過不透明度的變化來開關全部匹配元素的淡入和淡出效果，並在動畫完成後可選地觸發一個回調函數。
這個動畫只調整元素的不透明度，也就是說全部匹配的元素的高度和寬度不會發生變化。實現淡入淡出的效果就是使用此方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>效果——slide</title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
border: 1px solid red;
/*display: none;*/
background-color: yellow;
}
</style>
</head>
<body>
<div id="box">
</div>
<button id="btn">隱藏</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// $('#btn').click(function () {
$('#box').mouseover(function () { // 鼠標移動上去逐漸隱形
$('#box').fadeOut(2000);
/* 點擊後內部樣式表變爲以下：
<div id="box" style="display: none;"></div>
*/
})
$('#btn').mouseout(function () { // 鼠標移動上去逐漸現形
// $('#box').fadeIn(2000);
$('#box').fadeTo(2000,0.3);
})
$('btn').click(function () {
$('#box').fadeToggle(3000);
})
})
</script>
</html>
十4、jquery效果——animate動畫
概念：用於建立自定義動畫的函數
語法：animate(params,[speed],[fn])
參數：params:一組包含做爲動畫屬性和終值的樣式屬性和及其值的集合。
speed:三種預約速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
fn:在動畫完成時執行的函數，每一個元素執行一次。
$(function () {
$('#btn').click(function () {
/*
// params:一組包含做爲動畫屬性和終值的樣式屬性和及其值的集合
$('#box').animate({
width: '200px',
height: '300px'
})
*/
// 動畫效果向右下方向移動
$('#box').animate({left:'100px',top: '200px'});
// 動畫隊列:動畫效果是先右移、再下移
$('#box').animate({left:'100px'}).animate({top: '400px'});
// 在運行時，stop方法中止動畫
$('#box').animate({left:'100px',top:'300px'}, 2000);
// delay方法延遲操做
$('#box').animate({left:'100px'}).delay(2000).animate({top: '400px'});
})
$('#stop').click(function () {
$('#box').stop()
})
})
總體代碼以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義動畫animate</title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
border: 1px solid red;
background: yellow;
position: absolute;
}
</style>
</head>
<body>
<button id="btn">動畫吧</button>
<button id="stop">中止吧</button>
<div id="box">
hello luffy
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
/*
// params:一組包含做爲動畫屬性和終值的樣式屬性和及其值的集合
$('#box').animate({
width: '200px',
height: '300px'
})
*/
// 動畫效果向右下方向移動
$('#box').animate({left:'100px',top: '200px'});
// 動畫隊列:動畫效果是先右移、再下移
$('#box').animate({left:'100px'}).animate({top: '400px'});
// 在運行時，stop方法中止動畫
$('#box').animate({left:'100px',top:'300px'}, 2000);
// delay方法延遲操做
$('#box').animate({left:'100px'}).delay(2000).animate({top: '400px'});
})
$('#stop').click(function () {
$('#box').stop()
})
})
</script>
</html>
一、stop：中止全部在指定元素上正在運行的動畫
語法：stop([clearQueue],[jumpToEnd])
參數：clearQueue:若是設置成true，則清空隊列。能夠當即結束動畫。
gotoEnd:讓當前正在執行的動畫當即完成，而且重設show和hide的原始樣式，調用回調函數等
二、delay：概念：用來作延遲的操做
語法：delay(1000)，一秒以後作後面的操做
十5、利用jquery效果——彈出廣告
彈出廣告代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>彈出廣告</title>
<style type="text/css">
</style>
</head>
<body>
<div id="box" style="width: 330px;height: 480px;position: absolute;right: 10px;bottom: 0;display: none">
<img src="廣告.png" style="width: 100%;height: 100%;"/>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 排隊去幹活
$('#box').slideDown('normal').slideUp('fast').fadeIn(1000).click(function () {
$(this).fadeOut(1000); // 點擊盒子1秒時間淡出
});
})
</script>
</html>
相關文章
- 1. jQuery基礎：jQuery選擇器
- 2. jQuery基礎選擇器
- 3. jquery選擇器基礎
- 4. jQuery基礎及選擇器
- 5. JQuery基礎——選擇器
- 6. js---jQuery基礎+選擇器
- 7. jQuery選擇器——基礎選擇器、層次選擇器
- 8. jQuery——選擇器效率
- 9. jQ基礎篇--jQuery選擇器總結
- 10. JQuery學習筆記——基礎選擇器
- 更多相關文章...
- • SVG 模糊效果 - SVG 教程
- • jQuery Mobile 表單選擇菜單 - jQuery Mobile 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Docker容器實戰(六) - 容器的隔離與限制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jQuery基礎：jQuery選擇器
- 2. jQuery基礎選擇器
- 3. jquery選擇器基礎
- 4. jQuery基礎及選擇器
- 5. JQuery基礎——選擇器
- 6. js---jQuery基礎+選擇器
- 7. jQuery選擇器——基礎選擇器、層次選擇器
- 8. jQuery——選擇器效率
- 9. jQ基礎篇--jQuery選擇器總結
- 10. JQuery學習筆記——基礎選擇器