property ['prɔpəti]

n. 性质，性能；财产；所有权

英英释义：

1. any area set aside for a particular purpose “the president was concerned about the property across from the White House”
   同义词：place
2. something owned; any tangible or intangible possession that is owned by someone “that hat is my property”; ” he is a man of property”
   同义词：belongings | holding | material possession
3. a basic or essential attribute shared by all members of a class
4. a construct whereby objects or individuals can be distinguished “self-confidence is not an endearing property”
   同义词：attribute | dimension
5. any movable articles or objects used on the set of a play or movie
   同义词：prop

重点看2、3、4条。

再看attribute：

attribute [ə'tribju:t, 'ætribju:t]

n. 属性；特质
vt. 归属；把…归于

英英释义：

n.

1. a construct whereby objects or individuals can be distinguished
   同义词：property | dimension
2. an abstraction belonging to or characteristic of an entity

v.

1. attribute or credit to ”We attributed this quotation to Shakespeare”
   同义词：impute | ascribe | assign
2. decide as to where something belongs in a scheme
   同义词：assign

property，attribute都作“属性”解，但是attribute更强调区别于其他事物的特质/特性，而在这篇文章中也提交到attribute是property的子集。

而在JavaScript中，property和attribute更是有明显的区别。众所周知，setAttribute是为DOM节点设置/添加属性的标准方法：

var ele = document.getElementById("my_ele");
ele.setAttribute("title","it's my element");

但很多时候我们也这样写：

ele.title = "it's my element";

如果不出什么意外，他们都运行的很好，它们似乎毫无区别？而且通常情况下我们还想获取到我们设置的“属性”，我们也很爱这样写：

alert(ele.title);

这时候，你便会遇到问题，如果你所设置的属性属于DOM元素本身所具有的标准属性，不管是通过ele.setAttribute还是ele.title的方式设置，都能正常获取。但是如果设置的属性不是标准属性，而是自定义属性呢？

ele.setAttribute('mytitle','test my title');
alert(ele.mytitle);  //undefined
alert(ele.getAttribute('mytitle'));  //'test my title'

ele.yourtitle = 'your test title';
alert(ele.getAttribute('yourtitle'));  //null
alert(ele.yourtitle);  //'your test title'

通过setAttribute设置的自定义属性，只能通过标准的getAttribute方法来获取；同样通过点号方式设置的自定义属性也无法通过标准方法getAttribute来获取。在对自定义属性的处理方式上，DOM属性的标准方法和点号方法不再具有任何关联性（上诉代码在IE6-有兼容性问题，后面会继续介绍）。

这种设置、获取“属性”的差异性，究其根源，其实也是property与attribute的差异性所致。

通过点号设置的“属性”其实是设置的property，如上所说attribute是property的子集，那么点号设置的property自然无法通过只能获取attribute的getAttribute方法来获取。

property and attribute

照图似乎更易理解，getAttribute无法获取到不属于attribute的property也是理所应当。但是这时候你会发现另外一个问题，通过setAttribute设置的属性，同样也应该属于property，那么为何无法通过点号获取？

我们换种理解，只有标准属性才可同时使用标准方法和点号方法，而对于自定义属性，标准方法和点号方法互不干扰。

自定义属性互不干扰

那么，在JavaScript中attribute并不是property的子集，property与attribute仅存在交集，即标准属性，这样疑问都可得到合理的解释。

但在IE9-中，上诉结论并不成立。IE9-浏览器中，除了标准属性，自定义属性也是共享的，即标准方法和点号皆可读写。

成功设置的attribute都会体现在HTML上，通过outerHTML可以看到attribute都被添加到了相应的tag上，所以如果attribute不是字符串类型数据都会调用toString()方法进行转换。但是由于IE9-中，标准属性与自定义属性不做区分，attribute依然可以是任意类型数据，并不会调用toString()转换，非字符串attribute不会体现在HTML上，但更为严重的问题是，这样很容易就会导致内存泄漏。所以如果不是字符串类型的自定义属性，建议使用成熟框架中的相关方法（如jQuery中的data方法）。

getAttribute与点号(.)的差异性

虽然getAttribute和点号方法都能获取标准属性，但是他们对于某些属性，获取到的值存在差异性，比如href,src,value等。

<a href="#" id="link">Test Link</a>
<img src="img.png" id="image" />
<input type="text" value="enter text" id="ipt" />
<script>
var $ = function(id){return document.getElementById(id);};
alert($('link').getAttribute('href')); //#
alert($('link').href); //fullpath/file.html#

alert($('image').getAttribute('src')) //img.png
alert($('image').src) //fullpath/img.png

alert($('ipt').getAttribute('value')) //enter text
alert($('ipt').value) //enter text
$('ipt').value = 5;
alert($('ipt').getAttribute('value')) //enter text
alert($('ipt').value) //5
</script>

测试可发现getAttribute获取的是元素属性的字面量，而点号获取的是计算值。

更多细节可查看这篇文章：Attributes and custom properties

© omiga for omiga, 2011. | Permalink | No comment | Add to del.icio.us
Post tags: attr, attribute, data, jQuery, prop, property

live( type, fn )

Added in jQuery 1.3: Binds a handler to an event (like click) for all current – and future – matched element. Can also bind custom events.

bind( type, [data], fn )

Binds a handler to one or more events (like click) for each matched element. Can also bind custom events.

bind只能对当前的匹配对象绑定事件处理函数，而live不但能够对当前的匹配对象绑定事件处理函数，还能够对将来的匹配对象绑定事件处理函数。

例如：

$("button").bind("click",function(){
　　$(this).after("<button>click me</button>");
　}
);

使用bind无法对后面创建的对象进行“click”事件处理函数的绑定。

而使用live则完全可以对将来的匹配对象进行事件处理函数的绑定：

$("div").live("click",function(){
　　$(this).after("<div>div:click me</div>");
　}
)

查看Demo

附：jQuery1.3中文API

© omiga for omiga, 2009. | Permalink | No comment | Add to del.icio.us
Post tags: bind, die, jQuery, live, unbind

搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。如果找到了匹配的元素，从0开始返回；如果没有找到匹配的元素，返回-1。

data()

data(elem)：为页面对象添加唯一标识。

data(name, value)：将数据保存在元素的一个key里面。$("#box").data("shape","rectangle")。

data(name)：获取值。$("#box").data("shape") //"rectangle"。

removeData(name)：删除通过data()方法赋予的值。$("#box").removeData("shape")。

attr(key,fn)

为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。

hasClass(class)

检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是is("." + class)。

val(val)

设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为select元件赋值。参数val(String)要设置的值。

check,select,radio等都能使用为之赋值。参数val(Array<String>)用于 check/select 的值。

slice(start,[end])

选取一个匹配的子集。

add(expr)

把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。

参数expr(String, DOMElement, Array<DOMElement>)用于匹配元素并添加的表达式字符串，或者用于动态生成的HTML代码，如果是一个字符串数组则返回多个元素。

nextAll([expr])

查找当前元素之后的所有元素。

prev([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

prevAll([expr])

查找当前元素之前所有的同辈元素。

andSelf()

将先前所选的加入当前元素中。

replaceWith(content)

将所有匹配的元素替换成指定的HTML或DOM元素。参数content(String, Element, jQuery):用于将匹配元素替换掉的内容。

replaceAll(selector)

用匹配的元素替换掉所有 selector匹配到的元素。参数selector(选择器)用于查找所要被替换的元素。

clone([true])

克隆匹配的DOM元素并且选中这些克隆的副本。设置参数[true]是对象的所有事件处理一并克隆。

offset()

获取匹配元素在当前视口的相对偏移。返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。

返回Object{top,left}。

one(type,[data],fn)

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。

toggle(fn,fn2,[fn3,fn4,...])

每次点击时切换要调用的函数。函数数目可以是多个。

stop()

停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画，他们将被马上执行。

queue([callback/queue])

queue：返回指向第一个匹配元素的队列(将是一个函数数组。

queue(callback)：在匹配的元素的动画队列中添加一个函数。

queue(queue)：将匹配元素的动画队列用新的一个队列来代替(函数数组)。

dequeue()

从动画队列中移除一个队列函数。

jQuery.browser.version

浏览器渲染引擎版本号。

jQuery.boxModel

当前页面中浏览器是否使用标准盒模型渲染页面。

PS:以前很少用这些方法属性，很多还不知道。这跟中文CHM版jQuery API不无关系，那本广为流传的中文版手册已经过时，建议直接阅读官方文档。

© omiga for omiga, 2008. | Permalink | One comment | Add to del.icio.us
Post tags: javascript, jQuery

这个东西，每次都要写，索性把它封装起来，其实并没有完全地封装，倒是可以重复使用了～···基于jQuery，需jQuery1.1.2+版本支持～···以前用纯JS写过一个，在这里，这个其实也可以用以前我写过的一些函数来实现，但是有jQuery就偷下懒了～···呵呵～

添加删除内容只需更新scripts文件夹下ap.js文件中的adList 对象即可～···

使用之前需创建一个id为img_ad的对象，以作为容器，并为其定义宽高，可随意修改ap.css，以达到你需要的效果～···

内置两种基本效果，可通过注释相应代码进行选择 ~

效果演示

打包下载

© omiga for omiga, 2008. | Permalink | 8 comments | Add to del.icio.us
Post tags: ad_player, javascript, jQuery

严格来说这些东西都没有多少原创性可言，只是总结一些东西，方便自己，也顺便方便一下别人～

jQuery的选择器是极其强大并且有趣的，他结合了CSS1，CSS2，部分CSS3以及部分XPath的语法，同时并有一些专有的扩展 ，这样，使用起来便得心应手。

最基本的选择器

• #id 通过id获取对象你就可以这样写了$(“#id”)，而不用再getElementById(“id”)，当然实际上，很多人都在自己定义$的getElementById方法；
• #.class 通过class获取对象，javascript中是没有专门的类似函数的
• element 类似于getElementsByTagName
• * 用于匹配所有元素
• 组合选择器 直接将CSS中组合选择器的思想引用过来，各选择器之间以逗号区分，如：$(“#id,.class,h1″)

层级选择器

• $(“parent children”) 匹配给定祖先元素下的所有后代元素，如：$(“form input”)将匹配所有表单元素中的input元素
• parent > child 匹配给定祖先元素下的子元素，而非所有后代元素
• prev + next 匹配一个有效选择器pre后紧接着的第一个选择器
• prev ～ siblings 匹配一个有效选择器pre后的所有同级选择器

基本滤镜

• :first 匹配返回对象中的第一个元素，如：$(“div:first”)将返回DOM树中的第一个div
• :last 匹配返回对象中的最后一个元素
• :not 去除所有与给定选择器匹配的元素，如：$(“div:not(‘.post’)”)将返回class部位“post”的所有div元素
• :even 匹配所有索引值为偶数的元素，从 0 开始计数，这个选择器在制作“斑马线”是十分有效，如：$(“td:even”).css(“backgroundColor”,”#FFF”)
• :odd 匹配所有索引值为奇数的元素
• :eq(index) 匹配一个给定索引值的元素，如：$(“p:eq(0)”)将返回文档中的第一个文本段落
• :gt(index) 匹配所有大于给定索引值的元素
• :lt(index) 匹配所有小于给定索引值的元素
• :header 匹配如 h1, h2, h3之类的标题元素
• :animated 匹配所有正在执行动画效果的元素，如：$(“div:not(:animated)”)

子元素滤镜

• :nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素

  ‘:eq(index)’ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用
  :nth-child(even)
  :nth-child(odd)
  :nth-child(3n)
  :nth-child(2)
  :nth-child(3n+1)
  :nth-child(3n+2)
  如：$(“ul li:noth-child(2)”)将匹配所有ul下的第二个li元素

• :first-child 匹配第一个子元素，如$(“ul li:first-child”)将匹配ul的第一个li元素
• last-child 匹配最后一个子元素
• only-child 当该元素为其父元素的唯一子元素时将被匹配

属性滤镜

• [attribute] 匹配包含特定属性的元素，如：$(“img[title]“)将匹配所有拥有title属性呃img元素
• [attribute=value] 匹配特定属性为特定值的元素，如：$(“img[title='点击查看原图']“)匹配所有title属性为“点击查看原图”的img元素
• [attribute^=value] 匹配特定属性其值以特定字符为起始值的元素，如：$(“img[title^='点击']“)匹配所有title属性以“点击”开始的img元素
• [attribute$=value] 匹配特定属性其值以特定字符结尾的元素
• [attribute*=value] 匹配特定属性其值包含特定字符的元素
• 复合属性选择器 如：$(“img[title^='点击'][title$='原图']“)

表单滤镜

• :input 匹配所有 input, textarea, select 和 button 元素，如：$(:input)
• :text 匹配所有的单行文本框
• :password 匹配密码域
• :radio 匹配单选按钮
• :checkbox 匹配复选框
• :sumbit 匹配提交按钮
• :image 匹配图像域
• :reset 匹配重置按钮
• :buttom 匹配按钮
• :file 匹配文件域
• :enabled 匹配所有可用的元素
• :disabled 匹配所有禁用的元素
• :checked 匹配所有被选中的表单
• :selected 匹配所有选择的表单
• :hidden 匹配所有不可见元素，或者type为hidden的元素

其他滤镜

• :contains(text) 匹配包含给定文本的元素，如：$(“p:contains(‘jQuery’)”)将匹配包含”jQuery”的所有段落元素
• :empty 匹配所有不包含子元素或者文本的空元素
• :has 匹配所有不包含子元素或者文本的空元素，如：$(“div:has(‘p’)”)将匹配所有包含有段落元素的div元素
• :parent 匹配含有子元素或者文本的元素
• :visible 匹配所有的可见元素

本文相关链接：

• jQuery1.2 API
• jQuery for JavaScript programmers 原文 译文

© omiga for omiga, 2008. | Permalink | No comment | Add to del.icio.us
Post tags: javascript, jQuery

使用jQuery进行开发时需要改变一些惯有的编程习惯，或者说是编程风格。其中最重要的一点便是DOM对象和jQuery对象之间的类型转换。因为单纯的jQuery对象是无法使用DOM定义的方法和属性的，jQuery对象和DOM对象之间的方法是不能混用的。比如有$(“.myClass”)这样一个jQuery对象，可以通过以下方法来进行类型的转换：

1. $(“.myClass”)[0]，直接获取该jQuery对象中的第一个元素。当然如果你是$(“#myId”)[0]那么实际上返回的就是id值为“myId”的DOM对象。
2. $(“.myClass”).get(0)，其等价于$(“.myClass”)[0]，没什么区别

$(document).ready(function(){})，$(function(){})和jQuery(function(){})这三种写法有什么区别吗？我现在也没弄清楚。在传统的javascript中，window.onload似乎是用来装载JS的唯一方法，但是这个方法却有明显的弊端。因为onload事件本身就是在整个页面内容下载完成后才触发，包括图片。但实际上在很多时候这是不需要的，JS很多时候用来操纵DOM，那么只需要DOM树下载完成就可以了，那么这个时候你就可以用$(document).ready()来，DOM树装载完成即可触发。

jQuery支持方法的连写，什么意思？在传统JS中一个链接的简单hover效果你需要分别为onmouseover和onmouseout事件定义事件函数。但是在jQuery中可以这样写

$(“#myLink”).mouseover(function(){}).mouseout(function())
怎么样？很简单吧～当然你如果愿意你可以继续在后面添加事件函数，比如：

$(“#myLink”).mouseover(function(){}).mouseout(function()).click(function(){}).addClass(“myClass”)

同一函数实现set和get。比如html()：

alert($(“#myId”).html()) //get
$(“#myId”).html(

文本段落

) //set

这类函数即可以用来获取值，同时也能设置值。这样的函数还有：text()，height()，weidth()，val()，其实css()，click()也可以算是这类函数～···，这样一来其实整个jQuery里面的函数很多都是既可以set也可以get的～

jQuery中的事件触发皆省略掉传统javascript中的on，本文前面已有例子。比如传统方法你得这样写：

myElement.onclick=function(){}

而在jQuery中你可以简单地写成这样：

myElement.click(function(){})

除此之外jQuery中还有一些自定义的事件：hover()，ready()，toggle()，triggle()，bind()，unbind()，这些事件函数具体定义请参考jQuery的API，在此不作赘述。

浏览器的判断$.browser，可用值：safari，opera，msie，mozilla。该属性在DOM装载完成之前就是有效的，故可以通过此属性先判断浏览器类型，再为特定浏览器编写程序。

if($.browser.msie){alert(“this is ie”)}
利用noConflict()实现多库共存。我们知道这个地球上不止jQuery这样一个JS框架，还有大名鼎鼎的prototype，YUI，Dojo等～有时难免会同时使用多个框架，难免发生命名冲突。就比如“$”在prototype和jQuery中都有定义，如不做处理必然导致命名冲突。那么这时候我们就可以使用noConflict()函数将变量$的控制权让渡出来。

jQuery.noConflict(); //转让控制权
jQuery(“div p”).hide(); // 使用 jQuery
$(“content”).style.display = ‘none’; //使用其他库的 $()
…….

除此之外，jQuery强大的选择器，是学习jQuery必须牢固掌握的，关于jQuery选择器，将单独撰文介绍～

严格来说jQuery只是一个封装了一些函数的JS类库，如果你熟悉javascript，那么掌握jQuery应该来说是没有任何难度的，所以jQuery很多精髓的东西可能还是其一些功能强大 的函数，函数的具体使用介绍可参考jQuery的API。同时互联网上也有很多jQuery的学习资料，稍花时间便可掌握。

附：一些jQuery学习资源

• jQuery官方网站
• jQuery中文社区
• 15 Days Of jQuery 中文版 英文版
• jQuery起点教程
• jQuery for Javascript programers
• jQuery 1.2 API

© omiga for omiga, 2008. | Permalink | No comment | Add to del.icio.us
Post tags: DOM, javascript, jQuery