`
fuerbosi
  • 浏览: 462962 次
文章分类
社区版块
存档分类
最新评论

jQuery 操作用法简介(来自百度百科)

 
阅读更多

简介
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。


工厂函数

在编写js库代码时候,你一定经常和“$”美元符号打交道吧?无论prototype还是DWR都使用了$代替频繁的document.getElementById()操作。jQuery也这样做了,但是,它的功能远非如此,瞧瞧以下的jQuery代码,你就会发现它的美丽:
  代码
  var someElement = $("#myId");
  看起来比其他两个框架的要多了一个#,好,看看下面的用法:
  代码
  $("div p"); // (1)
  $("div.container"); // (2)
  $("div #msg"); // (3)
  $("table a",context); // (4)

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");
  });

事件机制

  我们大量使用的事件可能就是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[12]").submit(validate);
  });
  function validate(){
  //do some form validation
  }

渐入淡出

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

ajax

  这是一个ajax横行的时代。多少人,了不了解ajax的都跟着用上一把。呵。使用jquery实现ajax同样异常简单
  代码
  (1)
  $.get("search. do",{id:1},rend);
  function rend(xml){
  alert(xml);
  }
  (2)
  $.post("search. do",{id:1},rend);
  function rend(xml){
  alert(xml);
  }
  (3)
  $("#msg").ajaxStart(function(){
  this.html("正在加载。。。。");
  });
  (4)
  $("#msg").ajaxSuccess(function(){
  this.html("加载完成!");
  });
  这些都是较常用的方法,get和post用法一样。第一个参数是异步请求的url,第二个为参数,第三个回调方法。
  (4)的方法会在指定的Dom对象上绑定响应ajax执行的事件。
  (5)同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。
  var html = $.ajax({
  url: "some.php",
  async: false
  }).responseText;
  (6) 保存数据到服务器,成功时显示信息。
  $.ajax({
  type: "POST",
  url: "some.php",
  data: "name=John&location=Boston",
  success: function(msg){
  alert( "Data Saved: " + msg );
  }
  });

同一函数实现get\set

  代码
  $("selector").load(url,data,function(response,status,xhr))
  该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价,不同的是它不是全局函数,并且它拥有隐式的回调函数。当侦测到成功的响应时(比如,当 textStatus 为 "success" 或 "notmodified" 时),.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单.

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.7.2。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics