Solid

jquery中的$.fn的用法

 ̄綄美尐妖づ 提交于 2020-04-25 16:56:31
一、$.fn.method()=function(){}和$.fn.extend({})的比较 jQuery.fn === jQuery.prototype 1.$.fn.method()=function(){}的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法。 比如: $.fn.myExtension = function (){ var currentjQueryObject = this ; // work with currentObject return this ; // you can include this if you would like to support chaining }; $.fn.blueBorder = function (){ this .each( function (){ $( this ).css("border","solid blue 2px" ); }); return this ; }; $.fn.blueText = function (){ this .each( function (){ $( this ).css("color","blue" ); }); return this ; }; 由于有return this,所以支持链式,在调用的时候可以这样写: $

jsonp -- 百度联想词

夙愿已清 提交于 2020-04-25 05:38:03
免费的接口: http://www.bejson.com/knownjson/webInterface/ 原博: https://blog.csdn.net/jbj6568839z/article/details/81416132 1.HTML页面 <div class="wrapper"> <input type="text" class="text"> <ul></ul> </div> 2.css * { padding: 0; margin: 0; list-style: none; } .wrapper { margin: 100px; } .text { height: 40px; width: 300px; } .wrapper ul { width: 300px; border: 1px solid #ccc; height: 200px; display: none; } 3.js代码 var Oinput = document.getElementsByTagName('input')[0]; var oUl = document.getElementsByTagName('ul')[0]; Oinput.oninput = function () { // 获取输入的值 var value = this.value; var oScript = document

js中clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth属性的区别

。_饼干妹妹 提交于 2020-04-24 23:38:48
js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11、chrome 和 firefox等。 一、测试1:无滚动条时,dom对象的offsetWidth、clientWidth和scrollWidth (1)测试代码 <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>Javascript</title> <style> *{margin: 0;padding: 0 ;} body{font: 12px /2 Arial;background-color: #ccc;padding: 20px;} #b1{width: 530px;height: 320px;background- color: #fff;position: relative;} #b2{width: 220px;height: 130px;background - color: orange;border: 10px solid #085A90;padding: 10px;position: relative;left: 140px;top: 90px;} </style> </head> <body>

左右可移动的导航,简单样式

旧巷老猫 提交于 2020-04-24 22:52:28
< script type ="text/javascript" src ="jquery.min.js" ></ script > < style type ="text/css" > #topMenuDiv { margin : 0px ; padding : 0px ; line-height : 25px ; background : #F2F2F2 ; border-top : 1px solid #E5E5E5 ; border-bottom : 1px solid #E5E5E5 ; color : #333 ; } #topMenuDiv .btn-left { float : left ; width : 20px ; text-align : center ; z-index : 20 ; background : #f2f2f2 ; cursor : pointer ; border-right : solid 1px #ccc ; } #topMenuDiv .btn-right { float : right ; width : 20px ; text-align : center ; z-index : 20 ; background : #f2f2f2 ; cursor : pointer ; border-left : solid 1px #ccc

重温设计模式系列:文章发布计划

徘徊边缘 提交于 2020-04-24 16:19:59
一、起因 从《大型网站架构系列》到《架构师入门实践》,一直想把代码设计和架构的知识进行总结,但是苦于精力和能力有限,推动起来比较缓慢。也多次收到出版社的邀请,但迟迟没有动笔。偶尔也会纠结做视频还是写文章,考虑到业余写作和工作之间的平衡,还是先以文章为主吧。写出来和大家交流,算是自己的一个知识总结,如果能帮到别人会更好。经过考虑,先出一个《设计模式系列》之后可以再根据情况总结一下别的。目标定下来,早晚都要走到,早走比晚走好。 --2019-09-14 于昌平 二、背景 设计模式是软件开发中对代码结构和代码设计的经验总结,学好设计模式是提高代码质量和提升架构水平的关键要素。本系列文章旨在介绍常用的设计模式的应用和实践,部分模式会结合JDK源码,常用框架或工作场景进行实例介绍。不足之处,请批评指正,希望与大家共同进步。今天发布系列文章大纲,之后会不定期发布。 三、文章模式 为了能更好的讲解,设计模式讲解文章采用以下结构并且增加了修订记录,用于文章发布和修改记录,方便查阅使用: 修订记录 修订1: 2019-09-15 第一版大纲V1.0发布; 修订2: 1、应用场景 1.1 生活问题 1.2 业务问题 2、解决方案 2.1 传统方式 2.2 设计模式 3、模式讲解 3.1 模式定义 3.2 UML图 3.3 元素介绍 4.4 标准代码演示 4、实际应用 4.1 SDK或框架源码 4.2

原生 table css实现操作按钮固定右侧及底部滚动 IE不会卡死

对着背影说爱祢 提交于 2020-04-24 08:25:41
需求的表格比较复杂(各种合并新增删除),elementUi的table组件无法满足需求,故而写了原生table,且与其他用了table组件的表格保持一致。 贴一下简单的代码,只实现操作按钮固定右侧以及底部滚动条功能:    <!DOCTYPE html> <html lang="en"> <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>Document</title> <style> body {   width: 600px;   margin: 100px auto; } .fixedOper {   background-color: #fff;   position: absolute;   z-index: 100;   top: 0;   right: 0;   width: 104px;   height: 68px; } th, td {   border: 1px solid #000;   height: 30px; } </style> </head> <body>   <!--

4000字干货长文!从校招和社招的角度说说如何准备Java后端大厂面试?

点点圈 提交于 2020-04-24 05:38:01
插个题外话,为了写好这篇文章内容,我自己前前后后花了一周的时间来总结完善,文章内容应该适用于每一个学习 Java 的朋友!我觉得这篇文章的很多东西也是我自己写给自己的,比如从大厂招聘要求中我们能看到哪些重要的能力,我们该朝什么方向努力? 共勉! 下面的文章的部分内容在我早期文章中出现过,老读者应该一眼就可以看出来了。嘿嘿!废话不多说,开始正文! 我觉得每一个技术人的梦想大概就是能够找一份大厂的 offer,我觉得这很正常,这并不是我们的饭后谈资而是每个技术人的追求。像阿里、腾讯、美团、字节跳动、京东等等大厂的技术氛围还是要明显优于一些创业型公司 / 小公司,如果说能够在这样的公司锻炼几年,相信对自己能力的提升还是非常大的。 ps:当然,很多创业公司的锻炼也很大,不过大部分都是 CRUD 的工作,你甚至还要同时去写前端。刚毕业的时候做 CRUD 的工作没什么,如果一直这样做下去就有问题了。 不论是笔试还是面试都是有章可循的,但是,一定要不要想着如何去应付面试,糊弄面试官,这样做终究是欺骗自己。这篇文章的目的也主要想让大家知道自己应该从哪些方向去准备面试,有哪些可以提高的方向。 网上已经有很多面经了,但是我认为网上的各种面经仅仅只能作为参考,你的实际面试与之还是有一些区别的。另外如果要在网上看别人的面经的话,建议即要看别人成功的案例也要适当看看别人失败的案例。 看面经没问题

bootstrap修改勾选样式

可紊 提交于 2020-04-24 04:52:20
小对勾需要引入awesome插件。 css部分: .bella-checkbox{ position: relative; } /** 将初始的checkbox的样式改变 */ .bella-checkbox input[type="checkbox"] { opacity: 0; /*将初始的checkbox隐藏起来*/ } /** 设计新的checkbox,位置 */ .bella-checkbox label:before { content: ''; width: 18px; height: 18px; display: inline-block; border-radius: 2px; border: 1px solid #bbb; background: #fff; } /** 点击初始的checkbox,将新的checkbox关联起来 */ .bella-checkbox input[type="checkbox"]:checked + label:after { display: inline-block; font-family: 'FontAwesome'; content: "\f00c"; top: 1px; left: 0px; position: absolute; font-size: 10px; line-height: 1.7; width:

在用vue-cli4创建的vue2.x项目中通过vue-fontawesome使用fontawesome5

感情迁移 提交于 2020-04-23 08:16:51
前言 本文写于2020年1月11日,仅提供最基本的引用方法,参考fontawesome5英文官方文档和vue-fontawesome英文官方文档。 正文 在vue项目中使用fontawesome5图标,不需要引入fontawesome组件,直接引入vue-fontawesome和相关组件就可以了。 第1步:npm install 在vue项目目录中执行下面的安装命令: npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-regular-svg-icons npm i --save @fortawesome/free-brands-svg-icons npm i --save @fortawesome/vue-fontawesome 其中: @fortawesome/free-solid-svg-icons是solid风格图标 @fortawesome/free-regular-svg-ico是regular风格图标 @fortawesome/free-brands-svg-icons是品牌图标 这三个可以根据项目实际需要选择性安装,当然如果有专业版授权,也可以引入诸如

Vue.js 计算属性+ 监听属性

孤人 提交于 2020-04-21 20:24:26
Vue.js 计算属性 计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: < template > < div id ="app" > < p > {{info}} </ p > < p > {{reverse}} </ p > </ div > </ template > < script > export default { name: ' App ' , data(){ return { info: ' califonia ' } }, computed:{ reverse(){ return this .info.split( '' ).reverse().join( '' ); } } } </ script > < style scoped > </ style > computed vs methods 我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed 属性默认只有 getter ,不过在需要时你也可以提供一个