jquery简单案例

来源：互联网发布：linux服务器流量监控编辑：程序博客网时间：2024/05/16 14:15

昨天写了一篇关于jquery选择器的学习的记录，后边发现关于jquery的学习不能只依靠简单的文档，必须动手写出一些实际的东西，这样会学习的更好，今天呢，就给大家带来利用jquery实现文字和图片提示的效果。

jquery文字提示

先看下效果：
这里写图片描述

<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"/><title>jquery选择器</title><script type="text/javascript" src="../jquery/jquery-2.1.4.js"></script><style type="text/css">body{    margin:0;    padding:40px;    background:#fff;    font:80% Arial, Helvetica, sans-serif;    color:#555;    line-height:180%;}#tooltip{    position:absolute;    border:1px solid #333;    background:#f7f5d1;    padding:1px;    color:#333;    display:none;}</style><script type="text/javascript">    $(function(){                $("a.tooltip").mouseover(function(e){                    //创建div元素                    var tooltip = "<div id='tooltip'>"+this.title+"</div>";                    //添加到dom中                    $("body").append(tooltip);                    //设置div的样式                    $("#tooltip")                        .css({                            "top":e.pageY+"px",                            "left":e.pageX+"px"                        }).show("fast");                }).mouseout(function(){                    $("#tooltip").remove();                })            })</script></head><body>        <p><a href="#" class="tooltip" title="这是我的超链接提示1">提示1</a></p>        <p><a href="#" class="tooltip" title="这是我的超链接提示2">提示2</a></p>        <p><a href="#" title="这是自带提示1">自带提示1</a></p>        <p><a href="#" title="这是自带提示2.">自带提示2</a></p></body></html>

解释一下：
超链接a标签默认为我们提供了一个提示的title属性，看下我们自己定义的提示：
$(“a.tooltip”).mouseover(function(e)）{}
这句的意思是得到a标签中class=”tooltip”的元素，设置鼠标移到上面的事件，e表示该元素。

$("#tooltip")    .css({        "top":e.pageY+"px",        "left":e.pageX+"px"    }).show("fast");

为新创建的id=”tooltip”的元素添加一个css样式，规定以像素计的 top 和 left 坐标。show(“fast”)表示快速显示该元素。

图片提示

下面给大家带来一个模仿网上很多的图片提示的效果。即将鼠标滑动到小图上显示对应的大图片。
效果如下：
这里写图片描述

<html>  <head>    <title>图片显示.html</title>    <meta http-equiv="content-type" content="text/html; charset=GBK">    <style type="text/css">body{    margin:0;    padding:40px;    background:#fff;    font:80% Arial, Helvetica, sans-serif;    color:#555;    line-height:180%;}img{border:none;}ul,li{    margin:0;    padding:0;}li{    list-style:none;    float:left;    display:inline;    margin-right:10px;    border:1px solid #AAAAAA;}/* tooltip */#tooltip{    position:absolute;    border:1px solid #ccc;    background:#333;    padding:2px;    display:none;    color:#fff;}</style>    <script type="text/javascript" src="../jquery/jquery-2.1.4.js"></script>    <script type="text/javascript">                 $(function(){            var x =10;            var y = 20;                $("a.tooltip").mouseover(function(e){                    this.myTitle = this.title;                    this.title="";                    var imgTitle = this.myTitle?"<br/>"+this.myTitle:"";                        //创建div元素                    var tooltip = "<div id='tooltip'><img src='"+this.href+ "' alt='产品预览图'"+imgTitle+"</div>";                    //添加到dom中                    $("body").append(tooltip);                    //设置div的样式                    $("#tooltip")                        .css({                            "top":(e.pageY+y)+"px",                            "left":(e.pageX+x)+"px"                        }).show("fast");                }).mouseout(function(){                    //如果在滑出时不将值重新赋给title属性，下次滑入时title的值就为空了                    this.title = this.myTitle;                    $("#tooltip").remove();                }).mousemove(function(e){                    $("#tooltip")                        .css({                            "top":(e.pageY+y)+"px",                            "left":(e.pageX+x)+"px"                        });                });            })    </script>  </head>  <body>    <ul>        <li><a href="../images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="../images/apple_1.jpg" alt="苹果 iPod" /></a></li>        <li><a href="../images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="../images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>        <li><a href="../images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="../images/apple_3.jpg" alt="苹果 iPhone"/></a></li>        <li><a href="../images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="../images/apple_4.jpg" alt="苹果 Mac"/></a></li>    </ul>  </body></html>

说明一下：
代码和上面的文字提示很相似，只不过增加了一个跟随鼠标滑动的事件。比较简单。

全选和全不选

效果：
这里写图片描述

<html>  <head>    <title>全选、全不选、反选1.html</title>    <meta http-equiv="content-type" content="text/html; charset=gbk">    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->    <script type="text/javascript" src="../jquery/jquery-2.1.4.js"></script>    <script type="text/javascript">        $(function(){            //全选/全不选            $("#checkedAll").bind("click",function(){//给id=#checkedAll的元素绑定一个click事件                //所有复选框的checked属性的值和控制全选的复选框的checked属性的值一样。所以代码可以这样写                $("[name=items]:checkbox").attr("checked",this.checked);            });            //提交            $("#send").click(function(){                var str="您选中的是: \r\n";                $("[name=items]:checkbox:checked").each(function(){                    str += $(this).val() + "\r\n";                });                alert(str);            });        })    </script>  </head>  <body>    <form action="#">        你爱好的运动是?        <input type="checkbox" id="checkedAll"/>全选/全不选<br/>        <input type="checkbox" name="items" value="足球">足球        <input type="checkbox" name="items" value="篮球">篮球        <input type="checkbox" name="items" value="羽毛球">羽毛球        <input type="checkbox" name="items" value="乒乓球">乒乓球<br/>        <input type="button" id="send" value="提交"/>    </form>  </body></html>

说明一下：
each函数表示以每一个匹配的元素作为上下文来执行一个函数，就是说，每一次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素

相册展示

效果如下：
这里写图片描述

<html> <head>  <title> Id选择器和show,hide</title> </head> <body>        <h2>标签选择器,id选择器,通过css方法添加样式,show(),hide练习题</h2>        <div id="showImgDiv" style="display:none;position:absolute">           <div id="closeDiv">关闭</div>           <img src="" id="showImg" width="450" height="400">        </div>        <table width="400" height="400" align="center" id="tbl"">            <tr>                <td><img src="../images/apple_1.jpg"/></td>                <td><img src="../images/apple_2.jpg"/></td>                <td><img src="../images/apple_3.jpg"/></td>            </tr>        </table>          <script language="javascript" src="../jquery/jquery-2.1.4.js"></script>        <script language="javascript">            $("img").click(function(){                var setxy = $("#tbl").offset();                $("#showImgDiv").css({"left":setxy.left,"top":setxy.top});                $("#showImg").attr("src",this.src);                $("#showImgDiv").show(1000);            });            $("#closeDiv").click(function(){                $("#showImgDiv").hide(1000);            });        </script> </body></html>

可以看到这里我预先定义了一个id=showImgDiv的div用来隐藏要显示的大图和关闭按钮。
使用(“img”).click(function())为每一个image标签绑定一个点击事件。(“#tbl”).offset();会返回选中的元素的相对偏移，包含两个整型属性：top 和 left

ok，今天就给大家带来这么几个简单的jquery简单案例。

0 0