手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

jQuery的html()等方法介绍

本来是看到一篇文章,写研究的,想COPY过来就完事了。该来来自于cssRain,但是在看的过程中,发现内容和标准偏差很多,于是就贴上它的链接,然后自己谈谈理解吧。

CSSRAIN的链接为:http://www.cssrain.cn/article.asp?id=1176

在jQuery里面对于一些HTML的元素操作都是很简化的,这也是很多人选择使用jQuery的原因。

对于获取某一个元素的值,如input框,我们往往是用$('#test').val();

$('#test')这个我就不多说了,反正就是获取ID为test的这个元素。

$('#test').val(),也就是获取它的值,一般来说,凡是能够用在FORM里的元素,都可以用.val()来进行值的获取,如input,textarea,select等,都可以用.val()来获取它们的当前值

而.val('aa');则是设置该元素的值,$('#test').val('aa'),也就是相当于设置test元素的值为aa。

类似这样的用法还有两种:.html(),.text(),这两种用法往往用在div和span元素上,一般是为这两种元素进行赋值和取值。

.html()替代了以前的 .innerHTML , .html('test') ,则是替代了 .innerHTML = 'test';

这些类似的简化写法让我们在实际的操作中感觉得更加流畅。

这些方法都是直接在方法名里加参数来进行赋值和取值的。还有一些是通过第二个参数进行取值的(说的不太清楚。。。),比如$('#test').attr('name'),那么,返回的值就是它的attribute中的name了,如果$('#test').attr('id','test2'),则是相当于把这个test元素的name设为test2,再进行取值的时候,name就是test2了。

说的太乱了。。。。

懒得整理,权当笔记

Tags: jquery, html, 研究

XML to JSON plugin--把xml转化为json插件

以前用JS操作XML都是用DOM的方式,现在有了这个插件,操作起来会更方便了直接采用对象。。。

来源:http://www.94this.com.cn/article/258.htm

这个插件应该是比较方便的一个插件了,它能把xml字符串或xml文件转化为json对象,比如把

XML/HTML代码
  1. <xml>  
  2. <message>Hello world</message>  
  3. </xml>  

转化为
JavaScript代码
  1. {  
  2.     message: 'Hello world';  
  3. }  

这样我们操作起来就很方便了,因为用javascript操作json比操作xml要方便好多。

基本的使用:

JavaScript代码
  1. var xml = '<xml><message>Hello world</message></xml>';  
  2. var json = $.xml2json(xml);  
  3. alert(json.message);  

当然它也能通过直接把xml文件转化为json:

JavaScript代码
  1. $.get('data/hello.xml'function(xml){  
  2.     var json = $.xml2json(xml);  
  3.     alert(json.message);  
  4. });  

好了,看看基本的演示吧!(膘叔:演示地址仍然是亮亮的网站)

这个插件还有一个扩展的用法:
基本的是把

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <animals>  
  3. <dog color='Black'>  
  4.   <name>Rufus</name>  
  5.   <breed>labrador</breed>  
  6. </dog>  
  7. <dog breed='whippet'>  
  8.   Adopted  
  9.   <name>Marty</name>  
  10. </dog>  
  11. <cat color="White">  
  12.   <name>Matilda</name>  
  13. </cat>  
  14. </animals>  
转化为 
JavaScript代码
  1. {    
  2.    dog:[    
  3.      { name:'Rufus', breed:'labrador', color:'Black' },    
  4.      { text:'Adopted', name:'Marty', breed:'whippet' }    
  5.    ],    
  6.    cat:{ name:'Matilda', color:'White'}    
  7. }   
扩展的作用是把每个节点转化为数组的形式,即
JavaScript代码
  1. {    
  2.    dog:[    
  3.      { name:['Rufus'], breed:['labrador'], color:'Black' },    
  4.      { text:'Adopted', name:['Marty'], breed:'whippet' }    
  5.    ],    
  6.    cat:[    
  7.      { name:'Matilda', color:'White'}    
  8.    ]    
  9. }   

这个使用也简单,就多了一个参数:

JavaScript代码
  1. $.get('data/animals.xml'function(xml){  
  2.    var animals = $.xml2json(xml, true);  
  3.    alert(animals.dog[1].name[0].text +'/'+ animals.dog[1].text);  
  4. });  


最后,看看所有用法的演示(此演示官方提供)吧!

深入理解Javascript闭包(closure)

經過指點,獲悉原文為:http://www.felixwoo.com/archives/247

我轉貼的文章來源:http://www.knowsky.com/442121.html

PS:虽然我是从上面拷来的,但我并不建议打开这个网页看,因为,上面全是广告。个人猜测,代码也是他拷来的,但没有亲自验证,我也没法打包票。不过东西有点用,所以我也就COPY过来了。

内容如下:

最近在网上查阅了不少Javascript闭包(closure)相关的资料,写的大多是非常的学术和专业。对于初学者来说别说理解闭包了,就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目。

一、什么是闭包?
“官方”的解释是:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
相信很少有人能直接看懂这句话,因为他描述的太学术。我想用如何在Javascript中创建一个闭包来告诉你什么是闭包,因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。看下面这段代码:

JavaScript代码
  1. function a(){  
  2.  var i=0;  
  3.  function b(){  
  4.  alert(++i);  
  5.  }  
  6.  return b;  
  7. }  
  8. var c = a();  
  9. c();  

这段代码有两个特点:
1、函数b嵌套在函数a内部;
2、函数a返回函数b。
这样在执行完var c=a()后,变量c实际上是指向了函数b,再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包,为什么?因为函数a外的变量c引用了函数a内的函数b,就是说:

当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个闭包。

我猜想你一定还是不理解闭包,因为你不知道闭包有什么作用,下面让我们继续探索。

二、闭包有什么作用?
简而言之,闭包的作用就是在a执行完并返回后,闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源,因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述,不专业也不严谨,但大概意思就是这样,理解闭包需要循序渐进的过程。
在上面的例子中,由于闭包的存在使得函数a返回后,a中的i始终存在,这样每次执行c(),i都是自加1后alert出i的值。

那 么我们来想象另一种情况,如果a返回的不是函数b,情况就完全不同了。因为a执行完后,b没有被返回给a的外界,只是被a所引用,而此时a也只会被b引 用,因此函数a和b互相引用但又不被外界打扰(被外界引用),函数a和b就会被GC回收。(关于Javascript的垃圾回收机制将在后面详细介绍)

三、闭包内的微观世界
如 果要更加深入的了解闭包以及函数a和嵌套函数b的关系,我们需要引入另外几个概念:函数的执行环境(excution context)、活动对象(call object)、作用域(scope)、作用域链(scope chain)。以函数a从定义到执行的过程为例阐述这几个概念。

1、当定义函数a的时候,js解释器会将函数a的作用域链(scope chain)设置为定义a时a所在的“环境”,如果a是一个全局函数,则scope chain中只有window对象。
2、当函数a执行的时候,a会进入相应的执行环境(excution context)。
3、在创建执行环境的过程中,首先会为a添加一个scope属性,即a的作用域,其值就为第1步中的scope chain。即a.scope=a的作用域链。
4、 然后执行环境会创建一个活动对象(call object)。活动对象也是一个拥有属性的对象,但它不具有原型而且不能通过JavaScript代码直接访问。创建完活动对象后,把活动对象添加到a 的作用域链的最顶端。此时a的作用域链包含了两个对象:a的活动对象和window对象。
5、下一步是在活动对象上添加一个arguments属性,它保存着调用函数a时所传递的参数。
6、最后把所有函数a的形参和内部的函数b的引用也添加到a的活动对象上。在这一步中,完成了函数b的的定义,因此如同第3步,函数b的作用域链被设置为b所被定义的环境,即a的作用域。

到此,整个函数a从定义到执行的步骤就完成了。此时a返回函数b的引用给c,又函数b的作用域链包含了对函数a的活动对象的引用,也就是说b可以访问到a中定义的所有变量和函数。函数b被c引用,函数b又依赖函数a,因此函数a在返回后不会被GC回收。

当函数b执行的时候亦会像以上步骤一样。因此,执行时b的作用域链包含了3个对象:b的活动对象、a的活动对象和window对象,如下图所示:(这里看了一下,确实没有图,看来果然是拷贝过来的,稍稍验证了我的说法,呵呵。。。。唉。可惜我确实不知道原文在哪里,不过,我是从他的网站拷来的,还是给他一个链接,毕竟我的资料来源是该网站)

大小: 56.19 K
尺寸: 500 x 180
浏览: 1688 次
点击打开新窗口浏览全图

(附上原文圖片)

如图所示,当在函数b中访问一个变量的时候,搜索顺序是先搜索自身的活动对象,如果存在则返回,如果不存在将继续搜索函数a的活动对象,依 次查找,直到找到为止。如果整个作用域链上都无法找到,则返回undefined。如果函数b存在prototype原型对象,则在查找完自身的活动对象 后先查找自身的原型对象,再继续查找。这就是Javascript中的变量查找机制。

四、闭包的应用场景
1、保护函数内的变量安全。以最开始的例子为例,函数a中i只有函数b才能访问,而无法通过其他途径访问到,因此保护了i的安全性。
2、在内存中维持一个变量。依然如前例,由于闭包,函数a中i的一直存在于内存中,因此每次执行c(),都会给i自加1。
以上两点是闭包最基本的应用场景,很多经典案例都源于此。

五、Javascript的垃圾回收机制
在Javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收。如果两个对象互相引用,而不再被第3者所引用,那么这两个互相引用的对象也会被回收。因为函数a被b引用,b又被a外的c引用,这就是为什么函数a执行后不会被回收的原因。

 

Tags: 闭包, closure, javascript, archive

jQuery Plugins -- JQzoom

demo地址:http://www.51toria.cn/demo/JQplus/jqzoom/

 

使用的JS:

 

XML/HTML代码(用JS代码的时候居然卡住了。没办法,只能用XML代码来展示)
  1. //**************************************************************  
  2. // jQZoom allows you to realize a small magnifier window,close  
  3. // to the image or images on your web page easily.  
  4. //  
  5. // jqZoom version 1.0  
  6. // Author Doc. Ing. Renzi Marco(www.mind-projects.it)  
  7. // Released on Dec 05 2007  
  8. // i'm searching for a job,pick me up!!!  
  9. // mail: renzi.mrc@gmail.com  
  10. //**************************************************************  
  11.   
  12. (function($){  
  13.   
  14.         $.fn.jqueryzoom = function(options){  
  15.   
  16.         var settings = {  
  17.                 xzoom: 200,     //zoomed width default width  
  18.                 yzoom: 200,     //zoomed div default width  
  19.                 offset: 10,     //zoomed div default offset  
  20.                 position: "right"  //zoomed div default position,offset position is to the right of the image  
  21.             };  
  22.   
  23.             if(options) {  
  24.                 $.extend(settings, options);  
  25.             }  
  26.   
  27.         $(this).hover(function(){  
  28.   
  29.   
  30.             var imageLeft = $(this).get(0).offsetLeft;  
  31.             var imageRight = $(this).get(0).offsetRight;  
  32.             var imageTop =  $(this).get(0).offsetTop;  
  33.             var imageWidth = $(this).get(0).offsetWidth;  
  34.             var imageHeight = $(this).get(0).offsetHeight;  
  35.   
  36.             var bigimage = $(this).attr("alt");  
  37.   
  38.             if($("div.zoomdiv").get().length == 0){  
  39.   
  40.             $(this).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");  
  41.   
  42.             }  
  43.   
  44.             if(settings.position == "right"){  
  45.   
  46.             leftpos = imageLeft + imageWidth + settings.offset;  
  47.   
  48.             }else{  
  49.   
  50.             leftpos = imageLeft - settings.xzoom - settings.offset;  
  51.   
  52.             }  
  53.   
  54.             $("div.zoomdiv").css({ top: imageTop,left: leftpos });  
  55.   
  56.             $("div.zoomdiv").width(settings.xzoom);  
  57.   
  58.             $("div.zoomdiv").height(settings.yzoom);  
  59.   
  60.             $("div.zoomdiv").show();  
  61.   
  62.   
  63.                     $(document.body).mousemove(function(e){  
  64.   
  65.                     var bigwidth = $(".bigimg").get(0).offsetWidth;  
  66.   
  67.                     var bigheight = $(".bigimg").get(0).offsetHeight;  
  68.   
  69.                     var scaley ='x';  
  70.   
  71.                     var scalex'y';  
  72.   
  73.   
  74.                     if(isNaN(scalex)|isNaN(scaley)){  
  75.   
  76.                     var scalex = Math.round(bigwidth/imageWidth) ;  
  77.   
  78.                     var scaley = Math.round(bigheight/imageHeight);  
  79.   
  80.                     }  
  81.   
  82.                     mouse = new MouseEvent(e);  
  83.   
  84.   
  85.   
  86.                     scrolly = mouse.y - imageTop - ($("div.zoomdiv").height()*1/scaley)/2 ;  
  87.   
  88.                     $("div.zoomdiv").get(0).scrollTop = scrolly * scaley  ;  
  89.   
  90.                     scrollx =    mouse.x - imageLeft - ($("div.zoomdiv").width()*1/scalex)/2 ;  
  91.   
  92.                     $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;  
  93.   
  94.   
  95.                     });  
  96.             },function(){  
  97.                $("div.zoomdiv").hide();  
  98.                $(document.body).unbind("mousemove");  
  99.                $(".lenszoom").remove();  
  100.                $("div.zoomdiv").remove();  
  101.             });  
  102.   
  103.         }  
  104.   
  105. })(jQuery);  
  106.   
  107. function MouseEvent(e) {  
  108. this.x = e.pageX  
  109. this.y = e.pageY  
  110. }  

 

页面调用方法:

JavaScript代码
  1. jQuery.noConflict();  
  2. jQuery(document).ready(function(){  
  3. $("img.jqzoom").jqueryzoom();  
  4. });  

 

Tags: jquery, plugins, jqzoom, javascript, demo

JS取当时间的一个很妖的方法

关于new Date().getTime()的简写方式.

原文来自cssrain,只取了其中的一小部分。http://www.cssrain.cn/demo/3/newDate.html

小结:
(1)getTime(new Date.getTime 方法)
返回指定的 Date 对象自 1970 年 1 月 1 日午夜(通用时间)以来的毫秒数。当比较两个或更多个 Date 对象时,使用此方法表示某一特定时刻。
返回值类型:Number -- 一个整数。

(2)
function now(){
return +new Date;
}
jQuery 源代码里就是使用的 +new Date ;

(3)
用来判断 google 浏览器:
if( !isNaN(Date.parse("1970.01.01")) ){
alert("This is Google Chrome!");
}else{
alert("This is NOT!");
}
结果:1和2的结果是一样的。但这个number是13位的number,和PHP中的时间戳并非同一个意义

Tags: time, jquery, gettime, date