前端
文章平均质量分 83
html、js、css等
避于核桃之内自誉为无疆限之君主
身处黑暗心向光明
展开
-
js事件委托及冒泡
1.什么是事件流?事件流描页面中接收事件的顺序,简单来说就是事件从捕获-->处理-->冒泡的一个过程。事件冒泡触发顺序是从下至上,事件捕获的触发顺序是从上至下。2.什么是事件委托?事件委托是利用事件冒泡的特性,将本应该注册在子元素上的处理事件注册在父元素上,触发子元素时发现其本身没有相应事件就转而触发父元素的事件。优点:减少DOM操作,提高性能。 添加的子元素会自动有相应的处理事件。缺点:事件委托基于冒泡(部分浏览器不支持)。 层级过多,冒泡过程中可能被中间层阻止.原创 2021-05-11 17:23:39 · 311 阅读 · 6 评论 -
Js 事件传递
preventDefault()、stopPropagation()、return false 之间的区别“return false”之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢? 可能在你刚开始学习关于jQuery事件处理时,看到的第一个例子就是关于如何阻止浏览器执行默认...原创 2018-12-07 00:40:16 · 3217 阅读 · 0 评论 -
apply,call,bind个人总结
直接开始,不多说了,你们能点到这个博客里来也不会是来看我扯蛋的-如果有朋友觉得我写的有问题或哪里些错的麻烦留言指点1.什么是apply,call,bind 首先他们是用来改变调用方法中this的指向的,而且他们都是Function的prototype。分别为Function.prototype.apply() Function.prototype.call() Functi...原创 2019-10-18 11:08:48 · 339 阅读 · 0 评论 -
prototype __proto__ constructor关系
首先 __proto__ constructor 是只有对象才有的属性,__proto__ constructor prototype 属于 函数的属性(函数也是对象的一种). _proto_ 指向对象属性,若对象没有属性则指向上级prototype属性,依次若不存在最后指向对象Object.prototype.constructor将对象指向函数(也就是new)prototype函数原型对象,让函数可以访问实例化对象属性,简单说就是new方法调用并共享(函数创建会自动添加p...原创 2020-06-15 20:57:23 · 177 阅读 · 0 评论 -
js继承方式
js不像java没有完善的继承方式(es6 新属性 class 才勉强算上有继承),这边说的继承方式无非就是使用各种方式调用这父类的方法和属性,类似有种分装设计模式的感觉。js继承方式原型链继承 (修改prototype会影响父类prototype属性) function f1(){ this.color='red'}function f2(){ this.width=2}f2.prototype = new f1();var ff = new f2();ff..原创 2020-06-17 21:36:17 · 133 阅读 · 0 评论 -
js 设计模式 Observer 观察者模式
<html><head> <meta charset="UTF-8" /></head><body> <button id='addNewObserver'>Add new Observer checkbox</button> <input id='mainCheckbox' type="checkbox"/> <div id='observersContainer'></.原创 2020-07-13 20:53:31 · 995 阅读 · 0 评论 -
es6学习理解及整理
es6也出来好几年了只是会用其中的一些方法属性并没有对其做过全面的理解和学习,这次讲个人学习记录下。如果有理解上有问题的麻烦大家留意私信原创 2020-11-23 20:13:17 · 187 阅读 · 0 评论 -
对于低版本浏览器video不兼容处理方法
<object height="100%" width="100%"> <param name="movie" value="../vedio/Video1.swf"> <embed src="../vedio/Video1.swf" type="application/x-shockwave-flash" width="100%...原创 2019-04-04 11:05:11 · 1319 阅读 · 0 评论 -
css 修改input chekbox样式
input[type="checkbox"]{ -webkit-appearance: none; vertical-align:middle; margin-top:0; background:#fff; border:#999 solid 1px; border-radius: 4px; min-height: 15px; mi...原创 2019-02-26 14:48:11 · 197 阅读 · 0 评论 -
css实现勾号 √
.check { position: relative; display: inline-block; width: 25px; height: 25px; background: red; border-radius: 25px;}.check::after { content: ""; position: absolute;...原创 2019-01-08 18:11:33 · 13188 阅读 · 0 评论 -
JS闭包
闭包(closure)是Javacript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。一、变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种:全局变量和局部变量。Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。js code:var n = 999;function f1(){ ...原创 2018-11-30 10:13:30 · 74 阅读 · 0 评论 -
Jquery同级样式移除添加
$('#classification span').click(function(){ $(this).addClass('now').siblings().removeClass('now');});点击 全部 会添加工作区2 的样式并且工作区2样式会移除原创 2018-11-29 15:29:34 · 2660 阅读 · 0 评论 -
css滚动条样式(目前只google支持)
#eachart_f::-webkit-scrollbar,.left_top_pm::-webkit-scrollbar { width: 5px; height: 10px;}#eachart_f::-webkit-scrollbar-button,.left_top_pm::-webkit-scrollbar-button { height: 0; wid...原创 2018-11-14 11:41:01 · 362 阅读 · 0 评论 -
jquery 类型选择器
$(":button") 选择所有按钮(包括input type="button")$(":checbox") 选择所有复选框$(":file") 选择所有文件上传输入框$(":header") 选择所有标题元素$(":header") 选择所有隐藏元素$(":image") 选择所有图片元素$(":input") 选择所有input$原创 2018-05-15 11:38:14 · 2127 阅读 · 0 评论 -
flex布局flex-grow问题
width: 100%;flex-grow: 1;-webkit-flex-grow: 1;flexflex-grow等分需要设置子控件宽度 否则内容会影响等分原创 2018-03-27 15:08:53 · 857 阅读 · 0 评论