web前端常用的封装方法】的更多相关文章

1.放大镜 //页面加载完毕后执行 window.onload = function () { var oDemo = document.getElementById('demo'); var oMark = document.getElementById('mark'); var FloatBox = document.getElementById('float-box'); var SmallBox = document.getElementById("small-box"); v…
WEB前端常用网站收集整理 w3school.w3schools 前端里.脚本之家.素材家园 17素材.frontopen NEC更好的CSS方案.一些常用的JS实例 Bootstrap  官网  http://getbootstrap.com/ .中文官网  http://www.bootcss.com/ .Bootsnipp jQuery Write less,do more jQuery中文网 HTML 字符编码 HTML character codes CSS整理与优化工具 12款优秀的…
整理部分JS 控件  WEB前端常用的做成Jsp项目,方便今后直接用 最近又没时间了,等用时间了,再加入更多的, 源码下载: http://download.csdn.net/detail/liangrui1988/6742675 IE不支持全屏的,也实现了,不过这里不是很完美,有更完美的我用到了这个项目里, http://download.csdn.net/detail/liangrui1988/6742651 效果图如下:…
1.https://segmentfault.com/a/1190000008829958 (WEB前端性能优化常见方法) 2..https://blog.csdn.net/mahoking/article/details/51472697 (前端性能优化) 1. JavaScript 压缩和模块打包2. 按需加载资源3. 在使用 DOM 操作库时用上 array-ids4. 缓存5. 启用 HTTP/26. 应用性能分析7. 使用负载均衡方案8. 为了更快的启动时间考虑一下同构9. 使用索引加…
web 项目或多或少都会有涉及到什么人员职称树,菜单树,组织机构树等. 历手三四个项目有大有小,采用的树前端都是 Ztree. 有些优秀的J2EE 框架将这些常用的组件都封装起来,作为模块化的组件提供给前端,这样固然是好,开发效率会提升几倍. 客户需求是什么,组件化往上一套,几分钟就能搭建起来. 但这样程序员真的就是搬砖的了,纯纯的重复性工作. 1. Ztree 主要的特点 ZTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载 采用了 延迟加载 技术,上万节点轻松加载,即…
实际的项目网站中或多或少的或用到多选框,我选用的一款是 Bootstrap Multiselect. 官方文档:http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html 如果你英文好一点,里面有详细的介绍,多选框的设置,多选框获取值/文本,选项分组,各种各样丰富的表现方式和获取. 结合实际项目,加深技术理解,同时也方便自己后续项目中的使用. 多选框和单选框相同,实际项目中前端不可能将里面的选项很直…
做开发也有一段时间了,看了好多大神的代码,总体感觉他们写的代码简洁,好看,然而在对比下我写的代码,混乱,无序,简直不堪入目啊! 总体来说大神们的代码封装的都比较好,对一个项目要重复用到的代码他们都会封装起来,这样用起来的时候也比较方便,也不用重复的去写这段代码了! 下面是我在开发中封装到的一些经常使用的一些方法,如有写错的地方或者大家有更好的方法,还请大家给我提出来,大家一起学习!谢谢! 1.常用控件方法的封装: #import <Foundation/Foundation.h> #impor…
1.闭包封装.在这个封装方法中,所有的实例成员都共享属性和方法, 使得所有得方法和属性都私有且对象间共享 (function ($) { var Person = function(name) { return new Person.fn.init(name); } Person.fn = Person.prototype = { constructor: Person, init: function(name) { this.name = name; this.sayHello = funct…
项目中可能用到的web前端库(持续记录): 1.轻量化货币库:https://github.com/openexchangerates/accounting.js   ,美元形式.欧元形式等 2.时间库:http://momentjs.cn/,时间加减格式化等 3.HTTP接口请求库:https://github.com/axios/axios,webapi接口调用 4.canvas库:http://fabricjs.com/ 5.轻量级时间库day.js:https://github.com/…
因为有万恶的IE存在,所以当Web项目初始化并进入开发阶段时. 如果是项目经理,需要知道客户将会用什么浏览器来访问系统. 明确知道限定浏览器的情况下,你才能从容的让手下的封装必要的前端组件. 本篇文章试图从常见的上传方式和组件进行分析,仅局限与前端,至于后端需依据业务复杂度,自行拿捏实现方式,若文中有纰漏,欢迎拍砖! 1. Input type="file" 也可以性感 当然你也可以不用任何成熟的上传组件,表单提交文件,像这样: <form action="<%=…
DOM相关 判断浏览器是否支持placeholder属性 function placeholderSupport() { return 'placeholder' in document.createElement('input'); } html代码用JS动态加载进页面 <script type="text/html" id="T-pcList"> //这里面是你要放的html代码,例如放一个div的内容 </script> 把上面的js动…
文章目录 html代码用JS动态加载进页面 JS判断用户访问的是PC还是mobile或者微信浏览器 判断浏览器的简单有效方法 点击某个div区域之外,隐藏该div 如何在手机上禁止浏览器的网页滚动 改变type=file默认样式,"浏览"等字体 js使用console.time打印代码执行时间 js判断变量是否未定义的代码 js动态创建css样式添加到head内 form表单提交时设置编码格式 js 加入收藏代码 js强制手机页面横屏显示 JS,Jquery获取各种屏幕的宽度和高度 j…
web项目中日期选择器和打印这两个功能是非常常见,将使用过的日期和打印控件,在这里总结归纳,为方便后面使用. 1.Datetimepicker a.官方API:http://www.bootcss.com/p/bootstrap-datetimepicker/ 里面有详细的Datetimepicker介绍,包括支持的方法.设置的选项.事件等. b.项目集成Datetimepicker实例 这是一款依赖与bootsrap样式的控件,所以你项目中需要引入的js如下: <script src="…
分页组件几乎是一般网站都会涉及到的组件,网上有很多这样的插件,自己挑来跳去选择了这一款. 官方Demo网址:http://mricle.com/JqueryPagination 功能强大,可扩展性比较强,而且幕后的工程师一直在完善这个插件,不废话了,上干货. (模拟场景:商店网站,根据用户选择的查询条件,来查询数据库,并展示到前台) 1.JSP页面 如果你的web项目前台是基于bootstrap,js只需要引入2个js: <script path="/style/js/JqueryPagi…
一.QUnit 前端测试工具 QUnit是一个强大的JavaScript单元测试框架,该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件.Qunit是Jquery的单元测试框架,并且被广泛使用在各个项目中. 为了使用Qunit,你仅仅需要去包含2个Qunit文件在你的Html页面.Qunit 包含了qunit.js 作为运行器和测试框架,和qunit.css 文件,座位测试套件页面显示测试结果的样式. 二.Selenium 前端测试工具 Selenium 是ThoughtW…
//去掉html标签 function delHtmlTag(str) { var title = str.replace(/<[^>]+>/g, "");// 去掉所有的html标记 if (title.length > 300) { title = title.substring(0, 300); } return title; } onclick="$('#result-page').hide();$('#notice-page').show()…
1.常见的块级元素  内联元素   div -最常用的块级元素      dl - 和dt-dd 搭配使用的块级元素      form - 交互表单      h1 -h6- 大标题      hr - 水平分隔线      ol – 有序列表      p - 段落      ul - 无序列表      fieldset - 表单字段集      colgroup-col - 表单列分组元素      table-tr-td  表格及行-单元格      pre - 格式化文本      …
第一款:截图插件html2Canvas.js html2是一款强大的截图插件,只需引入js文件,依照官方给定的截图方法,就能截取对应DOM区域的内容.对于有些截图出现模糊偏移的问题,网上也有一堆解决方法,通常只需放大截图区相应的倍数即可解决. 官网地址:http://html2canvas.hertzen.com/ 第二款:全屏滚动插件fullPage.js fullPage.js能让你迅速搭建拥有场景翻页效果的网页,可配置的属性方法非常的齐全,对于一些轻量级的H5页面来说可谓是一大利器. 官网…
web 项目中总是需要弹出框,来让用户进行下一步的操作. 大到弹出另外一个页面,小到弹出提示.确认等. 经手几个项目,还是感觉 Layer 用起来比较的轻松,你能想到的 Layer 都能帮你做到. 感谢 Layer 作者贤心,Layer 官网地址:http://layer.layui.com/ 1. Layer 使用特点 Layer 具备全方位的解决方案,致力于服务各水平段的开发人员,让页面轻松地拥有丰富友好的操作体验. Layer 尽可能地在以更少的代码展现更强健的功能,注重性能的提升.易用和…
OS X系统截图:command + shift + 4 强制关闭OS X系统内无响应的程序:command + option +ESC Sublime Text 3: 显示或隐藏Side Bar:command + K +B 选中一块儿内容,按command + ctrl +G,就会将文档中所有相同的内容选中 光标放在代码行的任意位置,按command + shift + ↑,就会整行上移 光标放在代码行的任意位置,按command + shift + D,就会在当前位置复制并粘贴出一行同样的…
1. Array.filter() filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素. ES6: 2.Array.prototype.find() find() 方法返回数组中满足提供的测试函数的第一个元素的值.否则返回 undefined. 3.Array.prototype.indexOf() indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1. 找出指定元素出现的所有位置 4.Array.prototype.map()…
一. driver常用方法 二. 常用定位 三. 元素在页面不可见区域 四. iframe的操作 五. 页面弹出框:加等待时间 六. windows弹出框 七. 鼠标操作 八. 下拉列表 注意:下图中Select类引入不对 应该为  from selenium.webdriver.support.select import Select 九. 窗口切换 十. 上传操作 十一. 富文本框的处理 参见文章:<selenium对富文本框的处理> 十二. 绕过登录 参见文章:<利用ChromeO…
标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务. 页面关键词 <meta name="keywords" content="your tags" /> 每个网页应具有描述该网页内容的一组唯一的关键字. 使用人们可能会搜索,并准确描述网页上所提供信息的描述性和代表性关键字及短语.标记内容太短,则搜索引擎可能不会认为这些内容相关.另外标记不…
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;using System.Data;using System.Data.SqlClient; namespace DAL{ public class DBhelper { string dbStr = "Data Source=.;Initial Catalog=Educati…
<select id="hello"></select>   关于 select 支持的属性和响应事件,可以参照:http://www.runoob.com/jsref/dom-obj-select.html 1.jQuery获取Select选择的Text和Value 语法解释: $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkI…
webpack等工具操作 自动创建package.json文件:npm init 如何根据package.json来自动安装包:npm install npm具体安装某个组件:npm install name -g 如何手动更新npm中指定的插件版本号:修改package.json中依赖包版本,执行npm install --force 清理npm:npm cache clean --force 设置npm代理地址:npm config set registry http://registry.…
https://www.cnblogs.com/moqiutao/p/4766146.html…
cd (文件目录): 回到上一层目录 cd .. 回到根目录 cd / mkdir(新建文件夹) 下面的命令在当前目录新建了文件夹css html js 3个文件夹 mkdir css html js 下面的命令新建了myfriends文件夹,以及下级目录html css js -p参数是允许嵌套{shell可以包含多个参数} mkdir -p myfirends/{html,css,js} 生成的项目结构是这样的 ---------myfirends |-----css |-----js |-…
(1)减少http请求,尽量减少向服务器的请求数量 (2)避免重定向 (3)利用缓存:使用外联式引用CSS.JS,在实际应用中使用外部文件可以提高页面速度,因为JavaScript和CSS文件都能在浏览器中产生缓存 (4)压缩HTML.CSS.JS (5)删除JavaScript重复脚本 (6)将JavaScript脚本放在页面的底部,css文件在头部引入 (7)优化图片大小 (8)css使用<link>来代替@import (9)压缩图片,使用字体代替图片,使用雪碧图 (10)按需加载,预加…
这几次面试主要是冲着百度去的 面试1的主要问题: 笔试: 1.解释css盒子模型 2.常用选择器,以及优先级 3.B如何继承A 4.写一个闭包实例,有什么优点缺点 5.html5的心特性有哪些 6. function Animal(){ this.name="animal"; this.showName=function(){ alert(this.name) } } function Cat(){ this.name="cat"; } var animal = n…