<!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. Spring的jdbcTemplate操作-未完整

    1 spring框架一站式框架(1)针对javaee三层,每一层都有解决技术(2)在dao层,使用 jdbcTemplate 2 spring对不同的持久化层技术都进行封装

  2. 关于vue监听dom与传值问题

    1. 代码初始化一次执行部分属性为空的情况 原因: 异步加载 + 立马 传值时 直接渲染 dom里面  能实时更新 (无影响) 不能直接dom中渲染(有影响)     解决方法:需要通过监听的方式来处 ...

  3. 关于cmd命令

    F: 直接进入F盘 cd\ 进入当前盘的根目录 md 文件名 创建文件名 cd 文件名 进入文件名 rd  文件名  删除文件夹

  4. python基础-----函数/装饰器

    函数 在Python中,定义一个函数要使用def语句,依次写出函数名.括号.括号中的参数和冒号:,然后,在缩进块中编写函数体,函数的返回值用return语句返回. 函数的优点之一是,可以将代码块与主程 ...

  5. Centos下配置php环境

    Centos下配置php环境   目录[-] 环境: GD2 2 安装PHP 5.2.14(FastCGI模式) 1)编译安装PHP 5.2.14所需的支持库: 2)编译安装MySQL 5.5.3-m ...

  6. Win2008R2配置WebDeploy发布网站

    一.配置服务器 1.安装管理服务 2.点击管理服务进行配置 二.安装WebDeploy 2.1通过离线安装包方式安装: https://www.iis.net/downloads/microsoft/ ...

  7. Oracle服务器定位CPU使用率高的瓶颈（SQL）

    1.首先用TOP命令监控系统资源,如果是AIX系统,就用topas,进入TOP命令的滚动刷新数据时,发现userCPU高达98%!! 保持top的状态下,按shift+p,可以将所有进程按CPU使用率 ...

  8. 获取日期Date

    获取特定时间戳: new Date("2018-06-12").getTime()   processDate(){ return { disabledDate(time){ re ...

  9. Nodejs脚手架搭建基于express的应用

    原文链接:https://www.cnblogs.com/FE-yanyi1993/p/6413042.html 这篇写的非常详细,此处只做记录. 1.安装生成器 $ npm install expr ...

  10. nginx配置文件注释说明

    #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...