jQuery快速上手:写jQuery和直接写JS的区别

jQuery能大大简化Javascript程序的编写,我最近花时间了解了一下jQuery,把我上手过程中的笔记和大家分享出来,希望对大家有所帮助。

要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比如:

<script language="javascript" src="/js/jquery.min.js"></script>

库文件既可以放在本地,也可以直接使用知名公司的CDN,好处是这些大公司的CDN比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度。另外一个好处是显而易见的,节省了网站的流量带宽。

Google提供的

http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

jQuery官方的

http://code.jquery.com/jquery-1.6.min.js

我自己弄了个子域名,实际上也是跳转到Google的CDN

http://cdn.akcms.com/js/jquery.js

jQuery代码具体的写法和原生的Javascript写法在执行常见操作时的区别如下:

1 定位元素
JS
document.getElementById("abc")

jQuery
$("#abc") 通过id定位
$(".abc") 通过class定位
$("div") 通过标签定位

需要注意的是JS返回的结果是这个元素,jQuery返回的结果是一个JS的对象。以下例子中假设已经定位了元素abc。

2 改变元素的内容
JS
abc.innerHTML = "test";
jQuery
abc.html("test");

3 显示隐藏元素
JS
abc.style.display = "none";
abc.style.display = "block";

jQuery
abc.hide();
abc.show();

abc.toggle();
//在显示和隐藏之间切换(2012.4.21更新)

4 获得焦点

JS和jQuery是一样的,都是abc.focus();

5 为表单赋值
JS
abc.value = "test";
jQuery
abc.val("test");

6 获得表单的值
JS
alert(abc.value);
jQuery
alert(abc.val());

7 设置元素不可用
JS
abc.disabled = true;
jQuery
abc.attr("disabled", true);

8 修改元素样式
JS
abc.style.fontSize=size;
jQuery
abc.css('font-size', 20);

JS
abc.className="test";
JQuery
abc.removeClass();
abc.addClass("test");

9 Ajax
JS
自己创建对象,自己处理浏览器兼容等乱七八糟的问题,略去不表
jQuery
$.get("abc.php?a=1&b=2", recall);
postvalue = "a=b&c=d&abc=123";
$.post("abc.php", postvalue, recall);

function recall(result) {
alert(result);
//如果返回的是json,则如下处理
//result = eval('(' + result + ')');
//alert(result);
}

10 判断复选框是否选中
jQuery
if(abc.attr("checked") == "checked")
注意:网上说的.attr("checked") == true实际上不能用,上面这个测试过能用

 评论
  onclick和click怎么区别,怎么区分去用?

  很好,终于明白两者的区别了

  带走咯!

  另外还有鼠标划过和离开的区别 js onmouseover=function(){} jq mouseover(function(){}) 你看是不是呢

  很有用 谢谢你写出来 我也决定在我空间写出来让和我做一样的同学们都可以看看 然后帮助更多的人

  good!刚要学jQuery.

  写的还行,不过就是看不懂

  写的还行,不过就是简单了一点

  1111

  我是标准的啥也不会的人。不过JQUEY的确好用。好学。

  谢谢。。。。。

  我咋才看见..对我太有价值了.

  我想问一下,用原生的javascript与用jquery脚本哪一个加载速度更快?在线等,看到请回,谢谢了!
回复:当然是原生的加载快了,因为它不需要加载什么

  我发表后,再次发表,就没有验证码了。。 是不是这样? 是不是不能连续发表评论?

  确实喜欢,帮助很大。谢谢分享
回复:不*用?谢,, : ' ? - = + \ () ! # $ % ^ * / ~

  不错 简单明了,转了。

  很喜欢、、对我初学JQuery这个库,提供了很大的帮助,谢谢

  貌似有更简单的方法 abc.is(":checked")
回复:谢谢指点。这是针对哪一个功能说的啊?亲爱的村长

  写的真好,学习了,谢谢!
回复:也就是简单的罗列出来而已,方便大家。

  楼主早该看这个了!!!继续加油!!! 有几点建议还是想在这里跟楼主交流一下... 首先 觉得提交评论这个应该有CTRL%2BENTER的快捷键... 再次 你的开源软件小弟去看了几页...感觉应该在每个文章的详细页里加上 上一篇 下一篇 的链接... 先找2个吧 看看楼主什么时候给回复...
回复:好,我在博客模板中增加这两个功能,谢谢你的建议。

  这个框架非常适合初学者,我在几乎没有任何JS基础的情况下用jQuery也可以做出基于ajax的某些应用,而且感觉逻辑特别清晰。
 发表评论
姓   名: