jQuery 替我们做了什么

最新推荐文章于 2025-04-11 11:54:03 发布

dyccsxg

最新推荐文章于 2025-04-11 11:54:03 发布

阅读量103

点赞数

文章标签： javascript json ViewUI

1. 兼容性
例如：要获取一个 div 元素的内容

   // 原生 js 写法
   document.getElementById("div1").innerText;  // for IE
   document.getElementById("div1").textContent;// for Firefox (innerText 在Firefox 中不支持)
   // jQuery 写法
   $("#div1").text();

# jQuery 可以兼容多种浏览器，具体请参见 http://jquery.com/browser-support/

2. 判断浏览器

   // 原生 js 写法
   if (window.ActiveXObject) {
     alert("IE");
   }
   if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
     alert("Firefox");
   }
   // jQuery 写法 (需要插件 https://github.com/jquery/jquery-migrate)
   if ($.browser.msie) {
     alert("IE");
   }
   if ($.browser.mozilla) {
     alert("Firefox");
   }

3. onload, onunload -> ready
# onload 页面加载完成时触发
# onunload 页面关闭时触发

   // 原生 js 写法
   window.onload = function() {
       alert("div1 innerHTML = " + document.getElementById("div1").innerHTML);
   }
   window.onbeforeunload = function(event) {
       return "您确定要离开吗？";
   }
   // jQuery 写法
   $(document).ready(function() {
       alert("div1 innerHTML = " + $("#div1").html());
   });
   $(window).bind("beforeunload", function() {
       return "您确定要离开吗？";
   });

4. 事件绑定与解除

   // 原生 js 写法
   document.getElementById("div1").onclick = function () {
       alert(this.innerHTML);
       this.onclick = null;
   };
   // or
   var div1 = document.getElementById("div1");
   if (div1.attachEvent) {
       div1.attachEvent('onclick', function(){
           alert(div1.innerHTML);
           div1.detachEvent('onclick', arguments.callee);
       });
   } else {
       div1.addEventListener('click', function(){
           alert(div1.innerHTML);
           div1.removeEventListener('click', arguments.callee);
       });
   }
   // jQuery 写法
   $("#div1").bind("click", function(){
       alert($(this).html());
       $(this).unbind("click");
   });

5. 操作 cookie

   // 原生 js 写法
   function addCookie(name, value, expireDays) {
       if (expireDays == null) {
           document.cookie = name + "=" + escape(value);
       } else {
           var expires = new Date();
           expires.setTime(expires.getTime() + expireDays*24*60*60*1000);
           document.cookie = name + "=" + escape(value) + ";expires=" + expires.toUTCString();
       }
   }
   function delCookie(name) {
       document.cookie = name + "=;expires=" + (new Date(0).toUTCString());
   }
   function readCookie() {
       var result = "";
       var cookies = document.cookie.split("; ");
       for (var i=0; i<cookies.length; i++) {
           var cookie = cookies[i].split("=");
           result += cookie[0] + "=" + unescape(cookie[1]) + "\n";
       }
       return result;
   }
   // jQuery 写法 (需要插件 https://github.com/carhartl/jquery-cookie)
   $.cookie('name1', 'value1');
   $.removeCookie('name1');
   alert(JSON.stringify($.cookie()));

6. 属性

   // 原生 js 写法
   document.getElementById("sp1").setAttribute("attrName1", "value1");
   alert(document.getElementById("sp1").getAttribute("attrName1"));
   // jQuery 写法
   $("#sp1").attr("attrName1", "value1");
   alert($("#sp1").attr("attrName1"));

7. DOM 元素

   // 原生 js 写法
   var div1 = document.getElementById("div1");
   // 创建
   var sp2 = document.createElement("span"); 
   sp2.setAttribute("id", "sp2");
   sp2.innerHTML = "This is a span element2.";
   // 增加
   div1.innerHTML = '<span id="sp1">This is a span element1.</span>';
   div1.appendChild(sp2);
   // 删除
   sp2.parentNode.removeChild(sp2);     // 删除节点 sp2
   div1.innerHTML = "";                 // 清空 div1 的内容
   // jQuery 写法
   $("#div1").html('<span id="sp1">This is a span element1.</span>');
   $("#div1").append('<span id="sp2">This is a span element2.</span>');
   $("#sp2").remove();                  // 删除节点 sp2
   $("#div1").empty();                  // 清空 div1 的内容

8. Ajax

   // 原生 js 写法
   function loadData(method, url, params, callback) {
     var request = null;
     if (window.XMLHttpRequest) {
       request = new XMLHttpRequest();
     } 
     else if (window.ActiveXObject) {
       request = new ActiveXObject("Microsoft.XMLHTTP");
     }
     if (request == null) {
       return;
     }
     request.onreadystatechange = callback;
     request.open(method, url, true);
     request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     request.send(params);
   }
   loadData("GET", "menu.json", null, function(){
     if (this.readyState == 4 && this.status == 200) {
       alert(this.responseText);
     }
   });
   // jQuery 写法
   $.get("menu.json", null, function(data) {
     alert(data);
   }, "text");