SimJQ

——4K不到的嵌入式JS框架

SimJQ全称Simple JQuery,支持类似JQuery语法的常用DOM操作和网络请求功能。它不到4K大小,适合应用于存储空间极其有限的场景。

下载:

simJQ-2.2.js simJQ-2.2.min.js

或直接引用:
<script type="text/javascript" src="//leytton.gitee.io/simjq/releases/simJQ-2.2.min.js"></script>

关于

  • By:Leytton、LZQ
  • License:MIT
  • Blog: blog.csdn.net/leytton
  • 未列出函数说明

    函数名 说明 示例
    原则 存在多个返回值则返回数组,只有一个值则直接返回 $('#id').text()、$('.class').eq(0).text()返回一个值
    eq 获取第i个元素 $('.class').eq(i)
    first 获取第一个元素 $('.class').first()
    last 获取最后一个元素 $('.class').last()
    find 用于元素查找,支持id,class,标签等选择器 $('.class').find('.class').find('a')
    removeAttr 删除属性值 $('.class').removeAttr('class')
    css 设置/获取css样式 $('.class').css('color'[,'red']);

    示例

    eg1:文本修改/获取
    test1,SimJq~
    $('#test1').text('Hello,I\'m Leytton~');
    alert($('#test1').text());

    eg2:属性修改/获取
    test2,SimJq~
    $('#test2').attr('my_name', '不亦');
    alert($('#test2').attr('my_name'));

    eg3:Html修改/获取
    test3,SimJq~
    $('#test3').html('<a href="http://blog.csdn.net/leytton" target="_blank"><img src="img/sa.jpg" /></a<');
    alert($('#test3').html());

    eg4:隐藏/显示
    test4,SimJq~
    if('1' == $('#test4').attr('show')) {
    	$('#test4').hide();
    	$('#test4').attr('show', '0');
    } else {
    	$('#test4').show();
    	$('#test4').attr('show', '1');
    }

    eg5:获取输入值
    alert($('#test5').val());

    eg6:设置输入值
    $('#test6').val('Hello,SimJQ~');

    eg7:多选择器修改/获取第i个文本
    test7,SimJq1~
    test7,SimJq2~
    test7,SimJq3~
    $('.test7').eq(0).text('Hi,SimJQ~');
    alert($('.test7').eq(0).text());

    eg8:多选择器修改/获取多个文本
    test8,SimJq1~
    test8,SimJq2~
    test8,SimJq3~
    $('.test8').eq(1,2).text('Hi,SimJQ~');
    alert($('.test8').eq(1,2).text());

    eg9:多选择器默认修改/获取所有文本
    test9,SimJq1~
    test9,SimJq2~
    test9,SimJq3~
    $('.test9').text('Hi,SimJQ~');
    var	str='';
    str_list=$('.test9').text();
    for(var i=0;i<str_list.length;i++){
    	str+=(i+':'+str_list[i]+'\n');
    }
    alert('length:'+str_list.length+'\n'+str);

    eg10:多选择器修改/获取第i个属性
    test10,SimJq1~
    test10,SimJq2~
    test10,SimJq3~
    $('.test10').eq(0).attr('my_name', '不亦');
    alert($('.test10').eq(0).attr('my_name'));

    eg11:多选择器修改/获取多个属性
    test11,SimJq1~
    test11,SimJq2~
    test11,SimJq3~
    $('.test11').eq(1,2).attr('my_name', '不亦');
    alert($('.test11').eq(1,2).attr('my_name'));

    eg12:多选择器修改/获取所有属性
    test12,SimJq1~
    test12,SimJq2~
    test12,SimJq3~
    $('.test12').attr('my_name','不亦');
    var	str='';
    str_list=$('.test12').attr('my_name');
    for(var i=0;i<str_list.length;i++){
    	str+=(i+':'+str_list[i]+'\n');
    }
    alert('length:'+str_list.length+'\n'+str);

    eg13:多选择器修改/获取第i个Html
    test13,SimJq1~
    test13,SimJq2~
    test13,SimJq3~
    $('.test13').eq(0).html('<a href="http://blog.csdn.net/leytton" target="_blank"><img src="img/sa.jpg" /></a<');
    alert($('.test13').eq(0).html());

    eg14:多选择器修改/获取多个Html
    test13,SimJq1~
    test8,SimJq2~
    test8,SimJq3~
    $('.test14').eq(1,2).html('<a href="http://blog.csdn.net/leytton" target="_blank"><img src="img/sa.jpg" /></a<);
    alert($('.test14').eq(1,2).html());

    eg15:多选择器默认修改/获取所有Html
    test15,SimJq1~
    test15,SimJq2~
    test15,SimJq3~
    $('.test15').html('<a href="http://blog.csdn.net/leytton" target="_blank"><img src="img/sa.jpg" /></a<');
    var	str='';
    str_list=$('.test15').html();
    for(var i=0;i<str_list.length;i++){
    	str+=(i+':'+str_list[i]+'\n');
    }
    alert('length:'+str_list.length+'\n'+str);

    eg16:多选择器隐藏/显示第i个元素
    test16,SimJq1~
    test16,SimJq2~
    test16,SimJq3~
    if('0'==$('#eg16').attr('show')){
    	$('.test16').eq(0).show();
    	$('#eg16').attr('show','1');
    }else{
    	$('.test16').eq(0).hide();
    	$('#eg16').attr('show','0');
    }

    eg17:多选择器隐藏/显示第i个元素
    test17,SimJq1~
    test17,SimJq2~
    test17,SimJq3~
    if('0'==$('#eg17').attr('show')){
    	$('.test17').eq(1,2).show();
    	$('#eg17').attr('show','1');
    }else{
    	$('.test17').eq(1,2).hide();
    	$('#eg17').attr('show','0');
    }

    eg18:多选择器默认隐藏/显示所有元素
    test18,SimJq1~
    test18,SimJq2~
    test18,SimJq3~
    if('0'==$('#eg18').attr('show')){
    	$('.test18').show();
    	$('#eg18').attr('show','1');
    }else{
    	$('.test18').hide();
    	$('#eg18').attr('show','0');
    }

    eg19:单选择器获取元素对象
    test19,SimJq~
    alert('元素对象:'+$('#test19')[0]+'\n文本:'+$('#test19')[0].innerText);

    eg20:多选择器获取第1个元素对象
    test20,SimJq1~
    test20,SimJq2~
    test20,SimJq3~
    alert('元素对象:'+$('.test20')[0]+'\n文本:'+$('.test20')[0].innerText);

    eg21:多选择器获取第i个元素对象
    test21,SimJq1~
    test21,SimJq2~
    test21,SimJq3~
    alert('元素对象:'+$('.test21')[1]+'\n文本:'+$('.test21')[1].innerText);

    eg22:多选择器获取所有元素对象
    test22,SimJq1~
    test22,SimJq2~
    test22,SimJq3~
    var	str='';
    for(var i=0;i<$('.test22').length;i++){
    	str+=(i+':'+$('.test22')[i].innerText+'\n');
    }
    alert('元素对象数组:'+$('.test22')+'\n'+str);

    eg23:多选择器修改/获取第i个输入框的值
    $('.test23').eq(0).val('Hi,SimJQ~');
    alert($('.test23').eq(0).val());

    eg24:多选择器修改/获取多个输入框的值
    $('.test24').eq(1,2).val('Hi,SimJQ~');
    alert($('.test24').eq(1,2).val());

    eg25:多选择器默认修改/获取所有输入框的值
    $('.test25').val('Hi,SimJQ~');
    var	str='';
    str_list=$('.test25').val();
    for(var i=0;i<str_list.length;i++){
    	str+=(i+':'+str_list[i]+'\n');
    }
    alert('length:'+str_list.length+'\n'+str);

    eg26:单选择器实现click点击事件
    test26,SimJq~(点击)
    $('#test26').click(function() {
    	alert(this.innerText);
    });

    eg27:多选择器实现第i个元素的click点击事件
    test27,SimJq1~(点击)
    test27,SimJq2~
    test27,SimJq3~
    $('.test27').eq(0).click(function() {
    	alert(this.innerText);
    });

    eg28:多选择器实现多个元素的click点击事件
    test28,SimJq1~
    test28,SimJq2~(点击)
    test28,SimJq3~(点击)
    $('.test28').eq(1,2).click(function() {
    	alert(this.innerText);
    });

    eg29:多选择器默认实现所有元素的click点击事件
    test29,SimJq1~(点击)
    test29,SimJq2~(点击)
    test29,SimJq3~(点击)
    $('.test29').click(function() {
    	alert(this.innerText);
    });

    eg30:each函数
    test30,SimJq1~
    test30,SimJq2~
    test30,SimJq3~
    var	str='';
    var	i=0;
    $('.test30').each(function(){
    	str+=(i+':'+this.innerText+'\n');
    	i++;
    });
    alert('length:'+i+'\n'+str);
    
    //更简单的方式
    $res=$('.test30').each(function(){
    	return this.innerText;
    });
    alert($res);
    返回的是字符串数据,如果没有参数1,则返回的是$()对象

    eg31:单选择器删除元素
    test31,SimJq~
    $('#test31').remove();

    eg32:多选择器删除第i个元素
    test32,SimJq1~
    test32,SimJq2~
    test32,SimJq3~
    $('.test32').eq(0).remove();

    eg33:多选择器删除多个元素
    test33,SimJq1~
    test33,SimJq2~
    test33,SimJq3~
    $('.test33').eq(1,2).remove();

    eg34:多选择器默认删除所有元素
    test34,SimJq1~
    test34,SimJq2~
    test34,SimJq3~
    $('.test34').remove();

    eg35:单选择器在元素末尾插入内容(支持html)
    test35,SimJq~
    $('#test35').append('hello');

    eg36:多选择器在第i个元素末尾插入html内容(支持html)
    test36,SimJq1~
    test36,SimJq2~
    test36,SimJq3~
    $('.test36').eq(0).append('<a href="http://www.llqqww.com" target="_blank"<www.llqqww.com</a<');

    eg37:多选择器在多个元素末尾插入内容(支持html)
    test37,SimJq1~
    test37,SimJq2~
    test37,SimJq3~
    $('.test37').eq(1,2).append('hello');

    eg38:多选择器默认在所有元素末尾插入内容(支持html)
    test38,SimJq1~
    test38,SimJq2~
    test38,SimJq3~
    $('.test38').append('<a href="http://www.llqqww.com" target="_blank"<www.llqqww.com</a<');

    eg39:单选择器在元素开头插入内容(支持html)
    test39,SimJq~
    $('#test39').prepend('hello');

    eg40:多选择器在第i个元素开头插入html内容(支持html)
    test40,SimJq1~
    test40,SimJq2~
    test40,SimJq3~
    $('.test40').eq(0).prepend('<a href="http://www.llqqww.com" target="_blank"<www.llqqww.com</a<');

    eg41:多选择器在第i个元素开头插入内容(支持html)
    test41,SimJq1~
    test41,SimJq2~
    test41,SimJq3~
    $('.test41').eq(1,2).prepend('hello');

    eg42:多选择器默认在所有元素开头插入内容(支持html)
    test42,SimJq1~
    test42,SimJq2~
    test42,SimJq3~
    $('.test42').prepend('<a href="http://www.llqqww.com" target="_blank"<www.llqqww.com</a<');

    eg43:单选择器在添加class
    test43,SimJq~
    $('#test43').addClass('red');

    eg44:多选择器默认在第i个元素添加class
    test44,SimJq1~
    test44,SimJq2~
    test44,SimJq3~
    $('.test44').eq(0).addClass('red');

    eg45:多选择器在多个元素添加class
    test45,SimJq1~
    test45,SimJq2~
    test45,SimJq3~
    $('.test45').eq(1,2).addClass('red');

    eg46:多选择器默认在所有元素添加class
    test46,SimJq1~
    test46,SimJq2~
    test46,SimJq3~
    $('.test46').addClass('red');

    eg47:单选择器删除class
    test47,SimJq~
    $('#test47').removeClass('red');

    eg48:多选择器删除第i个元素class
    test48,SimJq1~
    test48,SimJq2~
    test48,SimJq3~
    $('.test48').eq(0).removeClass('red');

    eg49:多选择器删除多个元素class
    test49,SimJq1~
    test49,SimJq2~
    test49,SimJq3~
    $('.test49').eq(1,2).removeClass('red');

    eg50:多选择器默认所有元素删除class
    test50,SimJq1~
    test50,SimJq2~
    test50,SimJq3~
    $('.test50').removeClass('red');

    eg98:ajax get网络请求
    var url='http://www.llqqww.com/open/json/get.php';
    $.ajax({
       	method: 'GET',
       	dataType:'json',
       	url:url,
        data:{
        	name:'Leytton'
        },
        success: function (data,xhr) {
           alert(JSON.stringify(data));
        },
        error:function(data,xhr){
            alert(data);
        }
    });

    eg99:ajax post网络请求
    var url='http://www.llqqww.com/open/json/post.php';
    $.ajax({
       	method: 'POST',
       	dataType:'json',
       	url:url,
        data:{
        	name:'Leytton'
        },
        success: function (data,xhr) {
           alert(JSON.stringify(data));
        },
        error:function(data,xhr){
           alert(data);
        }
    });