JQuery
Kingsaj
这个作者很懒,什么都没留下…
展开
-
调用百度地图api 去掉地图左下角LOGO或文字
// 去掉文字那行,添加CSS即可.BMap_cpyCtrl { display:none;}// 去掉地图那行,添加CSS即可.anchorBL{ display:none;}原创 2021-11-22 15:01:44 · 1277 阅读 · 0 评论 -
百度地图使用
官网效果: <div class="aboutMap"> <div id="container"></div> </div>// 引入地图依赖 <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&a原创 2021-11-22 12:00:45 · 306 阅读 · 0 评论 -
jq实现返回顶部效果
// 点击按钮,返回顶部function topFunction() { $("body").animate({ "scrollTop": 0 },300); return; document.body.scrollTop = 0; document.documentElement.scrollTop = 0;}$('#gotop').on('click',topFunction);原创 2021-08-15 09:11:10 · 252 阅读 · 0 评论 -
github上比较好的项目模板
react-boilerplate 地址ant-design-pro 地址vue-element-admin 地址react-starter-kit 地址create-react-app 地址原创 2021-07-02 15:01:06 · 502 阅读 · 0 评论 -
前端项目目录结构
结构一├── build # 构建相关├── mock # 项目mock 模拟数据├── plop-templates # 基本模板├── public # 静态资源│ │── favicon.ico # favicon图标│ └── index.html # html模板├── src .原创 2021-07-02 14:44:12 · 3986 阅读 · 2 评论 -
jq -- 触发a标签的href跳转
<li class="active"> <a href="index.html"> <span>首页</span> </a> </li>> $("#link span").trigger("click");或$("#link span").click();注意: 不能直接触发a的跳转事...原创 2021-06-26 23:25:13 · 779 阅读 · 0 评论 -
tab选项卡
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选项卡切换</title> <style> body { .原创 2021-06-11 18:00:42 · 76 阅读 · 0 评论 -
swiper -- 修改分页器样式
#trendsSwiper{ .swiper-pagination-bullet-active,.swiper-pagination-bullet { width:48px; height: 4px; border-radius: 2px; background-color: #000000; opacity: .18; } .swip...原创 2021-05-28 17:40:19 · 1127 阅读 · 0 评论 -
文章收藏按钮
效果: $('.collect').on('click', function () { // 获取img元素 var _el = $(this).find('img'); // 收藏状态图片名 var _shoucang = 'shoucang'; // 非收藏状态名字 var _quxiao = 'quxiao'; consol原创 2021-05-26 22:37:59 · 130 阅读 · 0 评论 -
bootstarp treeview 插件回显已选中的数据
// 初始化 let activeNodeData = null // 选中的节点数据 let current_name = null // 节点名称 let tree = $('#tree').treeview({ color: '#428bca', showBorder: false, // levels: _levels, expandIcon: 'bi bi-chevron-righ.原创 2021-03-09 16:50:51 · 511 阅读 · 0 评论 -
jQuery 分页插件 Pagination plugin
twbsPagination 传送门原创 2021-02-21 09:13:29 · 228 阅读 · 0 评论 -
Promise解读
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Promise解读&原创 2021-02-19 11:42:34 · 73 阅读 · 0 评论 -
jQuery 设置checkbox 选中,未选中的方法(全选,非全选功能)
/* checkbox全选非全选状态,改变 */ var setCheckAllState = function() { /* 获取所有input节点,过滤(not()方法)全选按钮(#checkAll), 过滤(not()方法)选中的checkbox的长度 */ let unCheckLength = wrap.find('input').not('#checkAll').not("input:checked").length; /* 如不为真是(0...原创 2021-02-19 10:44:49 · 1659 阅读 · 0 评论 -
jQuery 遍历 - not() 方法
not() 从匹配元素集合中删除元素。// 从包含所有段落的集合中删除 id 为 "selected" 的段落:$("p").not("#selected")not() 使用案例原创 2021-02-18 16:18:01 · 140 阅读 · 0 评论 -
基于jquery的一款表单验证插件jquery-validate
jquery-validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。 该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。效果:官方地址...原创 2021-02-03 16:18:44 · 237 阅读 · 1 评论 -
jquery获取select标签中选中的option值及文本
$('select[name="workorderId"] option:selected')原创 2021-02-03 14:42:43 · 721 阅读 · 0 评论 -
input radio取得被选中项的value值
Jquery 获取选中值,三种方法都可以:$(‘input: radio:checked’).val();$(“input[type=‘radio’]:checked”).val();$(“input[name=‘sex’]:checked”).val();原生js获取方法<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>input radio选中状态<原创 2021-01-29 18:33:16 · 1919 阅读 · 0 评论 -
jQuery 获取第N个元素
jQuery判断当前元素是第几个元素&获取第N个元素假设有下面这样一段HTML代码: jQuery判断当前元素是第几个元素示例 jQuery获取第N个元素示例 jQuery选择器示例jQuery判断当前元素是第几个元素如果我们点击任何一个li标签,想知道当前点击的是第几个li标签,可以使用下面的代码:$(“ul li”).click(function () {var index = $(“ul li”).index(this);alert(index);})原创 2021-01-13 10:47:04 · 1806 阅读 · 0 评论 -
forEach()回显后台数据
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>forEach()回显后台数据</title> </head> <body> <div id="list"> <h4>接收人:<span val="designname">--</span></h4> &l原创 2021-01-06 16:48:06 · 390 阅读 · 0 评论 -
js 表单提交的方法
// 表单提交 #receiveOrder 是 form 的id值function addReceiveApply() { function handleSubmit() { let btn = ''; let currentEl = $('#receiveOrder').find('select[name="ordercurrentuser"] option:selected'); let n原创 2021-01-05 15:16:57 · 872 阅读 · 0 评论 -
js 验证表单 中 输入框 是否填写内容
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单提交验证</title> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.css" rel="stylesheet"> <style type="text/cs原创 2020-12-30 22:44:59 · 1018 阅读 · 1 评论 -
JQ select2 搜索下拉框
为了实现,带搜索效果的需求.选用select 2 插件.动态绑定数据生成的 select 标签,在生成完该节点之后一定要调一下! $(‘select’).select2() 方法. 不然生成的select 没有插件效果原创 2020-12-30 09:13:45 · 296 阅读 · 0 评论 -
动态生成的select框,获取数据发送请求
动态生成select框,获取数据 function submitHandler() { // 储存要发送的数据格式 [{},{}] let jsonData = []; // 拿到需要处理的 DOM节点 .inventory,循环添加数据 let listingNumber = $('.manifest_list .inventory'); for (let i =原创 2020-12-25 16:02:11 · 353 阅读 · 0 评论 -
api.js 统一封装$.ajax(axios)请求
// 1: 基础路径地址const HTTP_ROOT_PATH = 'xxxxxxxxx'// 2 : 为将来的 AJAX 请求设置默认值$.ajaxSetup({ // 发送请求前,携带token beforeSend: function(request) { // 读取到本地存储的 用户信息, 转换成对象 let userInfo = JSON.parse(localStorage.getItem('userData')) || {}; //.原创 2020-12-21 16:28:16 · 333 阅读 · 0 评论 -
jquery.ztree 插件
实现效果: 可勾选的树官网传送门1: 引入 css 样式, 以及js文件<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet" />jquery.ztree 是依赖于 jquery的<script type="text/javascript" src="jquery-1.4.2.js"></script><script th:sr原创 2020-12-15 10:44:45 · 345 阅读 · 0 评论 -
使用jquery.load 处理 HTML页面公共部分引入
HTML公用部分抽离出来使用,使后期维护起来更加方便创建一个index.html页面, 和common文件夹(用来存储公用页面部分)header.html<header class="mui-bar mui-bar-nav"> <h1 class="mui-title">头部公共部分</h1></header>footer.html<footer>底部公用内容</footer>index.html<!DOC原创 2020-12-03 16:55:11 · 1778 阅读 · 0 评论 -
JQ 实现登陆页面
效果实现思路$(function() { validateRule(); $(".i-checks").iCheck({checkboxClass:"icheckbox_square-green-login"}); $('.imgcode').click(function() { var url = ctx + "captcha/captchaImage?type=" + captchaType + "&s=" + Math.random(); $(".imgcod原创 2020-12-03 09:49:36 · 2941 阅读 · 2 评论 -
web 打印插件 Print.js
Print.js文档传送门<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>web浏览器在线打印(打印多页功能)</title> <link rel="styleshe原创 2020-11-17 08:56:45 · 547 阅读 · 0 评论 -
利用事件委托,为动态生成input元素绑定事件
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>动态生成input元素绑定事件</title> <style type="text/css"> #box-content { text-align: center; } #box-content input { margin: 11px; outl原创 2020-11-13 14:34:50 · 596 阅读 · 0 评论 -
动态生成tr标签 并获取字段
开发项目遇到的一个需求:有个 table 表单,其中有一行的要填的数据不确定,可能是很多. 提交的时候为了方便处理数据, 后台要求拼成以逗号 分割字符串,传送给后台存储.方便回显的时候处理.<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>动态生成tr标签</title> </head> <body> <tabl原创 2020-11-03 17:46:23 · 1245 阅读 · 0 评论 -
当页面一打开,自动调用搜索功能,实现方法!
如图:当这个页面打开时,需要发送ajax 获取数据渲染 下拉框(bootstrap中selectpicker下拉框),然后根据传入当前页的id值,进行数据回显 //carId 是获取的id值 setTimeout(function(){ $("#select-car").selectpicker('val', carId); seacrchData();},500)这个功能用定时器可以实现, 但是我想知道有没有其他方法可以实现该功能?...原创 2020-10-21 15:57:48 · 629 阅读 · 0 评论 -
switch 条件判断 语句
// 获取时间 进行赋值 var getTime = ''; switch ($('#input-time2').val().length) { case 4: getTime = $('#input-time2').val(); break; case 7: getTime = $('#input-time2').val().replace(/\-/g, ""); break; case 10: getTime = $('#input-time2').val(原创 2020-09-25 13:36:27 · 318 阅读 · 0 评论 -
监听输入框输入字符长度并提示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>textarea监听输入字数</title> <style> /* 设置个公共类 *原创 2020-09-23 23:08:39 · 550 阅读 · 0 评论 -
bootstrap-select 多选框使用
项目中下拉框需求:多选下拉框,带搜索功能.类似做成这样.所以选择Bootstrap-select这是官网的cdn资源拿来即用<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"><!-- Latest c原创 2020-09-15 10:15:46 · 768 阅读 · 0 评论 -
记录记录. JQuery $ajax()二次封装方法,以及目的.
//ajax get请求function ajaxGet(url, success_function, error_function) { $.ajax({ url:url, type: 'GET', dataType: 'json', success: success_function, error: error_function });}//ajax post请求function ajaxPos.原创 2020-09-09 16:28:53 · 215 阅读 · 0 评论