原生js实现 常见的jquery的功能

<div id="box">
      <ul>
        <li >111  </li>
        <li class="lione">2222</li>
        <li class="lione">3333</li>
     </ul>
     
   
</div>

<div id="box2">
  <p>我是AAAA</p>
     <p>我是BBBB</p>
     </div>

//选择器的实现
var element = document.querySelector(‘selectors‘);
var elementList = document.querySelectorAll(‘selectors‘);


var $=query = document.querySelector.bind(document);
var queryAll = document.querySelectorAll.bind(document);
var fromId = document.getElementById.bind(document);
var fromClass = document.getElementsByClassName.bind(document);
var fromTag = document.getElementsByTagName.bind(document);


//调用
var box=$(‘#box‘);
var lioneall=queryAll(‘li‘);
var lione=$(‘.lione‘);
console.log(box.innerHTML);  //  
console.log(lioneall[2].innerHTML); //333

box.addEventListener(‘click‘,function(){	
	console.log(‘click lione‘+lione.innerHTML);  //click lione 2222
}); 

var myOffest=function (obj){
var top=0,left=0;
if(obj){
 while(obj.offsetParent){
      top += obj.offsetTop;
      left += obj.offsetLeft;
      obj = obj.offsetParent;
   }
 }

  return{
  top : top,
  left : left
  }
}

var jqtop=jQuery(‘#box2‘).offset().top;
console.log(‘jQuery offsetTop  值‘+jqtop);  // jQuery offsetTop  值274


var jstop=document.getElementById("box2");
console.log(‘js offsetTop  值‘+myOffest(jstop).top); // js offsetTop  值274

<div id="box3">
   <p class="klasses">one</p>
   <p class="klasses">two</p>
   <p class="klasses">three</p>
</div>

<script>
var unboundForEach = Array.prototype.forEach,forEach = Function.prototype.call.bind(unboundForEach);
 
var box3=document.getElementById("box3");
var klasses=document.querySelectorAll(‘.klasses‘)
forEach(klasses, function (el) {
    el.addEventListener(‘click‘, function(){
		alert(‘点击我的序号‘+this.innerHTML);   //点击我的序号 one
		});
});

</script>

//获取文档完整的高度 
var getScrollHeight=function () { 
    return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
} 

console.log(‘jquery文档高度‘+jQuery(document).height());  //jquery文档高度1739
console.log(‘js文档高度‘+getScrollHeight()); // js文档高度1739

 var getJSONP=function (url,callback){ 
var cn = "callback"+(+new Date()),
    s = document.createElement("script"),
	head= document.head || document.getElementsByTagName(‘head‘)[0];
	
    s.type = "text/javascript";
	s.charset = "UTF-8";
    s.src = url+cn;
  // var sp=head.appendChild(s);  
    head.insertBefore(s,head.firstChild);  
	setTimeout(function(){ //利用计时器 变成异步
		    window[cn] = function(data) {	
					try { 
					s.onload = s.onreadystatechange = function(){ 
					      var that=this;
						  if((!that.readyState || that.readyState === "loaded" || that.readyState === "complete")){  
							  callback && callback(data);  
							  // Handle memory leak in IE  
							  s.onload = s.onreadystatechange = null;  
							  if ( head && s.parentNode ) {
								  //sp.parentNode.removeChild(sp);   //最重销毁    
								  head.removeChild(s);  
							  }  
						  }  
                      };  
				   
					} catch (e) {
						 
					}finally {  
						 window[cn]=null; 
					 }  			
            };
		 
		},0);
};



//document.addEventListener(‘click‘,function(){
getJSONP("https://api.github.com/repos/HubSpot/pace?callback=",function(json){
   alert(‘success!‘+ json.data.id+‘获取到的‘+json.data.name);
   document.getElementById("testText").innerHTML=‘回调函数获取到了‘+json.data.name;
   document.getElementById("testText").style.cssText=‘color:red;font-size:22px; border:1px solid #666‘
});