Javascript | YSlove.net

你现在的位置 -> 云 -> javascript

document、 location、body 属性方法

星期三, 六月 23rd, 2010

document：属性 document.title //设置文档标题等价于HTML的<title>标签 document.bgColor //设置页面背景色 document.fgColor //设置前景色(文本颜色) document.linkColor //未点击过的链接颜色 document.alinkColor //激活链接(焦点在此链接上)的颜色 document.vlinkColor //已点击过的链接颜色 document.URL //设置URL属性从而在同一窗口打开另一网页 document.fileCreatedDate //文件建立日期，只读属性 document.fileModifiedDate //文件修改日期，只读属性 document.fileSize //文件大小，只读属性 document.cookie //设置和读出cookie document.charset //设置字符集简体中文:gb2312 document：方法 document.write() //动态向页面写入内容 document.createElement(Tag) //创建一个html标签对象 document.getElementById(ID) //获得指定ID值的对象 document.getElementsByName(Name) //获得指定Name值的对象 document.body.appendChild(oTag) body：子对象 document.body //指定文档主体的开始和结束等价于<body></body> document.body.bgColor //设置或获取对象后面的背景颜色 document.body.link //未点击过的链接颜色 document.body.alink //激活链接(焦点在此链接上)的颜色 document.body.vlink //已点击过的链接颜色 document.body.text //文本色 document.body.innerText //设置<body>…</body>之间的文本 document.body.innerHTML //设置<body>…</body>之间的HTML代码 document.body.topMargin //页面上边距 [...]

Tags: javascript Posted in javascript | No Comments »

[jquery]find与filter的应用

星期三, 四月 14th, 2010

.find() Description: Get the descendants of each element in the current set of matched elements, filtered by a selector. 查找子元素，反回一个新的jQuery Object，与.children()选择器相同，而两个选择器唯一不同的是.children()只能返回一个级别的元素。 e.g. <div id="t1" class="demo1"><div class="demo2"><div class="demo3"></div></div> </div> $("#t1").children(); //return [div.demo2] $("#t1").find("div"); //return [div.demo2, div.demo3] $("#t1").children(".demo3"); //return [] .fliter() Description: Reduce the set of matched elements to those that match the selector or pass the [...]

Tags: javascript, jQuery Posted in javascript, 实验室 | 4 Comments »

[jQuery]当$遇上HTML

星期三, 四月 7th, 2010

$是jQuery里最常用的符号（当然其他类库也喜欢用$，可能看到后就想到Dollar），在jQuery里的含义非常广泛，详见jQuery() 今天用Ajax返回HTML时遇到一个$(html)的问题，顺便看了一下jQuery处理HTML的方法。 $.get({ url: "test.html",function(data){ var $d=$(data); }}); 这样得到的$(data)是一个数组（NodeList类型）如果是正常的data应该是一个HTML jQuery是怎么去掉那些多余的HTML代码的呢？从jQuery的源码可以看出，当$()里面包含了一个String类型的参数，就会判断是否需要添加或者重构。重构的代码： ret = buildFragment( [ match[1] ], [ doc ] ); 在buildFragment里面jQ用createDocumentFragment的方法重建了HTML文档也是清理的第一步。然后又一翻天书（正则）去空格与调整为全是小写字母后，到了关键一步。这里jQ用了一个比较有趣的方法来清理HTML 截取部分代码： var div = context.createElement("div"); // Go to html and back, then peel off extra wrappers div.innerHTML = elem //html document div.childNodes; 这个方法可真是太爽了，直接用div里面包含整个HTML文档，然后用childNodes的方法直接把HTML文档直接转换为NodeList类型，并且轻松的去除了其他额外的标签。然后： fragment.appendChild( ret[i] ); 这样只需要刷新一次DOM结构就可以把HTML文档处理的比较干净，里面不仅包含了body里面的所有DOM元素而且还包含meta与title等有用信息当然jQ有对script与style标签特殊处理，这里就不说了。 [...]

Tags: javascript, jQuery Posted in javascript, 实验室 | 5 Comments »

Study jQuery in a Simplified Way [转载]

星期二, 二月 23rd, 2010

转载自:岁月如歌源文地址：http://lifesinger.org/blog/2010/01/study-jquery-in-a-simplified-way/ 学习复杂代码的最好方法是简化： (function(win, undefined) { var jQuery = function(selector, context) { // jQuery 对象就是 init 函数的一个实例 return new jQuery.fn.init(selector, context); }, document = window.document, push = Array.prototype.push, slice = Array.prototype.slice; jQuery.fn = jQuery.prototype = { init: function(selector, context) { // 选择器 var ret = (context || document).querySelectorAll(selector); // 转换为普通数组 ret = slice.call(ret); // jQuery [...]

Tags: javascript, jQuery, 转载 Posted in javascript, 实验室, 杂谈, 转载 | 1 Comment »

关于jQuery 不同选择器的性能比较[翻译][转载]

星期四, 十一月 26th, 2009

原文：101 on jQuery Selector Performance by Andreas Grabner, Nov 09, 09 译文：关于jQuery 不同选择器的性能比较 by Unmi 上周我认真分析了一个 Web 页面，它在 onLoad 事件中处理一段定制脚本文件用了 4.8 秒。结果是其中 2.8 秒消耗在动态菜单库上(将会在博客中单独记录)，剩下的 2 秒花费在 jQuery 的选择器上。分析显示多数选择器不返回任何对象，而那些会返回对象的选择器可考虑用不同的选择器来改善性能。关于 jQuery 选择器有大量的日志文章论述了 jQuery 选择器及它们的性能影响。正如你所知，可以通过 ID, TagName 或 ClassName 选择元素。依赖于不同的选择器， jQuery 会使用浏览器本地方法，如通过 ID 或标签来选择元素，或者在使用类名选择时须手工从 DOM 中遍历获得元素(因为在 IE 中不存在相应的 getElementsByClssName). 分析我的页面时间中这 2 秒在 onLoad 处理器中对页面中某些特定的元素使用 [...]

Tags: javascript, jQuery Posted in 杂谈, 转载 | 6 Comments »

javascript正则

星期三, 九月 30th, 2009

正则表达式30分钟入门教程版本：v2.31 (2009-4-11) 作者：deerchao 转载请注明来源目录跳过目录本文目标如何使用本教程正则表达式到底是什么东西？入门测试正则表达式元字符字符转义重复字符类分枝条件反义分组后向引用零宽断言负向零宽断言注释贪婪与懒惰处理选项平衡组/递归匹配还有些什么东西没提到联系作者网上的资源及本文参考文献更新纪录本文目标 30分钟内让你明白正则表达式是什么，并对它有一些基本的了解，让你可以在自己的程序或网页里使用它。如何使用本教程最重要的是——请给我30分钟，如果你没有使用正则表达式的经验，请不要试图在30秒内入门——除非你是超人 :) 别被下面那些复杂的表达式吓倒，只要跟着我一步一步来，你会发现正则表达式其实并没有你想像中的那么困难。当然，如果你看完了这篇教程之后，发现自己明白了很多，却又几乎什么都记不得，那也是很正常的——我认为，没接触过正则表达式的人在看完这篇教程后，能把提到过的语法记住80%以上的可能性为零。这里只是让你明白基本的原理，以后你还需要多练习，多使用，才能熟练掌握正则表达式。除了作为入门教程之外，本文还试图成为可以在日常工作中使用的正则表达式语法参考手册。就作者本人的经历来说，这个目标还是完成得不错的——你看，我自己也没能把所有的东西记下来，不是吗？清除格式文本格式约定：专业术语元字符/语法格式正则表达式正则表达式中的一部分(用于分析) 对其进行匹配的源字符串对正则表达式或其中一部分的说明隐藏边注本文右边有一些注释，主要是用来提供一些相关信息，或者给没有程序员背景的读者解释一些基本概念，通常可以忽略。正则表达式到底是什么东西？字符是计算机软件处理文字时最基本的单位，可能是字母，数字，标点符号，空格，换行符，汉字等等。字符串是0个或更多个字符的序列。文本也就是文字，字符串。说某个字符串匹配某个正则表达式，通常是指这个字符串里有一部分（或几部分分别）能满足表达式给出的条件。在编写处理字符串的程序或网页时，经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说，正则表达式就是记录文本规则的代码。很可能你使用过Windows/Dos下用于文件查找的通配符(wildcard)，也就是*和?。如果你想查找某个目录下的所有的Word文档的话，你会搜索*.doc。在这里，*会被解释成任意的字符串。和通配符类似，正则表达式也是用来进行文本匹配的工具，只不过比起通配符，它能更精确地描述你的需求——当然，代价就是更复杂——比如你可以编写一个正则表达式，用来查找所有以0开头，后面跟着2-3个数字，然后是一个连字号“-”，最后是7或8位数字的字符串(像010-12345678或0376-7654321)。入门学习正则表达式的最好方法是从例子开始，理解例子之后再自己对例子进行修改，实验。下面给出了不少简单的例子，并对它们作了详细的说明。假设你在一篇英文小说里查找hi，你可以使用正则表达式hi。这几乎是最简单的正则表达式了，它可以精确匹配这样的字符串：由两个字符组成，前一个字符是h,后一个是i。通常，处理正则表达式的工具会提供一个忽略大小写的选项，如果选中了这个选项，它可以匹配hi,HI,Hi,hI这四种情况中的任意一种。不幸的是，很多单词里包含hi这两个连续的字符，比如him,history,high等等。用hi来查找的话，这里边的hi也会被找出来。如果要精确地查找hi这个单词的话，我们应该使用\bhi\b。 [...]

Tags: javascript Posted in javascript, 实验室 | 1 Comment »

Friends Links上线

星期一, 六月 15th, 2009

经过N久的制作大部分时间花在研究Google Feed Api上，Friends Links正式上线。本站也学习welee同学的Links，本站不进行交换连接，纯粹为友情链接。只在你在本站留言就有机会都会出现在Links里面并且会Feed一篇你的网站最新日志。由于现在对Google Feed Api的运用还不是很熟练所以会有些小Bug，会一步步修复下去。并且会在相对成熟后把原理与源码与大家分享。谢谢大家支持，呵呵。 2009-6-15 最近发现Google Feed Api被墙! 由于一直在做Friends Links所以用了Google Feed Api，已经接近完工时，却发现在最近Feed Api很不稳定，经常不能访问。由于客户端用户可能访问了敏感关键字，于是Feed Api就无法访问，但是过一段时间又恢复访问，对于我这种以第三方托管类库来说，是一种致命的打击！但是已经制作98%的程度，也不能放弃啊，先放上来用着吧，如果大家看到了一直loading说明Feed里很可能有敏感关键字或你曾经在这段时间里访问过这类的关键字。 2009-12-9 由于疏于管理与Google Feed Api时好时坏，暂时先关闭。

Tags: Google, javascript Posted in javascript, 实验室 | 26 Comments »

javascript-函数

星期四, 五月 14th, 2009

什么是函数函数是一组可以随时随地地运行的语句。函数是ECMAScript的核心。函数是由这样的方式进行声明的：关键字function、函数名、一组参数，以及置于括号中待执行的代码。（以上来自己ECMAScript）匿名函数匿名函数在javascript里非常常用，也是非常有用的。 function(a,b,c){ return (a+b+c); } 使用方法 var total=function(a,b,c){ return(a+b+c); } alert(total(1,2,3)); 还要以这样被使用 /*other one*/ var total=function(a,b,c){ return(a+b+c+); }(1,2,3); alert(z); 以上两种方法结果相同。第二种方法比较其实就是函数做为表达式的一种使用方法，是javascript函数调用的一种方式。 alert("你好！"); (alert)("你好！"); 这样就比较好理解了，alert是javascript最常见的函数之一了，他本身是一个函数所以，可以用函数做为表达式方法进行调用。函数作为参数这个不是什么新鲜的东西，但是非常有用 var containter=function(func,a,b,c){ return func(a,b,c); } var total=function(a,b,c){ return(a+b+c); } alert(containter(total,1,2,3)); 函数式概念 javascript应用至今，最重要的应该是用它来做Web app，所以很多人对其强壮性提出质疑，但是同时很多人也在努力的将javascript套用各种编程风格使其更通用、更强壮、更容易维护。而函数式的概念相对而言比较重要函数不总是需要名称。函数可以像其他值一样分配给变量。函数表达式可以编写并放在括号中，留待以后应用。函数可以做为参数传递给其他函数这一概念总结来自IBM 这里再引用他的一个例子说明一下生成动态HTML的能用方式： Array.prototype.fold=function(templateFn) { [...]

Tags: javascript Posted in javascript, 实验室 | 13 Comments »

javascript教程-数组

星期日, 五月 10th, 2009

前面讲过一次关于变量的教程，变量属于离散值。如果某个变量是离散的。它在任意时刻就只有一个值。如果想用一个变量来存储一组值，就需要使用数组（array）。 javascript里面数组要用关键字Array声明如下： var aTest=Array(4); var aTest=Array(); var aTest=Array("this is a","b","c"); var aTest=["this is a","b","c"]; var aTest=["this is a",123,false]; 以上声明都是正确的，但是声明Array是个好的编程习惯。在这里可以看到，javascript数组跟声明变量是一样的，非常灵活，数组元素不必是字符串，也可以存入布尔值或是数组甚至是变量。如果想要获得数组的元素，同样简单，只需标明下标，即可取得相应的元素。 var aTest=Array(); aTest[0]=’a'; aTest[1]=’b'; var temp=aTest[0]; alert(temp); 结果为a。这里需要注意的是数组的下标默认是从0开始而不是1。关联数组如果填充数组时只给出了元素的值，这个数组就将是一个数值数组，它的各个元素的下标将被自动创建和刷新。当然这里有一种特殊的方法，就是填充时我们为每个新元素指定下标，便于读取，并且这种下标不一定是数字，可以是字符串。 var preson=Array(); preson["name"]="Will"; preson["age"]="20"; preson["location"]="American"; 这称为关联数组（associrative array）。其实每个数组都可以看做是关联数组因为数组的每个下标都应着相应的元素，虽然这些都是系统自动生成的数字。所以数值数组可以看做关联数组的一个特例来看待。关联数组的好处在于，可以通过数组的名字来访问数组元素，这样大大提高了数组的可读性。二维数组、多维数组在javascript里是没有这个概念的。其实在javascript里数组已经非常的灵活，上面也提到过，数组的元素可以是数值、字符串、布尔值甚至是数组。 e.g.实现如下数组 1 2 3 4 5 6 var darry=Array(); darry[0]=[1,2,3]; darry[1]=[4,5,6]; alert(darry[0][1]); alert(darry[1][1]); 但是，千万不能用darry[0][0]=1这样来赋值，这是完全错误的。 [...]

Tags: javascript Posted in javascript, 实验室 | 12 Comments »

互动对于新的互联网至关重要

星期二, 五月 5th, 2009

今天看到ComputerWorld的一篇文章，题为《Interaction vital to the new internet》惠灵顿设计/开发的主管Jarred Bishop展示了惊人的设计和概念的网站，并且说到Internet正在改变，然而现在很多网站还是属于Old Internet一类。何为新的Internet呢？他说到新的Internet应该是更加容易与更加便宜。那设计人员如何去拥抱这个新的Internet呢？那就需要有他们自己顺手的APIs(application programming interfaces)和开发框架(development frameworks)。 “人们需要更多的互动”，他说到。这将是目前许多设计师，甚至开发人员新的学习曲线。最好的学习方法就是将这些新的技术融入到现有的项目上。然后他又谈了一下开发框架的好处，他说开发框架的好处在于可以让设计师在他们Coding以前更深入的对项目进行思考-去思考那些页面与结构。目前比较好的javascript框架有jQuery,MooTools,Prototype，CSS框架有Blueprints,YUI。他举了一个APIs的例子-Twitter。人们可以通过APIs创造自己的程序来使他更丰富。而各种周边的开发使得人们获得与标准的Twitter完全不同的体验。 ———————–分割线——————————– Bishop的观点与我的十分符合(自大-_-!)，我一直都在想如何才能做出好的设计呢？如何能做出更简单而方便的设计呢？其实开发与设计人员一直都不愿意面对一个问题就是时间，他们没有更多的时间去思考，也没有更多的时间去向其他的学科沿申，老板与客户无休止的加班与纠缠使得他们疲惫不堪（在中国这种情况很普遍，甚至被认为是正常）我一直都在强调，设计与程序都属于艺术范畴两者其实是等同的，只是表现形式不同而以。正如想要成为暴雪公司的员工一个必要的条件就是要会玩游戏。如果一个开发游戏的人连游戏都不会玩，那他怎么能开发出一款让人们喜爱的出色的游戏呢？当初我跟阿里巴巴的Web主管这样说时他好像完全不能理解，当然我还是太年轻，经验与阅历不足，言轻意微，但是我的思想从未停止前进。努力是唯一让我有说话权的方法。牢骚就发到这。在这我简单的介绍一下各javascript框架， jQuery：我一直都在用的框架。一个轻巧方便的框架，他与其他框架最不同的是他有强大的DOM操作能力，非常适合设计人员使用，其灵活性使你完全想不到自己是在用javascript。jQuery的插件非常丰富，只有想不到没有做不到。 MooTools：这个我不是很熟悉，由于他现在还算是比较新吧，只是知道他是一种轻量级的javascript框架类似prototype，其内核的设计思想非常优秀，我经常看他的代码学习。 Prototype：javascript元老级框架，将javascript以面向对象的思想进行封装，实用简单，但是其发展到如今，体积也比较大-__-! 在文中Bishop把YUI归到CSS里，这可能是因为YUI的UI设计比较到位，但事实上YUI可以说是面向对象里面做的最好的javascript类库，非常全面，适合大型网站直接套用与开发。上以呢，都只是个人没事磨磨牙，动动嘴，带有强烈个人主义思想与偏差，各位取其精华去其糟粕。:)

Tags: javascript, web design, 闲聊 Posted in 杂谈, 闲聊 | 12 Comments »

Page 2 of 3«123 »