<!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. RPO攻击 & share your mind

    参考文章: https://xz.aliyun.com/t/2220 http://www.thespanner.co.uk/2014/03/21/rpo/ https://www.lorexxar. ...

  2. Eclipse打印GC日志

    一.生成gc.log 第一步:右键项目或文件——Run As——Run Configurations. 第二步:点击Arguments,在VM arguments中填写-Xloggc:F:/gc.lo ...

  3. RabbitMQ与SpringBoot整合

    RabbitMQ  SpringBoot  一.RabbitMQ的介绍 二.Direct模式 三.Topic转发模式 四.Fanout Exchange形式 原文地址: https://www.cnb ...

  4. FAT文件系统规范v1.03学习笔记---2.FAT区之FAT数据结构（Fat Data Structure）

    1.前言 本文主要是对Microsoft Extensible Firmware Initiative FAT32 File System Specification中文翻译版的学习笔记. 每个FAT ...

  5. Bootstrap3.0入门学习系列教程

    可视化布局:http://www.runoob.com/try/bootstrap/layoutit/ 1.浏览器兼容性:你可以去看看大牛的一篇文章http://www.cnblogs.com/lhb ...

  6. hibernate框架学习之数据查询（HQL）helloworld

    package cn.itcast.h3.hql; import java.util.List; import org.hibernate.Query; import org.hibernate.Se ...

  7. hibernate框架学习第二天：核心API、工具类、事务、查询、方言、主键生成策略等

    核心API Configuration 描述的是一个封装所有配置信息的对象 1.加载hibernate.properties(非主流,早期) Configuration conf = new Conf ...

  8. ASP.NET如何下载大文件

    关于此代码的几点说明: 1. 将数据分成较小的部分,然后将其移动到输出流以供下载,从而获取这些数据. 2. 根据下载的文件类型来指定 Response.ContentType .(参考OSChina的 ...

  9. C++编程题

    1.不用系统提供的字符串转int的功能,将一个字符串转换为对应的值 #include <iostream> using namespace std; static int StringTo ...

  10. Python-爬虫-猫眼T100

    目标站点需求分析 涉及的库 from multiprocessing import Poolfrom requests.exceptions import RequestExceptionimport ...