jQuery1.3:Live Events

2009-01-16 14:49:47

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中一些不常用的方法属性

2008-08-20 12:22:25

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不无关系,那本广为流传的中文版手册已经过时,建议直接阅读官方文档

封装一个图片轮换效果

2008-03-26 15:19:35

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

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

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

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

效果演示

打包下载

jQuery1.2选择器

2008-03-16 11:57:56

接前文——使用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 匹配所有的可见元素

本文相关链接:

使用jQuery进行便捷web开发

2008-03-15 23:18:55

咳咳~这个题目~不废话吗~谁写JS框架是为了进行“笨重”开发?嗯~这个~囧~OK,不废话了…接触jQuery有一段时间了,关于jQuery本身我就不再多做介绍,大家可以随意google或者baidu,也可访问jQuery的官方网站~…个人认为只要稍有编程基础,jQuery的学习还是比较轻松的。当然如果你掌握一点DOM,CSS的知识就更好了~这不是一篇教程,而是一点个人学习的总结,所以谈及比较重要的一些知识点。

使用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中可以这样写

  1. $("#myLink").mouseover(function(){}).mouseout(function())

怎么样?很简单吧~当然你如果愿意你可以继续在后面添加事件函数,比如:

  1. $("#myLink").mouseover(function(){}).mouseout(function()).click(function(){}).addClass("myClass")

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

  1. alert($("#myId").html())    //get
  2. $("#myId").html(<p>文本段落</p>)    //set

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

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

  1. myElement.onclick=function(){}

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

  1. myElement.click(function(){})

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

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

  1. if($.browser.msie){alert("this is ie")}

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

  1. jQuery.noConflict();    //转让控制权
  2. jQuery("div p").hide();    // 使用 jQuery
  3. $("content").style.display = 'none';    //使用其他库的 $()

…….

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

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

附:一些jQuery学习资源