JQuery是繼prototype之后又一個優秀的Javascript庫。它是輕量級的js庫 ,它兼容CSS3,還兼容各種瀏覽器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML(標準通用標記語言下的一個應用)、events、實現動畫效果,并且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是,它的文檔說明很全,而且各種應用也說得很詳細,同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內容分離,也就是說,不用再在html里面插入一堆js來調用命令了,只需要定義id即可。
jQuery是一個兼容多瀏覽器的javascript庫,核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國人John Resig在紐約的barcamp發布,吸引了來自世界各地的眾多JavaScript高手加入,由Dave Methvin率領團隊進行開發。如今,jQuery已經成為最流行的javascript庫,在世界前10000個訪問最多的網站中,有超過55%在使用jQuery。
jQuery是免費、開源的,使用MIT許可協議。jQuery的語法設計可以使開發更加便捷,例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用Ajax以及其他功能。除此以外,jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者可以很輕松的開發出功能強大的靜態或動態網頁。
jQuery,顧名思義,也就是JavaScript和查詢(Query),即是輔助JavaScript開發的庫。
# $()
頁面加載完成 執行的代碼
```
$(function() {
console.log('加載完成');
});
```
### class 選擇
`$(".xxx")`
### id選擇
`$("#xxx")`
### dom轉jq對象
```
var ele = document.getElementById('eleId');
var $jq = $(ele);
```
### 設置或返回被選元素的屬性值(針對表單元素)
## $().val()
為被選元素設置或返回一個或多個樣式屬性
## $().css()
設置或返回被選元素的屬性/值
## $().attr()
設置或返回被選元素的屬性/值
## $().prop();
設置或返回被選元素的內容
## $().html()
隱藏元素
## $().hide()
顯示元素
## $().show()
$().eq()
根據選擇器/元素/jQuery 對象檢查匹配元素集合,如果存在至少一個匹配元素,則返回 true
$().is()
//后代查找
$().find()
子代查找
$().children()
$().click()
$().change()
為每個匹配元素執行函數
$.each()
## $.get()
```
$.get('login.php', {
id : 'Robin',
password: '123456',
gate : 'index'
}, function(data, status) {
//data為返回對象,status為請求的狀態
alert(data);
//此時假設服務器腳本會返回一段文字"你好,Robin!",
那么瀏覽器就會彈出對話框顯示該段文字
alert(status);
//結果為success, error等等,但這里是成功時才能運行的函數
});
```
## $.post();
```
$.post('regsiter.php', {
id:'Robin',
password: '123456',
type:'user'
},function(data, status) {
alert(data);
}, "json");
```
## $.ajax()
```
$.ajax({
url: "ajax/ajax_selectPicType.aspx",
data:{Full:"fu"},
type: "POST",
dataType:'json',
success:CallBack,
error:function(er){
BackErr(er);}
});
```
# 示例學
[源代碼]()
## 效果




## 代碼-info
```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>信息列表</title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
</head>
<body>
<div class="topbar-wrap white">
<div class="topbar-inner clearfix">
<div class="topbar-logo-wrap clearfix">
<ul class="navbar-list clearfix">
<li><a class="on" href="info.html">信息</a></li>
<li><a href="add.html">添加</a></li>
</ul>
</div>
</div>
</div>
<div class="container clearfix">
<div class="sidebar-wrap">
<div class="sidebar-title">
<h1>菜單</h1>
</div>
<div class="sidebar-content">
<ul class="sidebar-list">
<li>
<a href="#"><i class="icon-font">?</i>菜單</a>
<ul class="sub-menu">
<li><a href="index.html"><i class="icon-font">?</i>主頁</a></li>
<li><a href="info.html"><i class="icon-font">?</i>信息列表</a></li>
<li><a href="add.html"><i class="icon-font">?</i>添加信息</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!--/sidebar-->
<div class="main-wrap">
<div class="crumb-wrap">
<div class="crumb-wrap">
<div class="crumb-list"><i class="icon-font">?</i>
</i><a href="index.html">首頁</a>
<span class="crumb-step">></span>
<span>信息列表</span>
</div>
</div>
</div>
<div class="search-wrap">
<div class="search-content">
<form action="javascript:;" method="post">
<table class="search-tab">
<tr>
<th width="70">關鍵字:</th>
<td>
<input class="common-text" placeholder="姓名,學號" id="ipt-key" maxlength="20" type="text">
</td>
<td>
<input class="btn btn-primary btn2" onclick="search()" value="查詢" type="button">
</td>
</tr>
</table>
</form>
</div>
</div>
<div class="result-wrap">
<form name="myform" id="myform" method="post">
<div class="result-content">
<table class="result-tab" width="100%" style="text-align:center">
<thead>
<tr>
<th>編號</th>
<th>學號</th>
<th>班級</th>
<th>姓名</th>
<th>性別</th>
<th>名族</th>
<th>地址</th>
<th>操作</th>
</tr>
</thead>
<tbody id="table-container">
<tr>
<td>編號</td>
<td>學號</td>
<td>班級</td>
<td>姓名</td>
<td>性別</td>
<td>名族</td>
<td>地址</td>
<td>
<a class="link-update" href="edit">修改</a>
<a class="link-del" href="#">刪除</a>
</td>
</tr>
</tbody>
</table>
<div class="list-page"> 2 條 1/1 頁</div>
</div>
</form>
</div>
</div>
<!--/main-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/layer/layer.js" type="text/javascript"></script>
<script>
// $(function() {
// console.log('ok');
// init(1, 12);
// });
// function init(pi, ps) {
// var key = $("#ipt-key").val().trim();
// //$.post('url', {data}, function(data) {}, 'json');
// $.post('http://node.lintul.com/info/getpage', {
// key: key,
// pi: pi,
// ps: ps
// }, function(data) {
// if (data.status == 2) {
// var arrCtn = [];
// $.each(data.message.data, function(index, el) {
// arrCtn.push('<tr>');
// arrCtn.push('<td>' + (index + 1) + '</td>');
// arrCtn.push('<td>' + el.num + '</td>');
// arrCtn.push('<td>' + el.classs + '</td>');
// arrCtn.push('<td>' + el.name + '</td>');
// arrCtn.push('<td>' + el.sex + '</td>');
// arrCtn.push('<td>' + el.nation + '</td>');
// arrCtn.push('<td>' + el.address + '</td>');
// arrCtn.push('<td><a class="link-update" href="edit.html?id=' + el.id + '">修改</a>??<a class="link-del" href="javascript:delinfo(' + el.id + ')">刪除</a></td>');
// arrCtn.push('</tr>');
// });
// $('#table-container').html(arrCtn.join(''));
// } else {
// $('#table-container').html('<tr><td colspan="8">未查詢到數據</td></tr>');
// }
// }, 'json');
// }
</script>
</body>
</html>
```
## 代碼-edit
```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>后臺管理</title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
</head>
<body>
<div class="topbar-wrap white">
<div class="topbar-inner clearfix">
<div class="topbar-logo-wrap clearfix">
<ul class="navbar-list clearfix">
<li><a href="index.html">首頁</a></li>
<li><a href="info.html">信息</a></li>
<li><a href="add.html">添加</a></li>
<li><a class="on" href="javascript:;">修改</a></li>
</ul>
</div>
</div>
</div>
<div class="container clearfix">
<div class="sidebar-wrap">
<div class="sidebar-title">
<h1>菜單</h1>
</div>
<div class="sidebar-content">
<ul class="sidebar-list">
<li>
<a href="#"><i class="icon-font">?</i>菜單</a>
<ul class="sub-menu">
<li><a href="index.html"><i class="icon-font">?</i>主頁</a></li>
<li><a href="info.html"><i class="icon-font">?</i>信息列表</a></li>
<li><a href="add.html"><i class="icon-font">?</i>添加信息</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!--/sidebar-->
<div class="main-wrap">
<div class="crumb-wrap">
<div class="crumb-list"><i class="icon-font">?</i>
</i><a href="index.html">首頁</a>
<span class="crumb-step">></span>
<span>修改信息</span>
</div>
</div>
<div class="result-wrap">
<div class="result-content">
<form>
<table class="insert-tab" width="100%">
<tbody>
<tr>
<th width="120"><i class="require-red">*</i>學號:</th>
<td>
<input class="common-text" id="num" style="width:400px" maxlength="50" size="50" type="text" placeholder="請輸入學號">
<input type="hidden" id="hidden-id">
</td>
</tr>
<tr>
<th>班級:</th>
<td>
<select name="colId" id="classs" class=" common-text">
<option value="2014級9班">2014級09班</option>
<option value="2014級10班">2014級10班</option>
<option value="2013級9班">2013級09班</option>
<option value="2013級10班">2013級10班</option>
</select>
</td>
</tr>
<tr>
<th><i class="require-red">*</i>姓名:</th>
<td>
<input class="common-text" id="name" maxlength="50" size="50" style="width:400px" type="text" placeholder="請輸入姓名">
</td>
</tr>
<tr>
<th>性別:</th>
<td>
<select name="colId" id="sex" class=" common-text">
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr>
<tr>
<th>名族:</th>
<td>
<input class="common-text" id="nation" maxlength="50" size="50" style="width:400px" type="text">
</td>
</tr>
<tr>
<th>地址:</th>
<td>
<textarea name="content" id="address" class="common-textarea" id="content" cols="30" style="width: 98%;resize:none" rows="5"></textarea>
</td>
</tr>
<tr>
<th></th>
<td>
<input class="btn btn-primary btn6 mr10" value="修改" onclick="updInfo()" type="button">
<input class="btn btn6" onclick="history.go(-1)" value="返回" type="button">
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
<!--/main-->
</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/layer/layer.js" type="text/javascript"></script>
<script>
// $(function() {
// //queryString 查詢字符串 ?開始的內容
// var qs = window.location.search;
// //queryStringData 截取子字符串 ?id= 后面的所有東西
// var qsd = qs.substr(4);
// //id 把我們需要的數據 轉換成 10進制的整數
// var id = parseInt(qsd, 10);
// //NaN 轉換失敗
// if (isNaN(id)) {
// //跳轉回 信息列表頁面
// window.location.href = "info.html";
// } else { //轉換成功
// //初始化頁面數據
// _init(id);
// }
// });
// //查詢數據
// function _init(id) {
// //$.post('url', {data}, function(data) {}, 'json');
// $.post('http://node.lintul.com/info/oneinfo', {
// id: id,
// }, function(data) {
// // 還原數據
// if (data.status == 2) {
// //把 json 數據里面的某一個屬性值綁定到 html 標簽上
// $('#hidden-id').val(data.message.id);
// $('#num').val(data.message.num);
// $('#classs').val(data.message.classs);
// $('#name').val(data.message.name);
// $('#sex').val(data.message.sex);
// $('#nation').val(data.message.nation);
// $('#address').val(data.message.address);
// } else {
// //給出錯誤提示
// layer.msg("沒有相關信息");
// }
// }, 'json');
// }
// //修改數據
// function updInfo() {
// //獲取 id 為 num 元素轉換為 jquery 對象
// var $num = $('#num');
// //判斷學號必須輸入 trim 去除前后空格
// if ($num.val().trim() == '') {
// //layer 插件提示
// layer.msg('請輸入學號', {
// offset: '20%',
// icon: 5,
// time: 2000
// });
// //光標聚集
// $num.focus();
// return;
// }
// var $classs = $('#classs');
// var $name = $('#name');
// //限制必須輸入姓名
// if ($name.val().trim() == '') {
// layer.msg('請輸入姓名', {
// offset: '20%',
// icon: 5,
// time: 2000
// });
// $name.focus();
// return;
// }
// var $sex = $('#sex');
// var $nation = $('#nation');
// var $address = $('#address');
// //數據準備
// var datas = {
// id: $('#hidden-id').val(),
// num: $num.val().trim(),
// classs: $classs.val(),
// name: $name.val().trim(),
// sex: $sex.val(),
// nation: $nation.val().trim(),
// address: $address.val().trim()
// }
// //向服務器發送數據
// $.post('http://node.lintul.com/edit/updinfo', datas, function(data) {
// //狀態標識 為2 則表示 操作成功
// if (data.status == 2) {
// layer.msg('修改成功', {
// offset: '20%',
// icon: 6,
// time: 2000
// }, function() {
// window.location.href = 'info.html';
// });
// } else { //否則給出錯誤提示
// layer.msg('修改失敗', {
// offset: '20%',
// icon: 2,
// time: 2000
// });
// }
// }, 'json');
}
</script>
</body>
</html>
```
## 代碼-add
```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>添加信息</title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
</head>
<body>
<div class="topbar-wrap white">
<div class="topbar-inner clearfix">
<div class="topbar-logo-wrap clearfix">
<ul class="navbar-list clearfix">
<li><a href="index.html">首頁</a></li>
<li><a href="info.html">信息</a></li>
<li><a class="on" href="add.html">添加</a></li>
</ul>
</div>
</div>
</div>
<div class="container clearfix">
<div class="sidebar-wrap">
<div class="sidebar-title">
<h1>菜單</h1>
</div>
<div class="sidebar-content">
<ul class="sidebar-list">
<li>
<a href="#"><i class="icon-font">?</i>菜單</a>
<ul class="sub-menu">
<li><a href="index.html"><i class="icon-font">?</i>主頁</a></li>
<li><a href="info.html"><i class="icon-font">?</i>信息列表</a></li>
<li><a href="add.html"><i class="icon-font">?</i>添加信息</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!--/sidebar-->
<div class="main-wrap">
<div class="crumb-wrap">
<div class="crumb-list"><i class="icon-font">?</i>
</i><a href="index.html">首頁</a>
<span class="crumb-step">></span>
<span>添加信息</span>
</div>
</div>
<div class="result-wrap">
<div class="result-content">
<form>
<table class="insert-tab" width="100%">
<tbody>
<tr>
<th width="120"><i class="require-red">*</i>學號:</th>
<td>
<input class="common-text" id="num" style="width:400px" maxlength="50" size="50" type="text" placeholder="請輸入學號">
</td>
</tr>
<tr>
<th>班級:</th>
<td>
<select name="colId" id="classs" class=" common-text">
<option value="2014級9班">2014級09班</option>
<option value="2014級10班">2014級10班</option>
<option value="2013級9班">2013級09班</option>
<option value="2013級10班">2013級10班</option>
</select>
</td>
</tr>
<tr>
<th><i class="require-red">*</i>姓名:</th>
<td>
<input class="common-text" id="name" maxlength="50" size="50" style="width:400px" type="text" placeholder="請輸入姓名">
</td>
</tr>
<tr>
<th>性別:</th>
<td>
<select name="colId" id="sex" class=" common-text">
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr>
<tr>
<th>名族:</th>
<td>
<input class="common-text" id="nation" maxlength="50" size="50" style="width:400px" type="text">
</td>
</tr>
<tr>
<th>地址:</th>
<td>
<textarea name="content" id="address" class="common-textarea" id="content" cols="30" style="width: 98%;resize:none" rows="5"></textarea>
</td>
</tr>
<tr>
<th></th>
<td>
<input class="btn btn-primary btn6 mr10" value="添加" onclick="addInfo()" type="button">
<input class="btn btn6" onclick="history.go(-1)" value="返回" type="button">
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>
<script type="text/javascript">
// //添加信息
// function addInfo() {
// var $num = $('#num');
// //必須輸入學號
// if ($num.val().trim() == '') {
// layer.msg('請輸入學號', {
// offset: '20%',
// icon: 5,
// time: 2000
// });
// $num.focus();
// return;
// }
// var $classs = $('#classs');
// var $name = $('#name');
// //必須輸入 姓名
// if ($name.val().trim() == '') {
// layer.msg('請輸入姓名', {
// offset: '20%',
// icon: 5,
// time: 2000
// });
// $name.focus();
// return;
// }
// var $sex = $('#sex');
// var $nation = $('#nation');
// var $address = $('#address');
// //數據準備
// var datas = {
// num: $num.val().trim(),
// classs: $classs.val(),
// name: $name.val().trim(),
// sex: $sex.val(),
// nation: $nation.val().trim(),
// address: $address.val().trim()
// }
// //向服務器發送數據
// $.post('http://node.lintul.com/add', datas, function(data) {
// //狀態標識
// if (data.status == 2) {
// //成功提示
// layer.msg('添加成功', {
// offset: '20%',
// icon: 6,
// time: 2000
// }, function() {
// window.location.href = 'info.html';
// });
// } else { //錯誤提示
// layer.msg('添加失敗', {
// offset: '20%',
// icon: 5,
// time: 2000
// });
// }
// }, 'json');
// }
</script>
</body>
</html>
```