本人写了一个类似于jq的小型库，不过只是写了部分方法而已。并没有jq那么全面，下面就介绍下有哪些方法可以使用
第一个是选择器，
选择器比较简单 只支持ID选择器 $(‘#id_name’)
Class选择器$(‘.class_name’)
标签选择器$(‘tag _name’)
并没有像jq那样拥有高级的选择器。
方法有
Js延迟加载
Ready $(document).ready(function(){
// 在这里写你的代码...
});
$(functoin(){
})
事件有
Click $(‘div’).click(functoin(){
Alert(1)
})
Dblclick , mousedown mouseup , mouseover , mousemove mouseout mousemove keypress keydown keyup change reset submit hover
效果有
Show hide toggle
Css 有
Css offset width height position
属性有
Attr val html addClass removeAttr
筛选有
Eq find index get first lastss
动画有
Animate stop
文档处理有
Append remove empty
工具方法有
Trim ajax setPage（分页） extend inArray parseJSON isFunction isEmpty
isNumeric type
cq核心源码
/*
作者：姚观寿
cq：类似于jq的一个小型库
时间：2016.6.19 */
(function(window,undefined,document){
var isIe678 = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE6.0")||
(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE7.0")||
(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE8.0"); function checkType(data_type){
return Object.prototype.toString.call(data_type);
} function myAddEvent(obj , sEv , fn){
try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
obj.addEventListener(sEv,fn,false);
}catch(e){
try{ // IE8.0及其以下版本
obj.attachEvent('on' + sEv ,function(){
fn.call(obj);
});
}catch(e){
// 早期浏览器
obj['on' + sEv] = fn;
}
}
} function getTopOrLeft(obj,attr){
var obj_attr = 0;
while(obj){
obj_attr+=obj[attr];
obj=obj.offsetParent;
}
return obj_attr;
} function getStyle(obj , attr){
var new_attr;
if(attr=='opacity'){
new_attr = parseFloat((window.getComputedStyle?getComputedStyle(obj,null)[attr]:obj.currentStyle[attr]));
}else{
new_attr = parseInt(window.getComputedStyle?getComputedStyle(obj,null)[attr]:obj.currentStyle[attr]);
}
if(isNaN(new_attr)){
new_attr = 0;
}
return new_attr;
/* return attr=='opacity'?parseFloat((window.getComputedStyle?getComputedStyle(obj,null)[attr]:obj.currentStyle[attr])):parseInt(window.getComputedStyle?getComputedStyle(obj,null)[attr]:obj.currentStyle[attr]); */
} function forEach(obj , fn ){
var i=0, len = obj.length;
for(;i<len;i++){
fn(i);
}
}
function getByClassName(oParent,className){
var aEle = oParent.getElementsByTagName('*'),
aResult = [];
forEach(aEle,function(i){
if(aEle[i].className == className ){
aResult.push(aEle[i]);
}
});
return aResult;
} function CopyArr(arr){
var newArr = [];
forEach(arr , function( i ){
newArr.push(arr[i]);
});
return newArr;
} function getIndex( obj ){
var sibing = obj.parentNode.children,
index = null ;
forEach(sibing , function(i){
if(sibing[i] == obj ){
return index = i-1;
}
});
return index;
} function Tween(value, prop, animation_attr) {
//初始化
this.elem = animation_attr.elem;
this.prop = prop;
this.easing = "swing"; //动画缓动算法
this.options = animation_attr.options;
this.start = this.now = this.get();
this.end = value;
this.unit = "px"
} Tween.prototype = {
get: function() {
var computed = getStyle(this.elem, this.prop);
return parseFloat(computed);
},
run:function(percent){
var eased;
this.pos = eased = swing(percent);
this.now = (this.end - this.start) * eased + this.start; this.elem.style[this.prop] = this.now +this.unit;
return this;
}
} //动画算法
function swing(p) {
var tmpe = 0.5 - Math.cos(p * Math.PI) / 2;
return tmpe
} Tween.prototype = {
get: function() {
var computed = getStyle(this.elem, this.prop);
return parseFloat(computed);
},
run:function(percent){
var eased;
this.pos = eased = swing(percent);
this.now = (this.end - this.start) * eased + this.start; if(this.prop=="opacity"){
if(isIe678){
this.elem.style.filter='alpha(opacity:'+(this.now*100)+')'
}else{
this.elem.style[this.prop] = this.now;
}
}else{
this.elem.style[this.prop] = this.now +this.unit;
}
return this;
}
} function AnimationFn(elem, properties, options, fn){
/* elem.timerId = null;
if (elem.timerId !=undefined && elem.timerId) {
return false;
}*/ var animation_attr = {
elem : elem,
props : properties,
originalOptions : options,
options : options,
startTime : null,//动画开始时间
tweens : []//存放每个属性的缓动对象，用于动画
} for (var k in properties) {
animation_attr.tweens.push( new Tween(properties[k], k, animation_attr));
}
animation_attr.startTime=AnimationFn.fxNow || createFxNow();
var tick = function() {
var currentTime = AnimationFn.fxNow || createFxNow();
remaining = Math.max(0, animation_attr.startTime + animation_attr.options.duration - currentTime),
temp = remaining / animation_attr.options.duration || 0,
percent = 1 - temp;
var index = 0,
length = animation_attr.tweens.length;
for (; index < length; index++) {
animation_attr.tweens[index].run(percent);
} if (percent <= 1 && length) {
return remaining;
} else {
return false;
} }
tick.elem = elem;
//tick.anim = animation_attr;
tick.fn = fn;
AnimationFn.fx.timer(tick);
} function createFxNow() {
setTimeout(function() {
AnimationFn.fxNow = undefined;
},0);
return (AnimationFn.fxNow = Date.now());
} AnimationFn.fx = {
timer: function(timer) {
AnimationFn.timer=timer;
if (timer()) { //timer() 只是调用一个而已,就是说有这个动画时候就执行函数 返回一个false 或者是 remaining;
//开始执行动画 走这里
AnimationFn.fx.start();
}
},
start: function() {
if (!AnimationFn.timer.elem.timerId) {
AnimationFn.timer.elem.timerId = setInterval(AnimationFn.fx.tick, 13);
}
},
stop:function(){
clearInterval(AnimationFn.timer.elem.timerId);
AnimationFn.timer.elem.timerId = null;
AnimationFn.timer.fn&&AnimationFn.timer.fn.call(AnimationFn.timer.elem );
},
tick: function() {
//不停的调用，直到定时器关闭
var timer,
i = 0;
AnimationFn.fxNow = Date.now();
if (!AnimationFn.timer()) {
AnimationFn.fx.stop();
}
AnimationFn.fxNow = undefined;
}
} function CQuery(vArg,chained_mode){ this.elements = [];
switch(typeof vArg) {
case 'function': myAddEvent(window , 'load' , vArg);
break;
case 'string':
switch(vArg.charAt(0)){
case '#': //id
var obj = document.getElementById(vArg.substring(1));
this.elements.push(obj);
break;
case '.': //class
var objs = getByClassName(document , vArg.substring(1));
this.elements = objs;
break;
default: //tagName
this.elements = document.getElementsByTagName(vArg);
break;
}
break; case 'object':
switch(checkType(vArg)){
case "[object HTMLDocument]":
// this.elements = window;
this.elements.push(window);
break;
default :
this.elements.push(vArg); break;
} }
return this === window&&new CQuery(vArg);
} CQuery.prototype = {
ev:function(event , fn){
var this_elements = this.elements;
forEach(this.elements,function(i){
myAddEvent(this_elements[i] , event , fn);
});
new_CQuery.elements = this.elements;
return new_CQuery;
},
ready:function(fn){ myAddEvent(window, 'load' , fn);
},
click:function( fn ){
return this.ev('click',fn);
},
dblclick : function( fn ){
return this.ev('dblclick',fn);
},
mousedown : function( fn ){
return this.ev('mousedown',fn);
},
mouseup : function( fn ){
return this.ev('mouseup',fn);
},
mouseover : function( fn ){
return this.ev('mouseover',fn);
},
mousemove : function( fn ){
return this.ev('mousemove',fn);
},
mouseout : function ( fn ){
return this.ev('mouseout',fn);
},
mousemove:function(fn){
return this.ev('mousemove',fn);
},
keypress:function( fn ){
return this.ev('keypress',fn);
},
keydown : function( fn ){
return this.ev('keydown',fn);
},
keyup : function( fn ){
return this.ev('keyup',fn);
},
change : function( fn ){
return this.ev('change',fn);
},
reset : function( fn ){
return this.ev('reset',fn);
},
submit : function( fn ){
return this.ev('submit',fn);
},
show:function(){
var this_elements=this.elements;
forEach(this.elements,function(i){
this_elements[i].style.display = 'block';
});
new_CQuery.elements = this.elements;
return new_CQuery;
},
hide:function(){
var this_elements = this.elements ;
forEach(this.elements,function(i){
this_elements[i].style.display = 'none';
});
new_CQuery.elements = this.elements;
return new_CQuery;
},
hover:function(fnOver , fnOut){
var this_elements = this.elements ;
forEach(this.elements,function(i){
myAddEvent(this_elements[i] , 'mouseover' , fnOver);
myAddEvent(this_elements[i] , 'mouseout' , fnOut);
});
new_CQuery.elements = this.elements;
return new_CQuery;
},
css:function(attr , value){
if(arguments.length==2){ //设置样式
var this_elements = this.elements
forEach(this.elements , function(i){
if(attr!='opacity'){
this_elements[i].style[attr] = value;
}else{
this_elements[i].style[attr] = value;
}
});
}else{ //获取样式
return getStyle(this.elements[0] , attr);
}
new_CQuery.elements = this.elements;
return new_CQuery;
},
toggle:function(){
var argm = arguments,
argmLen = arguments.length,
this_elements = this.elements ;
forEach(this.elements,function(i){
var count = 0;
myAddEvent(this_elements[i] , 'click' , function(){
argm[count++%argmLen].call(this);
}) ;
});
new_CQuery.elements = this.elements;
return new_CQuery;
},
attr:function( attr , value){
var this_elements = this.elements ;
if(arguments.length==2){
forEach(this.elements , function( i ){
this_elements[i][attr] = value;
});
new_CQuery.elements = this.elements;
return new_CQuery;
}else{
return this.elements[0][attr];
}
},
eq:function( n ){
return $(this.elements[n]);
},
find:function(str){
var aResult = [] ,
this_elements = this.elements;
forEach(this.elements , function( i ){
switch(str.charAt(0)){
case '.' : //class
var aEle = getByClassName(this.elements[i] , str.substring(1));
aResult = aResult.concat(aEle);
break;
default :
var aEle = this_elements[i].getElementsByTagName(str);
aResult = aResult.concat(CopyArr(aEle));
}
});
new_CQuery.elements = aResult;
return new_CQuery;
},
index : function(){
return getIndex(this.elements[0]);
}, offset:function(){ if(arguments.length==0){
var offset={
top:getTopOrLeft(this.elements[0],'top'),
left:getTopOrLeft(this.elements[0],'left')
}
return offset;
}else{
var this_elements = this.elements ;
forEach(this.elements,function(i){
this_elements[i].style.left = arguments.length[0].left;
this_elements[i].style.top = arguments.length[0].top;
});
new_CQuery.elements = this.elements;
return new_CQuery; } },
position:function(){
if(arguments.length==0){
var offset={
top:this.elements[0].offsetTop,
left:this.elements[0].offsetLeft
}
return offset;
}else{
var this_elements = this.elements ;
forEach(this.elements,function(i){
this_elements[i].style.left = arguments.length[0].left;
this_elements[i].style.top = arguments.length[0].top;
});
new_CQuery.elements = this.elements;
return new_CQuery; } }, animate:function(prop, speed, easing, callback){
var _arguments = arguments;
this_elements = this.elements;
if(checkType(arguments[1])=="[object Undefined]"){
_arguments[1] = 400;
forEach(this.elements , function( i ){
AnimationFn(this_elements[i],_arguments[0], {
duration: _arguments[1]
})
});
}else if ((checkType(arguments[1])=="[object String]"||checkType(arguments[1])=="[object Number]")&&checkType(arguments[2])=="[object Undefined]"){ switch(arguments[1]){
case 'slow' : _arguments[1] = 600 ; break;
case 'normal': _arguments[1] = 400; break;
case 'fast' : _arguments[1] = 200; break;
default : if(checkType(arguments[1])=="[object String]"){
_arguments[1] = 400;
} break;
}
forEach(this.elements , function( i ){
AnimationFn(this_elements[i],_arguments[0], {
duration: _arguments[1]
})
});
}else if((checkType(arguments[1])=="[object String]"||checkType(arguments[1])=="[object Number]"&&checkType(arguments[2])=="[object Undefined]")&&checkType(arguments[2])=="[object Function]"){ var _speed = 0;
switch(arguments[1]){
case 'slow' : _speed = 600 ; break;
case 'normal': _speed = 400; break;
case 'fast' : _speed = 200; break;
default :
if(checkType(arguments[1])=="[object String]"){
_speed = 400;
} break;
}
forEach(this.elements , function( i ){
AnimationFn(this_elements[i],_arguments[0], {
duration: _speed
},_arguments[2])
});
}else if(checkType(arguments[1])=="[object Function]"){ var _speed = 400;
forEach(this.elements , function( i ){
AnimationFn(this_elements[i],_arguments[0], {
duration: _speed
},_arguments[1])
});
}
new_CQuery.elements = this.elements;
return new_CQuery;
},
stop:function(){
var this_elements = this.elements;
forEach(this.elements , function( i ){
if(this_elements[i].timerId){
clearInterval(this_elements[i].timerId);
this_elements[i].timerId= null;
}
});
new_CQuery.elements = this.elements;
return new_CQuery;
},
append:function(html){
var this_elements = this.elements;
forEach(this.elements , function( i ){
this_elements[i].innerHTML+=html;
});
new_CQuery.elements = this.elements;
return new_CQuery;
},
remove:function(){
var this_elements = this.elements;
forEach(this.elements , function( i ){
this_elements[i].parentNode.removeChild(this_elements[i]);
});
new_CQuery.elements = this.elements;
return new_CQuery;
},
empty:function(){
var this_elements = this.elements;
forEach(this.elements , function( i ){
for(var j=0, length = this_elements[i].children.length; j<length;j++){
this_elements[i].removeChild(this_elements[i].children[j]);
}
});
new_CQuery.elements = this.elements;
return new_CQuery;
},
get:function(index){
return this.elements[index];
},
val:function(){
if(arguments.length==0){
return this.elements[0].value;
}else{
var this_elements = this.elements;
var _arguments = arguments;
forEach(this.elements , function( i ){
this_elements[i].value = _arguments[0];
});
new_CQuery.elements = this.elements;
return new_CQuery;
}
},
html:function(){
if(arguments.length==0){
return this.elements[0].innerHTML;
}else{
var this_elements = this.elements;
var _arguments = arguments;
forEach(this.elements , function( i ){
this_elements[i].innerHTML = _arguments[0];
});
new_CQuery.elements = this.elements;
return new_CQuery;
}
},
addClass:function(class_name){
var this_elements = this.elements;
forEach(this.elements , function( i ){
this_elements[i].className += ' '+class_name;
});
new_CQuery.elements = this.elements;
return new_CQuery;
},
removeAttr:function(attr){
var this_elements = this.elements;
forEach(this.elements , function( i ){
delete this_elements[i].attr;
});
new_CQuery.elements = this.elements;
return new_CQuery;
},
first:function(){
return this.elements[0];
},
last:function(){
return this.elements[this.elements.length-1];
},
height:function(){
if(arguments.lengt==0){
return getStyle(this.elements[0],'height');
}else{
var this_elements = this.elements;
forEach(this.elements , function( i ){
this_elements[i].style.height = arguments[0];
});
new_CQuery.elements = this.elements;
return new_CQuery;
}
},
width:function(){
if(arguments.lengt==0){
return getStyle(this.elements[0],'width');
}else{
var this_elements = this.elements;
forEach(this.elements , function( i ){
this_elements[i].style.width = arguments[0];
});
new_CQuery.elements = this.elements;
return new_CQuery;
}
} } CQuery.trim = function(str){
return str.replace(/(^\s*)|(\s*$)/g, "");
}
CQuery.ajax = function(ajaxObj){
if(ajaxObj.url==undefined){
alert('您未设置url，请您设置提交的url') ;
return false;
}; //设置json数据或者文件
(ajaxObj.async!==undefined)||((ajaxObj.async===false)||(ajaxObj.async = true)); ajaxObj.dataType=(ajaxObj.dataType===undefined)?'json':( ajaxObj.dataType = ajaxObj.dataType.toLowerCase( ), (ajaxObj.dataType== 'file'&&'flie')||('json'));
//设置post或者get方式
ajaxObj.type = (ajaxObj.type===undefined)?'post':(ajaxObj.type =ajaxObj.type.toLowerCase( ),(ajaxObj.type=='get'&&'get')||('post')); var submit_url = '',
submit_table_data='';
str=ajaxObj.url; //这是一字符串
var strs= new Array(); //定义一数组
strs=str.split("?"); //字符分割
submit_url = strs[0];
//设置清理缓存
ajaxObj.cache = (ajaxObj.cache===undefined)?true:(ajaxObj.cache&&true||false); //缓存
if(!ajaxObj.cache) {
time = 'time='+new Date().getTime();
submit_table_data = (strs.length<=1)?time:(time+'&');
for(var i=1, len = strs.length; i<len ;i++ ){
submit_table_data += (i==len-1)?strs[i]:(strs[i]+'?');
}
}else{
for(var i=1, len = strs.length; i<len ;i++ ){
submit_table_data += (i==len-1)?strs[i]:(strs[i]+'?');
}
(submit_table_data=='')||(submit_table_data+='&');
} //数据连接
switch(checkType(ajaxObj.data)){
case "[object String]":
submit_table_data += ajaxObj.data;
break;
case "[object Object]":
var submit_key = [],
submit_data = [];
for(i in ajaxObj.data){
submit_key.push(i);
submit_data.push(ajaxObj.data[i]);
}
//ajaxObj.url+=re.exec(ajaxObj.url)?"&":"?";
forEach(submit_data , function(index){
submit_table_data+=((submit_data.length-1)==index)?submit_key[index]+'='+submit_data[index]:submit_key[index]+'='+submit_data[index]+'&';
} ) ;
} //创建 xhr对象
if(window.XMLHttpRequest){
var xhr=new XMLHttpRequest();
} else{
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
} //数据
var fileLen=fileNumber=0;
if(ajaxObj.type=='get'){
if(ajaxObj.dataType== 'flie'){
alert('文件上传需要设置post提交！');
}
xhr.open('get',submit_url+'?'+encodeURI(submit_table_data),ajaxObj.async);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send();
}else{ if(ajaxObj.dataType!='flie'){
xhr.open('post',submit_url,true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// alert(ajaxObj.data);
xhr.send(submit_table_data);
}else{
if(ajaxObj.fileObject===undefined){
alert('未设置文件对象，需要传递一个文件对象进来');
return ;
} xhr.open("post",ajaxObj.url,ajaxObj.async);
//设置数据类型
xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
//文件表单对象
var form = new FormData(); if(ajaxObj.fileObject.nodeName=='INPUT'){
var file_name= ajaxObj.fileObject.name; }else{
var file_name = (ajaxObj.fileName===undefined)?'file':ajaxObj.fileName;
}
//文件对象
fileObjs=ajaxObj.fileObject.files,
fileLen=fileObjs.length;
form.append(file_name,fileObjs[0]);
xhr.send(form);
}
} //响应监控
xhr.onreadystatechange=function (){
// alert('正在加载数据');
(xhr.readyState!=1&&xhr.readyState!=2&&xhr.readyState!=3)||(ajaxObj.loading&&ajaxObj.loading(xhr.readyState),
ajaxObj.complete&&ajaxObj.complete(xhr)
);
(xhr.readyState!=4)||((xhr.status==200)?(
// 返回ajax数据给前端alert(xhr.responseText);
ajaxObj.success&&ajaxObj.success(xhr.responseText),
//判断是否有多个文件，如果有多个文件再次提交
(fileNumber>(fileLen-1))||(
fileNumber++,
xhr.open("post",submit_url,ajaxObj.async),
//设置数据类型
xhr.setRequestHeader('X-Requested-With','XMLHttpRequest'),
form.append(file_name,fileObjs[fileNumber]),
xhr.send(form)
)
):(ajaxObj.complete&&ajaxObj.complete(xhr),
ajaxObj.error&&ajaxObj.error(xhr)
)) } } CQuery.setPage = function (page_arguments){
//获取到初始化数据
var id = page_arguments.id , //容器
count = page_arguments.count , //总数
now_index = page_arguments.index , //当前的索引
success = page_arguments.success ; //成功之后的回调函数
// control = (page_arguments.control !== undefined)?page_arguments.control:true;
id.className = 'page';
var a =new Array();
//初始化数据 第一个按钮的数据
if(now_index == 1){
a.push("<a href='javascript:' class='unclick'>prev</a>");
}else{
a.push( "<a href='javascript:' >prev</a>");
}
//初始化中间的数据
function setPageList(i,n_inx){
if(i == n_inx){
a.push("<a href='javascript:' class='on' >"+i+"</a>");
}else{
a.push("<a href='javascript:' >"+i+"</a>");
}
} function trim(str) { return str.replace(/(^\s*)|([^0-9])|(\s*$)/g,'');
} function forEach(start, end, fn){
for(var i = start; i <= end; i++){
fn&&fn( i );
}
}
//中间的1到count 中的页数
if(count<=9){
//这里只有一种情况
forEach(1, count, function(i){
setPageList(i,now_index);
})
}else{
//这里有三种情况
if(now_index<=4){
forEach(1, 5, function(i){
setPageList(i,now_index);
});
a.push("...<a href='javascript:'''>"+count+"</a>");
}else if(now_index >= (count-3)){
a.push("<a>"+1+"</a>...");
forEach(count-4, count, function(i){
setPageList(i,now_index);
});
}else{
a.push("<a href='javascript:'>1</a>...");
forEach(now_index-2,now_index+2,function(i){
setPageList(i,now_index);
});
a.push("...<a href='javascript:'>"+count+"</a>");
}
}
//最后添加的按钮 if(now_index == count){
a.push("<a href='javascript:' class='unclick'>next</a>");
}else{
a.push("<a href='javascript:'>next</a>");
} //到第几页
a.push("<a class='no'>到第</a>");
a.push("<a class='no'><input/ type='text'></a>");
a.push("<a class='no'>页</a>");
a.push("<a href='javascript:'>确定</a>"); id.innerHTML = a.join('');
//添加事件
var o_a = id.getElementsByTagName('a');
for(var i = 0, len = o_a.length; i < len; i++){
o_a[i].onclick = (function(i){
if(i==0){
return function(){
/* if(page_arguments.motion){
if(control){return false;}
}*/
now_index--;
if(now_index < 1 ){
now_index = 1;
return false ;
}
page_arguments.index = now_index;
//page_arguments.control = control;
CQuery.setPage(page_arguments);
success({count:count, index:now_index});
return false;
}
}else if(i == (len-5)){
return function(){
/* if(page_arguments.motion){
if(control){return false;}
}*/
now_index++;
if(now_index > count ){
now_index = count;
return false ;
}
page_arguments.index = now_index;
// page_arguments.control = control;
CQuery.setPage(page_arguments);
success({count:count, index:now_index});
return false;
}
}else if(i == (len-4)){
return function(){
// alert(i)
}
}else if(i == (len-3)||i == (len-2)){
return function(){
// alert(i)
}
}else if(i == (len-1)){
var o_input = id.getElementsByTagName('input')[0];
var vl ="";
o_input.onkeyup= function(){
this.value = trim(this.value);
if(this.value>=count){
this.value = count;
}
if(this.value<=1){
this.value = 1;
}
vl = this.value;
}
return function(){
/* if(page_arguments.motion){
if(control){return false;}
}*/
page_arguments.index = parseInt(vl)||1;
// page_arguments.control = control;
CQuery.setPage(page_arguments);
success({count:count, index:page_arguments.index});
}
}else{
return function(){
/*if(page_arguments.motion){
if(control){return false;}
}*/
page_arguments.index = parseInt(this.innerHTML);
// page_arguments.control = control;
CQuery.setPage(page_arguments);
success({count:count, index:page_arguments.index});
return false;
}
}
})(i);
}
}
CQuery.extend = function(obj){
for(i in obj){
CQuery[i] = obj[i];
}
}
CQuery.inArray = function(arr_child,arr){
var in_array_index = -1;
forEach(arr,function(i){
if(arr[i]==arr_child){
in_array_index = i;
return ;
}
});
(arguments.length==2)||(in_array_index=-1);
return in_array_index;
}
CQuery.parseJSON = function(json_data){
return JSON.parse(json_data);
}
CQuery.isFunction =function(fn){
if(checkType(data_type)==="[object Function]"){
return true;
}else{
return false;
}
} CQuery.isEmpty = function(obj){
var is=false;
if(checkType(data_type)!=="[object Object]"){
return is;
}
for(i in obj){
is=true;
if(is==1){
break;
}
}
} CQuery.isPlainObject=function(obj){
if(checkType(data_type)==="[object Object]"){
return true;
}else{
false;
}
}
CQuery.isNumeric = function(num){
if(checkType(data_type)==="[object Nunber]"){
return true;
}else{
false;
}
} CQuery.type = function(data){
return typeof(data);
}
CQuery.error= function( msg ) {
throw new Error( msg );
}
window.fn = function(){};
window.$=window.jQuery = CQuery;
fn.prototype = CQuery.prototype;
fn.prototype.constructor = fn;
window.new_CQuery = new fn();
})(window,undefined,document);
使用例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="cq.js"></script>
<style>
div{
width:100px;
height:100px;
background:red;
position:absolute;
left:100px;
}
</style>
</head>
<body>
<script>
$(function(){
$('input').click(function(){
alert(1);
});
$('div').hover(function(){
console.log(0)
},function(){
console.log(2)
}).click(function(){
$(this).animate({width:200,
height:200
},function(){
$(this).animate({
left:300
})
})
})
});
</script>
<input type="button" value="按钮" />
<div></div>
</body>
</html>
Cq 的ajax和jq的ajax差不多
最简单的json提交方式为
Var json = $.ajax({
url:'ajaxform1.php', //必填
data:'username=爱上的方式地方',
})
Alert(json)
最简单的文件上传为,这样与jq有些差别，大大减小了用户的传参
<input id=’fileId’ type=’file’ name = ‘file’>
$.ajax({
url:'ajaxform1.php', //必填
success:function(data){
alert(data)
}
dataType:’file’ ,
fileObject:$(‘# fileId’).get(0)
})
参数说明
url： 请求的url
fileObject： 文件对象 需要传文件的时候才需要设置这个
dataType：有两个参数 是选择json数据传输还是file文件上传 默认是json
success： ajax通信成功后回调函数
async: 同步或者异步 false为同步 true为异步 默认是true
type： post提交或者是get提交 默认是post
cache： 提交的时候是否清理url缓存 默认是不清理 为true 清理为false
loading ： 状态函数 ajax响应1234 状态函数 readyState
complete ： ajax通信无论成功还是失败都调用该函数
error ：ajax通信出错或者是服务器出错调用该函数
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="../cq/cq.js"> </script>
<style>
div{
width:260px;
height:90px;
line-height:30px;
text-align:left;
border:3px #ccc dotted;
padding:30px 30px 0px 30px; color:#666
} .active{
color:green;
border-color:green;
}
</style>
</head>
<body>
<div id="box">
一次性可以拖拽上传多个文件,请把需要上传文件的拖拉到此处
</div>
<form> </form>
<script>
/*
ondrag script 当拖动元素时运行脚本
ondragend script 当拖动操作结束时运行脚本
ondragenter script 当元素被拖动至有效的拖放目标时运行脚本 3
ondragleave script 当元素离开有效拖放目标时运行脚本 类似于out
ondragover script 当元素被拖动至有效拖放目标上方时运行脚本 5
ondragstart script 当拖动操作开始时运行脚本
ondrop script 当被拖动元素正在被拖放时运行脚本 阻止浏览器拖拽默认事件只需要清除这两个事件浏览器就不会自动打开文件了
document.ondragover=document.ondrop=function(e){
e.preventDefault();
return;}
经过测试拖拽文件的时候发生事件循序为
ondragenter 只会触发一次事件，就是当文件拖拽到指定的元素的时候，如果不离开只会发生一次事件
ondragover 如果元素拖拽到指定的位置的时候会一直不停的触发事件
ondrop 只会触发一次事件是当文件拖拽到指定位置的时候并且放下去的时候，相当于mouseup事件
ondragenter->ondragover->ondrop
ondragleave 只会触发一次事件当元素离开有效拖放目标时运行脚本 out
*/ var box=document.getElementById("box"); document.ondragenter=function(e){
e.preventDefault();
console.log(3); } document.ondrop=document.ondragover=function(e){
e.preventDefault();
console.log(5);
// alert(2);
return ;
}
box.ondragover=function(e){
e.preventDefault();
console.log(5);
this.className='active';
}
box.ondrop=function(e){
this.className='';
e.preventDefault();
console.log(7);
//e.dataTransfer文件的parent对象 文件对象还要点e.dataTransfer.files[0] 第一个文件对象
console.log(e.dataTransfer);
/* ajax({
method:'post', //默认是get方式可选
url:'06.php', //必填
type:"file", //如果是设置文件则是上传文件，不设置默认是发送数据 //可选
//name:"file",//如果是设置了文件上传那么必须要填入表单设定的name
Ofile:e.dataTransfer, //如果是文件上传则（必填）需要穿一个文件对象过来，
loading:function(readyState){/*alert(readyState) }, //可选
success:function(dada){/*alert(dada); } //服务器响应函数必填
});*/
$.ajax({
url:'06.php', //必填
fileObject:e.dataTransfer,
dataType:'file'
}) return ;
} box.ondragleave =function(e){
this.className=' ';
e.preventDefault();
console.log(4);
return ;
}
</script>
</body>
</html>