![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
T型人小付
任职于某游戏公司新加坡分部,自动化运维/python全栈/IT,梦想是35岁前可以不需要通过投简历的方式换工作。
展开
-
JQuery对象获取各类节点操作详解
在前面的《JQuery的选择器和过滤器汇总》中我总结了JQ中直接获取元素的几种方式,但是在很多时候,都是某个元素的事件响应中,需要对另一个元素进行操作。这个时候除了使用id或者class这种定死的方式,还可以在事件响应的元素上做相对的查询。这一篇我们就来总结一下。文章目录操作环境父级元素子级元素兄弟元素操作环境h5内容如下<div id="container"> <div id="box1"><span id="span1"></span>&l原创 2020-09-15 00:23:39 · 641 阅读 · 0 评论 -
JQuery利用find查找子元素并修改其样式和属性
最近做项目遇到一个根据ajax结果自动更新form表单内元素的需求,涉及到JQuery关于子元素的一些操作,特意记录一下。文章目录测试环境子元素查找修改元素样式和属性测试环境html如下<div id="container"> <div id="box1"><span id="span1"></span></div> <div id="box2"><span id="span2"></span&原创 2020-09-08 12:31:33 · 9100 阅读 · 1 评论 -
利用Chrome自带debug程序解决Bootstrap下拉框JS不生效问题
今天想从Bootstrap中拷贝一段代码到自己的项目中,结果发现原封不动的官方代码,拷贝到自己本地就是不能用,记录下解决办法。文章目录问题现象问题原因解决办法问题现象官方的下拉框代码如下<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"原创 2020-08-15 16:45:45 · 576 阅读 · 0 评论 -
两种JS模拟进度条周期更新进度的方式
记录下两种进度条周期更新的实现方式,脱离具体场景,这里用随机数来表示每次的变化值。文章目录H5进度条周期更新进度实际使用场景H5进度条在H5中实现一个进度条非常方便,直接用<progress>标签即可<progress style="width: 20%; height: 30px"></progress>在没有配置value属性的情况下,进度条属于等待阶段,会有自带的动画效果。例如下面就是Chrome中的效果,蓝色的一小段回来回摆动想要显示进度,需要设置原创 2020-08-15 11:19:33 · 2136 阅读 · 0 评论 -
javascript面向对象(三):class语法详解
在本系列的前两篇《javascript面向对象(一):object基础以及构造函数详解》和《javascript面向对象(二):prototype以及继承详解》中,我们已经对JS中面向对象的基础知识了解的八九不离十了,但是其实都是为了给本系列的最后一篇做铺垫。这一篇就让我们一起学习class语法,对前面的知识进行一次升华。文章目录class语法匿名classGetter/Setter类属性this丢失class的继承重写方法重写构造函数静态属性和方法私有和受保护的属性及方法instanceofMixin原创 2020-08-06 15:17:26 · 1584 阅读 · 0 评论 -
Javascript中this指向丢失原因及解决办法详解
大家都知道JS中的this关键字通常出现在函数或者方法中,用来指向调用该函数或者方法的对象。但是在很多时候this的指向却并不总是如我们所愿,这一篇文章就一起来看看到底该如何判断this所指向的对象,同时在this指向丢失情况下如何恢复。文章目录this指向丢失多重调用以及箭头函数this指向丢失解决办法bind传递函数参数总结this指向丢失相信有过面向对象编程经验的朋友对于this的使用不会陌生,来看两个例子function Student(name){ this.name=name;原创 2020-08-04 23:54:50 · 4219 阅读 · 2 评论 -
javascript面向对象(二):prototype以及继承详解
在上一篇博客《javascript面向对象(一):object基础以及构造函数详解》中我们了解了各种在js中创建object对象的方法。但是在面向对象语言中,很少会从零创建一个对象,更多的是在现有模板的基础上进行继承和修改。这一节我们就来看看js中obejct对象的继承。文章目录简单继承this关键字for循环构造函数的继承内建prototype对简单继承的改进总结简单继承在js中,object对象有一个隐藏属性叫[[Prototype]],要么为null或者指向另一个object对象。如果其指向另一原创 2020-08-01 13:56:24 · 500 阅读 · 0 评论 -
javascript面向对象(一):object基础以及构造函数详解
或许在我们平时的项目中,js的面向对象使用的并不多。但是一旦项目变得庞大,我们可能会发现定义了越来越多结构功能相似的对象,这时候如果能引入面向对象的思想,会对项目的代码结构进行非常大的优化。追根溯源,既然说到面向对象,就先从js中的object这个对象数据类型说起。文章目录object数据类型内存清理机制this关键字构造函数和new关键字Json格式转换总结参考object数据类型和另外几种单一类型的基本数据不同,object类型用来存储一系列键值对。声明有如下两种方式去声明一个object对象原创 2020-07-04 22:35:59 · 874 阅读 · 0 评论 -
Javascript的异步原理和事件循环图文详解
做为单线程的语言,异步操作对于javascript来说是至关重要的机制,也是面试中经常会被问到的知识点。在总结了网上几位前端大牛的博客以后,我进行了大量的实际操作,将相关知识点都汇总到了这里。文章目录为什么是单线程?Javascript环境一个例子异步调用与任务队列宏任务和微任务更复杂的一个例子总结参考为什么是单线程?Javascript做为浏览器脚本语言,其主要任务就是进行DOM操作以及用户交互,这两者都需要很严格的执行顺序。所以javascript在设计之初就是单线程,某一时刻只允许其做一件事,在原创 2020-06-27 18:19:37 · 973 阅读 · 0 评论 -
JS的promise以及promise链使用详解
异步操作通常都带着回调函数以便异步动作完成时操作,这种设计本身没什么问题,但是一旦出现了异步的嵌套就会让人陷入回调地狱,层层嵌套的操作让人看着眼花缭乱。Promise结构的出现就是专门帮助我们解决这个烦恼的,这一节我们就来看看promise的用法以及promise链。文章目录Promise的基本结构异步操作部分消费者thencatchfinallyPromise链返回promise对象总结参考Promise的基本结构首先必须要理解,promise并不是一个具体的异步操作(例如Ajax或者setTime原创 2020-06-26 19:27:31 · 1630 阅读 · 0 评论 -
JS中的var,let,const的区别和使用
在ES5中,只能通过var来声明变量,而且对变量作用域的规定不是很清晰,这带来了很多问题。于是在ES6中引入了let和const来改进var,这一节我们来用实例看看这三者在声明变量时候的一些区别。文章目录varletconstvar用var来声明一个变量是很简单的,不过var声明的变量只有两种作用域,全局或者函数内。例如下面这段代码var a = 'xiaofu';console.log(a);function test(){ var a = 'zhangsan'; console.lo原创 2020-06-24 22:09:53 · 354 阅读 · 0 评论 -
【WebRTC 02】从摄像头获取视频以及切换分辨率和视频源
上一节中我们已经搭建出了用于操作的环境,这一节我们要实现的一个小目标,就是将电脑摄像头拍到的内容实时显示到网页上。同时我们一起学习下原理,并做一些小拓展。文章目录操作环境实现效果几个概念HTML5中的Audio和Video APIsrc和srcObject属性MediaStream对象实现原理扩展视频分辨率切换视频源切换总结参考操作环境效果展示: Chrome 83IDE: Hbuilder X实现效果这一节的完整代码可以在上一节下载的step-01目录中找到。修改index.html内容原创 2020-06-22 16:57:32 · 5786 阅读 · 0 评论 -
【WebRTC 01】基本概念及环境搭建
公司最近准备做一个跟直播比较类似的产品,需要获取用户的桌面和摄像头内容。做了一些功课,最后选择WebRTC这个Google维护的项目进行二次开发。刚好Google官方给了很好的培训材料,代码比较新,于是结合自身的实际操作,记录下这个学习过程。我是T型人小付,一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我,如果有问题欢迎在底下的评论区交流,谢谢。文章目录什么是WebRTC什么是Signaling什么是STUN和TURNWebRTC安全吗搭建环境参考什么是WebRTCWebRTC原创 2020-06-19 18:31:01 · 392 阅读 · 0 评论 -
JQuery中ajax操作和跨站访问详解(后端Django版本)
最近在学习JQuery中的AJAX操作,操作本身比较简单,主要是遇到了跨站访问的一些问题,这里详细记录一下原理和解决思路。文章目录Ajax操作`$.ajax()``$.get()``$.post()`实际操作浏览器同源策略跨域操作CORSJSONP总结Ajax操作Ajax是一种异步请求服务器数据的技术,可以实现在前端不加载整个网页的情况下更新网页的部分内容。原生的Ajax这里就不讨论了,直接用JQuery,简单而且兼容性强。其中最常用的就是下面的3中方法了$.ajax()$.ajax({name:原创 2020-06-18 12:09:51 · 624 阅读 · 0 评论 -
JQuery中元素操作和事件响应汇总
这里记录一下JQuery中对元素的一些基本操作以及事件响应,便于以后查找。我是T型人小付,一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我,如果有问题欢迎在底下的评论区交流,谢谢。文章目录赋值和获取值创建标签插入标签删除标签克隆标签替换标签遍历标签修改css事件响应页面加载事件事件绑定的几种方式事件的移除手动触发事件事件参数阻止冒泡和默认行为动画效果显示和隐藏淡入淡出效果滑动显示效果自定义动画赋值和获取值文本内容text()用来获取,text(value)用来设置。设置是原创 2020-06-16 13:55:04 · 418 阅读 · 0 评论 -
JQuery的选择器和过滤器汇总
这里记录一下JQuery中的常用选择器和过滤器,以及使用示例,以便查找使用。我是T型人小付,一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我,如果有问题欢迎在底下的评论区交流,谢谢。文章目录JQuery和原生JS的转换基本选择器层次选择器简单过滤器内容过滤器可见性过滤器表单对象属性过滤器子元素过滤器属性选择器表单选择器注意事项JQuery和原生JS的转换一定要注意,JQ中的方法和原生JS中完全不同,不要混淆。JQ的选择器返回的结果是一个类似数组的对象,可以通过[n]来将其中某原创 2020-06-15 10:28:24 · 720 阅读 · 0 评论 -
JS实现点击鼠标弹出自定义文字内容效果
之前看到有朋友自己搭建的博客网站,在页面任意位置点击鼠标都会弹出自定义文字,而且内容会不停变化,觉得非常炫酷,今天自己试着来实现一下这个效果。思路分析主要是对document添加一个click事件,每次点击会生成一个新标签,这个标签初始位置通过获取click的event事件来获得。之后通过一个定时器setInterval实现缓慢向上的效果,然后用另一个定时器setTimeOut在一段时间后清除掉上一个定时器并且删除添加的新标签。代码实现<!DOCTYPE html><html&g原创 2020-06-10 18:39:27 · 1807 阅读 · 0 评论 -
JS实现两个键盘按键同时触发的事件
做为《JS的事件处理详解》中的一个进阶练习,这一节实现两个键盘按键一起按下的时候,JS能同时响应,而不只是后按下的那个。改进前改进前代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <script src="js/test.js" type="text/javascript" charset="utf-8"></script> <title&g原创 2020-06-10 13:39:37 · 6334 阅读 · 5 评论 -
JS的事件处理详解
事件就是用户的某个动作,事件处理就是一个用来处理该动作的函数。这一节我们一起来看看JS中的事件处理。文章目录添加事件处理的三种方式行内添加标签属性添加添加事件监听聚焦事件单击与双击事件鼠标事件键盘事件鼠标的event事件事件流阻止冒泡阻止默认行为添加事件处理的三种方式事件是名词字符串,例如click,事件处理是函数,以on开头,例如onclick。行内添加例如<button type="button" onclick="change1()">Boom!</button>原创 2020-06-09 23:51:39 · 2676 阅读 · 0 评论 -
CSS+JS制作一个在浏览器内自由反弹的方框
做为《JS的DOM操作详解》中的一个进阶练习,制作一个可以在浏览器内自由反弹的方框。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <script src="js/test.js" type="text/javascript" charset="utf-8"></script> <title></title> </hea原创 2020-06-07 14:21:22 · 293 阅读 · 0 评论 -
JS的DOM操作详解
DOM,全称Document Object Model,文档对象模型,是通过JS操作HTML元素的关键。文章目录DOM树获取标签获取和操作标签属性获取和修改文本节点获取css样式表修改css样式表DOM树类似族谱图,h5页面中的元素也有层级关系,我们叫做DOM树,如下所以元素之间也有几种关系兄弟节点父子节点根节点知道了这些关系就方便对元素进行查找,修改,添加和删除的操作了。获取标签不管要如何操作标签,首先必须要先获取到目的标签对象。DOM中的获取标签方法都是以document.ge原创 2020-06-07 14:16:11 · 334 阅读 · 0 评论 -
JS的BOM操作详解
BOM,全称Browser Object Model,浏览器对象模型,是一个用于访问浏览器和计算机屏幕的对象集合。这一节我们来总结下JS的BOM操作。文章目录页面跳转与历史页面打开和关闭页面加载事件处理页面滚动事件处理页面尺寸变化事件处理定时器操作间歇性定时器延时定时器页面跳转与历史window.location可以操作页面跳转,window.history会记录页面访问历史。在项目根目录下创建三个h5页面,三个页面内容分别如下index.html<html> <head&g原创 2020-06-07 14:09:14 · 670 阅读 · 0 评论 -
HTML通过href实现页面跳转的几种不同路径写法
Html中利用a标签实现页面跳转是很常见的操作,但是其中的href怎么填却需要小心点。绝对路径,相对路径到底有什么区别,这一节我们一起用实例来看看。我是T型人小付,一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我,如果有问题欢迎在底下的评论区交流,谢谢。文章目录测试环境跳转的三种方式同网站相对路径同网站绝对路径不同网站绝对路径测试环境不同的浏览器也许前端的表现不太一样...原创 2020-03-17 13:00:57 · 11055 阅读 · 0 评论 -
html+css实现tab菜单效果
这是千锋教育的一个练习题,将自己的思路分享出来。我是T型人小付,一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我,如果有问题欢迎在底下的评论区交流,谢谢。文章目录最终效果思路htmlcss最终效果如图所示,鼠标悬停在某个标签上,下面就会出现该标签对应的子菜单思路核心思想还是利用display:none;来进行元素的显示和隐藏。主要的难点就在于如何利用css的选择...原创 2020-03-09 21:51:16 · 932 阅读 · 0 评论 -
html+css实现水平手风琴菜单
这是千锋教育的一个练习题,老师用float的方法做出来的,这里换一种思路,不用float试试能不能弄出来。我是T型人小付,一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我,如果有问题欢迎在底下的评论区交流,谢谢。文章目录最终效果思路htmlcss最终效果最终效果如下所示,鼠标悬停在某个导航菜单的时候在其右边弹出其下的子菜单,鼠标移开子菜单消失。思路和垂直手风琴菜...原创 2020-03-09 20:24:31 · 956 阅读 · 0 评论 -
Hbuilder如何同时替换一对标签?
这篇文章记录下如何在Hbuilder中快速替换开闭一对标签。我是T型人小付,一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我,如果有问题欢迎在底下的评论区交流,谢谢。首先双击想要替换的标签的开标签或者是闭标签然后右键刚才标记的标签,选择选择相同变量,或者直接使用快捷键Ctrl+Shift+E这时想要替换的标签开标签和闭标签都被选中了然后直接输入...原创 2020-03-08 23:05:40 · 5781 阅读 · 4 评论