JS仿JQuery选择器功能

前端之家收集整理的这篇文章主要介绍了JS仿JQuery选择器功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

JQuery作为应用最广的JS库,其最强大的功能之一就是几乎涵盖所有方法的且代码十分简短的选择器功能,我们也可用自己的代码实现此功能代码逻辑、使用方法与JQuery一致

标签 if(typeof arg=='function'){ //DOMReady DOMReady(arg); }else if(typeof arg=='string'||arg instanceof String){ if(arg.indexOf('<')!=-1){ this.domString = arg; }else{ //获取元素 this.elements = getEle(arg); this.length = this.elements.length; } }else{ //原生对象-》ZQuery对象 this.elements.push(arg); this.length = this.elements.length; } } ZQuery.prototype.css = function(name,value){ if(arguments.length==2){ //设置一个样式 for(var i=0;i获取样式 return getStyle(this.elements[0],name); }else{ //批量设置样式 var json = name; for(var name in json){ for(var i=0;i属性 for(var i=0;i获取属性 return this.elements[0].getAttribute(name); }else{ //批量设置属性 var json = name; for(var name in json){ for(var i=0;iSEOver mouSEOut mousedown mouseup mousemove mouseenter mouseleave change keydown keyup contextmenu'.replace(/\w+/g,function(str){ ZQuery.prototype[str] = function(fn){ for(var i=0;ioAjax.onreadystatechange = function(){
if(oAjax.readyState==4){
clearTimeout(json.timer);
if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
json.success&&json.success(oAjax.responseText);
}else{
json.error&&json.error(oAjax.status);
}
}
};
}
function jsonp(json){
json = json||{};
if(!json.url)return;
json.timeout = json.timeout||15000;
json.cbName = json.cbName||'cb';
json.data = json.data||{};
json.data[json.cbName] = 'show'+Math.random();
json.data[json.cbName] = json.data[json.cbName].replace('.','');
json.timer = setTimeout(function(){
window[json.data[json.cbName]] = function(res){
oHead.removeChild(oS);
json.error&&json.error('网络超时!');
}
},json.timeout);
window[json.data[json.cbName]] = function(res){
clearTimeout(json.timer);
oHead.removeChild(oS);
json.success&&json.success(res);
}
var oHead = document.getElementsByTagName('head')[0];
var oS = document.createElement('script');
oS.src = json.url+'?'+json2url(json.data);
oHead.appendChild(oS);
}
function getStyle(obj,sName){
return (obj.currentStyle||getComputedStyle(obj,false))[sName];
}
function addEvent(obj,sEv,fn){
if(obj.addEventListener){
obj.addEventListener(sEv,function(ev){
var oEvent = ev||event;
if(fn.call(obj,oEvent)==false){
oEvent.cancelBubble = true;
oEvent.preventDefault&&oEvent.preventDefault();
}
},false);
}else{
obj.attachEvent('on'+sEv,function(){
var oEvent = ev||event;
if(fn.call(obj,oEvent)==false){
oEvent.cancelBubble = true;
return false;
}
});
}
}
function DOMReady(fn){
if(document.addEventListener){
addEvent(document,'DOMContentLoaded',function(){
fn&&fn();
});
}else{
addEvent(document,'onreadystatechange',function(){
if(document.readyState=='complete'){
fn&&fn();
}
});
}
}
function getByClass(oParent,sClass){
if(oParent.getElementsByClassName){
return oParent.getElementsByClassName(sClass);
}else{
var aResult = [];
var aEle = oParent.getElementsByTagName('');
var re = new RegExp('\b'+sClass+'\b','g');
for(var i=0;i<aEle.length;i++){
if(aEle[i].className.search(re)!=-1){
aResult.push(aEle[i]);
}
}
return aResult;
}
}
function getByStr(aParent,str){
var aChild = [];
//遍历父级
for(var i=0;i<aParent.length;i++){
switch(str.charAt(0)){
case '#':
//#id
aChild.push(document.getElementById(str.substring(1)));
break;
case '.':
//.class
var aEle = getByClass(aParent[i],str.substring(1));
for(var j=0;j<aEle.length;j++){
aChild.push(aEle[j]);
}
break;
default:
if(/^\w+.\w+$/.test(str)){
//筛选
//li.on
var arr = str.split('.');
var re = new RegExp('\b'+arr[1]+'\b','g');
var aEle = aParent[i].getElementsByTagName(arr[0]);
for(var j=0;j<aEle.length;j++){
if(aEle[j].className.search(re)!=-1){
aChild.push(aEle[j]);
}
}
}else if(/^\w+[\w+\=\w+]$/.test(str)){
//属性
var arr = str.split(/[|\=|]/);
var aEle = aParent[i].getElementsByTagName(arr[0]);
for(var j=0;j<aEle.length;j++){
if(aEle[j].getAttribute(arr[1]) == arr[2]){
aChild.push(aEle[j]);
}
}
}else if(/^\w+\:\w+((\d+))?$/.test(str)){
var arr = str.split(/\:|(|)/);
var aEle = aParent[i].getElementsByTagName(arr[0]);
switch(arr[1]){
case 'first':
aChild.push(aEle[0]);
break;
case 'last':
aChild.push(aEle[aEle.length-1]);
break;
case 'even':
for(var j=0;j<aEle.length;j+=2){
aChild.push(aEle[j]);
}
break;
case 'odd':
for(var j=1;j<aEle.length;j+=2){
aChild.push(aEle[j]);
}
break;
case 'eq':
aChild.push(aEle[arr[2]]);
break;
case 'lt':
for(var j=0;j<arr[2];j++){
aChild.push(aEle[j]);
}
break;
case 'gt':
for(var j=parseInt(arr[2])+1;j<aEle.length;j++){
aChild.push(aEle[j]);
}
break;
}
}else{
//标签
var aEle = aParent[i].getElementsByTagName(str);
for(var j=0;j<aEle.length;j++){
aChild.push(aEle[j]);
}
}
break;
}
}
return aChild;
}
function getEle(str){
var arr = str.replace(/^\s+|\s+$/g,'').split(/\s+/);
var aParent = [document];
var aChild = [];
for(var i=0;i<arr.length;i++){
aChild = getByStr(aParent,arr[i]);
//这一次获取到的子级,是下一次获取的父级
aParent = aChild;
}
return aChild;
}
function move(obj,options){
clearInterval(obj.timer);
options=options || {};
options.easing=options.easing|| 'ease-out';
options.duration=options.duration || 800;
var count=Math.floor(options.duration/30);
var start={};
var dis={};
for(var name in json){
start[name]=parseFloat(getStyle(obj,name));
dis[name]=json[name]-start[name];
}
var n=0;
obj.timer=setInterval(function(){
n++;
for(var name in json){
switch(options.easing){
case 'linear':
var a=n/count;
var cur=start[name]+dis[name]
a;
break;
case 'ease-in':
var a=n/count;
var cur=start[name]+dis[name]aaa;
break;
case 'ease-out':
var a=1-n/count;
var cur=start[name]+dis[name]
(1-aaa);
break;
}
if(name=='opacity'){
obj.style.opacity=cur;
obj.style.filter='alpha(opacity:'+cur*100+')';
}else{
obj.style[name]=cur+'px';
}
}
if(n==count){
clearInterval(obj.timer);
options.complete && options.complete();
}
},30);
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

原文链接:https://www.f2er.com/jquery/40971.html

猜你在找的jQuery相关文章