文章目錄
1 什麼是jQuery?
**jQuery是一個快速、小巧且功能豐富的Javascript庫。**它使得HTML文檔的遍歷和操作、時間處理、動畫和Ajax等操作變得簡單，並提供了一個易用的API，可以跨多種瀏覽器工作。jQuery集多功能性和可擴展性於一身，改變了數百萬人編寫Javascript的方式。
“Write less,do more!”
2.jQuery的作用
- HTML元素選取
- HTML元素操作
- CSS操作
- HTML時間函數
- JavaScript特效和動畫
- HTML DOM遍歷和修改
- AJAX
- Utilities
3.jQuery的目的
化大爲小，化繁爲簡
4.jQuery的版本和兼容性
jQuery1.x.x/jQuery2.x.x/jQuery2.x.x
IE 6/7/8 兼容的最高版本爲1.9.1
5.使用jQuery
5.1 jQuery引入
<script type="text/javascript" src="js/jquery.js"></script>
5.2 $符號
jQuery把所有功能全部封裝在一個全局變量jQuery中，而$符號也是一個合法的變量名，它是變量jQuery的別名。
jQuery = function jQuery(arg){
alert(arg);
}
$ = window.jQuery = jQuery;
window.jQuery;//jQuery(selector,context)
window.$;//jQuery(selector,context)
$ === jQuery;//true
typeof($);//'function'
5.3 jQuery的書寫格式
5.3.1 原始格式
$(document).ready(function(){
......
});
例：
$(document).ready(function(){
$('div').addClass('div');
});
5.3.2 縮寫格式
$().ready(function(){
......
});
$(function(){
......
});
5.3.3 原生格式
window.onload(){
......
}
6.一個小案例
點擊上方按鈕切換圖片
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//jQuery內容
$(document).ready(function(){
$('a').click(function(){
$('img')
.eq($(this).index())
.css({'opacity':'1'})
.siblings()
.css({'opacity':'0'});
});
});
</script>
<style>
*{
margin: 0;
padding: 0;
border:none;
}
a{
text-decoration:none;
color: black;
}
body{
height:100%;
background-color: #93b3c6;
overflow:hidden;
}
span{
display: block;
height: 16px;
width: 16px;
margin: 36px auto 40px;
border-radius: 50%;
background-color: #fff;s
}
nav{
position: relative;
display: flex;
width:800px;
margin: 0 auto 45px;
justify-content: space-between;
}
nav:before{
position: absolute;
top:20px;
width: 100%;
height: 10px;
background:#fff;
display: block;
content: '';
z-index: -1;
}
nav > a{
position: relative;
font-size: 20px;
padding: 10px;
border:2px solid #5395b4;
background-color: #fff;
width: 50px;
text-align: center;
}
div{
width:800px;
height:520px;
margin: 0 auto;
background-color: #fff;
padding: 10px;
box-shadow: 0 0 30px 0 rgb(8,1,3,0.3);
overflow: hidden;
position: relative;
}
div > img{
width:800px;
height:520px;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin: auto;
}
</style>
</head>
<body>
<span></span>
<nav>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
</nav>
<div>
<img src="http://android.tgbus.com/download/UploadFiles_2115/201205/20120519153246972.jpg">
<img src="http://file.mumayi.com/forum/201401/16/231735cfp4046206r4i705.jpg">
<img src="http://cdn.duitang.com/uploads/item/201211/21/20121121100635_yPV3U.jpeg">
<img src="http://attach.bbs.miui.com/forum/201304/25/195151szk8umd8or8fmfa5.jpg">
<img src="http://attach.bbs.miui.com/forum/201205/03/0141439qhd0cq600q1j0g0.jpg">
<img src="http://attachments.gfan.com/forum/attachments2/201301/29/125722eh9nj87bq20eq2e8.jpg">
</div>
</body>
</html>
其中用到了css()方法，具體用法如下：
var alinks = $('a');
for(var i = alinks.length-1;i>=0;i--){
alinks.eq(i).css({
'background':'red',
'border':'5px solid yellow',
'color':'#fff'
});
}
其中用到了text()方法，具體用法如下：
var alinks = $('a');
for(var i = alinks.length-1;i>=0;i--){
alinks.eq(i).css({
'background':'red',
'border':'5px solid yellow',
'color':'#fff'
}).text('美圖'+i);
}
其中用到了html()方法，具體用法如下：
var alinks = $('a');
for(var i = alinks.length-1;i>=0;i--){
alinks.eq(i).css({
'background':'red',
'border':'5px solid yellow',
'color':'#fff'
}).html('<strong>醜圖</strong>'+i);
}
