php json函数在jquery中的应用

 

本文来自小屋sjolzy.cn【原创】

 

鉴于JSON的娇小性和通用性 PHP在5.2的版本之后 默认加上一组针对数据进行JSON互转的函数: 

json_encode :数据到JSON 

json_decode :JSON到PHP变量的转换 

这两个函数在使用Ajax诸如:jquery和Ext框架的时候显得尤为重要,Ext默认接受的数据就是JSON格式,而jquery如果让JSON接入之后就显得更加轻松和简洁。本文将用一个实例讨论一下PHP 的JSON数据函数在jquery中的应用。 

Jquery做为一个轻量级的Ajax框架确实显得短小而精悍,比较适合Web编程的前台页面,更加适合和PHP结合。其中jquery中有一个方法是:$.getJSON,这个用来从服务器脚本页面取得JSON格式的数据的。我们按顺序来,首先建立一个名为json.php的PHP脚本,具体程序如下: 

<?php 

//创建一个联合数组,这里我们尽量真实的模拟了一个从数据库中读取的记录 

$a=array('name'=>'dog','sex'=>'f','par'=>array('li','wang','lian')); 

$b=array('name'=>'pig','sex'=>'m','par'=>array('liv','wange','liang')); 

$array = array(0=>$a,1=>$b); 

//将数组转化为一个json数据串 

echo json_encode($array); 

?>

 

前台页面jquery代码: 

<script> 

$(document).ready(function(){ 

    $.getJSON( 

    'json.php', 

    function(data){ 

       var content="";         

       for(var i=0;i<data.length;i++){//循环读取后台的取得的JSON数据 

        content+=data[i].name; 

        var par="排挡:"; 

        for(var j=0;j<data[i].par.length;j++){//循环读取数据中的par集合 

            par+=data[i].par[j]+"、"; 

        } 

        content+=par+"<br/>"; 

      } 

    alert(content); 

    } 

   );     

}); 

</script>

 

本例在循环读取数据的时候应用了js的基本流程控制for循环方法,在jquery中也提供了一个遍历方法each,底层实现也是基于for循环的。 

但按由于json_encode json_decode两个函数是在PHP5.2之后才有的,早于此前的版本使用将会报一个找不到json_encode函数的错误!

所以为了适用性,做了一下修改:

 

/*

 * 自定义my_json_encode函数

 * @params array $arr 欲转json的数组

 */

function my_json_encode($arr){

if (!function_exists('json_encode')){

return json_encode($arr);

}else{

require_once 'lib/json.class.php';

$json = new Services_JSON();

return $json->encode($arr);

}

}

自定义一个my_json_encode函数,当php版本为5.2之前,找不到son_encode函数时,载入json.class.php类文件。使用my_json_encode等价于json_encode。(json.class.php下载地址

jQuery是魔鬼还是天使

近来jQuery的发展简直是风光无限,各方赞誉之声是此起彼伏,先是放出了微软、 nokia的重磅利好消息,然后是使用了jQuery的各大知名网站名单,现在又开始在css框架领域建立起了她的新帝国。相比一起诞生的其它js框架已 经是不可同日而语了,非常敬佩jQuery团队的运营能力,将一件事从无到有,从有到卓越,从出书到孜孜不倦的发表技术文章,一切都演变得那么自然,仿佛 是一本营销学的教科书。

  jQuery倡导的简单、快速编写js的方式,彻底改变了那传统琐碎的js编写方式,不再需要担心浏览器的兼容性,无论是简单还是绚烂的功能,也不再需要编写一堆冗赘的代码。她像一个天使让js焕然一新充满了活力........

  她对js的贡献让我想起了Dreamweaver对互联网发展的贡献,回望历史,在那 web标准方兴未艾、浏览器战火纷飞的年代,Dreamweaver用她兼容一切的table布局方案和视图化的编码方式,让web的制作的门槛视乎降低 到了不可思议的低,让web制作立马走进了千家万户,Dreamweaver的出现让web在量上的发展有了长足的进步,他为互联网的发展起到了不可小视 的历史推动,但在web标准的发展史上,因为Dreamweaver的无所不能、开发简快,渐渐的让HTML标准消失在了人们的视野中,将一代人带上了歧 途,惊醒过来的人们终于又意识到了web标准的存在(在这儿要感谢那些坚持不懈的各种浏览器的生产商)。有了一小群人开始鄙视那个多年不更新的IE6,开 始鄙视那些“Dreamweaver网页工程师”。

  就像只会用Dreamweaver做页子的人一样,很多都不知道[DIV]与 [SPAN]之间的关系和区别,而只用jQuery写js的人会不会不知道 getElementById()和getElementsByName()之间的关系呢,jQuery巧妙的代码将兼容性问题很好的掩盖,无所不能的特 效、简快的开发方式,正开始让js标准渐渐淡出人们的视野。一切都太像了,有些不可思议,历史的轮回好像真的存在,我不知道jQuery会不会将一些人带 上歧途,但真的希望这一切不要真的发生。

做项目开发和做研究是两个概念,绝大部分的技术人员目的是为了开发,开发的目的是为了解决用户的需求,所以开发人员的根本是快速高质量的完成项目,这个是根本,不是带上歧途,是开发人员对复杂的js要透明(个人见解)。

  这是一个痛苦的矛盾:“处理兼容性的代码只会让兼容性问题越来越严重”。css的处境也不太妙,不知哪位高人曾经说过:“csshack的滥用只会让css离标准越来越远”。

  很多时候事情就是这么的无奈,你想的往往和你做的正好相反,你想兼容所有终端,但用户几 乎只用IE;你想模块化、想整体架构、想掌握技术核心,但你的工作得以效率为中心来开展;你想把事儿做到最完美,但那样做出来的好像并不值钱;好的想法为 什么总是得不到现实的支持呢,反过来想想答案就出来了,现有的需求不需要也不能支持那样的生产力呗。

  回到一个让很多web标准坚持者黯然尴尬的问题:“web标准有什么好处?”。对于js 来说,这个问题要好点,因为DOM的标准已经成功进驻了各大语种的基库里,如果你会用js dom写应用的话,那你就可以在.net php java ......很多语言里游刃有余的使用DOM了,如果你还能玩转ECMAScript的话,恭喜你,你可以轻松转型到ECMAScript系的其他语言, 比如Actionscript........ 坚持js的web标准还有另外一个好处,就是jQuery能做的js一定能做,而jQuery做不到的,js也许也能做,要知道jQuery就是js做 的.....

技术标准不只是 技术实现这样简单,很多时候是商业操作的结果,比如ie并不是兼容w3c,但是他是隐形的标准,而且标准在不同时间段内是不一样的,如果还有另外一家公司 做的比微软还好,使用率还高,那隐形标准也许又不是w3c和ie了,所以标准是有时间和空间的限制,技术在发展,商业变换是技术无法预测的,应该审时度 势,做符合大众的,不要一味的追求所谓的标准。

好吧,jQuery她的简单、快速开发是符合技术需求的,使用js + jQuery的方式开发项目会让人感到实用和愉快。但在接纳和使用她的时候,一定不能忘记web标准,不然会走很长很长的弯路.........

邓爷爷说过:不管白猫黑猫,能抓住老鼠就是好猫,框架诞生的目的是为了降低开发的难度,提高开发的速度和质量,框架本无错,错就是错在作者在误导读者。有了汽车就不走路了吗?

jQuery ready vs load

jQuery ready vs load

在使用Javascript操作HTML DOM時,記得要養成網頁載入後才動手的好習慣,不然會有可怕的事發生… (可參考邊做邊學 jQeury 系列 3-jQuery 常用的 Javascript 技巧教學影片,在5分02秒的示範)

在jQuery中,要做到"等網頁載入後再執行",我們有兩種選擇:

$(document).ready(fn)與$(window).load(fn)

二者的差別在於$(document).ready(fn)發生在"網頁本身的HTML"載入後就觸發,而$(window).load(fn)則會等到"網頁HTML標籤中引用的圖檔、內嵌物件(如Flash)、IFrame"等拉哩拉雜的東西都載入後才會觸發。

我 寫了一段示範程式突顯二者的區別。由於Sky_angmap_4.jpg是一張1.2MB的大型圖檔,實際執行時,可以觀察到 “ready event!” –> 圖檔緩慢顯現 -> "load event!”的過程。(嫌下載時間太短,差別不夠明顯的話,可以試試Sky_angmap_7.jpg,XD)

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js">
    </script>
    <script type="text/javascript">
        $(function() {
            alert("ready event!");
        });
        $(window).load(function() {
            alert("load event!");
        });
    </script>
</head>
<body>
<img src="http://blender-archi.tuxfamily.org/images/Sky_angmap_4.jpg" />
</body>
</html>


一般來說,等網頁全部元素都載入才執行程式時機有點晚,因為在此之前,使用者已經可以點選操作網頁,跳脫我們程式的掌控範圍。因此,我們幾乎都是將 程式放在$(document).read(function() { ... })中(即$(function() { … }))。

$(window).load(fn)適合執行一些要等待圖檔或元素全部載入才可進行的動作,例如: 檢查圖檔長寬。換句話說,上回的大圖自動縮小Script可以透過$(window).load(fn)改寫得更簡單,完全不用擔心圖檔沒下載完成時的特殊處理,算是一個很好的應用範例。

排版顯示純文字複製文字

    function GM_wait() {
        if(typeof unsafeWindow.jQuery == 'undefined') 
            window.setTimeout(GM_wait,100);
        else 
        { 
            $ = unsafeWindow.jQuery; 
            $(window).load(resizeHugeImage);
        }
    }
    GM_wait();
 
    // All your GM code must be inside this function
    function resizeHugeImage() {
        $("img").each(function() {
            var img = $(this);
            var w = img.width(), h = img.height();
            var longSide = (w > h ? w : h);
    //...以下省略...

240多个jQuery插件

概述

jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及的,它兼容 CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。 jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents、events、实现动画效果,并且方便地为网站提供 AJAX 交互。 jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页保持代码和 html 内容分离,也就是说,不用再在 html 里面插入一堆js来调用命令了,只需定义 id 即可。今天在Kollermedia.at
上发现了一篇JQuery插件列表的文章
,特推荐如下。


文件上传(File upload)JQuery_001


Ajax File Upload
.
jQUploader
.
Multiple File Upload plugin

jQuery File Style
.
Styling an input type file
.
Progress Bar Plugin
.


表单验证(Form Validation)


jQuery Validation
.
Auto Help
.
Simple jQuery form validation
.
jQuery XAV - form validations
.
jQuery AlphaNumeric
.
Masked Input
.
TypeWatch Plugin
.
Text limiter for form fields
.
Ajax Username Check with jQuery
.


表单-选取框(Form - Select Box stuff)


jQuery Combobox
.
jQuery controlled dependent (or Cascadign) Select List
.
Multiple Selects
.
Select box manipulation
.
Select Combo Plugin
.
jQuery - LinkedSelect
Auto-populate multiple select boxes
.
Choose Plugin (Select Replacement)
.


表单基本、输入框、选择框等(Form Basics, Input Fields, Checkboxes etc.)


jQuery Form Plugin
.
jQuery-Form
.
jLook Nice Forms
.
jNice
.
Ping Plugin
.
Toggle Form Text
.
ToggleVal
.
jQuery Field Plugin
.
jQuery Form’n Field plugin
.
jQuery Checkbox manipulation
.
jTagging
.
jQuery labelcheck
.
Overlabel
.
3 state radio buttons
.
ShiftCheckbox jQuery Plugin
.
Watermark Input
.
jQuery Checkbox (checkboxes with imags)
.
jQuery SpinButton Control
.
jQuery Ajax Form Builder
.
jQuery Focus Fields
.
jQuery Time Entry
.


时间、日期和颜色选取(Time, Date and Color Picker)


jQuery UI Datepicker
.
jQuery date picker plugin
.
jQuery Time Picker
.
Time Picker
.
ClickPick
.
TimePicker
.
Farbtastic jQuery Color Picker Plugin
.
Color Picker by intelliance.fr
.


投票插件(Rating Plugins)


jQuery Star Rating Plugin
.
jQuery Star Rater
.
Content rater with asp.net, ajax and jQuery
.
Half-Star Rating Plugin
.


搜索插件(Search Plugins)


jQuery Suggest
.
jQuery Autocomplete
.
jQuery Autocomplete Mod
.
jQuery Autocomplete by AjaxDaddy
.
jQuery Autocomplete Plugin with HTML formatting
.
jQuery Autocompleter
.
AutoCompleter (Tutorial with PHP&MySQL)
.
quick Search jQuery Plugin
.


编辑器(Inline Edit & Editors)JQuery_002


jTagEditor
.
WYMeditor
.
jQuery jFrame
.
Jeditable - edit in place plugin for jQuery
.
jQuery editable
.
jQuery Disable Text Select Plugin
.
Edit in Place with Ajax using jQuery
.
jQuery Plugin - Another In-Place Editor
.
TableEditor
.
tEditable - in place table editing for jQuery
.


多媒体、视频、Flash等(Audio, Video, Flash, SVG, etc)


jMedia - accessible multi-media embedding
.
JBEdit - Ajax online Video Editor
.
jQuery MP3 Plugin
.
jQuery Media Plugin
.
jQuery Flash Plugin
.
Embed QuickTime
.
SVG Integration
.


图片(Photos/Images/Galleries)


ThickBox
.
jQuery lightBox plugin
.
jQuery Image Strip
.
jQuery slideViewer
.
jQuery jqGalScroll 2.0
.
jQuery - jqGalViewII
.
jQuery - jqGalViewIII
.
jQuery Photo Slider
.
jQuery Thumbs - easily create thumbnails
.
jQuery jQIR Image Replacement
.
jCarousel Lite
.
jQPanView
.
jCarousel
.
Interface Imagebox
.
Image Gallery using jQuery, Interface & Reflactions
.
simple jQuery Gallery
.
jQuery Gallery Module
.
EO Gallery
.
jQuery ScrollShow
.
jQuery Cycle Plugin
.
jQuery Flickr
.
jQuery Lazy Load Images Plugin
.
Zoomi - Zoomable Thumbnails
.
jQuery Crop - crop any image on the fly
.
Image Reflection
.


Google地图(Google Map)


jQuery Plugin googlemaps
.
jMaps jQuery Maps Framework
.
jQmaps
.
jQuery & Google Maps
.
jQuery Maps Interface forr Google and Yahoo maps
.
jQuery J Maps - by Tane Piper
.


游戏(Games)


Tetris with jQuery
.
jQuery Chess
.
Mad Libs Word Game
.
jQuery Puzzle
.
jQuery Solar System (not a game but awesome jQuery Stuff)
.


表格等(Tables, Grids etc.)


UI/Tablesorter
.JQuery_003
jQuery ingrid
.
jQuery Grid Plugin
.
Table Filter - awesome!
.
TableEditor
.
jQuery Tree Tables
.
Expandable “Detail” Table Rows
.
Sortable Table ColdFusion Costum Tag with jQuery UI
.
jQuery Bubble
.
TableSorter
.
Scrollable HTML Table
.
jQuery column Manager Plugin
.
jQuery tableHover Plugin
.
jQuery columnHover Plugin
.
jQuery Grid
.
TableSorter plugin for jQuery
.
tEditable - in place table editing for jQuery
.
jQuery charToTable Plugin
.
jQuery Grid Column Sizing
.
jQuery Grid Row Sizing
.


统计图(Charts, Presentation etc.)


jQuery Wizard Plugin
.
jQuery Chart Plugin
.
Bar Chart
.


边框、圆角、背景(Border, Corners, Background)


jQuery Corner
.
jQuery Curvy Corner
.
Nifty jQuery Corner
.
Transparent Corners
.
jQuery Corner Gallery
.
Gradient Plugin
.


文字和超链接(Text and Links)


jQuery Spoiler plugin
.
Text Highlighting
.
Disable Text Select Plugin
.
jQuery Newsticker
.
Auto line-height Plugin
.
Textgrad - a text gradient plugin
.
LinkLook - a link thumbnail preview
.
pager jQuery Plugin
.
shortKeys jQuery Plugin
.
jQuery Biggerlink
.
jQuery Ajax Link Checker
.


鼠标提示(Tooltips)


jQuery Plugin - Tooltip
.
jTip - The jQuery Tool Tip
.
clueTip
.
BetterTip
.
Flash Tooltips using jQuery
.
ToolTip
.


菜单和导航(Menus, Navigations)


jQuery Tabs Plugin - awesome!
. [demo nested tabs
.]
another jQuery nested Tab Set example (based on jQuery Tabs Plugin)
.
jQuery idTabs
.
jdMenu - Hierarchical Menu Plugin for jQuery
.
jQuery SuckerFish Style
.
jQuery Plugin Treeview
.
treeView Basic
.
FastFind Menu
.
Sliding Menu
.
Lava Lamp jQuery Menu
.
jQuery iconDock
.
jVariations Control Panel
.
ContextMenu plugin
.
clickMenu
.
CSS Dock Menu
.
jQuery Pop-up Menu Tutorial
.
Sliding Menu
.

http://stilbuero.de/jquery/tabs_3/


幻灯、翻转等(Accordions, Slide and Toggle stuff)


jQuery Plugin Accordion
.
jQuery Accordion Plugin Horizontal Way
.
haccordion - a simple horizontal accordion plugin for jQuery
.
Horizontal Accordion by portalzine.de
.
HoverAccordion
.
Accordion Example from fmarcia.info
.
jQuery Accordion Example
.
jQuery Demo - Expandable Sidebar Menu
.
Sliding Panels for jQuery
.
jQuery ToggleElements
.
Coda Slider
.
jCarousel
.
Accesible News Slider Plugin
.
Showing and Hiding code Examples
.
jQuery Easing Plugin
.
jQuery Portlets
.
AutoScroll
.
Innerfade
.


拖放插件(Drag and Drop)


UI/Draggables
.
EasyDrag jQuery Plugin
.
jQuery Portlets
.
jqDnR - drag, drop resize
.
Drag Demos
.


XML XSL JSON Feeds


XSLT Plugin
.
jQuery Ajax call and result XML parsing
.
xmlObjectifier - Converts XML DOM to JSON
.
jQuery XSL Transform
.
jQuery Taconite - multiple Dom updates
.
RSS/ATOM Feed Parser Plugin
.
jQuery Google Feed Plugin
.


浏览器(Browserstuff)


Wresize - IE Resize event Fix Plugin
.
jQuery ifixpng
.
jQuery pngFix
.
Link Scrubber - removes the dotted line onfocus from links
.
jQuery Perciformes - the entire suckerfish familly under one roof
.
Background Iframe
.
QinIE - for proper display of Q tags in IE
.
jQuery Accessibility Plugin
.
jQuery MouseWheel Plugin
.


对话框、确认窗口(Alert, Prompt, Confirm Windows)


jQuery Impromptu
.
jQuery Confirm Plugin
.
jqModal
.
SimpleModal
.


CSS


jQuery Style Switcher
.
JSS - Javascript StyleSheets
.
jQuery Rule - creation/manipulation of CSS Rules
.
jPrintArea
.


DOM、AJAX和其它JQuery插件(DOM, Ajax and other jQuery plugins)


FlyDOM
.
jQuery Dimenion Plugin
.
jQuery Loggin
.
Metadata - extract metadata from classes, attributes, elements
.
Super-tiny Client-Side Include Javascript jQuery Plugin
.
Undo Made Easy with Ajax
.
JHeartbeat - periodically poll the server
.
Lazy Load Plugin
.
Live Query
.
jQuery Timers
.
jQuery Share it - display social bookmarking icons
.
jQuery serverCookieJar
.
jQuery autoSave
.
jQuery Puffer
.
jQuery iFrame Plugin
.
Cookie Plugin for jQuery
.
jQuery Spy - awesome plugin
.
Effect Delay Trick
.
jQuick - a quick tag creator for jQuery
.
Metaobjects

.
elementReady
.

jquery取值示例

 

在用$("#id")来获得页面的input元素的时候,发现$("#id").value不能取到值

 

后来终于在伟大的百度帮助下,找到了问题的原因:

$("")是一个jquery对象,而不是一个dom element

 

value是dom element的属性

 

jquery与之对应的是val

 

val() :获得第一个匹配元素的当前值。


 


val(val):设置每一个匹配元素的值。



 



 



 

所以,代码应该这样写:

 

取值:val = $("#id")[0].value;

或者val = $("#id").attr("value");

 

赋值:

$("#id")[0].value =  "new value";
或者$("#id").val("new value");

 

标签: jQuery

jQuery实例: ToolTip的实现

Tooltip的插件网上很多,这里主要是通过一个简单的实例来学习jQuery.

注:本实例需要jQuery框架.

先看一下实现后的效果:


下面让我们开始,首先,我们需要一个CSS来定义我们的显示效果:


#luluTip
{
    word-wrap
:break-word; /*自动换行,在FF中对英文和数字无效*/
    position
:absolute;
    width
:150px;
    color
: #a00;
    background-color
:#FFFFCC;
    border
:1px solid #a00;
    padding
:10px;
    display
:none; /*我们先不要让它显示*/
}

#luluTip div.triangle 
/*后代选择器,选择ID为"luluTip"中DIV的类为"triangle"的元素*/
{
    background
:transparent
        url('http://images.cnblogs.com/cnblogs_com/qleelulu/sj.gif')
        no-repeat scroll left top
;
    position
:absolute;
    height
:17px;
    left
:20px;
    top
:-16px;
    width
:31px;
    z-index
:999;
}

这个CSS的效果大概是这样的:
image

然后就开始写我们的JS.首先要在我们的想要显示Tooltip的地方动态插入一个DIV.在这里,我将会在具有"myTip"属性的元素上显示Tooltip,并将"myTip"属性的值作为显示内容显示出来.例如我们的目标元素就好像这样:


<amyTip="这是要显示的内容!"href="#"></a> 

所以我们的jQuery代码如下:


$(function(){
              $(
"[myTip]").hover(function(){
                $(
'<div id="luluTip"><div class="triangle" /></div>')
                .insertAfter(
this)
                .prepend($(
this).attr("myTip"));
                $(
"#luluTip").css({"display":"block"});
              }
);
              }
,function(){
                $(
"#luluTip").remove();
            }
)
});

$("[myTip]") 的意思是找到文档中含有"myTip"属性的所有元素,这个是CSS表达式.jQuery的选择器还是很强的,建议多看它的文档.
我们看到上面有个 hover(function(){},function(){}) 的事件,其中第一个function()是鼠标悬停(hover)的时候会触发的,而后面一个function() 则在鼠标离开当前元素后触发.
$('<div id="luluTip"><div class="triangle" /></div>').insertAfter(this) 的意思是动态的创建一个'<div id="luluTip"><div class="triangle" /></div>'的元素并将它插入到当前元素的后面.
然后我们在该动态创建的DIV中显示我们想要显示的内容,该显示内容就是我们目标元素上"myTip"属性的值.我们可以通过$(this).attr("myTip")来获取"myTip"属性的值.在这里我们用的$(this)而不是this.因为$(this)返回的是jQuery对象,而this返回的是DOM对象.jQuery对象才具有attr("myTip")方法.然后我们用 prepend() 将该要显示的内容插入到我们刚才动态创建的DIV中.
因为我们在CSS中将改DIV定义为不可见的,所以最后我们要将它设置为可见的,我们通过设置CSS来实现:
css({"display":"block"});
在我们的鼠标离开当前元素后我们动态创建添加进来的DIV并没有用了并且还有碍地方,所以我们用remove()将它移除掉.当然在这里你可以加一个动态的效果,例如:


$("#luluTip").fadeOut('slow',function(){
    $(
this).remove();
});

好,接下来我们我们要实现鼠标移动的时候我们的Tooltip跟随鼠标移动的效果.
首先我们加一个mousemove的函数.这就是JS中的onmousemove,在jQuery中所有的事件函数命名都将前面的on去掉的.
然后,我们就要想办法获取鼠标的坐标.在这里我们需要声明一个evnet对象.不论何时你移动鼠标/点击/按键等等,会对应一个event的事件.在IE里event是全局变量,会被存储在window.event里.在firefox中,或者其他浏览器,event事件会被相应的自定义函数获取.所以我们取得event对象的函数如下:


$(this).mousemove(function(e){
    e
=e||window.event;
});

(e = e || window.event) 让e在所有浏览器下都能获取到event事件的对象.在Firefox下"||window.event"将不起作用,因为e已经有了赋值.在MSIE下e则是空的,所以e将被赋值为window.event.
然后我们就可以很简单的获取到鼠标的坐标位置,最后完整的代码如下:


$(function(){
      $(
"[myTip]").hover(function(){
        $(
'<div id="luluTip"><div class="triangle" /></div>')
        .insertAfter(
this)
        .prepend($(
this).attr("myTip"));
      $(
this).mousemove(function(e){
            e
=e||window.event;
           
varx=e.pageX-36;
           
if(x-2<0)
                x
=2;
           
if(x+152>document.body.clientWidth)
                x
=document.body.clientWidth-152;
            $(
"#luluTip").css({"left":x,"top":e.pageY+18,"display":"block"});
      }
);
        }
,function(){
        $(
"#luluTip").remove();
    }
)
}
);

在这里要注意一下e.pageX和e.clientX的区别和在不同浏览器下的区别.这里不做详细分析了,有兴趣的自己搜索相关的文章看看.

标签: div, jQuery, event, myTip