javascript 和 jquery 语法上的一些区别

jQuery 能大大简化 Javascript 程序的编写,我最近花时间了解了一下 jQuery,把我上手过程中的笔记和大家分享出来,希望对大家有所帮助。
要使用 jQuery,首先要在 HTML 代码最前面加上对 jQuery 库的引用,比如:

  1. <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

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

1 定位元素

  1. // JS
  2. document.getElementById("abc")
  3. // jQuery
  4. $("#abc") //通过id定位
  5. $(".abc") //通过class定位
  6. $("div") //通过标签定位

 

2 改变元素的内容

  1. // JS
  2. abc.innerHTML = "test";
  3. // jQuery
  4. abc.html("test");

 

3 显示隐藏元素

  1. // JS
  2. abc.style.display = "none";
  3. abc.style.display = "block";
  4. // jQuery
  5. abc.hide();
  6. abc.show();
  7. abc.toggle(); //在显示和隐藏之间切换

 

4 获得焦点

  1. // JS和jQuery是一样的
  2. abc.focus();

 

5 为表单赋值

  1. // JS
  2. abc.value = "test";
  3. // jQuery
  4. abc.val("test");

 

6 获得表单的值

  1. // JS
  2. alert(abc.value);
  3. // jQuery
  4. alert(abc.val());

 

7 设置元素不可用

  1. // JS
  2. abc.disabled = true;
  3. // jQuery
  4. abc.attr("disabled", true);

 

8 修改元素样式

  1. // JS
  2. abc.style.fontSize=size;
  3. // jQuery
  4. abc.css('font-size', 20);
  5. // JS
  6. abc.className="test";
  7. // JQuery
  8. abc.removeClass();
  9. abc.addClass("test");

 

9 Ajax

  1. // JS
  2. 自己创建对象,自己处理浏览器兼容等乱七八糟的问题,略去不表
  3. // jQuery
  4. $.get("abc.php?a=1&b=2", recall);
  5. postvalue = "a=b&c=d&abc=123";
  6. $.post("abc.php", postvalue, recall);
  7. function recall(result) {
  8. alert(result);
  9. //如果返回的是json,则如下处理
  10. //result = eval('(' + result + ')');
  11. //alert(result);
  12. }

 

10 判断复选框是否选中

  1. // jQuery
  2. if(abc.attr("checked") == "checked")

 

 来源:http://www.ferecord.com/different-between-javascript-and-jquery.html
posted @ 2016-11-11 10:54  kpengfang  阅读(2021)  评论(0编辑  收藏  举报