写jQuery和直接写JS的区别

2019独角兽企业重金招聘Python工程师标准>>>

jQuery能大大化简Javascript程序的编写。

1 要使用jQuery，首先要在HTML代码最前面加上对jQuery库的引用，库文件既可以放在本地，也可以直接使用知名公司的CDN。使用知名公司的CDN的好处是：用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了，所以能加快网站的打开速度；另一个好处是节省了网站的流量带宽。 示例： 1)库文件在本地

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

2)使用知名公司的CDN
a.    Google提供的

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

b.    jQuery官方的

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

c.    自己弄了个子域名，实际上也是跳转到Google的CDN

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

2 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();//显示

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 实际上不能用，上面的这个测试过能用

转载于:https://my.oschina.net/syc2013/blog/110137