简介
free.min.js 是一个基于 jQuery 的免费轻量级前端库,提供了一系列实用的工具函数和 CSS 样式类,可以快速帮助前端开发者提升开发效率和用户体验。
安装
使用 npm 安装 free.min.js:
npm install free.min.js
引入 free.min.js:
<script src="node_modules/free.min.js/dist/free.min.js"></script>
使用方法
DOM 操作
.addClass()
给指定元素添加一个或多个 CSS 类名。
// 添加单个类名 $('div').addClass('my-class'); // 添加多个类名 $('div').addClass('class1 class2');
.removeClass()
从指定元素中删除一个或多个 CSS 类名。
// 删除单个类名 $('div').removeClass('my-class'); // 删除多个类名 $('div').removeClass('class1 class2');
.toggleClass()
如果存在(不存在)一个类,则删除(添加)它。
// 切换单个类名 $('div').toggleClass('my-class'); // 切换多个类名 $('div').toggleClass('class1 class2');
.hasClass()
检查指定元素是否有指定的 CSS 类名。
$('div').hasClass('my-class'); // true or false
.attr()
获取或设置指定元素的属性。
// 获取属性值 let value = $('div').attr('data-id'); // 设置属性值 $('div').attr('data-id', '1');
.removeAttr()
删除指定元素的属性。
$('div').removeAttr('data-id');
.val()
获取或设置指定表单元素的值。
// 获取值 let value = $('input').val(); // 设置值 $('input').val('123');
.html()
获取或设置指定元素的 HTML 内容。
// 获取内容 let content = $('div').html(); // 设置内容 $('div').html('<p>Hello, World!</p>');
工具函数
$.ajax()
使用 AJAX 发送 HTTP 请求。
-- -------------------- ---- ------- -------- ----- ------ ---- -------------------------- ----- - --- -- -- -------- - -------------- ------- ------- -- -------- -------- ---------- - ---------------------- -- ------ -------- ------- - --------------------- -- ---展开代码
$.get()
使用 GET 方法发送 HTTP 请求。
$.get('https://api.example.com', { id: 1 }).then(function (response) { console.log(response); });
$.post()
使用 POST 方法发送 HTTP 请求。
$.post('https://api.example.com', { id: 1 }).then(function (response) { console.log(response); });
$.cookie()
获取或设置浏览器 cookie。
// 获取 cookie let value = $.cookie('my-cookie'); // 设置 cookie $.cookie('my-cookie', '123');
$.param()
将对象序列化为 URL 编码的字符串。
let data = { id: 1, name: 'John', }; let queryString = $.param(data); // id=1&name=John
CSS 样式类
.btn
按钮样式类,包含常用的按钮样式和交互效果。
<button class="btn">Click me</button>
.collapse
折叠面板样式类,用于实现可折叠内容的交互效果。
<div class="collapse"> <button class="collapse-toggle" data-target="#content">Toggle</button> <div class="collapse-content" id="content"> <p>Hello, World!</p> </div> </div>
.modal
模态框样式类,用于实现模态框的交互效果。
<div class="modal-overlay"></div> <div class="modal"> <div class="modal-content"> <h2>Hello, World!</h2> <button class="modal-close">×</button> </div> </div>
结语
通过使用 free.min.js,我们可以更快速、更方便地实现前端开发中一些常用的操作和交互效果。同时,这些工具函数和样式类的实现原理也可以帮助我们更深入地了解前端技术。希望这篇文章对大家有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066bc7967216659e24454f