利用jQuery中hover()和cookie机制编写的小程序

最新推荐文章于 2023-06-16 15:55:59 发布

Coding_Ape

最新推荐文章于 2023-06-16 15:55:59 发布

阅读量1k

点赞数 1

分类专栏： js 文章标签： jquery cookie 函数

本文链接：https://blog.csdn.net/sweet___smile/article/details/50782682

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文中，主要练习的是hover(inFunction(),outFunction())函数的使用和cookie机制的应用。此程序没用实用意义，纯属练手。代码大概思路是：左侧是一张图片区域和按钮，当鼠标移到按钮上边时，显示美女图片；当鼠标移出按钮时，显示纯灰色图片。而右侧是cookie机制的使用。当用户写入姓名和密码并点击按钮保存时，刷新或者关闭页面重新打开页面后，姓名和密码会自动显示之前输入的。改写cookieHandle代码中的cookie有效期可以控制cookie的保存时间。

注意点：① chrome和firefox屏蔽了本地的cookie写入，所以，运行结果会有错误。但可以在IE下正确运行。

② 代码中充分体现了JS语言基于对象的特性，将各种变量和操作都封装在table变量内，实现需求的功能

③ 基础知识点：JS变量命名的简便格式（变量名：值），jQuery选择器的正确使用

$("div.name") :表示所选择对象是class名为name的<div>标签。

$("div .name ") :表示所选择对象是<div>标签中class名为name的对象。

$("div , .name") :表示所选择对象是class名为name的对象和<div>标签内的对象。

运行结果如下图所示：

demo.html代码如下：

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html;"> 
<title>小demo</title> 
<script src="CookieHandle.js"></script> 
<script src="jquery-1.8.0.min.js"></script>

<script>

	$(document).ready(function() { 
		table.init(); 
	});

	var table={
		name : cookieHandle.getCookie("姓名") || '' ,   //获取cookie中保存的姓名
		password : cookieHandle.getCookie("密码") || '',   //获取cookie中保存的密码

		//封装了加载页面时需要显示的内容
		init:function(){
			$("#name").val(this.name);				//将读取到的cookie值显示
			$("#password").val(this.password);

			//按钮的hover()事件
			$("#but").hover( 
				function () {
					$("#but").text("移出鼠标到按钮隐藏图片");
						document.getElementsByTagName('img')[0].setAttribute('src','photo.jpg');
				},
				function(){
					$("#but").text("移动鼠标到按钮显示图片");
						document.getElementsByTagName('img')[0].setAttribute('src','gray.jpg');
				}
			);			
		}
		
	};

	//点击按钮保存cookie
	function save(){
			cookieHandle.setCookie({
				name: "姓名", 
				value: $("#name").val(), 
				expiresHours: 365 * 24 
			});
			cookieHandle.setCookie({
				name: "密码", 
				value: $("#password").val(), 
				expiresHours: 365 * 24 
			});
			
	}

</script>
<style>
	#table{
		margin-left: 10px;
		width:60%;
		height:500px;
		border:5px solid green;
		
		background-color: lightgreen;
	}
	#left{
		float:left;
	}
	img{
		margin: 10px;
		width:300px;
		height:400px;
	}
	button{
		margin: 10px auto auto 160px;
		font-size:20px; 
		color:darkorange;
		
	}
	fieldset{
		border-width:2px;
		border-color: lightblack;
		float:right;
		margin:200px 100px auto auto;
	}
	legend{
		background-color: gray;
		color:white;
		font-size:20px;
	}
	input{
		height:20px;
	}
	#butt{
		margin-top:40px;

	}
</style>
</head>
<body>
<div id="table">

	<frameset>
		<div id=left>
			<img src="gray.jpg" />
			</br>
			<button id='but'>移出鼠标到按钮隐藏图片</button>
		</div>

		<fieldset id='right'>
		<legend>用户信息</legend>
			<p>姓名</p>
			<input id='name' />
			<br/>
			<p>密码</p>
			<input id='password' />
		</fieldset>
		<button id='butt' οnclick="save()">记住我的信息 </button>
	<frameset>

</div>
</body>
</html>

CookieHandle.js代码如下（引用了网上某篇五子棋程序的代码）：

/**
 * cookieHandle: 常用cookie操作方法的封装
 * date: 2013.1.10
 * author: Seven
**/
var cookieHandle = {
    //获取cookie中name对应的值
    getCookie: function (name) {
        var cookies = document.cookie.split("; "),
            arr;
        for (var i = 0, len = cookies.length; i < len;i++) {
            arr = cookies[i].split("=");
            if(arr[0] == encodeURIComponent(name)) {
                return decodeURIComponent(arr[1]);
            }
        }
        return "";
    },
    // 设置cookie
    // option.name: cookie名，必选
    // option.value: cookie值，必选
    // option.expiresHours: 过期时间，可选，默认为浏览器关闭即消失
    // option.path: cookie存放路径，可选。例如"/"、"/shop"。
    // 默认情况下，如果在某个页面创建了一个cookie，那么该页面所在目录中的其他页面也可以访问该cookie。
    // 如果这个目录下还有子目录，则在子目录中也可以访问。
    // 例如在www.xxxx.com/html/a.html中所创建的cookie，
    // 可以被www.xxxx.com/html/b.html或www.xxx.com/html/some/c.html所访问，但不能被www.xxxx.com/d.html访问。
    // option.domain: 可访问该cookie的域名，可选。
    setCookie: function (option) {
        var cookieStr = encodeURIComponent(option.name) + "=" + encodeURIComponent(option.value);
        if (option.expiresHours) {
            var date = new Date();
            date.setTime(date.getTime() + option.expiresHours * 3600 * 1000);
            cookieStr = cookieStr + "; expires=" + date.toUTCString();
        }
        if (option.path) {
            cookieStr = cookieStr + "; path=" + option.path;
        }
        if (option.domain) {
            cookieStr = cookieStr + "; domain=" + option.domain;
        }
        document.cookie = cookieStr;
    },
    // 删除cookie
    // name: cookie名，必选
    // option.path: cookie存放路径，可选
    // option.domain: 可访问该cookie的域名，可选
    // 需要注意的是，设置cookie时，如果setCookie传了path、domain，删除时也必选传入这两个参数，否则无法删除cookie
    // 另外，经测试，如设置了path、domain，删除时需在设置cookie的同一域下删除
    deleteCookie: function (name, option) {
        var date = new Date(0);
        document.cookie = name + "=88; expires=" + date.toUTCString() +
                            (option.path ? ("; path=" + option.path) : "") +
                            (option.domain ? ("; domain=" + option.domain) : "");
    }
};