您的位置：首页 > Web前端 > JQuery

jQuery - 综合实例 - 密码输入框与标签自动更换

2007-11-16 21:48 651 查看

jQuery - 综合实例 - 密码输入框与标签自动更换

[代码]

<html>
<head>
<script src="jquery-1.2.js"></script>
<script>
$(document).ready(function () {
var password_alternate = $("<span></span>");
$("#password").after(password_alternate);
$(password_alternate).mouseover(function () {
$(password_alternate).css("visibility", "hidden");
$("#password").css("visibility", "visible");
});
$("#password").mouseout(function () {
$("#password").css("visibility", "hidden");
password_alternate.css("position", "absolute");
password_alternate.css("left", $("#password").get(0).offsetLeft + "px");
password_alternate.css("top", $("#password").get(0).offsetTop + "px");
password_alternate.css("width", $("#password").get(0).offsetWidth + "px");
password_alternate.css("height", $("#password").get(0).offsetHeight + "px");
var password = "";
for (var i = 0; i < $("#password").val().length; i++) {
password += "*";
}
$(password_alternate).text(password);
$(password_alternate).css("visibility", "visible");
});
$("#password").mouseout();
});
</script>
</head>
<body>
beforepassword<input id="password" type="password">afterpassword
</body>
</html>

[jQuery - 官方网站]

http://jquery.com/

[jQuery - 当前版本]

http://docs.jquery.com/Release:jQuery_1.2

[jQuery - 其他下载地址]

下载列表, http://docs.jquery.com/Downloading_jQuery 最新代码, http://code.jquery.com/nightlies/jquery-nightly.js

[jQuery - 相关论坛]

http://groups.google.com/group/jquery-en
http://WebDev.board.newsmth.net/
http://WebGeeks.board.newsmth.net/
http://bbs.pku.edu.cn/, homepage看版
http://forum.csdn.net/SList/JavaScript/

[jQuery - 关键词]

jQuery

[jQuery - Core核心]

each迭代, http://docs.jquery.com/Core/each jQuery, http://docs.jquery.com/Core/jQuery

[jQuery - Ajax]

jQuery的Ajax文档, http://docs.jquery.com/Ajax/jQuery.ajax jQuery的Ajax选项，http://docs.jquery.com/Ajax/jQuery.ajax#options
dataType选项，设置返回值类型
timeout选项，用于设置超时
与PHP集成可以使用json_encode返回结果, http://www.php.net/manual/zh/function.json-encode.php
readyState获取请求操作的当前状态, http://msdn2.microsoft.com/en-us/library/ms534361.aspx

[jQuery - 特效]

jQuery淡入特效,http://docs.jquery.com/Effects/fadeIn

[jQuery - Selectors选择器]

表单元素选择器, http://docs.jquery.com/DOM/Traversing/Selectors#Form_Selectors 属性相等选择器，http://docs.jquery.com/Selectors/attributeEquals
checked选中, http://docs.jquery.com/Selectors/checked
:input匹配所有input, textarea, select和button元素, http://docs.jquery.com/Selectors/input

选择器在选择body中出现的title标记时，会出现和预期不同的效果。

element按指定名称匹配所有元素, http://docs.jquery.com/Selectors/element

[jQuery - Attributes属性]

val获取第一个匹配元素value属性的内容, http://docs.jquery.com/Attributes/val

[jQuery - 常用函数]

attr访问自定义属性，减少javascript脚本中代码和数据的耦合

filter, 用于在集合中过滤元素

[jQuery - Events事件]

hover, http://docs.jquery.com/Events/hover submit提交, http://docs.jquery.com/Events/submit
focus响应每个匹配元素的焦点事件, http://docs.jquery.com/Events/focus

click单击, 触发每个匹配元素的单击事件, 绑定函数到每个匹配元素的单击事件, http://docs.jquery.com/Events/click

[jQuery - Traversing遍历器]

filter过滤, http://docs.jquery.com/Traversing/filter find查找, http://docs.jquery.com/Traversing/find

[jQuery - Tutorials教程]

Introducing $(document).ready(), http://docs.jquery.com/Tutorials:Introducing_%24%28document%29.ready%28%29

[jQuery - plugins插件]

Easing动画, http://jquery.com/plugins/project/easing jCarouseLite, 走马灯效果, http://jquery.com/plugins/project/jCarouselLite tableFilter, 表过滤器, http://jquery.com/plugins/project/tableFilter Rounded Corner圆角矩形, http://docs.jquery.com/Tutorials:Rounded_Corners#Rounded_Corners_Without_Images

[jQuery - Utilities实用工具]

trim去掉字符串前后的空格, http://docs.jquery.com/Utilities/jQuery.trim

[jQuery - 参考资料]

http://www.json.org/, http://www.json.org/json.js

JScript (Windows Script Technologies):, http://msdn2.microsoft.com/en-us/library/hbxc2t98.aspx

prototype Property (JScript 5.6):, http://msdn2.microsoft.com/en-us/library/f5s9ycex.aspx

parseInt Method (JScript 5.6):, http://msdn2.microsoft.com/en-us/library/x53yedee.aspx

toString Method (JScript 5.6):, http://msdn2.microsoft.com/en-us/library/k6xhc6yc.aspx

HTTP Status Codes (Windows):, http://msdn2.microsoft.com/en-us/library/Aa384325.aspx

HTML+TIME:, http://msdn2.microsoft.com/en-us/library/ms533112.aspx



HTA:APPLICATION对象, http://msdn2.microsoft.com/en-us/library/ms536495.aspx



About Cross-Frame Scripting and Security:关于跨框架脚本和安全, http://msdn2.microsoft.com/en-us/library/ms533028.aspx

How to Build Tables Dynamically:如何动态构建表格, http://msdn2.microsoft.com/en-us/library/ms532998.aspx

Filter Property (Tabular Data Control): - Filter属性(表格数据控件), http://msdn2.microsoft.com/en-us/library/ms531364.aspx









[jQuery - 综合实例]

实现前一个和后一个效果

跨窗口调用函数

定时刷新

下拉列表框打开指定网站

生成在两个边界间的随机数
文本输入框与标签自动更换
密码输入框与标签自动更换
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航