JS与jQuery插件运用和EasyUI框架的学习干货（三）

最新推荐文章于 2019-03-01 14:26:25 发布

Cs_hnu_scw

最新推荐文章于 2019-03-01 14:26:25 发布

阅读量1.2k

点赞数 1

分类专栏： JavaWeb 文章标签： EasyUI web 前端框架基础

本文链接：https://blog.csdn.net/Cs_hnu_scw/article/details/76285360

版权

下面介绍下jQuery的一些应用，在之前的上一篇中讲解了jQuery的知识点，可以进行阅读一下。而这里主要是说一下jQuery还运用到某些其他的方面的知识。

1：网页端本地存储的方式（三种）

（一）：cookie存储

// cookie的读和写需要在服务器环境下
		//写cookie
		$.cookie('mycookie','ok!',{expires:7,path:'/'});
		//读cookie
		var val = $.cookie('mycookie');
		alert(val);

（二）：localStorage存储

<script type="text/javascript">
		//写入
		//localStorage.setItem('mystorage','ok!');
		//sessionStorage.setItem('pwd','123');
		// 读取
		alert(localStorage.mystorage);
	</script

//获取：
localStorage.getItem("dat");
localStorage.dat

//删除
localStorage.removeItem("dat");

（三）： sessionStorage

方法：sessionStorage。setItem（‘pad’，‘123’）；

总结：它们的区别：（1）：存储大小：cookie为4k，而后面两个为5M

（2）：传输携带：cookie会被在HTTP传输中被携带，loaclStrorage是保存在本地，session是在同源页面

（3）：存在时间：cookie可以进行设置，loaclStorage一直会存在本地（不被用户主动删除的情况），而sessoin是在关闭页面后消失

注意一下：Iphone的无痕浏览只能支持cookie，其他两个都不支持

（四）具体实例（网页的消息推送）

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			margin:0;
		}

		.pop{
			width:400px;
			height:300px;
			background-color:#fff;
			border:1px solid #ccc;
			position:fixed;
			left:50%;
			top:50%;
			margin-left:-200px;
			margin-top:-250px;
			z-index:9999;
			opacity:0;
			filter:alpha(opacity=0);

		}

		.pop span{
			float:right;
			font-size:30px;
			cursor:pointer;
		}

		.mask{
			width:100%;
			height: 100%;
			background-color:#000;
			opacity:0.6;
			filter:alpha(opacity=60);
			position:fixed;
			z-index:9990;
			left:0;
			top:0	
		}
		.pop_con{
			display:none;
		}

		.hasknow{
			text-align:center;
			cursor:pointer;
			margin-top:100px;
		}
	</style>

	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.cookie.js"></script>
	<script type="text/javascript">
		$(function(){

			var read = $.cookie('hasread');

			//alert(read);

			if(read==undefined)
			{
				$('.pop_con').show();
				$('.pop').animate({marginTop:-150,opacity:1});				
			}

			$('.hasknow').click(function() {

				$.cookie('hasread','ok',{expires:7,path:'/'});
				$('.pop_con').hide();

			});			
		})

	</script>
</head>
<body>
	
	<div class="pop_con">
		<div class="pop">
			<span>×</span>
			<p>我们网站有优惠，赶紧行动吧！亲！</p>
			<p class="hasknow">我知道了</p>
		</div>
		<div class="mask"></div>
	</div>

	<h1>网站首页</h1>
</body>
</html>

2：jQueryUI插件的使用

（1）例子：实现拖拉功能

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('.box').draggable({
				// 约束元素在父级内拖动
				containment:'parent',
				//限制在x轴向拖动
				//axis:'x',
				//拖动是透明度变为0.6
				opacity:0.6,
				drag:function(ev,ui){
					console.log(ui.position.left);
				}
			});
		})
	</script>
	<style type="text/css">
		
		.con{
			width:300px;
			height:300px;
			border:1px solid #000;
			margin:50px auto 0;
		}

		.box{
			width:40px;
			height:40px;
			background-color:gold;
			cursor:pointer;
		}
	</style>
</head>
<body>
	<div class="con">
		<div class="box"></div>
	</div>
</body>

（2）例子：实现拖拉进度条功能

<script type="text/javascript">
		$(function(){
			$('.dragbar').draggable({
				axis:'x',

				containment:'parent',
				//containment:[0,0,600,0]
				opacity:0.6,

				drag:function(ev,ui){
					//console.log(ui.position.left);					
					var nowleft = ui.position.left;
					$('.progress').css({width:nowleft});
					$('.slide_count').val(parseInt(nowleft*100/570));
				}

			});
		})
	</script>
	<style type="text/css">
		.slidebar_con{
			width:650px;
			height:32px;
			margin:50px auto 0;
		}

		.slidebar{
			width:600px;
			height:30px;
			border:1px solid #ccc;			
			float:left;
			position:relative;
		}

		.slidebar .dragbar{
			width:30px;
			height:30px;
			background-color:gold;
			cursor:pointer;
			position:absolute;
			left:0;
			top:0;
		}

		.slidebar .progress{
			width:0px;
			height:30px;
			background-color:#f0f0f0;
			position:absolute;
			left:0;
			top:0;
		}

		.slide_count{
			padding:0;
			float:right;
			width:40px;
			height:30px;
			border:1px solid #ccc;
			text-align:center;
			font-size:16px;
		}

	</style>
</head>
<body>
	<div class="slidebar_con">
		<div class="slidebar">
			<div class="progress"></div>
			<div class="dragbar"></div>
		</div>
		<input type="text" name="" value="0" class="slide_count">
	</div>
</body>

（3）例子：实现自定义滚动条

<script type="text/javascript">
		$(function(){

			var h = $('.paragraph').outerHeight();
			var hide = h-500;

			$('.scroll_bar').draggable({
				axis:'y',
				containment:'parent',
				opacity:0.6,
				drag:function(ev,ui){
					var nowtop = ui.position.top;
					var nowscroll = parseInt(nowtop/290*hide);
					$('.paragraph').css({top:-nowscroll});
				}

			});

		})

	</script>
	<style type="text/css">
		.scroll_con{
			width:400px;
			height:500px;
			border:1px solid #ccc;
			margin:50px auto 0;
			position:relative;
			overflow:hidden;
		}

		.paragraph{
			width:360px;
			position:absolute;
			left:0;
			top:0;
			padding:10px 20px;
			font-size:14px;
			font-family:'Microsoft Yahei';
			line-height:32px;
			text-indent:2em;
		}

		.scroll_bar_con{
			width:10px;
			height:490px;
			position:absolute;
			right:5px;
			top:5px;
		}

		.scroll_bar{
			width:10px;
			height:200px;
			background-color:#ccc;
			position:absolute;
			left:0;
			top:0;
			cursor:pointer;
			border-radius