javascript 触发HTML元素绑定的函数

只能触发函数的执行,并不能完全模拟出实际的点击。
 if (document.createEvent) {
            var clickEvent = document.createEvent("MouseEvents");
            clickEvent.initEvent("click", false, true);
            this.fileEl.dom.dispatchEvent(clickEvent);//ff
        } else if (document.createEventObject) {
            this.fileEl.dom.fireEvent("onclick", document.createEventObject(e.browserEvent));//ie
        }

如何让GOOGLE MAP API地图文字只显示中文

默认在本地使用GOOGLE MAP API地图的时候出现的字都是中文的,但是如果申请了MAP密匙之后,就会显示中文和英文了,解决办法是:

<script src="http://maps.google.com/maps?file=api&amp;
hl=zh-CN&amp;oe=gb2312&amp;v=2&amp;sensor=false&amp;key=a" type="text/javascript">
</script>

src字符串中加入hl=zh-CN即可。这样的话GOOGLE MAP API地图就可以只显示中文。

错误 GMap2未定义 解决办法

使用google mapAPI地图的时候总是在IE6中出现错误 GMap2未定义 还会提示缺少”}”。 如果是非utf-8字符集那么

解决办法为将

&lt;script src="http://ditu.google.cn/maps?file=api&amp;amp;v=2" type="text/javascript"&gt;
&lt;/script&gt;

改为

&lt;script src="http://ditu.google.cn/maps?file=api&amp;oe=gb2312&amp;amp;v=2"
 type="text/javascript"&gt;&lt;/script&gt;

但是google自己的地图相对于IE都有

<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>

这么一条.

jQuery表格排序插件blueTable v0.1

上次mymickey利用prototype的方法写过一个表格排序的插件,这次mymickey用jquery也对上一次写排序的插件代码做了一些细化,内部功能也做了一些扩展,增加了扩展名(后缀名)排序的双相选择,可以对后缀名和文件名排序分别制定排序方式;还增加了对表格被选中行排序的功能。

演示请看这里demo;
插件下载
【程序功能】:

  1. 日期排序、
  2. 中英文混合数字排序、
  3. 数据大小排序、
  4. 数据类型文件类型和扩展名排序、
  5. 选中行排序。

mymickey谈谈其制作此插件相当于上次遇到的不同情况:

【扩展名排序】:排序之后的对每一行同通类型的文件后缀名进行着色,先要取得每种数据后缀名在表格中被重复的次数

ExtensionName.strongClass 
 
&amp;&amp;strong($(this),previous,this.axis,next)&amp;&amp;arr.push(this.axis);

初始化参数的扩展名属性的强调分类如果被设置,那么会将刷选出来的所有扩展名进行的包装如果列的单元格合法带有相应扩展名,

function strong(o,TagStart,oldText,TagEnd){
return oldText &amp;&amp;
o.html(o.text().replace(oldText,Array.prototype.slice.call(arguments).slice(1).join('')))
}

调用strong函数判断顺便加入需要强调着色的单元格文本。这里现将单元格匹配内容replace()替换成所需内容,以此达到文件扩展名的功能。这一个循环涉及到大量的字符串拼接如果这样做的话定会性能损耗较大<strong>+’string’+</strong>,可以使用通变的方法直接将函数参数转为
数组之后取得所需字符串join()掉便得到了理想中的结果,如果拼接成功将返回对象,那么此字符串压入一个数组,数组将计算出所有被重复过的扩展名的次数,就是对数组的元素计算元素的重复次数的计算,之后对被重复过的这些扩展名进行字母的顺序排序,选取之前数组长度讲被刷选出来的对象压入数组slice刷选出之后被压入的对象进行字母先后序列的排序,由此便得到了每个扩展名被重复的次数。

function OrderExtNum(){
       var count = arr.length;
        $.each($(arr).Filter(),function(i,v){
        arr.push( {} );
        arr[arr.length-1][v] = i;
});
 
     return arr.slice(count).sort(function(a,b){
         for(var i in a){
             for(var j in b)
                return -(a[i].localeCompare(b[j]))
}
})
}
$.fn.Filter=function(){
           var self = this.get(),o={},result=[];
              this.each(
               function(index){
                 if( !o[self[index]] ){
                     o[self[index]] = 1;
                    }
                 else {
             o[self[index]]++ ;
                    }
});
return o;
}

在排序完毕之后遍历数组,jquery自身扩展了一个slice方法用于更方便的dom元素选择,在这里正好可以派上用场。数组的长度这时候正好就是程序中需要着色次数的长度。

var j = 0 ,color = ['03c','060'],
strong  =  table.find('td:nth-child('+(tableData.CurrentIndex+1)+') '+target+''),;
$.each(arr,function(i){
             $.each(arr[i],
                   function(k,v){
                        strong.slice(j,parseInt(k)+j).css({color:'#'+color[i%2]});
                              j+=parseInt(k);
})
})

【选中行排序】:选中行排序在IE6-7中当DOM元素被重新插入表格后如果dom元素中包含checkbox , input元素原来的选中状态会被重置解决办法,mymickey在这里为每个点击后的input元素的父元素添加了一个属性,排序完毕之后重新遍历为input加入选择状态就行了。

function IE6Checked(){
rows.find('td:eq('+(SelectRowOrder.index)+') input')
   .each(
     function(){
        this.checked = parseInt($(this).parent()[0].axis);//IE6下必须被转换为数字//
  }
)
}

【过滤掉不需要排序的行】:将当前表格需排序的列转换成为数组,拼接需过滤的数组使用自定义的Filter方法删除掉被重复过的数组元素。

if(NotOrder!=null){
          var arr=[],Count=th.length;
          filterTh={};
      while(Count--)arr.push(Count);
         arr = $(NotOrder.concat(arr)).Filter();
             Count = arr.length;
              while(Count--){filterTh[arr[Count]] = th[arr[Count]]}
}
$.fn.Filter=function(){
       var self = this.get(),o={},result=[];
 
             this.each(
                function(index){
                    if( o[self[index]] != self[index] )
                           o[self[index]] = self[index];
                    else delete o[self[index]];
});
 
   for(var i in o)
       result.push(i);
          return result
}

【其他】:在上一次使用prototype方式做的表格排序中每次反向需要把当前的行转换成为数组在调用数组的reverse()方法进行反向,实际上dom对象也可以拥有reverse()方法

Array.prototype.reverse.call(row);

原因是dom对象列表的hash结构和属性完全达到了数组对象的reverse()方法的标准所以这个可以直接使用数组对象的reverse()方法反序。

插件使用说明:文档载入后选择table对象后调用blueTable方法,$(table).blueTable();blutTable支持2个可选参数。

第一个参数为一个对象详细如下:

  • 选中行排序参数:SelectRowOrder{index:number},属性为一个对象,index属性为需要排序的列的坐标值 从0算起;
  • 扩展名排序参数
    ExtensionName{index:number,extension:stringID,name:stringID,strongClass:CSSClass};
    index属性同上。
    extension属性为点击后需排序的列中的htmlID,点击后可对此列中文件名称排序;
    name属性htmlID,点击后可对此列中文件名称的扩展名排序,以上两个属性为一个HTML标签元素,包含在thead th中(详细请看demo),在文件名排序列中这两个ID必须被设置;
    strongClass属性是否对文件扩展名排序后再次对分文件类型分类着色;属性值为字符串,设’ext’的话为文件后缀名分类着色,’font’的话为单元格内所有字符串着色,(mymickey觉得这个东西蛮鸡肋的所以我只设定了2个颜色);
  • DataSize参数:index属性同上;
  • NotOrder参数:为一个数组,可以过滤掉不需要排序的列,数组元素为不需排序的列的坐标值,
  • HighLightColClass参数:属性值为一个字符串,在切换排序列的时候对当前排序的列进行高亮的CLASS,在CSS中申明;

第二个参数为排序完毕之后需要执行的函数,此函数接受两个参数,第一个的当前被排序列的坐标值,第二个为在此之前被排序列的坐标值。
继续阅读 »

javascript多种数据类型排序

不久前mymickey写过一次表格排序但是速度太慢。现在又写了一个,性能比上一次那一个好了很多而且支持很多种类型的排序,这一次写的能支持:

  • 中文汉字排序、
  • 中英文混合排序、
  • 数据大小排序、
  • 文件类型排序(后缀名排序)
  • 日期时间排序、
  • 价格排序、
  • 中文混合数字排序;

使用方法:文档载入后new tableListSort(arguments,arguments)。

接受两个参数:第一个参数为必须的,可以是字符串ID,也可以是table对象;第二个可选参数,此参数为一个对象,{data:index,fileType:index,fn:function(){}};对象有三个可选的属性,第一个和第二个为扩展排序的数据类型,第三个参数为排序后需要执行的函数;如果表格数据中有需要排序的数据大小,如1KB 1MB 1GB 这样的数据类型的话,可以{data:index};index为表格需排序的某一列的下标值,从0开始计数,如表格的第二列为1KB MB这样的数据类型,{data:2};对象的第二个属性{fileType:index},此扩展排序为文件类型,如xml,jpg,exe这样的后缀名。index同样为列的下标值。

对象的第三个可选属性为一个排序后需执行的函数{fn:function(){执行的代码}}。

HTML代码中必须的元素为:table元素,table元素的第一行必须使用thead元素包含tr,tr中必须包含可点击排序的元素th;thead下一个sibling元素必须为tbody,tbody中需包含tr。排序数据使用td包含,table也可以包含caption和tfoot。

4月 11日, 更新:添加了排序后升序降序的标示图标。
自定义添加class 如果不打算添加 此属性可以为不设置,鼠标样式mymickey在脚本里面加好了不需要CSS添加。
table.Index为上一次被排序过的坐标值;table.Index初始化为null;
fn:fini函数仅为排序过后需要执行的函数,就算没有它也是可以排序的,这里传递一个排序过后需要执行的函数仅仅是为了添加排序down和up的标示图标.

点击这里查看demo

以下的源代码:

继续阅读 »

封装一个小巧的TAB选项卡

使用方法:文档载入后执行对象new tab(container,eventType,index,backcall)。container为选项卡对象,可选参数eventType为事件类型(click或者onmouseover),可选参数index初始化显示出来的标签0开始计数,可选函数backcall触发事件之后需要执行的函数。如new tab(“tab”,”click”,2,function(){…})或者new tab(“tab”)。
以下为源代码:demo查看
继续阅读 »

javascript基于prototype原型的继承链

javascript中类与父类之间的继承都是由其prototype对象来链接起来继承的,默认情况下所有的类都继承Object对象,包括自定义对象,Object对象也是所有对象的最顶层对象。但这一点没有什么让人感觉惊艳的,因为大多数编程语言基本都是如此。也可以把prototype认为是所有javascript对象都拥有的一个属性,这个属性帮助对象自身继承创建此对象的构造器或者说是类的原型中所定义的属性成员和方法成员。但是javascript基于prototype的继承不像其他高级语言的继承那么繁琐,javascript的继承显得简约而又简单。

var num=new Number(100);创建一个对象之后立刻调用JS中的预先为我们定义好Number()函数,为Number()函数传递一个参数100,函数启动自身的构造器,初始化一个数字与新建的这个对象关联起来,num变量指向这个对象,同时,这个对象便获取继承到了Nunber()函数预定义好的prototype对象所指向的方法。

函数也是对象,函数也可以拥有方法(函数)和属性,Number.prototype.toFixed();返回toFixed(){…..},明显的JS已经为我们定义好了一个原型,可以拿来直接使用的,那么很自然的由Number函数构造出来的对象也将继承Number函数的prototype定义的方法,num.toFixed(index)证明其确实是这样。

prototype是javascript提供开发人员的一个显式的继承接口,那么自定义对象便有了更多的扩展空间,既然每个对象都拥有了一个显式的prototype,这样大家只要有了构造函数便就有了一直向上延伸的继承链了,Number()函数是预先为开发者定义好的函数,为这个函数定义一个新的prototype这样Number函数那些少得可怜方法就可以由我们自己扩展了,Prototype框架对Number类的扩展的一部分: 继续阅读 »

javascript对象构造函数检测instanceof

instanceof判定一个对象是否为某一个类的实例。

var num=1 === var num=Number(1)

数字1是直接调用Number函数构造出来的。

var num=1 !== var num=new Number(1)//false

var num=1 == var num=new Number(1)//true

var num=new Number(15)这一步new 创建一个对象 这个对象在调用 Object()函数返回一个对象,这个对象在调用Number函数,为Number函数传递一个参数15。之后把这个对象赋值为15,之后在把num变量指向这个对象,
———————
var num=new Number(15);
alert(num instanceof Number); //true
alert(num instanceof Object); //true
所以mymickey理解的是这个num指向的对象调用了两个函数对象一个是Object()函数,之后才是Nunber()函数;

alert(num.constructor)返回的是

function Number() {
[native code]
}

mymickey想:开始第一次调用Object函数的时候num.constructo应该是Object()才对,但是最后还是调用了一次Number();所以结果才会是:function Number() {[native code]}。

setTimeou中this指针问题

setTimeout()方法是一个能让其中第一个参数按照第二个参数指定的时间调用的,也就是说setTimeout方法能把开发者给予的时间值按照计划调用第一个参数。setTimeout方法也是window对象的一个预定义方法,它只能被window这个对象来调用。

var a=123
window.setTimeout(alert(this.a),1000)

给window对象添加一个属性a,1秒后显示123,其中this的确是指向window对象,在javascript中函数中的this永远指向调用这个函数的对象。当javascript自定义对象或者说是类的时候情况就有所不同了,下面的代码使用 setTimeout方法递归一个函数:

function classA(a,b){
	this.A=a;
	this.B=b;
}
classA.prototype={
        classB:function(){
        alert(this.A)
        window.setTimeout(this.classB,this.B)
		}
	}
var a=new classA('aaa',1000)	;
a.classB();

代码看起来好像没什么问题setTimeout方法的参数传递this.classB这个对象的一个方法,对象初始化的时候显示正确,但是过了一秒后,第二个提示框显示的却是undefined,在这里setTimeout的第一个参数this.classB指向了一个函数,setTimeout方法将this.classB指向的这个函数原原本本的复制了一份之后传递进去。修改一下代码加入‘alert(‘this==window ‘+(this==window))’这样一行代码。
继续阅读 »

prototype.js中Function.prototype.bind方法浅解

初次看到prototype.js框架里面的Function.prototype.bind = function() {}和class.create()方法实在有些不理解,因为通常mickey在使用jquery的时候并没多想这些强大的库里面为我们提供的那些及其方便使用的原型方法是如何实现的。所以在看到prototype.js此类的框架的部分源码后,对里面一些基础的类扩展原型方法的巧妙使用理解起来吃力的原因了。但是mickey经过层层分析,段段调用,因此得出了以下结论,如有不足之处请留言指正。

prototype.js中的Function.prototype.bind方法:

1
2
3
4
5
6
7
8
9
Function.prototype.bind = function() {
    var __method = this;
    var args = Array.prototype.slice.call(arguments);
    var object=args.shift();
    return function() {
        return __method.apply(object,
             args.concat(Array.prototype.slice.call(arguments)));
}
}

为所有function对象增加一个新的prototype(原型)方法bind:

  1. 将调用bind方法的对象保存到__method(方法)变量里面。
  2. 将调用bind方法时传递的参数转换成为数组保存到变量args。
  3. 将args数组的第一位[0]元素提取出来保存到变量object。
  4. 返回一个函数。

这个被返回的函数在再次被调用的时候执行如下操作:

  1. 使用apply方法将调用bind方法的函数里面的this指针替换为object。
  2. 将传递到这个匿名函数里面的参数转换为数组,与args数组组合形成一个新的数组,传递给__method方法。

var args = Array.prototype.slice.call(arguments)将这条代码简写来看可以成为这样[].slice.call(arguments);但是这样会给内存里增加一个空的数组对象,为了容易阅读点在简化可以把它假看成为这样的形式slice.call(arguments),去掉call可以假看成为这样的形式function slice(arguments){….},其实在slice就是一个为所有数组定义好的prototype方法而已它与我们自定义的原型方法不同的是,它是javascript为开发者预先定义好的内置方法,他只能被数组调用。mickey在编辑器里面alert(Array.prototype.slice)之后得到的就是funciton slice(){…}。

既然slice也只是一个普通函数方法,slice.call(object)这样让slice里面的this临时的被替换一下也是可以的。就如[].slice(){..}里面的this指针会指向调用slice方法的数组对象一样。使用call方法或apply方法可以将调用此方法的对象内的this指针临时性的改变为传递参数中的第一个参数,这一切都是临时性的,它会在函数执行完毕内存释放后重置。
var object=args.shift()将数组中的[0]位置的对象保存到object变量,这个object就是要被替换的指针。

1
2
3
4
5
6
function o(){
    this.num = 1;
    var fn = function(arg){alert(this.num+arg)}.bind(this,2);
    fn();
}
new o()

代码的第3行:一个匿名函数调用了bind方法,并传递o对象和一个数字2到bind函数里面,这两个传递过去的参数都将被转换成为数组形式,o对象会被单独提取出来放入object里。之后bind函数调用完毕,返回一个函数保存到 fn变量里边,现在fn变量里保存了bind函数的返回函数,fn里面的内容就文章第一个代码块的第五行到第七行。
代码第4行:调用fn函数,或者说是在调用bind函数的返回值。这时候会弹出数字“3”。

bind方法中的匿名函数间接保存了它运行环境里面的变量,通常这样的方法称之为“闭包”。

这在很多开源框架为开发者制作出的强大方法和属性便是这样出来的,对于初学者mickey来说以上言论如有不正确的地方还是我想还是可以勉强原谅的,如果您发现了不妥之处请留言指出。

返回顶部