1.jQuery簡介及使用
jQuery 是一個 JavaScript 庫。
jQuery 極大地簡化了 JavaScript 編程。(write less,do more.)
jQuery 庫包含以下特性：
- HTML 元素選取
- HTML 元素操作
- CSS 操作
- HTML 事件函數(shù)
- JavaScript 特效和動畫
- HTML DOM 遍歷和修改
- AJAX
- Utilities
我用的是jQuery1.12.4版本
uncompressed：未壓縮版本，適用于開發(fā)環(huán)境恭朗，方便查看源代碼
minified：壓縮版本摘昌，適用于生產(chǎn)環(huán)境
jQueryapi文檔
官方api文檔：英文版本渠欺，如果你使用的技術(shù)是最新的技術(shù)涕俗，用到了新的特性舰始，此時就需要從官方文檔中查看新特性的使用方式。
離線API中文手冊：點擊鏈接自行下載，開發(fā)過程中我們的必備手冊枕稀！
2.jQuery語法
通過 jQuery询刹，可以選取（查詢萎坷，query） HTML 元素凹联，并對它們執(zhí)行“操作”（actions）。
基礎(chǔ)語法是：$(selector).action() 即 $(“#btn”) == jQuery(“#btn”)
- 美元符號定義 jQuery
- 選擇符（selector）“查詢”和“查找” HTML 元素
- jQuery 的 action() 執(zhí)行對元素的操作
示例：
$(this).hide() 隱藏當(dāng)前元素
$("p").hide() 隱藏所有段落
$(".test").hide() 隱藏所有 class="test" 的所有元素
$("#test").hide() 隱藏所有 id="test" 的元素
3.jQuery選擇器
- jQuery 元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素哆档。
$("p")選取<p>元素蔽挠。
$("p.intro")選取所有 class="intro" 的<p>元素。
$("p#demo")選取所有 id="demo" 的<p>元素。
- jQuery 屬性選擇器
jQuery 使用 XPath 表達(dá)式來選擇帶有給定屬性的元素澳淑。
$("[href]")選取所有帶有 href 屬性的元素比原。
$("[href='#']")選取所有帶有 href 值等于 "#" 的元素。
$("[href!='#']")選取所有帶有 href 值不等于 "#" 的元素杠巡。
$("[href$='.jpg']")選取所有 href 值以 ".jpg" 結(jié)尾的元素量窘。
- jQuery CSS 選擇器
jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性。
下面的例子把所有 div 元素的背景顏色更改為紅色：
$("div").css("background-color","red")
簡潔操作:
$("#box").css("border", "solid 1px red");
標(biāo)準(zhǔn)操作:
$("#box").css({
"border":"solid 1px red",
"background":"#efefef"
})
注意：樣式盡量寫在css中氢拥，通過標(biāo)簽的class屬性來控制使用不同的樣式
如果是動態(tài)遞增變化的樣式蚌铜，可以通過JS代碼進(jìn)行處理。
- 內(nèi)容操作
常規(guī)開始標(biāo)簽和結(jié)束標(biāo)簽中間的內(nèi)容操作
var $boxValue = $("#box").text(); $("#box").text("添加的內(nèi)容")
表單元素的數(shù)據(jù)
var $name = $("#username").val();
- 屬性操作
var $id = $("#box").attr("id") $("#box").attr("id", "container")
| 選擇器 | 實例 | 選取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
| element | $("p") | 所有 <p> 元素 |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
| :first | $("p:first") | 第一個 <p> 元素 |
| :last | $("p:last") | 最后一個 <p> 元素 |
| :even | $("tr:even") | 所有偶數(shù) <tr> 元素 |
| :odd | $("tr:odd") | 所有奇數(shù) <tr> 元素 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四個元素（index 從 0 開始） |
| :gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
| :not(selector) | $("input:not(:empty)") | 所有不為空的 input 元素 |
| :header | $(":header") | 所有標(biāo)題元素 <h1> - <h6>
|
| :animated | 所有動畫元素 | |
| :contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
| :button | $(":button") | 所有 type="button" 的 <input> 元素 |
| :image | $(":image") | 所有 type="image" 的 <input> 元素 |
| $(this) | 當(dāng)前 HTML 元素 |
4,jQuery 事件函數(shù)及效果顯示
jQuery 事件處理方法是 jQuery 中的核心函數(shù)嫩海。
事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時所調(diào)用的方法冬殃。術(shù)語由事件“觸發(fā)”（或“激發(fā)”）經(jīng)常會被使用。
通常會把 jQuery 代碼放到 <head>部分的事件處理方法中.
$("selector").show顯示 HTML 元素
$("selector").hide隱藏 HTML 元素
$("selector").toggle(speed,callback)顯示 / 隱藏HTML 元素
- 可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度叁怪，可以取以下值："slow"审葬、"fast" 或毫秒。
- 可選的 callback 參數(shù)是 toggle() 方法完成后所執(zhí)行的函數(shù)名稱骂束。
jQuery animate() 方法用于創(chuàng)建自定義動畫耳璧。
$(selector).animate({params},speed,callback)
- 必需的 params 參數(shù)定義形成動畫的 CSS 屬性。
- 可選的 speed 參數(shù)規(guī)定效果的時長展箱。它可以取以下值："slow"旨枯、"fast" 或毫秒。
- 可選的 callback 參數(shù)是動畫完成后所執(zhí)行的函數(shù)名稱混驰。
代碼操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動畫效果展示</title>
<style type="text/css">
#box{width:200px;height: 200px;background: red;position: absolute;top: 50px;left: 0px;}
</style>
<script src="../jquery-1.12.4.js">
</script>
<script>
$(function(){
$("#btn_show").click(function(){
$("#box").show(1000);
})
$("#btn_hide").click(function(){
$("#box").hide(1000);
})
$("#btn_toggle").click(function(){
$("#box").toggle(1000);
})
$("#btn_slideDown").click(function(){
$("#box").slideDown(1000);
})
$("#btn_slideUp").click(function(){
$("#box").slideUp(1000);
})
$("#btn_slideToggle").click(function(){
$("#box").slideToggle(1000);
})
$("#btn_fadeIn").click(function(){
$("#box").fadeIn(1000);
})
$("#btn_fadeOut").click(function(){
$("#box").fadeOut(1000);
})
$("#btn_fadeToggle").click(function(){
$("#box").fadeToggle(1000);
})
$("#btn_fadeTo").click(function(){
$("#box").fadeTo(1000,0.5);
})
$("#btn_animate").click(function(){
$("#box").animate({left:"500px",top:"100px",width:"100px",height:"50px"},1000)
.animate({top:"400px",left:"300px"},2000)
})
})
</script>
</head>
<body>
<button id="btn_show">顯示</button>
<button id="btn_hide">隱藏</button>
<button id="btn_toggle">顯示/隱藏 狀態(tài)切換</button>
<button id="btn_slideDown">卷簾顯示</button>
<button id="btn_slideUp">卷簾隱藏</button>
<button id="btn_slideToggle">卷簾顯示/隱藏 狀態(tài)顯示</button>
<button id="btn_fadeIn">透明度顯示</button>
<button id="btn_fadeOut">透明度隱藏</button>
<button id="btn_fadeToggle">透明度顯示/隱藏 狀態(tài)切換</button>
<button id="btn_fadeTo">切換到指定的透明度</button>
<button id="btn_animate">自定義動畫</button>
<div id="box"></div>
</body>
</html>
效果展示
- 圖片輪播特效
代碼操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>輪播圖動態(tài)展示</title>
<style type="text/css">
*{margin: 0px;padding: 0px}
#box{margin:10px auto;padding: 5px;position: relative;left: 400px;}
#box img{position:absolute;border:solid 2px #888;padding:5px;border-radius: 5px;vertical-align:bottom;display:none;}
#box img:nth-child(1){display: block;}
</style>
<script src="../jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
var _index = 0; //當(dāng)前正在展示的圖片的下標(biāo)
//計時函數(shù) 2s更換一次圖片
setInterval(function(){
var _next = _index + 1; //下一張要展示的圖片的下標(biāo)
if(_next >= 5){
_next = 0;
}
$("img").eq(_index).fadeOut(1000); //隱藏當(dāng)前圖片
$("img").eq(_next).fadeIn(1000); //顯示下一張圖片
_index ++;
if(_index >= 5){
_index = 0;
}
},2000)
})
</script>
</head>
<body>
<div id="box">
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
</div>
</body>
</html>
效果展示：
圖片輪播特效
- 導(dǎo)航欄上下滑動效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>導(dǎo)航欄滑動卷簾效果</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.nav{list-style: none;height: 50px;background-color: #069}
.nav>li{float: left;height: 50px;font-size: 20px;color: #fff;width: 120px;text-align: center;line-height: 50px;}
.nav > li > ul{list-style: none;width: 120px;background: #E0E0E0;display: none;}
.nav > li > ul > li{height: 50px;line-height: 50px;color: #333;font-size: 18px;width: 120px;}
</style>
<script type="text/javascript" src="../jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
// 這里面的代碼攀隔，是當(dāng)頁面中的標(biāo)簽加載完成后執(zhí)行的
$("li").mouseenter(function(){
$(this).children().last().stop(true).slideDown("slow");
});
$("li").mouseleave(function(){
$(this).children().last().stop(true).
slideUp("slow");
})
})
</script>
</head>
<body>
<ul class="nav">
<li><span>首頁</span>
<ul>
<li>國內(nèi)要聞</li>
<li>國際要聞</li>
</ul>
</li>
<li><span>娛樂</span>
<ul>
<li>電競</li>
<li>影視</li>
<li>明星</li>
<li>綜藝</li>
<li>時尚</li>
</ul>
</li>
<li><span>社會</span>
<ul>
<li>財經(jīng)</li>
<li>互聯(lián)網(wǎng)</li>
<li>房產(chǎn)</li>
<li>經(jīng)濟(jì)</li>
</ul>
</li>
<li><span>圖片</span>
<ul>
<li>美女</li>
<li>風(fēng)景</li>
<li>動漫卡通</li>
<li>汽車</li>
<li>萌寵</li>
</ul>
</li>
<li><span>IT</span>
<ul>
<li>javascript</li>
<li>Html/css</li>
<li>C++</li>
<li>PHP</li>
<li>python</li>
</ul>
</li>
</ul>
</body>
</html>
效果：
導(dǎo)航欄滑動效果展示
- 圖片翻轉(zhuǎn)效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖片翻轉(zhuǎn)</title>
<!-- <style type="text/css">
*{margin: 0;padding: 0;}
#box{width: 400px;height: 200px;border:solid 2px #888;border-radius: 8px;margin: 20px auto;padding: 3px;position: relative;}
/*#box img{display:block;width:400px;height: 190px;
position: absolute;top:6px;}*/
#box img{width: 400px;border-radius:3px;position:absolute;}
/* #box img:nth-child(2){height:0;}*/
</style> -->
<style type="text/css">
*{margin: 0;padding: 0;}
#box{margin: 50px auto;width: 400px;height: 200px;padding: 5px;border:solid 1px #888;position: relative;}
#box img{width: 400px;height:198px;border-radius:8px;position:absolute;}
#box img:nth-child(2){height:0;}
</style>
<script type="text/javascript" src="../jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
// 當(dāng)頁面中所有標(biāo)簽全部加載完成的時候，執(zhí)行的代碼
$("#box").mouseenter(function(){
var $that = $(this);
// 隱藏第一張圖片
$that.children().first().stop(true).animate({
top:"100px",height:"0px"},1000,function(){
// 顯示第二張圖片
$that.children().last().css({
top:"100px"}).stop(true).animate({
top:"5px",height:"200px"},1000);
});
});
$("#box").mouseleave(function(){
var $that = $(this);
// 隱藏第二張圖片
$that.children().last().stop(true).animate({
top:"100px",height:"0px"},1000,function(){
// 顯示第一張圖片
$that.children().first().css({
top:"100px"}).stop(true).animate({
top:"5px",height:"200px"},1000);
});
});
})
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>
效果展示：
圖片翻轉(zhuǎn)特效
