omiga

简单就好

JavaScript中的property和attribute

发表评论»

首先看看这两个单词的英文释义(来自有道词典)。先是property:

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的方式设置,都能正常获取。但是如果设置的属性不是标准属性,而是自定义属性呢?

阅读全文»

jQuery1.3:Live Events

发表评论»

jQuery 1.3中新增了两个“实时”事件处理方法——live,die,用于绑定和删除事件处理函数。这两个方法与之前的bind和unbind存在明显的区别。

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

jQuery中一些不常用的方法属性

1条评论»

index(subject)

搜索与参数表示的对象匹配的元素,并返回相应元素的索引值。如果找到了匹配的元素,从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不无关系,那本广为流传的中文版手册已经过时,建议直接阅读官方文档

封装一个图片轮换效果

8条评论»

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

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

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

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

效果演示

打包下载

jQuery1.2选择器

发表评论»

接前文——使用jQuery进行便捷web开发

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

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 匹配所有的可见元素

本文相关链接: