浅析 jquery

一,找到你了!

  还记得$()这个东西吧?无论prototype还是DWR都使用了这个函数代替document.getElementById()。没错,jquery也跟风了。为达到document.getElementById()的目的,jquery是这样写的:

  代码

  var someElement = $("#myId");

  看起来比其他两个框架的要多了一个#,好,看看下面的用法:

  代码

  $("div p"); // (1)

  $("div.container"); // (2)

  $("div #msg"); // (3)

  $("table a",context); // (4)

  在prototype里看过这样的写法吗?第一行代码得到所有标签下的P元素。第二行代码得到class 为container的元素,第三行代码得到标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。

  如果你熟悉CSS,你会觉得这些写法很眼熟!对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。

二,Jquery对象?

  jquery提供了很多遍历的函数,如each(fn),但是使用这些函数的前提是:你使用的对象是Jquery对象。使一个Dom对象成为一个Jquery对象很简单,通过下面一些方式(只是一部分):

  代码

  var a = $("#cid");

  var b = $("<p>hello</p>");

  var c = document.createElement("table");

  var tb = $(c);

三,代替body标签的onload

  这个惯例,也许是除了$()之外,用得最多的地方了。下面一段代码:

  代码

  $(document).ready(function(){

  alert("hello");

  });(1)

  <body onload="alert('hello');">(2)

  上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作,即$(document).ready (fn)可以在一个页面中重复出现,而不会冲突。基本上Jquery的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起来,在初始化时不会发生冲突。

  不管怎么说,这个惯例可以分离javascrīpt与HTML。推荐使用。

四,事件机制

  我大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascrīpt代码与html代码分离,保持HTML的清洁,还可以很轻松地绑定事件,甚至你可以不知道“事件”这个名词。

  代码

  $(document).ready(function(){

  $("#clear").click(

  function(){

  alert("i am about to clear the table");

  }

  );

  $("form[0]").submit(validate);

  });

  function validate(){

  //do some form validation

  }

五,同一函数实现get/set

  代码

  $("#msg").html();

  $("#msg").html("hello");

  上面两行代码,调用了同样的函数。但结果却差别很大。

  第一行是返回指定元素的HTML值,第二行则是将hello这串字符设置到指定元素中。jquery的函数大部分有这样的特性。

六,ajax

  这是一个ajax横行的时代。多少人,了不了解ajax的都跟着用上一把。呵。使用jquery实现ajax同样简单异常

  代码

  $.get("search.do",{id:1},rend);

  function rend(xml){

  alert(xml);

  } (1)

  $.post("search.do",{id:1},rend);

  function rend(xml){

  alert(xml);

  } (2)

  $("#msg").ajaxStart(function(){

  this.html("正在加载。。。。");

  });(3)

  $("#msg").ajaxSuccess(function(){

  this.html("加载完成!");

  });(4)

  这些都是较常用的方法,get和post用法一样。第一个参数是异步请求的url,第二个为参数,第三个回调方法。

  3,4的方法会在指定的Dom对象上绑定响应ajax执行的事件。当然,jquery的AJAX相关的函数不仅是这些,有兴趣可以去研究再多。

七,渐入淡出

  代码

  $("#msg").show("fast");

  $("#msg").hide("slow");

  $("#msg").fadeIn();

  $("#msg").fadeOut();

  没错,上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条,用jquery就那么简单。两个函数接受的参数除了快慢等,还可以接收整型,作为渐入或淡出的完成时间,单位为MS。

八,plugin

  这也是一个插件的时代。

  jquery插件给我的感觉清一色的清洁,简单。如Jtip,要使用它的功能,只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jquery的一个重要原因是发现她已经有了很多很好,很精彩的插件。

  写得很烂。可能大家看不出jquery的好处。嗯,光听是没用的,试用一下吧。你会发觉很有趣。

  暂时告一段落吧。待有新的发现再来分享。

  加一些Jquery的资源:

  http://www.visualjquery.com/index.xml 很好的API查询站点

  http://jquery.com/demo/thickbox/ 知道lightBox吧,看看Jquery是怎样实现相同的东西

  http://jquery.org.cn/visual/cn/index.xml //不错的JQUERY 中文学习 推荐

  微软的visual studio 2008 sp1支持对jquery的动态提示,只要在代码页导入对应的vsdoc脚本就可以。

  目前为止,jQuery的最新版本为1.4

阅读更多
个人分类: Javascript 知识
想对作者说点什么? 我来说一句

Lucene3.0浅析

2010年01月27日 218KB 下载

浅析网络安全技术........

2010年12月27日 116KB 下载

class文件结构浅析

2011年10月09日 60KB 下载

机器人操作系统浅析 PDF版

2017年11月14日 1.6MB 下载

HTML5部分功能浅析

2010年11月26日 416KB 下载

飞思卡尔智能模型车底盘浅析

2009年03月11日 325KB 下载

浅析Linux虚拟化技术

2011年01月26日 161KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭