jquery常用操作说明
1.如何引入jquery
要使用
jQuery
，我们要知道，jQuery是一个函数库，简单来讲就是一个后缀名为".js"的文件。可以在
http://www.bootcdn.cn/jquery/
，复制链接引入CDN。
<script src="//cdn.bootcss.com/jquery/3.1.1/core.js"></script>
2.怎么初始化
jQuery 页面加载初始化的方法有3种 ，页面在加载的时候都会执行脚本，应该没什么区别，主要看习惯吧，本人觉得第二种方法最好，比较简洁。
<script>
$(document).ready(function(){
alert("第一种方法。");
</script>
<script>
$(function(){
alert("第二种方法。");
</script>
<script>
jQuery(function($){
alert("第三种方法。");
</script>
3.如何操作dom元素（新增，修改，删除）
(1)查找dom节点
无论新增，修改，删除，都是第一步查找节点。查找节点非常容易，使用选择器就能轻松完成各种查找工作。例：查找元素节点p返回p内的文本内容$("p").text();例：查找元素节点p的属性返回属性名称对应的属性值$("p").attr("title"),返回p的属性title的值。
(2)新增
append()方法向匹配的元素内部追加内容，方法如下：$("target").append(element);例：
var str="<lititle='香蕉'>香蕉</li>";
$("div").append(str);
(3)修改
一般都是修改标签中的文字内容。
$("p").text();该示例获得元素p的text文本内容。
$("p").text("重新设置的文本内容");该示例设置元素p的text文本为"重新设置的文本内容";
(4)删除
remove()方法删除所有匹配的元素，传入的参数用于筛选元素，该方法能删除元素中的所有子节点，当匹配的节点及后代被删除后，该方法返回值是指向被删除节点的引用，因此可以使用该引用，再使用这些被删除的元素。例如：
$(this).remove();
$(this).parent().remove();
4. 如何让元素显示或者隐藏
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
$("#hide").click(function(){
$("p").hide();
$("#show").click(function(){
$("p").show();
});
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：
$("button").click(function(){
$("p").toggle();
});
5.综合练习
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<style type="text/css">
.mask{
position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
z-index: 1; left: 0px;
opacity:0.5; -moz-opacity:0.5;
.user_detail{position:relative;background:#fff;margin:100px auto;height:300px;width:300px;border:1px red solid;z-index:10;;}
</style>
</head>
<div class="add">新增</div>
<table width="100%" border="1" class="thistable">
<th scope="col">ID</th>
<th scope="col">姓名</th>
<th scope="col">电话</th>
<th scope="col">操作</th>
<tr class="user" data-id="1">
<td class="id">1</td>
<td class="name">小明</td>
<td class="mobile">12312312312</td>
<td><span data-id="1" οnclick="show_user(this)">编辑</span> | <span data-id="1" οnclick="delete_user(this)">删除</span></td>
</table>
<div class="user_detail">
姓名：<input type="text" class="showname" value="">
电话：<input type="text" class="showmobile" value="">
<input type="hidden" class="showid" value="">
<input type="button" class="save_user" value="保存"><input type="button" class="cancel_edit" value="取消">
<div class="mask"></div>
</body>
<script type="text/javascript">
$(function(){
var add_index=2;
var newname='';
var newmobile='';
$('.add').click(function(){
//清除user_detail信息
$('.showid').val(0);
$('.showname').val('');
$('.showmobile').val('');
$('.user_detail').show();
$(".mask").css("height",$(document).height());
$(".mask").css("width",$(document).width());
$('.mask').show();
$('.save_user').click(function(){
var id=$('.showid').val();
var name=$('.showname').val();
var mobile=$('.showmobile').val();
if(id==0){
newname=name;
newmobile=mobile;
var str='<tr class="user" data-id="'+add_index+'">'+
'<td class="id">'+add_index+'</td>'+
'<td class="name">'+newname+'</td>'+
'<td class="mobile">'+newmobile+'</td>'+
'<td><span data-id="'+add_index+'" οnclick="show_user(this)">编辑</span> | <span data-id="'+add_index+'" οnclick="delete_user(this)">删除</span></td>'+
'</tr>';
$('.thistable').append(str);
//关闭遮罩
$('.cancel_edit').click();
return;
$('.user').each(function(){
if($(this).attr('data-id')==id){
$(this).find('.name').text(name);
$(this).find('.mobile').text(mobile);
return false;
//关闭遮罩
$('.cancel_edit').click();
$('.cancel_edit').click(function(){
$('.user_detail').hide();
$('.mask').hide();
function show_user(that){
var info=$(that).parent().parent();
var id=info.find('.id').text();
var name=info.find('.name').text();
var mobile=info.find('.mobile').text();
//添加对应信息
$('.showid').val(id);
$('.showname').val(name);
$('.showmobile').val(mobile);
$('.user_detail').show();
$(".mask").css("height",$(document).height());
$(".mask").css("width",$(document).width());
$('.mask').show();
function delete_user(that){
$(that).parent().parent().remove();
</script>
</html>
