<!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. 列举两种不同类型的Java标识注释，并解释它们之间的区别。

    列举两种不同类型的Java标识注释,并解释它们之间的区别.

  2. Javascript - ExtJs - Itemselector

    引入扩展文件 Extjs4.2根目录下: examples \ ux \ css \ images (这是选择按钮的图片资源) examples \ ux \ css \ ItemSelector.c ...

  3. 在Linux环境下安装Python3

    参考链接:https://blog.csdn.net/zhangdongren/article/details/82685932

  4. 1173 - The Vindictive Coach

    题目大意:n个不同身高的队员和教练的按照身高排成波浪形……每个人按照身高由低到高编号,其中第m个是教练,他必须在第一个,如果条件允许,排第二的要比m低,如果条件不允许,即其余人都比教练高,则要让差距尽 ...

  5. 前端-----html（1）

    基本结构 Doctype Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档 <!DOCTYPE html> bead标签 Meta 提供有关页面的元信息,例: ...

  6. codevs 1080 线段树练习（线段树）

    题目: 题目描述 Description 一行N个方格,开始每个格子里都有一个整数.现在动态地提出一些问题和修改:提问的形式是求某一个特定的子区间[a,b]中所有元素的和:修改的规则是指定某一个格子x ...

  7. Go语言模拟实现简单的区块链

    一.创建项目 按照Go语言最佳实践的思路, 在工作空间下的src目录下创建 github.com/hangzhou-huxin/blokcchain目录作为我们的项目目录,然后用GoLand工具选中这 ...

  8. ADO中最重要的对象有三个：Connection、Recordset和Command

    ConnectionPtr: _ConnectionPtr m_pConnection; HRESULT hr; try{ hr = m_pConnection.CreateInstance(_uui ...

  9. $Django Rest Framework-序列化组件

    1 序列化组件 e=serializers.SerializerMethodField()   # 方法名:叫get_字段名, 参数,返回字典  def get_e(self,obj): #obj为b ...

  10. 配置percona mysql server 5.7基于gtid主主复制架构

    配置mysql基于gtid主主复制架构 环境: 操作系统 centos7. x86_64 mysql版本:Percona-Server-- 测试环境: node1 10.11.0.210 node2 ...