![](https://img-blog.csdnimg.cn/2019091813595558.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
jQuery
jQuery记录。
在线小白www
这个作者很懒,什么都没留下…
展开
-
限制上传图片的宽高
js上传图片原创 2022-07-27 15:45:26 · 338 阅读 · 0 评论 -
js拼接html时,onclick传参问题
3.使用JSON.stringify()将对象转换成json字符串,但是依然会报错unexpectedendofinput,该错误是因为json字符串的双引号和onclick的双引号冲突,需要将json字符串转成单引号字符串。如果直接使用对象,页面渲染的时候,onclick的参数为([onjectObject])。对象是不能拼接的,拼接的必须是字符串,因此需要将对象转变为字符串。1.将对象拆开,只穿需要传递的参数(参考第二点,需要转义)...转载 2022-07-20 16:40:24 · 1763 阅读 · 1 评论 -
FormData用法详解
转载:FormData用法详解_zqian1994的博客-CSDN博客_formdata转载 2022-07-05 14:34:13 · 162 阅读 · 0 评论 -
关于clipboard.js 的使用,完成文本的复制
clipboard.js 主要用来对节点内的文本完成复制。支持原生js的调用虽然是用的原生js,但是类名传递依然可以使用“.btn”这种方式,id名同理。问题:1. 点击多次时,复制功能重复调用多次 这是因为调用后没有销毁实例,需要再调用clipboard.destory()销毁实例2. vue首次点击时需要点击两次才能复制成功 在vue中使用clipboard.js,需要点击两次才能复制成功的问题_MilkyMoon的博客-CSDN博客......原创 2022-06-08 18:36:28 · 836 阅读 · 0 评论 -
script标签中的async和defer
转载:图解 script 标签中的 async 和 defer 属性 - 掘金在html页面中通常会出现以下几种script,那他们有什么区别呢?<script scr='......'></script><script scr='......' async></script><script scr='......' defer></script>1. script浏览器在解析html的时候,如果遇到一个没有任何属转载 2022-05-26 11:21:00 · 315 阅读 · 0 评论 -
实时监听input type=radio的值
<div class="test"> <label for="radio_1"><input type="radio" value="radio_1" id="radio_1">radio_1</label> <label for="radio_2"><input type="radio" value="radio_2" id="radio_2">radio_2</label> </divra...原创 2022-04-15 10:55:04 · 1014 阅读 · 0 评论 -
window.location.href
location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一个非常有意义的事情。很多人都喜欢收藏网页,以便于以后的浏览。不过对于Ajax页面来说的话,一般用一个页面来处理所有的事务,也就是说,如果你浏览到一个Aj转载 2022-03-11 11:27:07 · 3930 阅读 · 0 评论 -
检测鼠标上滑还是下滑
$(function () { var scrollFunc = function (e) { e = e || window.event; var t1; var t2; if (e.wheelDelta) {//IE/Opera/Chrome t1 = e.wheelDelta; if (t1 > 0) { console.log("鼠标上划") ..原创 2022-02-10 10:17:45 · 579 阅读 · 0 评论 -
获取、设置元素的属性值
jqueryvar f1 = $(this).data('id');var f2 = $(this).attr('data-id');jsvar f2 = document.getElementById('fun').dataset.id //原创 2022-02-08 17:08:00 · 587 阅读 · 0 评论 -
字体图标和精灵图的区别
css雪碧图(精灵图)与字体图标的介绍以及对比_JHCan333的博客-CSDN博客css雪碧图(精灵图)与字体图标的介绍以及对比设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这样的话,就会导致请求数量太多,造成资源浪费,以及访问速度变慢。碰到这样的情况,可以使用两种方式解决这种问题:CSS雪碧图以及字体图标。但是这两种方式也都有不同的适用场景,需要根据实际需求来做取舍。...https://blog.c转载 2022-01-20 11:47:34 · 134 阅读 · 0 评论 -
关于CDN
引用CDN内容的方法总结 - 高亮uncle - 博客园1.1.1 摘要 CDN相信大家都听说过,甚至使用过相关的技术,也许有些人会回答“没有听说过和使用过该技术”,真的是这样吗? CDN的全称是Content Delivery Network,即内容分发https://www.cnblogs.com/gluncle/p/7109576.html...转载 2022-01-20 11:38:36 · 65 阅读 · 0 评论 -
*.js 和 *.min.js 的区别
*.js是完整的js文件,体积较大,多用于阅读学习源码和修改源码,一般不用于上线项目。*.min.js是由完整版压缩后的js文件,功能与完整版完全一样,只是将其中的空白字符、注释、空行等与逻辑无关的内容删掉,并进行一些优化。这个版本一般用于线上项目使用。文件体积较小,可降低网站流浪,提升访问速度,防止他人窃取js源码。...原创 2022-01-05 11:26:45 · 770 阅读 · 0 评论 -
简单复现鼠标跟随事件 - - - 背景图随鼠标的移动而移动
效果:原理:获取鼠标的相对位移,将获得的相对位移赋值到背景图上 $('.wrap').mousemove(function (e) { var x = (e.offsetX * -1 / 25), y = (e.offsetY * -1 / 25); // $(this).css('background-position', x + 'px ' + y + 'px'); $(this).css('transform', 'translate3d(' +原创 2022-01-04 14:14:18 · 935 阅读 · 0 评论 -
js判断页面是否到达底部
判断标准:窗口的高度 + 滚动条的距离 >= 页面的整体高度1、jswindow.addEventLister("scroll",funciton(){ //窗口高度 var windowHeight = document.documentElement.Height || document.body.height; //滚动高度 var scrollTop = document.documentElement.scrollTop || docu.原创 2021-12-30 10:30:25 · 2983 阅读 · 2 评论 -
js中void 0和undefined的区别
void 0 与 undefined的区别_juzipchy的博客-CSDN博客在看《你不知道的JavaScript》的时候,看到了这个么一段代码.function foo() { var a = arguments[0] !== (void 0 ) ? arguments[0] : 2; return a; }void 0 返回undefined,我们都知道的,但是为什么不直接...https://blog.csdn.net/juzipchy/article/details/86367565...转载 2021-12-28 11:59:28 · 93 阅读 · 0 评论 -
js中使用void(0)
javascript中void(0);用法及常见问题解析_程晨-CSDN博客_javascript:void转载这篇文章使用过ajax的朋友经常会见到这样的代码:here,这里面的void是一个操作符,该操作符指定要计算一个表达式但是不返回值。javascript:void(0) 在某些情况下会有浏览器不兼容的bug。下面我们先来看下javascript:void(0) 的基础介绍及用法,然后再来看使用它会出现什么问题,该怎么解决。提示:在学习一下内容之前,你可以先通过javascript:vo...htt转载 2021-12-28 11:57:08 · 367 阅读 · 0 评论 -
表达式中的&&,||
转载:javascript中关于&& 和 || 表达式 - Zeroassetsor - 博客园转载 2021-12-23 16:09:09 · 92 阅读 · 0 评论 -
jquery合并两个对象
1. object.assignObject.assign(target,source,souce...)2. $.extend$.extend( target [, object1 ] [, objectN ] )3. lodashlodash.assign(target,source)4. 遍历赋值for (key in source) { // if (source.hasOwnProperty(key)) { // if (source.hasOwnP原创 2021-12-23 11:57:13 · 737 阅读 · 0 评论 -
hover控制同级元素样式
1. 父子关系.a:hover .b{color:red};2. 同级相邻元素.a:hover + .b{color:red};3. 同级不相邻元素.a:hover ~ .b{color:red};ps:1. 同级相邻或者不相邻都可以使用 ~;2. 这里的同级指b标签必须在a的后面,若是前面,则不起效果,使用js控制。...原创 2021-12-23 09:48:01 · 932 阅读 · 0 评论 -
js给元素添加类的方法
转载:js中给元素添加类的方法_liushilin的we-CSDN博客_js给元素添加类名一.原生js中添加类的方法1.为 <div> 元素添加一个类:document.getElementById("div").classList.add("类名");2.为 <div> 元素添加多个类:document.getElementById("div").classList.add("类名1","类名2","类名3",https://blog.csdn.转载 2021-12-22 14:13:48 · 412 阅读 · 0 评论 -
jquery动态获取两个元素之间的距离
水平距离$(".box1").offset().left - $(".box2").offset().left - $(".box1").width()垂直距离$(".box1").offset().top - $(".box2").offset().top - $(".box1").height()原创 2021-11-23 17:46:56 · 846 阅读 · 0 评论 -
js中的异步操作有哪些
1. setTimeout、setInterval2. Ajax请求一般采用异步,当然也可以设置为同步3. promise.then4. 回调函数可以理解为异步,但不是严格的异步操作5.事件监听。即监听某个事件,当事件发生时,再执行相应的操作(比如点击、mouseover等)。...原创 2021-11-19 10:18:43 · 5942 阅读 · 0 评论 -
防抖和节流
防抖和节流严格算起来属于性能优化的知识了,但实际遇到的频率相当高,如果放任不管,可能造成浏览器卡死。防抖(debounce)对于短时间内连续触发的事件(如scroll事件),防抖的含义就是让某个时间期限内,事件处理函数只执行一次。/** fn [function] 需要防抖的函数* delay [number] 毫秒,防抖期限值*/function debounce(fn,delay){ let timer = null //借助闭包 return functio..原创 2021-10-18 12:06:39 · 79 阅读 · 0 评论 -
执行上下文
1. 执行上下文每当控制器转到可执行代码时,就会进入一个执行上下文。执行上下文可以理解为当前代码的执行环境,它会形成一个作用域。JavaScript的运行环境大概分为三种:全局环境:JavaScript执行起来会首先进入该环境(全局执行上下文) 函数环境:当函数被执行调用时,会进入当前环境执行程序(函数执行上下文) eval执行上下文2.总结我们就可以对执行上下文总结一些结论了。单线程 同步执行,只有栈顶的上下文处于执行中,其他上下文需要等待 全局上下文只有唯一的一个,它在浏转载 2021-10-13 18:18:11 · 63 阅读 · 0 评论 -
js中的arguments
类数组对象:arguments众所周知,js是一门相当灵活的语言。当我们在js中调用一个函数的时候,经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做arguments的东西里。在js中,万物皆对象,甚至数组字符串函数都是对象。所以这个叫做arguments的东西也是个对象,而且是一个特殊的对象,它的属性名是按照传入参数的序列来的,第一个参数的属性名是“0”,第二个参数的属性名是“1”,以此类推,并且他还有length属性,存储的是当前传入函数参数的个数,很多时候我们把这种对转载 2021-10-12 15:03:59 · 91 阅读 · 0 评论 -
跨域问题解决
掘金https://juejin.cn/post/7017614708832206878#comment转载 2021-10-12 11:02:38 · 1333 阅读 · 0 评论 -
js--继承
1. 原型链继承将父类的实例作为子类的原型function Parent(){ this.isShow=ture; this.info={ name:"hh", age:14, }}Parent.prototype.getInfo=function(){ console.log(this.isShow); console.log(this.info); }function Child(){};Child.pr转载 2021-10-11 16:42:02 · 575 阅读 · 0 评论 -
input禁止输入的方法
1. readonly规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本。<input type="text" value="test" readonly="readonly">2. disabled被禁用的 input 元素可复制,不能接收焦点,设置后文字的颜色会变成灰色。无法与 <input type="hidden"> 一起使用。<input type="text" value="tes.转载 2021-10-08 15:27:08 · 532 阅读 · 0 评论 -
js实现下载功能
1. a标签<a href="../../static/xxx.xlsx" download="xxx.xlsx">下载</a>直接点击可以下载,需要注意的是download属性,当不加download属性时,如果文件格式为txt、pdf、jpg等浏览器支持直接打开的文件格式,那么不会下载,而是浏览器直接打开;添加download属性之后,就会下载,并且下载文件默认命名为你download属性的值。(参考: https://blog.csdn.net/jsnancy/art转载 2021-10-08 14:59:11 · 509 阅读 · 0 评论 -
js实现页面跳转的几种方式
1. window.location.href直接跳转无参数window.location.href = "test.html";跳转有参数window.location.href = "test.jsp?id=" + testId;2. 返回上一层window.history.back(-1) 直接返回当前页的上一页,数据全部消失,是个新页面;window.history.go(-1)返回当前页的上一页,不过表单里的数据全部还在;windo...原创 2021-10-08 14:33:58 · 1136 阅读 · 0 评论 -
验证码的作用及原理
验证码的发展历程从互联网诞生前期,互联网是没有验证码的。在论坛博客上发帖子,只要敲一下回车键按“发表”就可以了。然而,有白客就有黑客,随着计算机程序的愈发发展,黑客十分猖狂。他们编写了一种能够大量、重复编写信息的程序,伪装成人类用户,肆无忌惮的在网络上倾倒大量的、无意义的“僵尸”信息,垃圾邮件、垃圾广告、垃圾评论到处飞。更编写了模仿登录、恶意破解代码、刷票等恶意程序。这严重影响了互联网的正常运行,导致体验效果很差。 以受影响最大的电子邮件的提供商为例:用户每天收到数以千计的垃圾邮件,严重影响工作效率。.转载 2021-09-29 17:25:54 · 2162 阅读 · 0 评论 -
手机端页面自适应布局---rem
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clien.转载 2021-09-27 11:58:46 · 552 阅读 · 0 评论 -
移动端判断屏幕是否旋转
1.CSS判断横屏竖屏写在同一个CSS中,@media screen and (orientation: portrait) { /*竖屏 css*/} @media screen and (orientation: landscape) { /*横屏 css*/}分开写在2个CSS中,竖屏<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="ex...原创 2021-09-26 18:05:48 · 332 阅读 · 0 评论 -
浏览器预览pdf
转载:html中前端页面预览pdf文档的6种方法 - 简书1. a标签这种方法就需要人为点击链接才会显示pdf文件内容,是显示还是下载就决定于浏览器的解释方法了。<a href="pdf文件地址" target="_blank">预览pdf文件</a>注意:想通过这样方式预览pdf文件,需要保证pdf上传的时候其文件类型content-type一定要设置为pdf格式(即content-type=“application/pdf”),不然点击链接的时候,不能正常预览转载 2021-09-26 11:13:27 · 3340 阅读 · 0 评论 -
移动端点击延迟300ms和点击穿透问题
移动端300ms点击延迟和点击穿透问题 - 简书一、移动端300ms点击延迟 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。也就是说,当我们点击页面的时候移动端浏览器并...https://www.jianshu.com/p/6e2b68a93c88移动端点击(click)事件延迟问题的解决方法_ruanhongbiao的专栏-CSDN博客_移动端点击延迟大多数基于触摸的浏览器设备,在点击时都会有个 300ms 的事件触发等待时间,做过 web app转载 2021-09-26 10:08:57 · 91 阅读 · 0 评论 -
js event事件
转载:https://segmentfault.com/a/1190000016106775什么是事件对象?在触发DOM上的某个事件时,会产生一个事件对象event。这个对象包含着所有与事件有关的信息。包括导致事件的元素,事件的类型以及其他特定事件相关的信息。比如:鼠标操作导致的事件对象中,会包含鼠标位置的信息。键盘操作导致的事件对象中,会包含按下键的有关信息。下面是点击document时event包含的属性event对象的兼容写法event对象不能兼容所有的浏览器,我.转载 2021-09-24 11:09:32 · 219 阅读 · 0 评论 -
js点击非目标区域,目标区域收起
$(document).click(funciton(){ $(".con").css({ "display": "none" });})$(".test").clikc(function(e){ e.stopPropagation(); //阻止冒泡 $(".con").css({ "display": "block" });})原创 2021-09-23 15:13:06 · 399 阅读 · 0 评论 -
$(window).scrollTop()和$(document).scrollTop()
首先,你要知道window对象和document对象的区别,window对象属于最高级别级别对象,没有比window还高的对象了。而document对象属于window对象,即有window.document。$(window).scrollTop()获取的是window对象的滚动距离。$(document).scrollTop()获取的是document对象的滚动距离。区别:这两种方法几乎没有什么区别,都是返回滚动距离。要说区别的话,$(window).scrollTop()能被更原创 2021-09-23 09:59:47 · 956 阅读 · 0 评论 -
获取页面滚动距离pageYOffset、scrollY、scrollTop
在获取页面滚动距离的高度时候,往往有不同的获取方式,而且不同的属性浏览器支持稍有差别:pageYOffset:属window对象,IE9+、Firefox、Chrome、Opera均支持该方式获取页面滚动敢赌值,并且会忽略DOCTYPE定义规则。window.pageYOffsetscrollY:属于window对象,Firefox、Chrome、Opera均支持,IE不支持,忽略DOCTYPE定义规则。window.scrollY页面如果未定义DOCTYPE文档头,所有浏览器都支持转载 2021-09-23 09:45:09 · 5662 阅读 · 2 评论 -
offset().top和offsetTop
获取元素距离上方的位置。区别:offset().top属于jquery方法offsetTop属于js方法。没什么区别原创 2021-09-22 16:29:40 · 568 阅读 · 1 评论