<!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. 列式数据库~clickhouse问题汇总

    一 简介:常见的clickhouse 问题汇总 二 问题系列  1 内存问题     Code: 241. DB::Exception: Received from localhost:9000, : ...

  2. google 开源项目阅读计划

    1. glog 2. gflags 3. carto 4. ...

  3. 20165231 2017-2018-2 《Java程序设计》第1周学习总结

    本周学习的是一些java简单的基本编译,反编译和解释器.然后学习使用git了上传到git@osc进行代码托管,git是初学的,需要建立库然后远程上传代码,如果建立失败或者因为种种缘故无法上传的可以一个 ...

  4. linux+php实现定时任务[链接]

    1.crontab 详细用法 定时任务 https://www.cnblogs.com/aminxu/p/5993769.html 2.查看crontab日志 https://www.cnblogs. ...

  5. $resource详解

    $resource 首先添加$resource的引用 <script src="Scripts/angular.min.js"></script> < ...

  6. xv6 + Qemu 在Ubuntu下编译运行教程【转】

    转自:https://blog.csdn.net/yinglang19941010/article/details/49310111 如果想要离线看教程,可以下载该 文档 一.使用工具说明 1.    ...

  7. Python 编程核心知识体系（REF）

    Python 编程核心知识体系: https://woaielf.github.io/2017/06/13/python3-all/ https://woaielf.github.io/page2/

  8. vc++基础班[26]---进程的相关操作

      ①.ShellExecute 进行进程的创建,属于 shell api: //int iRet = (int)ShellExecute(m_hWnd, _T("open"), ...

  9. pl sql 中文乱码

    一:查看oracle数据库的字符集编码: select * fromnls_database_parameters where parameter in ('NLS_LANGUAGE', 'NLS_T ...

  10. linux TLB表

    TLB - translation lookaside buffer 快表,直译为旁路快表缓冲,也可以理解为页表缓冲,地址变换高速缓存. 由于页表存放在主存中,因此程序每次访存至少需要两次:一次访存获 ...