<!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>

jQuery示例的更多相关文章

  1. 前端武器库之jQuery示例

    1.全选 反选 取消 相关知识点: - 选择器 - .prop $('#tb:checkbox').prop('checked'); 获取值 $('#tb:checkbox').prop('check ...

  2. 【jQuery示例】遍历表单数据并显示

    <!DOCTYPE html> <html> <head> <style> body, select { font-size:14px; } form ...

  3. jQuery示例 | 分级菜单

    <!DOCTYPE html> Title .header{ background-color: black; color: wheat; } .content{ min-height: ...

  4. python运维开发(十七)----jQuery续(示例)web框架django

    内容目录: jQuery示例 前端插件 web框架 Django框架 jQuery示例 dom事件绑定,dom绑定在form表单提交按钮地方都会绑定一个onclick事件,所有查看网站的人都能看到代码 ...

  5. jquery操作表格 合并单元格

    jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...

  6. jQuery.ajaxComplete() 函数详解

    ajaxComplete()函数用于设置当AJAX请求完成(无论成功或失败)时执行的回调函数. 这是一个全局AJAX事件函数,用于为所有AJAX请求的ajaxComplete事件绑定事件处理函数.当A ...

  7. 最全的jQuery知识汇总

    本帖最后由 断天涯大虾 于 2016-12-26 10:22 编辑<ignore_js_op> jQuery是什么? jQuery是javascript编写一个可重用的JavaScript ...

  8. 十条jQuery代码片段助力Web开发效率提升

    JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Oper ...

  9. jQuery.noConflict() 函数

    jQuery.noConflict()函数用于让出jQuery库对变量$(和变量jQuery)的控制权. 一般情况下,在jQuery库中,变量$是变量jQuery的别名,它们之间是等价的,例如jQue ...

随机推荐

  1. 20165221 Linux安装及命令入门学习

    安装过程 按照图文教程,进行操作,遇到如下问题. 1.安装ubuntu时从官网下载不成功. 最后在同学的帮助下,通过中文版网址入口进入,完成下载. 2.BIOS未恢复出厂设置,导致不能选择64-bit ...

  2. 【转】python 内置函数总结（大部分）

    [转]python 内置函数总结(大部分) python 内置函数大讲堂 python全栈开发,内置函数 1. 内置函数 python的内置函数截止到python版本3.6.2,现在python一共为 ...

  3. Tensorflow的Queue读取数据机制

    参考链接:http://www.sohu.com/a/148245200_115128

  4. Linux查看本机IP：curl cip.cc

    curl http://members.3322.org/dyndns/getip curl ip.6655.com/ip.aspx curl ifconfig.me curl icanhazip.c ...

  5. delphi 的 ORM 框架

    delphi 的 ORM 框架,收集如下: 1.EntityDac    https://www.devart.com/entitydac/download.html 2.mORMot    The  ...

  6. CFileFind

    1.CFileFind类的声明文件保存在afx.h头文件中.2.该类的实现的功能:执行本地文件的查找(查找某个具体的文件,查找某类文件x*.x*,查找所有文件*.*)3.CFileFind类是CGop ...

  7. EF使用Fluent API配置映射关系

    定义一个继承自EntityTypeConfiguration<>泛型类的类来定义domain中每个类的数据库配置,在这个自定义类的构造函数中使用我们上次提到的那些方法配置数据库的映射. 映 ...

  8. git与eclipse集成之文件回退

    1.1. 文件回退 1.1.1.        添加或修改文件回退,选择要回退的文件,右键Overwrite 1.1.2.        删除文件回退 选择要回退的文件,右键Overwrite 文件变 ...

  9. JS导出excel设置下载的标题/与angular结合冲突

    2017.8更新 此功能与angular结合使用时,最后一行 document.getElementById("dlink").click(); 与angular的ng-click ...

  10. 将C注册到lua环境中使用

    注册到lua的方式有两种,一种是lua解释器,如果支持动态链接,使用动态链接机制,将函数接口编译成动态链接库,然后将动态链接库放到lua的C路径(LUA_CPATH)中,然后在lua文件中直接使用 r ...