jquery常用操作说明

1.如何引入jquery

要使用jQuery，我们要知道，jQuery是一个函数库，简单来讲就是一个后缀名为".js"的文件。可以在http://www.bootcdn.cn/jquery/ ，复制链接引入CDN。

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">
<head>
	<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;display:none;}
	</style>
</head>
<body>
<div class="add">新增</div>
<table width="100%" border="1" class="thistable">
  <tr>
    <th scope="col">ID</th>
    <th scope="col">姓名</th>
    <th scope="col">电话</th>
    <th scope="col">操作</th>
  </tr>
  <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" onclick="show_user(this)">编辑</span> | <span data-id="1" onclick="delete_user(this)">删除</span></td>
  </tr>
</table>
<div class="user_detail">
	姓名：<input type="text" class="showname" value="">
	<br>
	电话：<input type="text" class="showmobile" value="">
	<br>
	<input type="hidden" class="showid" value="">
	<input type="button" class="save_user" value="保存"><input type="button" class="cancel_edit" value="取消">
</div>
<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+'" onclick="show_user(this)">编辑</span> | <span data-id="'+add_index+'" onclick="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>

jquery常用操作说明

猜你喜欢