jquery是什么技术

news/2024/7/11 1:07:09 标签: jquery, prototype, function, ajax, jquery插件, table

 

Jquery是继prototype之后又一个优秀的Javascrīpt框架。有人使用这样的一比喻来比较prototypejqueryprototype就像Java,而jquery就像ruby.实际上我比较喜欢java(少接触Ruby 罢了)但是jquery的简单的实用的确有相当大的吸引力啊!在项目里我把jquery作为自已唯一的框架类包。使用其间也有一点点心得,其实这些心得,在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里看过这样的写法吗?第一行代码得到所有<div>标签下的<p>元素。第二行代码得到class 为container的<div>元素,第三行代码得到<div>标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。
如果你熟悉CSS,Xpath,你会觉得这些写法很眼熟!对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。

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

代码

var a = $("#cid");(1)   
var b = $("<p>hello</p>");(2)   
var c = document.createElement("table"); var tb = $(c);  

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

代码

$(document).ready(function(){   
   alert("hello");   
});(1)   
   
<body οnlοad="alert('hello');">(2)


上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作,即$(document).ready (fn)可以在一个页面中重复出现,而不会冲突。基本上Jqeury的很多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   
}  

五,同一函数实现set&get

代码
$("#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").fadeIn("fast");   
$("#msg").fadeOut("slow");  



没错,上面两行代码已经分别实现了一个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://www.codylindley.com/blogstuff/js/jtip/ Jtip,实用的提示工具
http://jquery.com/plugins/ 很多牛的插件。
http://15daysofjquery.com/jquery 的15天教程


http://www.niftyadmin.cn/n/1052851.html

相关文章

Installshield 创建虚拟目录脚本

function CreateVirtualDir(VirtualName,VirtualDataPath) STRING szWaitTxt,szVirPath; OBJECT objIIS_Virtual,objVirtDir; begin szWaitTxt "正在创建 " VirtualName " 虚拟目录...."; SdShowMsg (szWaitTxt, TRUE); Delay(3); …

ExtJS是什么

ExtJS是一个Ajax框架&#xff0c;是一个用javascript写的&#xff0c;用于在客户端创建丰富多 彩的web应用程序界面。主要是企业信息化软件&#xff0c;网站后台等。ExtJS可以用来开发RIA也即富客户端的AJAX应用&#xff0c;是一个用javascript写 的&#xff0c;主要用于创建前…

腾讯云nginx配置https

给腾讯nginx服务器配置https, 之前申请https配置后直接给node配置了&#xff0c;还没有用nginx。 按照 https://cloud.tencent.com/document/product/400/35244#step7 这篇教程走完&#xff0c;有报错:unknown directive "ssl" 没有ssl模块,cd 到nginx的安装路径&…

临时记录

https://m-world.xiaomawang.com/main/project/9b46666J 转载于:https://www.cnblogs.com/lhp2012/p/11278146.html

(转)ExtJs表格

行选择模式&#xff1a;Js代码var rowcount grid.getSelectionNode().getSelections(); var rowcount grid.getSelectionNode().getSelections();可以获取全部选中的记录&#xff0c;得到的rowcount将是一个Array&#xff0c;比如想获取sex列的数据&#xff0c;语句如下Js代码…

【Android开发】用WebView访问证书有问题的SSL网页

Android系统的碎片化很严重&#xff0c;并且手机日期不正确、手机根证书异常、com.google.android.webview BUG等各种原因&#xff0c;都会导致WebViewClient无法访问HTTPS站点。SSL错误的处理方式十分关键&#xff0c;如果处理不当&#xff0c;可能导致中间人攻击&#xff0c;…

P2579 [ZJOI2005]沼泽鳄鱼

传送门 显然可以列出 $dp$ 方程按时间转移 发现数据 $n$ 很小&#xff0c;$K$ 很大&#xff0c;考虑矩阵快速幂优化转移 但是不同时间的转移似乎不一样 发现题目中单个鱼的移动有周期性&#xff0c;显然整体的移动也有周期性&#xff0c;发现个体的周期只有 $2,3,4$ 所以整体移…

WndProc方法

protected virtual void WndProc( ref Message m);参数 m 与当前 Windows 消息相关联的 Message。备注 当窗口消息发送到窗口的句柄时&#xff0c;将调用此方法。对继承者的说明: 重写此方法以实现特定消息处理。对未处理的消息调用 base.WndProc。 示例 […