JQuery 和JavaScript的区别

时间:2022-04-06 08:55:20

Google提供的jquery包:

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

jQuery官方的jquery包:

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

区别如下:

1 定位元素

JS 
  document.getElementById("abc") 
jQuery 

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

  需要注意的是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);    不可用

  abc.removeAttr("disabled");     恢复可用

8 修改元素样式
JS

  abc.style.fontSize=size;
jQuery
  abc.css('font-size', 20);

9 修改元素class

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

10 Ajax
JS

  自己创建对象,还得处理浏览器兼容的等问题。
jQuery
  $.get("abc.php?a=1&b=2", recall);

  postvalue = "a=b&c=d&abc=123";
  function recall(result) {
    alert(result);
    //如果返回的是json,则如下处理
    //result = eval('(' + result + ')'); 
    //alert(result);
  }
  $.post("abc.php", postvalue, recall);

11 判断复选框是否选中
jQuery

  if(abc.attr("checked") == "checked")
  注意:.attr("checked") == true实际上不能用

12 跨域访问
JS
 方式1:
  createXMLHTTPRequext();
  xmlhttp.Open("get", "http://localhost/example.htm", false);xmlhttp.Send(xmldoc);
 方式2:
  <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
 方式3:
  $.get(url,{params:str },function(data,status){})
  .fail(function() {})
  .always(function() {});
jQuery
 方式1:
  $.ajax({  
    type: 'POST',    
    url: url ,     
    data: data ,     
    dataType: dataType,   
    success: success
  });
 方式2:
  $.ajax({   
    type: "get",   
    async: false,   
    url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",   
    dataType: "jsonp",   
    jsonp: "callback",        //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)   
    jsonpCallback:"flightHandler",  //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据  
    success: function(json){ },  
    error: function(){}
  });