javascript 和 jquery 语法上的一些区别
12月4日, 2014 JavaScript Tumars 2,399 views次
12月4日, 2014 2,399 views次
jQuery 能大大简化 Javascript 程序的编写，我最近花时间了解了一下 jQuery，把我上手过程中的笔记和大家分享出来，希望对大家有所帮助。
要使用 jQuery，首先要在 HTML 代码最前面加上对 jQuery 库的引用，比如：
|
1 2 |
<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 2 3 4 5 6 7 8 |
// JS document.getElementById("abc") // jQuery $("#abc") //通过id定位 $(".abc") //通过class定位 $("div") //通过标签定位 |
2 改变元素的内容
|
1 2 3 4 5 6 |
// JS abc.innerHTML = "test"; // jQuery abc.html("test"); |
3 显示隐藏元素
|
1 2 3 4 5 6 7 8 9 |
// JS abc.style.display = "none"; abc.style.display = "block"; // jQuery abc.hide(); abc.show(); abc.toggle(); //在显示和隐藏之间切换 |
4 获得焦点
|
1 2 3 |
// JS和jQuery是一样的 abc.focus(); |
5 为表单赋值
|
1 2 3 4 5 6 |
// JS abc.value = "test"; // jQuery abc.val("test"); |
6 获得表单的值
|
1 2 3 4 5 6 |
// JS alert(abc.value); // jQuery alert(abc.val()); |
7 设置元素不可用
|
1 2 3 4 5 6 |
// JS abc.disabled = true; // jQuery abc.attr("disabled", true); |
8 修改元素样式
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// JS abc.style.fontSize=size; // jQuery abc.css('font-size', 20); // JS abc.className="test"; // JQuery abc.removeClass(); abc.addClass("test"); |
9 Ajax
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 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 判断复选框是否选中
|
1 2 3 |
// jQuery if(abc.attr("checked") == "checked") |
