JQuery快速学习方法总结

最新推荐文章于 2022-07-24 09:09:02 发布

Csdbfans

最新推荐文章于 2022-07-24 09:09:02 发布

阅读量951

点赞数 1

分类专栏： Jquery学习文章标签： jquery button javascript callback function jquery插件

Jquery学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JQuery是什么？VS2010已经集成进去这个东西，从应用上看，未来Web的开发，基本上它应该成为事个默认的事实标准。

JQuery实际上是JavaScript开发的一个Web客户端框架。而且是一个很有钱途的框架。一说到框架，程序员的脑子里很可能立即就浮现出“庞大，复杂，笨重，难懂”等等词汇。本人一开始，也是对号称“框架”的东西有一定的抵触和畏惧心里，比如MS那庞大的.net FrameWork或者MFC。

但是，JQuery经过简单的了解后，才发现完全不是那么回事，它的简单易用，震惊了本人，这里就分享一下我的理解和心得。

首先看下JQuery的官方定义：

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

果然是精辟及名符其实，但是这里我要再加一条，JQuery很有钱途，为什么？可能有心人已经注意到了，JQuery就是$，所有的开始，都从一个$出发。JQuery太简洁易懂，介绍它也应该省墨，下面就开始学习：

第一分钟，引入JQuery库：

可以到http://www.jquery.com/下载JQuery库，当然VS2010直接就集成了，然后在你要引入JQuery的网页的Head区加上库的引用如下，

<head><script type="text/javascript" src="jquery.js"></script></head>

VS2010是： <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>

然后就可以在你的JavaScript代码里，使用JQuery框架了。

第二分钟，使用JQuery库

不废话，先看代码：

$("button").click(function()

{$("button").hide();}

);

看，其实这里面已经有两行JQuery的使用代码，仔细观察下，JQuery使用了三段来组合，可以称之为三段论或者三截棍。

首先，一个$，表示这是使用JQuery的库

其次：("button")，一个选择器，用于指定操作的范围，它可以是一个Html元素，比如这里是选择要操作的对象是Button，其它还可以按属性，按样式，按名字，来选择。语法分别是：(".ClassName"), 接样式选择，("#Id")，按ID来选择。当然可以几种选择组合起来。

这里简单类比一下，要让JQuery库干活，首先要给钱 $ ,然后找人手，(选择器), 这找人手，可以按类型，比如说那些民工，来搞建筑，按样式，那个穿马甲的，就是在叫你呢，按名字，张三，你快过来，有事要你做。也可以组合起来形成更精确的选择，比如说民工里那个穿马甲的张三，给你钱快过来做事。

最后，给了钱，找了人手，就得做事了。.click(...), .hide()等，就是要做的动作或事件。

总结一下，$("button").hide(); JQuery的语法大都遵循这样的三段论，给钱，找人，做事。下面是一段完整例子：

<html>
<head>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            $("button").html("Hello world.");
        });
    });
</script>
</head>

<body>
<button type="button">Click me.</button>
</body>
</html>

第三分钟，搞清楚JQuery能干哪些事：

上一分钟，我们知道了JQuery可以做("元素"), (".样式"), ("#名称")的选择及组合，这里看看选择了后，能做什么。大约能做的是，产生事件，改变内容，动态效果，Callback和Ajax等。

直接看例子：

$("button").click(...); button单击事件
$("button").html("Hello world.");更改button的内容
$("button").hide(speed,callback);隐藏button并回调callback
$(selector).css(name,value) 为所有匹配元素的给定 CSS 属性设置值
$(selector).css(name)  返回指定的 CSS 属性的值
 
$(document).ready(function(){
  $("button").click(function(){
  htmlobj=$.ajax({url:"www.cnblogs.com",async:false});
  $("button").html(htmlobj.responseText);
  });
});

Ajax回调

基本上，这三分钟结束，大体上已经可以理解并使用JQuery了，其精练程度的确让人吃惊，实际上更可怕的事情就是，用JQuery及其它扩展出来的插件（三段论的JQuery，选择器和方法事件很容易扩展），就可完成Asp.net上面那大堆复杂的，重量级控件完成的功能，而且不需要在服务端，烦了GridView，UpdatePanel这样重量级控件的人，应该是时候尝试一下JQuery了。

剩下来的事情，就是用到的时候，需要看JQuery有哪些方法属性，有哪些插件了。参考连接：

http://www.jquery.com/ JQuery官网

http://www.w3school.com.cn/jquery/jquery_reference.asp JQuery参考手册

http://www.cnbeta.com/articles/128813.htm 2010年最佳jQuery插件

欢迎转载，转载请注明出处：http://www.cnblogs.com/Demo/archive/2010/12/11/1902888.html