锋利的jquery

灰太狼 2022-07-16 09:44 193阅读 0赞

今天用jquery写了一个标签提示功能的小程序，发现jquery真是叫锋利

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>超链接提示效果</title>
    
    <script src="jquery.js" type="text/javascript"></script>
    
    <script type="text/javascript"> $(function(){ var x= 100; var y= 100; $("a.a1") //鼠标移入 .mouseover(function(e){ //添加一个属性暂存title，可以随意添加啊，好棒 this.temp= this.title; //创建div元素 var div1= "<div id='div1'>"+this.title+"</div>"; $("body").append(div1); //设置div的x，y坐标 $("#div1") .css( { "top":(e.clientY+y)+"px", "left":(e.clientX+x)+"px" } ).show("fast"); this.title=""; })//注意，千万注意这个地方不要习惯性的加一个分号！上次因为这个小小的分号调试了好久。为什么，因为对"a.a1"对象的事件没有结束啊，如果加上分号下面的事件就没有主人了 //鼠标移出 .mouseout(function(){ //再次添加上，以备下一次鼠标滑入时提供注释。 this.title= this.temp; $("#div1").remove(); }) //鼠标移动 .mousemove(function(e){ $("#div1") .css({ "top":(e.pageY+y)+"px", "left":(e.pageY+x)+"px" }) }); }); </script>
    
    </head>
    
    <body>
    
    <p><a href="#" class="a1" title="这是用jQuery的超链接">标签1</a></p>
    <p><a href="#" title="这是不用jQuery的超链接">标签2</a></p>
    
    
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，193人围观）

还没有评论，来说两句吧...

相关阅读

相关锋利的jquery

今天用jquery写了一个标签提示功能的小程序，发现jquery真是叫锋利 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

灰太狼/ 2022年07月16日 09:44/ 0 赞/ 194 阅读

相关锋利的jquery第五章

5.1 表单应用表单标签：表单域：表单按钮：注意：哪些属性应该用:attr(),哪些应该用:prop() pr

太过爱你忘了你带给我的痛/ 2022年04月05日 13:23/ 0 赞/ 176 阅读

相关锋利的jquery第四章

1.绑定事件 bind(): 2.合成事件 hover(): hover(enter,leave);鼠标悬停，鼠标移出

古城微笑少年丶/ 2022年04月05日 13:23/ 0 赞/ 185 阅读

相关锋利的jquery第三章

即能设置元素的值，也能获取元素的值： attr()/html()/text()/height()/width()/val()/css() jq

缺乏、安全感/ 2022年04月05日 13:23/ 0 赞/ 178 阅读

相关锋利的jQuery读书笔记(六)

第六章 jQuery与ajax的应用 1 load()方法 1）载入HTML方法 load(url \[,data\] \[,callback\]); $(fu

阳光穿透心脏的1/2处/ 2022年02月26日 04:42/ 0 赞/ 266 阅读

相关锋利的jQuery读书笔记(五)

第五章 jQuery对表单表格的操作及更多应用 1 获取和失去焦点改变样式 input:focus,textarea:focus\{ border:1px soli

Love The Way You Lie/ 2022年02月26日 04:36/ 0 赞/ 417 阅读

相关锋利的jQuery读书笔记(三)

第三章 jQuery中的DOM操作 1 查找节点 var $para = $(“p”); var p\_txt = $para.attr(“title”); 2

淡淡的烟草味﹌/ 2022年02月26日 04:26/ 0 赞/ 238 阅读

相关锋利的jQuery读书笔记(一)

第一章认识Jquery 1 $(document).ready(function()\{ alert(“hello world”); \}); 简化写法：

Bertha 。/ 2022年02月26日 04:24/ 0 赞/ 180 阅读

相关锋利的JQuery —— DOM操作

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] [图片猛戳链接][Link 1] ![1516562

朴灿烈づ我的快乐病毒、/ 2022年01月15日 01:41/ 0 赞/ 249 阅读

相关《锋利的jquery》认识jquery总结

1. window.onload和$(document).ready()执行时机不同，前者必须等待网页中所有的内容加载完毕后，后者是所有dom结构绘制完毕后；编写个数前者只允

- 日理万妓/ 2021年06月24日 15:59/ 0 赞/ 470 阅读