jQuery实现ToolTip元素定位显示功能示例

记录下,以备将来用到

<!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 type="text/javascript" src="jquery-1.4.2.min.js" ></script>

<script type="text/javascript">

  function ShowTip(event,obj,message)

  {

   var xOffset = -10; // x distance from mouse

   var yOffset = 10; // y distance from mouse

   //obj.style.top = (event.clientX + yOffset)+"px";

   //obj.style.left = (event.clientY + xOffset)+"px";

   //获取元素width: $(obj).width();

   //获取元素height:$(obj).height()

   //获取元素位置:$(obj).position().top和$(obj).offset().top

   $(‘body‘).append( ‘<div id="tipmessage">‘+message+‘</div>‘);

   $(‘div#tipmessage‘).css("top", $(obj).position().top+$(obj).height() + "px").css("left", $(obj).position().left+"px").fadeIn("slow");

  }

  function HideTip()

  {

   $("div#tipmessage").fadeOut("slow").remove();

  }

 </script>

 <style type="text/css">

  #tipmessage

  {

  display:none;

  z-index:1000;

  border:1px solid #448833;

  position:absolute;

  background:#ffffff;

  max-width:200px;

  max-height:30px;

  padding:5px 10px;

  }

</style>

</head>

<body>

<a href="#" onmouseover="ShowTip(event,this,‘欢迎访问脚本之家‘)" onmouseout="HideTip()">Tip</a>

</body>

</html>

时间: 2024-08-05 08:40:07

jQuery实现ToolTip元素定位显示功能示例的相关文章

利用Xpath和jQuery进行元素定位示例

利用Selenium在做前端UI自动化的时候,在元素定位方面主要使用了XPATH和jQuery两种方法.XPATH作为主要定位手段,jQuery作为补充定位手段.因为在通过XPATH进行定位的时候,Selenium是通过游览器原生的API进行操作,更接近模拟用户的操作:而通过jQuery作为定位的时候,实质是向游览器发送一段JavaScript代码,虽然可以达到目的,但模拟效果不如前者. 以下列举了一些常用的定位写法. 通过id定位元素 <div class="input-outer&qu

Selenium2学习-002-Selenium2 Web 元素定位及 XPath 编写演示示例

此文主要对 Selenium2 的 Web 元素定位及 XPath 编写示例,敬请各位亲们参阅,共同探讨.若有不足之处,敬请各位大神指正,不胜感激! 通过 Firefox(火狐)浏览器的插件 Firebug + xpath checker ,结合三个示例来演示实现页面元素的定位及 xpath 路径编写.下面就一起开始我们的 Web 页面元素定位之旅吧... 首先,启动 Firefox(火狐)浏览器,并启动 Firebug 插件(按 F12 按键即可) 一.百度搜索框定位(元素的 ID) 网址输入

jQuery实现页面元素智能定位

原文:jQuery实现页面元素智能定位 源代码下载地址:http://www.zuidaima.com/share/1550463635950592.htm

java selenium (五) 元素定位大全

页面元素定位是自动化中最重要的事情, selenium Webdriver 提供了很多种元素定位的方法.  测试人员应该熟练掌握各种定位方法. 使用最简单,最稳定的定位方法. 阅读目录 自动化测试步骤 在自动化测试过程中, 测试程序通常的操作页面元素步骤 1. 找到Web的页面元素,并赋予到一个存储对象中 (WebElement) 2. 对存储页面元素的对象进行操作, 例如:点击链接,在输入框中输入字符等 3. 验证页面上的元素是否符合预期 通过这三个步骤, 我们可以完成一个页面元素的操作, 找

selenium元素定位

1.元素定位 在本章中,我们将讨论 u 使用浏览器工具来检查页面中元素的结构 u 使用findElement方法定位元素 u 使用findElements方法来定位元素 u 定位链接 u 通过标签名称定位元素 u 使用CSS选择器定位元素 u 使用XPath定位元素 u 使用文本定位元素 u 使用高级CSS选择器定位元素 u 使用jQuery选择器 u 定位表格的行和列 u 定位表格中的子元素 1.1.介绍 成功的自动化GUI(图形用户界面)测试取决于从被测试的应用程序中识别和定位GUI元素,然

Robot Framework 使用2 - 如果进行页面元素定位

上一篇文章中,简单模拟了一个baidu搜索并截图的过程,在搜索过程中,我们需要对搜索框.搜索按钮进行定位.本篇文章主要介绍一下具体的定位方法. 上一篇中,我们的脚本如下: *** Settings *** Library           Selenium2Library *** Test Cases *** firefox兼容性 Open Browser    https://www.baidu.com/    ff Input Text    id=kw    LeetTest Click

selenium8中元素定位方式

Selenium对网页的控制是基于各种前端元素的,在使用过程中,对于元素的定位是基础,只有准去抓取到对应元素才能进行后续的自动化控制,我在这里将对各种元素定位方式进行总结归纳一下. 这里将统一使用百度首页(www.baidu.com)进行示例,f12可以查看具体前端代码.WebDriver8种基本元素定位方式find_element_by_id() 采用id属性进行定位.例如在百度页面中输入关键字 Selenium 进行搜索.百度部分关键源码如下:<span class="bg s_ipt

Selenium Webdriver元素定位的八种常用方式

在使用selenium webdriver进行元素定位时,通常使用findElement或findElements方法结合By类返回的元素句柄来定位元素.其中By类的常用定位方式共八种,现分别介绍如下. 1. By.name() 假设我们要测试的页面源码如下: <button id="gbqfba" aria-label="Google Search" name="btnK" class="gbqfba"><

jQuery工作原理解析以及源代码示例

jQuery的开篇声明里有一段非常重要的话:jQuery是为了改变javascript的编码方式而设计的. 从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库. jQuery改变javascript编码方式! 那么它是如何实现它的声明的呢?这里,用以下的一段简短的使用流程: 1)查找(创建)jQuery对象:$(”selector”); 2)调用jQuery对象的方法完成我们需要完成的工作:$(”selector”).doOurWork(); ok,jQuery就是以这种可