我如何將jQuery代碼轉換爲Javascript函數

Question

在這個jQuery代碼中我試圖加載notes.php文件到div #inside1這是div #panel。現在當我點擊div #flip時，div #panel應該切換。

我有jQuery代碼。 但我需要在java腳本中的這個相同的功能 我該如何轉換它？

代碼：

開始後

<script> 
$(document).ready(function(){ 
    $("#flip").click(function(){ 
    $("#panel").slideToggle("slow"); 
    }); 
    $("#inside1").load("notes.php"); 
}); 
</script> 

Answer 1

文檔準備

而不是使用$（文件）。就緒（），你可能只是把你在頁面的底部，現在它會的在加載之前的所有內容之後執行。

DOM元素選擇

選擇DOM元素是可以做到用

document.getElementById('someID'); 

Click事件

單擊事件可以通過使用此

被添加到一個div

divTag.onclick = functionRef 

滑動格

設置在一個div新的內容將可能是最好的只是改變的，而不是滑動，因爲這將是很多更編碼htmlcontent。

從PHP文件加載信息

jQuery中的$ .load（）函數是做ajax調用的簡寫，看看這裏，看看你能在香草做的Ajax調用JavaScript的

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first

希望這有助於足夠讓你可以將代碼改寫成香草的javascript

Answer 2

警告：醜陋的代碼低於

var DOM = function (selector) { 
    this.animate = function (prop, times, callbacks) { 
     var el = document.querySelectorAll(selector); 
     var animate = function (element, props, time, callback) { 
      callback = callback || function() {}; 
      time = time || 1000; 
      var timers = {}, // store the different interval timers so that they can be cancelled 
      calls = 0, // numbers of times the call would have been called 
       nprops = 0; // number of properties 
      for (var prop in props) { 
       (function (prop) { 
        var edit = prop == "scrollTop" ? element : element.style; 
        var stepCounter = [], 
         customStep = props[prop], 
         curr = edit[prop], 
         lastStepPercent = curr == "" ? (prop == "opacity" ? 1 : 0) : curr, 
         measure = prop == "scrollTop" || prop == "opacity" ? "" : "px", 
         stepper = function() { 
          edit[prop] = stepCounter[0] + measure; 
          stepCounter.shift(); 
         }; 
        if (props[prop].constructor == Number) customStep = [props[prop]]; 
        for (var step = 0, len = customStep.length; step < len; step++) { 
         var from = parseInt(lastStepPercent), 
          to = parseInt(customStep[step]), 
          small = to < from, 
          numOfSteps = small ? from - to : to - from, // get current number of frames 
          multi = 30 * Math.round(parseInt(time)/1000), 
          by = numOfSteps/(25 + multi) * len; // the stepper number 

         if (from == to) { 
          break; 
         } 
         for (var i = from; small ? i >= to : i <= to; i += small ? -by : by) { 
          stepCounter.push(i); 
         } 
         stepCounter.push(to); 
         lastStepPercent = customStep[step]; 
        } 
        stepper(); 
        timers[element + prop] = setInterval(function() { 
         stepper(); 
         if (stepCounter.length == 0) { 
          clearInterval(timers[element + prop]); 

          calls++; 
          if (calls == nprops) { 
           callback.call(element); 
          } 
         } 
        }, time/stepCounter.length); 
        nprops++; 
       })(prop); 
      } 
     }; 
     for (var i = 0; i < el.length; i++) { 
      animate(el[i], prop, times, callbacks); 
     }; 
     return new DOM(selector); // re-initiate "JavaScript class" for chaining 
    } 
}; 
var $ = function (selector) { 
    return new DOM(selector); 
}; 

window.onload = function() { 
    document.getElementById("flip").onclick = function() { 
     var panel = document.getElementById("panel"); 
     if (panel.style.height == 0) { 
      $("#panel").animate({ 
       height: 100 
      }, 2000); // thats kinda slow... 
     } else { 
      $("#panel").animate({ 
       height: 0 
      }, 2000); // thats kinda slow... 
     } 
    }; 
    var request = window.XMLHttpRequest() ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 

    request.open("POST", "notes.php", true); 
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    request.onreadystatechange = function() { 
     if (request.readyState == 4 && (request.status == 200 || request.status == 0 /*Fixes a FF bug*/)) { 
      document.getElementById("inside1").innerHTML = request.responseText; 
     } 
    } 
    request.send(); 
}; 

我用了我剛纔創建的一個動畫函數。請注意，這可能無法正常工作。這只是您的代碼在沒有jQuery的情況下可以獲得多長時間的基本示例。它也可能不會完成你的jQuery代碼。我不打算在這個過程中度過整個晚上，但我確實想讓你看看我放在一起的代碼非常快。

它actuallys作品：http://jsfiddle.net/shawn31313/jm8ZR/1/

我刪除該示例中的AJAX調用。但動畫函數可能會變得很麻煩，所以請使用jQuery。