我平时的工作跟javascript打交道的时候一般是做一些页面里的交互体验增强，基本上全是用jQuery，查找一些元素，做些计算，做些属性更改，做一些事件绑定处理，做些AJAX；

数据模型也就是定义JSON对象，其实用javascript OO定义前端的model的情况比较少啦；

这两天我读了网上的一些文章，今天稍微整理一下关于这个问题的多个角度。

1. Object Instantiation

// 基础，不多解释了
var People = function People(firstName,lastName) {
     this.firstName = firstName;
     this.lastName = lastName;

     this.getName = function() {
          return this.lastName+" "+this.firstName;     // chinese way
     }
}

2. Prototype Inheritence

// 常规写法, 当然还有些其他写法, 例如参考2里的Object.create, 但是本质是一样的啦
var Employee = function Employee(firstName, lastName, salary) {
     People.call(this,firstName,lastName);
     this.salary = salary;
}
Employee.prototype = new People();

3. Encapsulation(Public/Private)

OO面向对象的特性之一，封装，javascript的也能搞定，不酷，甚至有点恶心

Public

     function Constructor(...) {
          this.membername = value;
     }
     Constructor.prototype.membername = value;

Private

     function Constructor(...) {
          var that = this;
          var membername = value;
          function membername(...) {...}
     }

     Note: The function statement

          function membername(...) {...}

     is shorthand for

          var membername = function membername(...) {...};

Privileged

     function Constructor(...) {
          this.membername = function (...) {...};
     }

4. Namespace

学习java的名称空间，javascript里一直没有标准的做法，从功能上当然是可行的

var myNamespace = {
    foo: function() {
    },
    bar: function() {
    }
};
myNamespace.foo();

下面这段是从《JavaScript DOM 高级程序设计》中摘的，貌似更高级一点

(function() {
     // 通过 ID 获取 Element 对象
     function $(id) {
          return document.getElementById(id);
     }

     // 显示对应 ID 的对象的节点类型名字
     function myMethod(id) {
          alert($(id).nodeName);
     }

     // 这是对外的接口
     window['myNamespace']= {}
     window['myNameSpace']['$'] = $;
})();

5. Module (commonJS)

javascript越来越流行，从前几年的AJAX，到现在的nodeJS，前端MVC等等，
腾讯做的WebQQ也是这一范畴，或者还有360桌面，网页和App的界限越来越模糊，
甚至有完全基于浏览器的ChromOS的硬件

这些都说明，javascript天降大任，虽然javascript先天发育得不好。。。
commonJS其实是个规范,而nodeJS是这个规范的实现之一，它的目标是做一个javascript标准库(就像JDK，ruby Gem一样)，借助javascript引擎(eg: V8)，使得javascript也能处理更多的应用场景，学习其他语言成熟的模块化当然是可行的。

当然，自己实现javascript模块的时候，从逻辑上和物理上区分也是不错的实践方法。

6. Module load (requireJS)

javscript的库其实很多，有非常成功的jQuery,prototype,YUI等等,由于global对象的关系，不同的库存在对象的冲突，
这时候就需要模块加载机制，管理很多js文件，避免冲突等等，requireJS是用的比较多的一个加载库，google其实也有。

参考资料:

1. Private Members in JavaScript
2. Prototypal Inheritance in JavaScript
3. How to Write Maintainable OO JavaScript Code
4. JavaScript大牛：Douglas Crockford

其他文章：

javascript-lyrics-show

记录最近用到的几个JavaScript文件

你应该使用的20个有用的jQuery方法

Cool demo with jQuery plugin FancyBox

无觅

为了保证不同浏览器下的UI一致我们有需求要自定义input type=”file”元素的样式

如何Style input type=”file”元素的相关长篇讨论
1. Styling an input type=”file”
http://www.quirksmode.org/dom/inputfile.html

2. Howto Style the Button of a input type=”file” Control
http://imar.spaanjaars.com/154/howto-style-the-button-of-a-input-typefile-control

翻译成白话文就是
1. 隐藏input type=”file”
2. 用CSS将a+span做成按钮样式，对其做事件绑定，点击之后触发input type=”file”的点击事件
3. 用input type=”text”显示input type=”file”选中文件的值

查看能工作的live code
http://jsfiddle.net/jihao/sFCQV/

HTML

<input type="text" id="fakeFile" name="fakeFile">

<a class="linkButton" id="link_browse" href="#"><span>Link Button BROWSE</span></a>

<input id="theFile" type="file"
  style="visibility:hidden;opacity:0;cursor:pointer;*filter: alpha(opacity=0);">

CSS

a.linkButton{
    background: #332233;/*style this link to look like a button*/
    color: #FFFFFF;
    padding: 0 0 0 10px;
    text-decoration: none;
}
a.linkButton>span{
    padding: 0 10px 0 0;
}

JavaScript

$(function() {
    $('#browse,#link_browse').click(function(event) {
        event.preventDefault();
        $('#theFile').trigger('click');
    });

    function changeCallBack() {
        $('#fakeFile').val($('#theFile').val());
    };

    //this works for FF, easy job
    $('#theFile').bind('change', function() {
        alert('gotcha!');
        changeCallBack();

    });
});

写完这段代码之后遇到的相关问题
问题1. FireFox下不会显示文件全路径（google得知这是FF的安全考虑，不影响form提交）
问题2. IE下选择文件后不会触发change事件，原因是IE处理打开文件的机制（参考下面的链接看更多讨论）
对于IE8，这个问题的解决办法如下，setTimeout会阻塞，直到文件选择器关闭之后，回调函数才被调用（更新用来显示的input type=”text”的值）

    if ($.browser.msie) {
        $('#theFile').bind('click', function() {
            //this solution works for IE8, not Maxthon2, so seems not IE6 either(not tested)
            setTimeout(function() {
                alert('[IE8] setTimeout get called after open file dialog was closed');
                changeCallBack();
            }, 0);

        });
    }

查看能工作的live code
http://jsfiddle.net/jihao/sFCQV/

关于IE change事件的相关讨论
1. jQuery, .change() notification, and IE （关于radio button的change事件绑定）
http://norman.walsh.name/2009/03/24/jQueryIE

2. jQuery: change event to input file on IE
http://stackoverflow.com/questions/2389341/jquery-change-event-to-input-file-on-ie

问题的根源是helper对象，这个拖拽的时候clone出来的对象丢失了样式属性，解决办法在stackoverflow找到 http://stackoverflow.com/questions/1307705/jquery-ui-sortable-with-table-and-tr-width

var fixHelper = function(e, tr) {
 var $originals = tr.children();
 var $helper = tr.clone();
 $helper.children().each(function(index) {
 // Set helper cell sizes to match the original sizes
 $(this).width($originals.eq(index).width())
 });
 return $helper;
 };

$("table tbody").sortable({
 helper : fixHelper
 });

稍作优化之后的效果 (高亮显示拖拽的目标位置)

//css
tr.ui-state-highlight td {
	background-color: yellow;
}
//javascript
$("table tbody").sortable({
placeholder : "ui-state-highlight",
opacity: 0.6,
helper : fixHelper,
start : function(e, ui) {
 ui.placeholder.html(ui.helper.html());
},
change : function(event, ui) {
 $('tr.ui-state-highlight').html(ui.helper.html());
}
});

最近折腾了不少前端代码，比较耗费脑力，做个jQuery熟练工也没啥坏处。

update: 对比了下老外写的，果然写的比我简洁，我刚刚还忘记form提交的情况，现在更新了

/*
 * jQuery hint plugin
 *
 * Version 0.1
 * @requires jQuery v 1.4
 * @author haojii
 */
/**
 *
 * @description Create a hint for input elements,
 * the hint value is the alt attribute’s value of the input element
 *
 * @example $('input').hint(); <input name="username" alt="user name">
 * @desc see @description
 *
 * @author haojii
 */
(function( $ ){

  $.fn.hint = function() {

    // there's no need to do $(this) because
    // "this" is already a jquery object

    // $(this) would be the same as $($('#element'));
	  var hint_color = '#987';
	  return this.each(function(index){
		  var $input = $(this);
		  var $default_color = $(this).css('color');
		  var $form = $(this.form);

		  if(($(this).val() == '')||($(this).val()==$input.attr('alt')))
		    {
				$input.val($input.attr('alt'));
				$input.css('color',hint_color);
			}
			$input.blur(function(){
		      // console.log($(this).val());
		      // the this keyword is a DOM element

		      //set the hint when user haven't type in anything and left the input field
		      if($(this).val() == $input.attr('alt')
		    		  || $(this).val() == '')
		    	{
		    	  $input.val($input.attr('alt'));
		    	  $input.css('color',hint_color);
		    	}
		    }).focus(function(){
		    	//clear the hint when input field get focus and user haven't type in anything
		    	if($(this).val() == $input.attr('alt'))
		    	{
		    		$input.val('');
		    		$input.css('color',$default_color);
		    	}
		    	//console.log("focus"+$(this).val());
		    });

			//clear the hint value when form submit
			$form.submit(function(){
				if($input.val() == $input.attr('alt'))
				{
					$input.val('');
				}
			});

	  });

  };
})( jQuery );

http://icant.co.uk/sandbox/fauxconsole/

2. l10n.js，前端js代码的本地化支持

 https://github.com/eligrey/l10n.js/

3. inspect javascript object

http://www.codeproject.com/KB/miscctrl/JS_Inspect_Object.aspx

具体到这个例子，我们希望button1和button2点击之后，用AJAX的方式取example.html的内容，然后动态更新页面的id=callbackdemo3的div

HTML如下： 

<div id="callbackdemo1">
	<button id="button1">ajax load1</button><br/>
</div>
<div id="callbackdemo2">
	<button id="button2">ajax load2</button><br/>
</div>

<div id="callbackdemo3" class="log"></div>

<button onclick="$('.log').html('');">clear</button>

第一种做法：

适用于最简单的情况，也是比较直观的做法，就是在ajax回调函数中，使用jQuery的id选择器$(“#callbackdemo3″)得到id为callbackdemo3的div后更新其HTML内容

$("#callbackdemo1>#button1").click(
function load(){
	$.get("example.html",{ 'param[]': ["var1", "var2"] },
		function f1(data, textStatus, XMLHttpRequest)
		{
			$("#callbackdemo3").html(data);
		}
		);
}
);

第二种做法：

定义好一个接受额外参数的回调函数，然后在默认回调函数的内容调用这个预先定义好的回调函数

 这样就能达到传递额外参数的目的了，较之第一种方法，此方法能比较方便的利用各个回调函数的上下文。

function callback_with_extraParam(data,param)
{
	param.html(data);
}
$("#callbackdemo2>#button2").click(
function load(){
	var extraParam = $("#callbackdemo3")
	$.get("example.html",{ 'param[]': ["var1", "var2"] },
		function f2(data)
		{
			callback_with_extraParam(data,extraParam);
		}
		);
}
);

对于额外参数的重要性，不妨看一个稍微复杂一点点的HTML情况，我们希望更新button3下面的那个div的HTML，这个div没有id，那么如何做呢？ 

<div id="callback_complexdemo">
  <button id="button3">ajax load3</button><br/>
  <button onclick="$('div',$(this).closest('div')).html('');">clear</button><br/>
  <div></div>
</div>

当然使用#callback_complexdemo>div也是可以的，但是如果是更加复杂的HTML页面呢？如果没有id=callback_complexdemo呢？嵌套很深呢？

这种情况下，我们就需要有效利用上下文参数这个特性了。

在click的事件处理函数load()中，我们可以方便的获得当前元素的位置var whereAmI = $(this);
这个whereAmI是个jQuery对象，然后在AJAX回调函数f3中，我们利用whereAmI即被点中的这个button想办法去获得想要的div

这一行代码新手有的人看不懂：$(‘div’,$(whereAmI).closest(‘div’))

首先$closest_parent_div = $(whereAmI).closest(‘div’)即查询获得whereAmI最近的父div对象

然后$(‘div’,$closest_parent_div) 即在最近的父div对象这个上下文中，查找内部的div对象

$("#callback_complexdemo>#button3").click(
function load(){
	var whereAmI = $(this);
	$.get("example.html",{ 'param[]': ["var1", "var2"] },
		function f3(data)
		{
			console.log(whereAmI);
			$('div',$(whereAmI).closest('div')).html(data);
		}
		);
}
);

 希望通过这个小例子，能让大家学会如何给AJAX回调函数传递额外参数，以及实用且重要的上下文参数。

代码如下：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="http://www.haojii.com/webdev/fancyboxdemo/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>

<script type="text/javascript" src="http://www.haojii.com/webdev/fancyboxdemo/fancybox/jquery.fancybox-1.3.1.js"></script>

<link rel="stylesheet" type="text/css" href="http://www.haojii.com/webdev/fancyboxdemo/fancybox/jquery.fancybox-1.3.1.css" media="screen" />

<script type="text/javascript">
		$(document).ready(function() {
			$("#login").fancybox({
				'padding'			: 0,
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});
			$("#flash").fancybox({
				'padding'			: 0,
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});
		});
	</script>

<div>
<h1><a id="login" href="#register-form" title="This is the title for register form">猛击我吧!</a></h1>
    <div style="display:none"> 

<!-- Registration -->
		<div id="register-form" style="width: 500px; height: 300px; margin:auto;">
			<h1><a id="flash" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">A Flash Demo</a></h1>
		</div>
   </div>
<!-- /Registration -->  

</div>

这篇文章介绍了jQuery中有用的20个方法，1-20编号如下，本文没有对照原文逐句翻译，这个20个方法名称，我其实就是用下面第14个map()的方式取出来的，亮点如下，firebug真是个离不开的好工具。

说到工具，那就顺便再提一下一个简洁的jQuery代码调试工具：jQueryPad

支持代码高亮，不支持代码辅助，小问题是这个工具带的jQuery.js的版本旧了，需要自己更新一份到它的目录。

（当然，我还是最喜欢firebug，特别是网页复杂的时候）

1 after() / before()

这个无需多说了，上面的图就是个例子，就是在当前对象的前面或者后面插入内容，被插入的内容是当然对象的兄弟节点

2 change()

和click()或者hover()一样，它也是个事件处理器，这个change事件作用于 textarea, text input, select, 当目标元素的值改变的时候触发该事件。它不同于对象失去焦点时触发的事件foucusOut()和blur()。

change()事件对于客户端验证的任务最适合不过了，因为你不需要在输入字段值没有变化的时候重新验证字段。

$(document).ready(
    function() {
$('input[type=text]').change(function () {
    switch (this.id) {
/* some validation code here */
case "name":
alert(this.value+"....");
break;
default:
alert(this.id);
break;
    }
});
    });

// HTML Form
Name: <input id="name" type="text"/>

3 Context

在jQuery中，使用选择器，其实默认作用于document这个上下文上

了解了这一点话，Context就简单了，它是一个属性兼参数

作为属性：每个jQuery对象，都有个context属性

作为参数：当使用jQuery选择器时，可以使用第二个参数context，细化了查询的范围

用Firebug试验一下就明白了！

4 data() / removeData()

在元素上（确切的说应该是jQuery对象）上存储数据的一种办法

5 queue() / dequeue()

用在jQuery动画效果上，可以方便的增加或者移除一个特效

6 delay()

暂停一段时间的动画效果

7 bind(), unbind(),live(), and die()

以前的文章说过了，不废话了

8 eq()

用数组下标的方式取得一组元素中的某一个

9 get()

取得jQuery元素对应的Dom对象格式

10 grep()

这个我挺喜欢，第二个参数是个用于过滤的回调函数，很容易懂的

 var nums = '1,2,3,4,5,6,7,8,9,10'.split(',');

 nums = $.grep(nums, function(num, index) {
   // num = the current value for the item in the array
   // index = the index of the item in the array
   return num > 5; // returns a boolean
 });

 console.log(nums) // 6,7,8,9,10

11 Pseudo-Selectors

$(':animated'); // returns all elements currently animating
$(':contains(me)'); // returns all elements with the text 'me'
$(':empty'); // returns all elements with no child nodes or text
$(':parent'); // returns all elements with child nodes or text
$('li:even'); // returns all even-index elements (in this case, <li>s)
$('li:odd'); // can you guess?
$(':header'); // returns all h1 - h6s.
$('li:gt(4)'); // returns all elements with an (zero-based) index greater than the given number
$('li:lt(4)'); // returns all element with an index less than the given number
$(':only-child'); // returns all . . . well, it should be obvious

12 isArray() / isEmptyObject() / isFunction() / isPlainObject()

 $.isArray([1, 2, 3]); // returns true
 $.isEmptyObject({}); // returns true
 $.isFunction(function () { /****/ }); // returns true

 function Person(name) {
     this.name = name
     return this;
 }
 $.isPlainObject({})); // returns true
 $.isPlainObject(new Object()); // returns true
 $.isPlainObject(new Person()); // returns false

13 makeArray()

使用jQuery选择器返回的都是jQuery对象，所以$.makeArray()变得挺实用的

    var ps = $('p');
    $.isArray(ps); //returns false;
    ps = $.makeArray(ps);
    $.isArray(ps); // returns true;

14 map()

上面firebug的贴图中延伸过了，自己试试看吧

15 parseJSON()

把JSON格式的字符串结果解析成JSON对象

16 proxy()

$.proxy() 解决了函数调用的上下文问题

 var person = {
   name : "Andrew",
   meet : function () {
     alert('Hi! My name is ' + this.name);
   }
 };
 person.meet();   // 正常工作
 $('#test').click(person.meet); // 返回 Hi! My name is undefined 或者 Hi! My name is 空

$('#test').click($.proxy(person.meet, person));
// we could also do $.proxy(person, "meet")

17 replaceAll() / replaceWith()

用来替换内容的，replaceWith更顺脑

<div class="error1">error section 1</div>
<br/>
<div class="error2">error section 2</div>
<br/>
$('<span class=fixed>The error has been corrected</span>').replaceAll('.error1');
"$('.error2').replaceWith('<span class=fixed>The error has been corrected</span>');

18 serialize() / serializeArray()

看例子吧，易懂

 <form>
     <input type="text" name="name" value="John Doe" />
     <input type="text" name="url" value="http://www.example.com" />
 </form>

console.log($('form').serialize());​​​ // logs : name=John+Doe&url=http%3A%2F%2Fwww.example.com
console.log($('form').serializeArray());
// logs : [{ name : 'name', value : 'John Doe'} , { name : 'url', value : 'http://www.example.com' } ]

19 siblings()

返回所有兄弟节点

20 wrap() / wrapAll() / wrapInner()

在作用对象的外面，周围，或者里面，包一层东西

Conclusion

好好玩这些个方法吧！

…

使用iPhone访问本文的测试页面

本文包含一些小的技巧：
1. 如何隐藏iPhone Safari的地址栏
2. 如何设置网页的桌面快捷方式图标
3. 如何为网页设置iPhone的样式
4. 如何在网页中检测屏幕的方向
5. 如何在网页中检测当前的位置

为iPhone优化网页，最需要了解的应该是下面这个属性
viewport: 可见窗口

可见窗口在iPhone Safari上和桌面Safari略有不同，iPhone上默认没有滚动条，默认的实际的可见大小在竖屏状态下，如下图是320*356，地址栏占据了60像素的高度，稍后我们有办法将其隐藏，得以使用这宝贵的60像素。

iPhone的Safari在显示传统的web网页时（未做优化的网页），viewport会被设置成显示网页宽度的980像素，即在320*356的大小内显示原网页980像素的内容，做了适当的缩放等调整。

所以我们做网页优化的时候，可以通过设置这个meta属性，更多细节可以参考： “Safari Web Content Guide.pdf”

<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, user-scalable=no"/>

width=device-width, //设备宽度

height=device-height, //设备高度

initial-scale=1.0, //初始的缩放比例

user-scalable=no //是否允许用户缩放

小技巧

1. 如何隐藏iPhone Safari的地址栏

设置这个属性(文档里面说有用，但是好像不太成功)

<meta name="apple-mobile-web-app-capable" content="yes" />

还有一种办法，页面加载完成之后滚动窗口，这个确实有效，唯一要注意的是页面高度必须够长，我一般设成device-height就没问题了:

<script type="text/javascript">
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);

function hideURLbar(){
window.scrollTo(0,1);
}
</script>

2. 如何设置网页的桌面快捷方式图标

这个其实不算技巧，只是从Apple文档里找到这一项罢了

<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
<link rel="apple-touch-startup-image" href="startup.png"/>

第一行就是设置桌面快捷方式图标的，图标必须是57*57像素的文件，不需要自己做圆角和高亮效果，系统会自动帮你搞定这个
放在网页根目录会作用于下面的全部网页，当然也可以为每个页面设置单独的图标

第二行是设置启动画面（没看到成功效果）

3. 如何为网页设置iPhone的样式

这个是CSS media selector的一点小技巧

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)"
  rel="stylesheet" type="text/css" href="iphone.css"/>
<!--<![endif]-->

4. 如何在网页中检测屏幕的方向

<script type="text/javascript">
function updateOrientation()
{
	var displayStr = "Orientation : ";
	switch(window.orientation)
	{
	case 0:
		displayStr += "Portrait";
		break;
	case -90:
		displayStr += "Landscape (right, screen turned clockwise)";
		break;
	case 90:
		displayStr += "Landscape (left, screen turned counterclockwise)";
		break;
	case 180:
		displayStr += "Portrait (upside-down portrait)";
		break;
	}
	document.getElementById("output").innerHTML = displayStr;
}
</script>
<body onorientationchange="updateOrientation();">

5. 如何在网页中检测当前的位置

<script type="text/javascript">
navigator.geolocation.getCurrentPosition(showMap);
function showMap(position) {
	latitude = position.coords.latitude;
	longitude = position.coords.longitude;
	document.getElementById("latitude").innerHTML = latitude;
	document.getElementById("longitude").innerHTML = longitude;
}

//Register for location changes
var watchId = navigator.geolocation.watchPosition(scrollMap,handleError);

function scrollMap(position) {
	latitude = position.coords.latitude;
	longitude = position.coords.longitude;
	document.getElementById("latitude").innerHTML = "scrollMap->"+latitude;
	document.getElementById("longitude").innerHTML = "scrollMap->"+longitude;
}
function handleError(error) {
	document.getElementById("error").innerHTML = error;
}

function buttonClickHandler() {
	// Unregister when the user clicks a button
	navigator.geolocation.clearWatch(watchId);
}

</script>
</head>
<body>
<div id="location">
	latitude:<p id="latitude">null</p>
	longitude:<p id="longitude">null</p>
</div>
<div>
	<input type="button" value="clearWatch" onclick="buttonClickHandler();"/>
</div>
<div id="error"></div>
</body>

Gravatar头像这玩意基本上凡事用wordpress的博客的用户都用笔墨介绍过，所以我就不废话了，不知道的自己google一下。

集成Gravatar头像的核心是构造一个图像的URL地址，Gravatar的最简单的头像URL地址是这样生成的

1. 用MD5Hash算法加密你的邮箱地址

2. 头像 URL= http://www.gravatar.com/avatar/+第一步加密后的值

当然Gravatar还提供了几个有意思的参数，如?d=monsterid加上这个参数，如果邮箱地址未在Gravatar注册过，则动态生成一个小怪兽的头像（例子：左图的右下头像）

JavaScript的MD5Hash所幸也有人早就写过了，到这里下载一个。

现在我们需要关心的就是页面怎么写了，左图的评论表单是从wordpress里抠出来的，CSS我不是高手，简单的弄了下不至于太难看。

AJAX的标题有点噱头啦，但是在这个例子的基础上做成AJAX评论也只剩下一小步了。

其实测试页面值得一提的代码是这一段，用户输入完email地址之后，这个输入框失去焦点，这个时候我们动态加载其头像，这样一来用户体验能够得到明显提升，不要看是个小小的功能，有时候就是这些细节才抓住了你的目标客户。

//jQuery的blur事件
("#email").blur(function(event){
//清空上一个头像
$("#ajaxgravatar").html('');
$email = $.trim($("#email").val()).toLowerCase();
//调用MD5 JavaScript文件的API
$gavatar = hex_md5($email);
//构造URL
$gavatar_url = "http://www.gravatar.com/avatar/"+$gavatar;
//动态修改头像
$("#ajaxgravatar").html('<img id="ajaxgravatar" alt="Gravatar" src="'+ $gavatar_url +'?d=monsterid"/>')
});