jQuery示例
<!DOCTYPE html>
<html lang="en" class="loading">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
$("#address").focus(function () {
var text_val = $(this).val();
if (text_val == "请输入邮箱地址") {
$(this).val("");
}
});
$("#address").blur(function () {
var text_val = $(this).val();
if (text_val == "") {
$(this).val("请输入邮箱地址");
}
});
"css的“height”属性:" + $("div").css("height");//结果:100px;
"height()方法求高度:" + $("div").height();//结果:100
$("div").width();//获取宽度结果:100
$("div").css("width")//结果:100px
$("div").width("100");
$("div").width() //设置宽度
/*
浏览器己经自带了超链接提示,只需在超链接中加入title属性就可以了。
然而这个提示效果的响应速度是非常缓慢的,考虑到良好的人机交互,需要的是当鼠标
移动到超链接的那一瞬间就出现提示。这时就需要移除<a>标签中的title提示效果,自己动
手做一个类似功能的提示。*/
/* 实现这个效果的具体思路如下。
(1)当鼠标滑入超链接。
①创建一个<div>元素,<div>元素的内容为title属性的值。
②将创建的元素追加到文档中。
③为它设置x坐标和y坐标,使它显示在鼠标位置的旁边。
(2)当鼠标滑出超链接时,移除<div>元素。*/
var x = 10;
var y = 20;
$("a.tooltip").onmouseover(function (e) {
//提示信息
this.myTitle=this.title;
this.title="";
var tooltip = "<div id='tooltip'>" + this.title + "</div>";//创建div元素,内容是title的属性值
$("body").append(tooltip);//追加到文档中
$("#tooltip").css({
"top": e.pageX + "px",
"left": e.pageY + "px"
}).show("fast");
}).onmouseout(function () {
/* 为什么当鼠标滑出时,要把属性值又赋给属性title呢?
因为当鼠标滑出时,需要考虑再次滑入时的属性title值,如果不将myTitle的值重新
赋给title属性,当再次滑入时,title的值就为空了.*/
this.title = this.myTitle;
$("#tooltip").remove();
});
});
</script>
</head>
<body>
<input type="text" id="address" value="请输入邮箱地址"/><br>
<div style="width: 50px;height: 100px; border: 1px solid #f00;">盒子</div>
<br><br><br><br>
<a href="#" class="tooltip" title="超链接提示">这是一个超链接提示框</a><br>
<a href="#" class="tooltip" title="超链接提示">这是一个超链接提示框</a>
</body>
</html>
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/9810809.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」