JQuery
草字
点点关注点点赞,私信问答先回复。
展开
-
js 监听页面滚动到底部,监听可视区域滚动到底部
全局页面body上的底部监听:window.onscroll = function(){ var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; var scr原创 2022-03-18 10:24:17 · 5301 阅读 · 2 评论 -
js 根据文章内容生成目录,锚点链接跳转,根据标题生成目录
效果图:我们都知道锚点链接的跳转是通过<a href="#t0">标题</a>和<a name="t0"></a>实现的,点击a标签后,会跳转到与当前href值(除#号)与之相同的a标签name值的位置。一般的文章都是都过h1-h5标题和p标签的富文本来实现,有些为了美观,比如csdn,只有总共1-3级标题,所以我们可以通过遍历文章内容的标题标签,进行生成对应的目录。代码:<!DOCTYPE html><html.原创 2022-03-11 14:50:58 · 1452 阅读 · 0 评论 -
js 获取元素相对于页面(可视窗口)的位置,不考虑页面滚动后
有时候,我们处理节点旋转的时候,旋转的角度计算是通过当前点击的位置和被旋转的节点中心点计算出来的。点击的位置是相对于可视窗口的,那么被旋转节点的中心点肯定是相对于可视窗口的(不然当出现滚动条的时候),不然计算的结果就会出现很多问题。代码:// 获取元素相对于页面文档的位置----------------------------------------------function getElementPos(el) { if(el.parentNode === null || el.sty原创 2022-02-24 21:46:33 · 2162 阅读 · 0 评论 -
js e.stopPropagation()阻止冒泡事件和e.preventDefault()阻止默认行为的应用场景
一、阻止冒泡事件。示例图:通常,在很多用户界面中,都经常出现如上图所示,点击列表的时候,进入这条数据的详情页面,点击编辑的时候,弹窗编辑这条数据的信息。但是呢,做完之后,发现点击编辑的时候不仅仅会打开弹窗并且还会跳转页面,也就是两个事件都触发了,这个时候我们就需要在点击编辑的时候,阻止事件继续往上派发。代码:$('.toDetail').on('click',function(){ console.log('跳转详情页面');});$('.editDetail').on('原创 2022-01-27 15:08:05 · 2632 阅读 · 0 评论 -
css 左右切换滑动效果
效果图:简单讲讲实现逻辑,先实现简单的布局,带有颜色的滑块通过伪类并定位来实现,同时设置好active的效果,也就是滑块移动到了右边花朵上面。切换效果实现后,就可以通过transition来转换变换属性的一个过渡效果。本项目使用的jquery,预览时请自行引入jquery。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n原创 2022-01-27 10:57:25 · 10750 阅读 · 4 评论 -
js,jq 两种方式派发事件,demo:上传图片
原生js通过dom的dispatchEvent函数,传入事件对象并派发事件。jquery封装好了部分逻辑,直接通过trigger方法,传入事件类型就行。所有派发的事件支持所有类型的事件。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in原创 2022-01-14 13:54:00 · 405 阅读 · 0 评论 -
css 响应式布局(媒体查询),兼容pc,ipad,移动端的布局单位
代码:.box{ width:80%;}//ipad和手机端,默认pc。@media screen and (max-width: 62rem){ //62rem对应992px,约等于1000px宽度 .newBgTitle{ width:90%; }}@media screen and (max-width: 48rem){ //48rem对应768px,约等于780px宽度 .newBgTitle{ width:原创 2022-01-10 11:26:47 · 2035 阅读 · 0 评论 -
jquery 获取某个元素距离整个页面的坐标位置
获取相对整个页面坐标的位置:var X = $('#ElementID').offset().top;var Y = $('#ElementID').offset().left;获取相对(父元素)坐标的位置:var X = $('#ElementID').position().top;var Y = $('#ElementID').position().left;原创 2022-01-07 16:40:58 · 681 阅读 · 0 评论 -
jquery 腾讯地图如何调用接口,处理跨域问题
代码: $.ajax({ url: 'https://apis.map.qq.com/ws/geocoder/v1/', type: 'GET', data:{ key:'NUMBZ-QW4RF-CLQJI-J5A77-XIRM3-26BWY', //腾讯key(我的测试key) output:'jsonp', locat原创 2021-11-30 14:13:40 · 1112 阅读 · 0 评论 -
js,jquery pc端和移动端的点击、移动和释放事件,以及点击位置。
pc端的事件,常用的:$('.btn').mousedown(function(e) { console.log("点击的位置:",e.pageX);});$('.btn').mousemove(function(e) { console.log("移动的位置:",e.pageX);});$(document).mouseup(function() { //一般不需要获取释放的位置,不过好像也没有。});移动端的事件,常用的:$('.btn')[0].ad原创 2021-10-28 11:25:20 · 910 阅读 · 0 评论 -
html art-template模板引擎渲染非对象属性的数组
官网:http://aui.github.io/art-template/zh-cn/docs/index.html安装:npm install art-template --save或直接下载引入,文件资源官网提供。引入代码:<script src="lib/template-web.js"></script>基本操作推荐文章:https://blog.csdn.net/gao_xu_520/article/details/78595318代码:js: v原创 2020-11-09 18:21:04 · 762 阅读 · 0 评论 -
art-template 输出html标签时原样输出了。如何渲染html标签(富文本内容)。
<div>{{#value}}</div>在输出变量的前面加一个“#”号就可以了,新版也可以使用“@”。原创 2020-12-12 16:22:40 · 1984 阅读 · 0 评论 -
js 不允许输入框输入负数,以及不能超过两位小数
代码:<input type="number" onkeypress="return noNumbers(event)" oninput="value=value.toString().match(/^\d+(?:\.\d{0,2})?/)"/>function noNumbers(e){ var keycode = window.event ? e.keyCode : e.which; //Internet Explorer/Chrome 浏览器使用 event.k原创 2021-07-28 20:39:59 · 1243 阅读 · 0 评论 -
js 不允许输入框输入负数,负号都不能打出来的那种(最佳效果)
网上找了很多代码,基本上都是相同的效果,就是当输入负号的时候,会把所有的内容全部置空,这种效果对用户的体验是很不好的。万一,用户不小心输错了,然后又得全部重新输入一遍。最后我去网上参考了很多关于输入框事件的知识,最后整理出来了一种最佳的方法,处理不允许输入负数,欢迎点赞评论。代码:<input type="number" onkeypress="return noNumbers(event)" />function noNumbers(e){ var keycode原创 2021-07-28 20:36:26 · 2839 阅读 · 3 评论 -
jquery 修改checked复选框的勾选状态,选中和取消选中
第一种方式:$("#order_opt_allinput").prop("checked",true);//勾选$("#order_opt_allinput").prop("checked",false);//取消勾选第二种方式:$("#order_opt_allinput").attr('checked', 'checked');//勾选$("#order_opt_allinput").removeAttr('checked');//取消勾选...原创 2021-05-24 10:48:23 · 6286 阅读 · 0 评论 -
jquery 捕获ajax的异常
代码:$.ajax({ type: 'POST', url: '/welcome/wechat/send', data: d, success: function(data) { console.log(data); }, error: function(err) { console.log(err); } });说明:如果发送请求原创 2021-03-23 10:09:02 · 224 阅读 · 0 评论 -
js 滚动到顶部(通用)
jquery代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> &原创 2021-03-16 17:01:28 · 423 阅读 · 0 评论 -
js,jquery 监听“ctrl”加“enter”键同时按下。
jquery代码:$("#chat_area").keydown(function(e){//触发事件“ctrl+enter”键if(e.ctrlKey&&e.which==13){console.log("按下ctrl+enter键");}});原创 2021-03-11 09:52:53 · 1235 阅读 · 0 评论 -
js 滚动到底部实现(第二版),可滚动区域
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"原创 2021-03-11 09:33:20 · 861 阅读 · 0 评论 -
js 拖动边框改变div的大小实现。
效果图:代码:https://download.csdn.net/download/qq_42740797/15685211原创 2021-03-09 18:26:15 · 1220 阅读 · 0 评论 -
jquery 获取下拉列表:选中的文本,选中的值,所有值。
选中的文本:$("#city").find("option:selected").text();选中的值:$("#city").val();所有值:$("#city").text();原创 2021-03-05 10:36:07 · 1446 阅读 · 1 评论 -
css 滚动到底部动画,滚动某个区域到底部(推荐版本)
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html原创 2021-03-03 18:37:25 · 2993 阅读 · 1 评论 -
js 获取pc端和移动端屏幕宽高
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth (包括边线的宽)网页可见区域高:document.body.offsetHeight (包括边线的宽)网页正文全文宽:document.body.scrollWidth网页正文全文高:document.body.scrollHeight网页被卷去的高:document.body.scrollTop原创 2021-01-23 11:03:20 · 562 阅读 · 0 评论 -
js 移动端查看图片算法,单指触摸时拖动,双指触摸时缩放。
<style> #find_picture{position:fixed;top:0;right:0;bottom:0;left:0;display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;display:box;box-pack:center;box-align:center;-webkit-user-select:none;user-select:none} #find_picture_box.原创 2021-01-22 16:26:34 · 631 阅读 · 0 评论 -
css 下拉复选框,带搜索
效果图:使用代码:<!DOCTYPE html><html lang="en"><head> <title>下拉复选框</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="tex原创 2021-01-19 11:03:02 · 663 阅读 · 0 评论 -
jquery 实现移动端拖动,旋转,缩放,删除控件(元素)功能。
效果图:代码:https://download.csdn.net/download/qq_42740797/14046488(推荐)https://download.csdn.net/download/qq_42740797/14046508原创 2021-01-08 18:10:30 · 625 阅读 · 1 评论 -
js,vue holder.js图片占位符的使用,解决设计师还没有出图
官方网址:http://holderjs.com/代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head原创 2020-12-30 13:54:43 · 558 阅读 · 0 评论 -
js html2canvas插件下载图片的使用
效果图:网络图片资源:地址(https://img-blog.csdnimg.cn/20201230105959966.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzQwNzk3,size_16,color_FFFFFF,t_70)代码:<!DOCTYPE html><html lang原创 2020-12-30 11:12:30 · 225 阅读 · 0 评论 -
js 判断图片是否加载完成
js方法:document.getElementById("#img").onload = function () { console.log("加载完成");}jquery:$(".img")[0].onload = function () { console.log("加载完成");}原创 2020-12-25 19:01:01 · 1202 阅读 · 0 评论 -
css、html、js 代码规范,某公司标准
为了提升代码阅读效率,自己做产品的公司一般都会制定一套代码规范标准,方便二次开发和维护。一、命名统一。样式命名统一:类.save_btn,id#save_btn(下划线,不要出现驼峰如:saveBtn)。变量命名统一:var save_btn_obj=1;(下划线,不要出现驼峰如:saveBtnObj)。函数命名:function saveBtnFunc()(驼峰命名)。二、样式不要有空格,不要有换行。例如:比如“flex : 1;”改成“flex:1;”。原创 2020-12-02 14:17:33 · 143 阅读 · 0 评论 -
jquery jsonp解决跨域
$.ajax({ url: 'http://localhost:8080/list', type: 'GET', dataType: "jsonp", //指定服务器返回的数据类型 success: function (res) { console.log(res); }});原创 2020-11-19 14:00:10 · 84 阅读 · 0 评论 -
jquery 给元素手动触发指定事件(如果输入了错误信息,自动聚焦到该输入框并选中文本)
需求:验证表单的时候,如果输入了错误信息,自动聚焦到该输入框,让用户不用再次鼠标点击到该输入框,提升用户体验。语法:$(selector).trigger(eventObj)selector:选择器 eventObj:要触发的事件实例:html部分:<input id="user" type="text" value="输入账号"/><button id="submit">登录</button>js部分:$("#submit").on("cl原创 2020-11-14 09:59:23 · 503 阅读 · 0 评论 -
jquery 给一个按钮添加两个点击事件,执行不同的方法(函数)
假设说需求让我们同时给“重置”按钮绑定两个事件,一个功能负责重置所有输入框和下拉选择框的值,另一个功能负责执行搜索。第一个功能做成全局的,所有页面只要绑定该类都可以执行到。第二个功能,因为每个页面的搜索参数和执行的操作不一样,所以要单独写。//$('body).on('click','.reset',function(){//重置输入框和下拉选择框});$('body).on('click','.reset',function(){//搜索});可是全局的...原创 2020-10-13 14:09:54 · 4824 阅读 · 0 评论 -
jquery 鼠标移入、元素上移动、移出(悬浮详情)
<!--悬浮详情--> <div class="suspension_div" style='z-index:98;display:none;padding:10px;position: absolute;left:1px;top:1px;background:white;border:1px solid #888;'> <div>详情</div> </div>/*移入移出*/$('body').on('mo.原创 2020-09-22 15:53:08 · 783 阅读 · 0 评论 -
jquery 选择元素时进行筛选。(筛选器)
筛选器这些都是关于序号的: $("p") 所有的p $("p:first") 第一个p $("p:last") 最后一个p $("p:eq(3)") 下标为3的p $("p:lt(3)") 下标小于3的p $("p:gt(3)") 下标大于3的p $("p:odd") 下标是奇数的p $("p:even") 下标是偶数的p特别的,eq可以单独提炼为方法,可以连续打点:$("p").eq(3).animate({"width":400},1000);等价于$("p:e原创 2020-09-21 17:59:06 · 315 阅读 · 0 评论 -
jquery 绑定滚轮滚动事件“mousewheel”
//鼠标齿轮滑动事件 $('body').on('mousewheel', '.float-menus', function () { $('.float-menus').addClass("hide"); });原创 2020-09-21 15:47:48 · 1122 阅读 · 0 评论 -
jquery 还原动画属性,操作动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.原创 2020-09-21 09:56:04 · 314 阅读 · 0 评论 -
jquery 添加类,移除类,判断类是否存在
添加类:$(selector).addClass(class);移除类:$(selector).removeClass(class)判断类:$(selector).hasClass(class);原创 2020-09-18 14:13:39 · 365 阅读 · 0 评论 -
jquery on(‘click.distribute‘)事件后面跟的东西
.distribute:命名空间,这个jQuery事件机制的命名空间,可以对事件进行集合操作,如上面代码中,如果要过去掉代码中的click事件,只需要$(‘body’).off(‘click.fileupload.data-api’)就可以了,而不会对body上其他的click事件产生影响。推荐网址:https://segmentfault.com/q/1010000002403373/a-1020000002403509...原创 2020-09-18 11:40:47 · 134 阅读 · 0 评论 -
jquery 获取父级、同级、子级元素(dom)
推荐文章:https://www.cnblogs.com/weimingxin/p/8540516.html常用:找父级:parent()找父亲节点。closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。找同级:siblings()返回兄弟姐妹节点,不分前后。找子级:children()返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点。全部:find()返回结果,不会有初始集合中的内容,比如("p"),find("span"),原创 2020-09-17 11:54:20 · 1051 阅读 · 0 评论