[TOC]
# JQuery
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);}
});
~~~
# 示例学
[源代码](http://pan.baidu.com/s/1pLPHObL)
## 效果
http://node.lintul.com/info/getpage
http://node.lintul.com/info/oneinfo
http://node.lintul.com/info/del
http://node.lintul.com/add
http://node.lintul.com/edit/updinfo
## 代码-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>
~~~
