arisu.js
v1.0.4
Published
常用JS方法集合
Readme
项目名称
常用JS方法集合
简介
包含了基础工具类，以及一些普通网站管理平台上可能需要的组件，按钮状态设置、返回顶部、局部loading、数据增删改查列表等等..，API文档访问：https://www.arisu.cn/springmvc/api/0
功能
一、基础工具类
// 1.1 基础方法
// 添加class
b("#id").addClass('test')
// 是否包含某个class
console.log(b("#id").hasClass('test'))//true
// 删除class
b("#id").removeClass('test');
// 切换class
b('.myclass').toggleClass('hi').toggleClass('hi')//加入再删除
// 选择不包含某个选择器的标签
console.log(b('div').not('.myclass')); //选择除了.myclass的div
// 判断当前选择器是否为某种标签，或者某状态如, :disabled
console.log(b('#movetest').is('button'))
console.log(b('#movetest').is(':disabled'))
// 返回祖节点，不传参数返回自己
console.log(b('.myspan').closest('div.myclass').html())
// 当前标签的下一个标签，如果是class多个标签则则包含第一个class开始到最后一个class的下一个标签
console.log(b('.myclass').next());
// 当前标签之后的所有标签，如果是class则从第一个class开始算
console.log($('.myclass').nextAll())
// 当前标签的上一个标签，如果是class多个标签则则包含倒数第二个class开始到第一个class的上一个标签
console.log(b('.myclass').prev());
// 当前标签之前的所有标签，如果是class则从最后一个class开始算
console.log($('.myclass').prevAll())
// 返回只包含第一个元素的base类
console.log($('.myclass').first());
// 查询当前对象下的元素
console.log(b('body').find('.myclass'))
// 查找父类标签
b.l(b("#id").parent());
// 查找祖先标签
b.l(b("#id").parents("div"));
// 返回兄弟节点
console.log(b("#id").siblings());
// 返回一级子元素，多个对象则为多个子元素
b.l(b(".ce-txt").children());
// 返回元素下标
console.log(b("#id").index());
// 事件绑定
b("#id").on("focus", () => {...
// 点击事件
b(".e2").click(function() { ...
// 焦点事件
b(".e2").focus(function() { ...
// 用于监听<input>、<select>和<textarea>元素值的变化
b('.myInput').change((e) => { console.log(e.currentTarget.value); })
// 主动触发事件
trigger('click', { message: 'Hello, World!' });
// 删除标签
b("#id").remove();
// data属性绑定设置
<div id="id" data-name="arisu">data测试</div>
b("#id").data('age', '99');
console.log(b("#id").data('age')); //99
console.log(b("#id").data('name')); //arisu
// attr、removeAttr页面标签属性增删
b("#id").attr('sex', 'man').removeAttr('data-name');
// 当前元素坐标，eg：{ 3633, 180 }
b("#id").offset();
// 获取滚动条位置距离页面顶部的长度
console.log(b(window).scrollTop());
// 获取当前页面真实高度
b(window).height()
// 获取或者设置输入框下拉框等标签中的值
b('.myInput').val('test').attr('data-c', 'd')
// 样式修改
b("#id").css('font-size','2rem').text('hhh')
// 获取变更dom文本信息
console.log(b("#id").text());
console.log(b("#id").text('载入中...'));
// 设置或获取html代码
console.log(b('.myclass').html('<h3>这是一个h3标签</h3>').html());
// 在当前选择器后插入代码
b('.myclass').after('<p>after加入P</p>');
// 在当前选择器内尾部加入代码
b('.myclass').append('<p>append加入P</p>').append('<span>append加入span</span>');
// 在当前选择器内起始位置加入代码
b("#id").prepend('<p>插入到内部头部</p>')
// 隐藏元素
b('.myclass').hide().css('font-size', '3rem');
// 显示元素
b('.myclass').show()
// 标签消失高度变0的关闭动画
b('.myElement').slideUp(500, function() { console.log('动画完成'); });
// 标签显示高度变复原的打开动画
b('.myElement').slideDown(500, function() { console.log('动画完成'); });
// 标签打开关闭切换
b('.myElement').slideToggle(500, function() { console.log('动画完成'); });
// 元素透明度逐渐递减变0，最后display设置为none
b('#id').fadeOut(1000, ()=>{ b.l('透明度为0后消失') })
// 1.2 页面基础方法扩展
// 全选全清，<input type="checkbox" class="myCheckbox"><input type="checkbox" class="test">
b(".myCheckbox").checkAll('.test');
// 反选
b('#be-reverse-check').checkReverse('.be-check')
// 数字特效递增动画
b("#f").numStep({...
// 背景滚动动画
b(".ce-bg-ef").scrollBG({speed: 6});
// 点击切换激活项
b(".my-btn").setActive();
// 全屏loading
b('body').loading();
b("body").loading("complete");
// 2. 静态方法
// 2.1 基础静态方法
// 参数继承覆盖
b.extend( newOptions, defaults )
// 四舍五入，保留n位
b.toRound(3.14159, 2); //3.14
// 判断变量是否为空
if(b.isNull(变量)) {
// 如果为空设置默认值
b.setDefault(data.id, 0);
// 判断变量是否为对象
console.log(b.isObject(custom));
// 获取两个数组中的相同值
b.same([1,2], [7,9,4,2,5,6,1]) //[1, 2]
// 获取两个数组中的不相同值
b.different([1,2], [7,9,4,2,5,6,1]) //[7, 9, 4, 5, 6]
// 判断字符串是否为html标签，如<li></li><div></div><img/>返回true
console.log(b.isHtmlTag('<img />')); // true
// 允许插件扩展plugin静态方法
// 普通方法
function test(p1, p2) { console.log(this, p1, p2) } //Base... 3 4
Base.plugin('test', test);
b(".myclass").test(3,4)
// 插件，支持扩展插件，声明的插件或者方法调用不方便：new Base("#id").myPlugin()，直接使用b['test'] = test;绑定
+function(b) {
function myPlugin(options) {
this.each((element) => { b.l(element); });
return this;
}
b.fn.myPlugin = myPlugin;
}(Base);
// ajax异步请求
b.ajax({ url: "/data.json", success: (data) => { b.l(data) } })
// 2.2 页面常用方法
// 获取URL中的参数，rg: ..url?name=arisu
b.getParam("name"); //arisu
// 页面内缓慢移动，样式：html { scroll-behavior: smooth; }
b("#movetest").click((e) => { b.move("#id"); });
//字符串复杂度验证，表单验证
b.strValidation('abc123#', 3, 12);//8
// b.keys 常用键盘按钮
b.keys.enter //回车
// 常用快捷键事件绑定
b.hotkey(b.keys.enter, () => { b.l('你点击了enter') })
b.hotkey('Delete', () => { b.l('你点击了Delete') }) //b.keys没有预制的可以直接填键盘KEY
// 设置cookie
b.setCookie('username', 'JohnDoe');
// 获取cookie
console.log(b.getCookie('username')); // 输出: JohnDoe
// 删除cookie
b.removeCookie('username'); //b.getCookie('username')为null
// 数据库菜单数据生成ul列表树
const html = b.menu(data.trees, true); b('#nav-accordion').html(html) //<ul class="ce-accordion" id="nav-accordion"></ul>
// 数据库普通的数据列表转换成有层次的数组
b.l(b.menu2Tree(data.trees, 1, 1));
// 包含搜索按钮删除按钮的搜索框
b.search(function(txt) { if (txt) console.log(txt); });// 输入框文本
// 3. 其他常用方法、原生JS方法重写等
// 时间格式化
new Date().format("yyyy-MM-dd hh:mm:ss")//'2024-06-10 10:47:06'
// 数组根据下标删除扩展，返回执行完数组长度
['a', 'b', 'c', 'd'].remove(-1);//删除最后一个元素返回3，数组为['a', 'b', 'c']
// 数组删除重复元素
[1, 2, 3, 1].unique() //[1, 2, 3]二、常用JS插件组件
//使用范例
import b, * as u from 'ilib/utils'
let sf = new u.SubmitFlag(".e2")
or
import b, { SubmitFlag } from 'ilib/utils'
let sf = new SubmitFlag(".e2")
1. SubmitFlag防用户多次点击：new u.SubmitFlag(".e2")
2. 底部按钮快速移动到顶部：new u.GoTop({
3. 数字增加减少，购物数量控制：new u.ItemCount({
4. niceSelect自定义下拉框：new u.NiceSelect('#ns2')
5. 按钮动画：new u.BtnEf(".bn-btn-5")
6. 局部loading动画：new u.AeLoader()...
7. 分页：new u.IPagination({ target: '#ipagination'...
8. 列表查询分页封装插件：const ilist = new u.IList({ target: '#test-list' ..
9. 手风琴导航菜单：new u.IAccordion({ speed: 300, showCount: true });
10. 弹框搜索面板：new u.PopoverSearch('#ipopover', {
11. 文字切换动画特效：new u.Flash("#ce-flash", {
12. 绘制点线背景动画：new u.LineEffect("#canvas-warp", {
13. JS、CSS页面引入，多次引入只保留一个：const iloader = new u.ILoader();三、实际开发常用方法及模块插件扩展或初始化，需要依赖jQuery的插件建议本地安装jQuery，而不是引入全局
//使用范例
import { b, u, m } from 'ilib/main'
1. Main类，用户常用登录登出token设置获取等操作
2. handlebars模板判断表达式支持，不依赖其他框架：b.handlebars(Handlebars);
3. bootstrap 文本提示框，依赖bootstrap
<a href="#" class="me-1 js-detail"><i class="bi bi-search"></i></a>
import { Tooltip } from 'glib/bootstrap';
b.tip(Tooltip);
4. 全部隐藏bootstrap 文本提示框，依赖bootstrap
5. jquery滚屏插件owl.carousel默认参数调用，单图可直接使用https://arisu.cn/springmvc/api/5#bootstrap-carousel，依赖jQuery
<div id="carousel-image" class="owl-carousel owl-theme">
<div class="item thumbnail"><img src="//arisu.cn/file/images/res/anime/anime1470402086147.jpg"></img></div>
<div class="item thumbnail">....
b.owl($("#carousel-image"), {});
6. 消息弹框，依赖jQuery：b.al("你好，世界", 'success');
7. 确定框，依赖jQuery：
b.cf("是否确定删除该记录！", "删除", () => {
b.al("删除成功！", "success");
}, 2, "ice");
8. meanmenu导出菜单，npm安装版本有BUG，只能用本地的，依赖jQuery
9. textillate文字特效，依赖jQuery
10. jquery.form表单提交工具，依赖jQuery
11. air-datepicker时间控件，不依赖其他框架
12. niceScroll滚动条，依赖jQuery
13. validationEngine表单验证，依赖jQuery
14. validate确认是否验证通过安装
npm i arisu.js
or
<script src="/arisu.min.js"></script>使用：
npm安装使用：
import b, * as a from './arisucn'
//b包含常用工具类
//a为常用组件
let sf = new a.SubmitFlag("#id")
or
let sf = new SubmitFlag("#id")
b(#btn").click((e) => {
// sf.request();
// 或者
sf.toggle();
setTimeout(function() {
// sf.complete();
// 或者
sf.toggle();
}, 2000);
})
// ilist类演示
import 'istyle/dist/arisu.css'
import { b, u, m } from 'iscript/dist/arisu.js'
import '../css/bootstrap-icons.css'
import Handlebars from 'glib/handlebars'
import { Tooltip } from 'glib/bootstrap';
const ilist = new u.IList('#test-list', {
url: "./springmvc/news/findNews.action",
param: {},
method: "get",
sortname: "a.id",
rp: 10,
visiblePages: 5,
handlebars: Handlebars,
headerMap: { 'token': 'abc123' },
onSuccess: function(data) {
b.handlebars(Handlebars);
const tplEl = b("#tp-data-news");
const html = Handlebars.compile(tplEl.html())({
items: data.rows,
isInit: data.isInit
});
if (data.isInit)
b(".be-list-data", "#test-list").html(html);
else
b(".be-list-data-body", "#test-list").html(html);
b.tip(Tooltip);
// 测试获取列ID
// b(".ip").click(function() {
// alert("该列数据id为" + b(this).data("id"));
// })
},
onError: (e) => {
console.error(e);
}
});
b('#be-search').click(() => {
ilist.reload({
'title': b('#be-input-2').val()
})
});页面中直接引入：
<script src="/arisu.min.js"></script>
<script>
a.b.l('打印测试')//常用方法：打印
a.b('.myclass').addClass('newtest')//常用方法：新增class
let sf = new a.SubmitFlag(".e2")//SubmitFlag防用户多次点击组件
a.b(".e2").click((e) => {
// sf.request();
// 或者
sf.toggle();
setTimeout(function() {
// sf.complete();
// 或者
sf.toggle();
}, 2000);
})
</script>
// ilist类页面使用演示，样式还需要bootstrap-icons.css、arisu.css
<script src="/js/bootstrap.bundle.js"></script>
<script src="/js/handlebars.min.js"></script>
<script src="/arisu.js"></script>
<script>
const ilist = new a.u.IList('#test-list', {
url: "./springmvc/news/findNews.action",
param: {},
method: "get",
sortname: "a.id",
rp: 10,
visiblePages: 5,
handlebars: Handlebars,
headerMap: { 'token': 'abc123' },
onSuccess: function(data) {
a.b.handlebars(Handlebars);
const tplEl = a.b("#tp-data-news");
const html = Handlebars.compile(tplEl.html())({
items: data.rows,
isInit: data.isInit
});
if (data.isInit)
a.b(".be-list-data", "#test-list").html(html);
else
a.b(".be-list-data-body", "#test-list").html(html);
a.b.tip(bootstrap.Tooltip);
// 测试获取列ID
// b(".ip").click(function() {
// alert("该列数据id为" + b(this).data("id"));
// })
},
onError: (e) => {
console.error(e);
}
});
a.b('#be-search').click(() => {
ilist.reload({
'title': a.b('#be-input-2').val()
})
});
</script>联系
https://arisu.cn