前端
鱼与雨于语
记录
展开
-
.attr()与.data()的区别
1.attr属性是必须写在html标签上,它属于dom属性,而data是储存于jquery对象模型上,它属于jquery对象属性,因此,它俩本质不一样;2.attr的运行机制是:$.attr()取值和赋值都是找到html标签,直接操作该标签的属性;3.data的运行机制是:页面第一次解析时,会将dom节点的attribute值存放到内存中, $.data()取值和赋值都是直接操作这个内存值,而不是dom元素;综上所述:1.避免attr和data的混合使用,以免因为数据不一样,产生bug;原创 2021-08-06 17:02:23 · 522 阅读 · 0 评论 -
swiper 使用
1、在元素display: none 时,不执行 设定参数(最低支持swiper版本 3.0.0 ) observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true//修改swiper的父元素时,自动初始化swiper原创 2021-05-26 16:50:51 · 457 阅读 · 0 评论 -
uniapp 小程序 绘制canvas
在使用canvas 绘制图片时,由于有时候图片会加载过慢,导致绘制空白,所以应该先把图片加载成功才进行绘制,使用uni.getImageInfo({Src: ‘’;success:function(res){context.drawImage(res.path,0, 0, width, height);}});在有多个图片绘制时:uni.getImageInfo({Src: ‘’;success:function(res){ context.drawI...原创 2020-07-29 13:59:51 · 1653 阅读 · 0 评论 -
移动端 字体大小设置 适配
html { font-size: 20px; font-size: 5.33334vw; }@media screen and (max-width:320px){ html { font-size: 17.06667px; }}@media screen and (min-width:750px){ html { font-size: 40px; }}body { max-width: 750px; margin: a.原创 2020-06-22 17:51:58 · 1092 阅读 · 0 评论 -
华为p30自带浏览器 样式表命名为skin.css 里面的color样式不起作用
样式表命名为skin.css华为自带浏览器 里面的color 样式不起作用,所以不能用skin.css原创 2020-06-22 17:06:45 · 314 阅读 · 0 评论 -
fis3前端工程构建配置 ..............正在学习记录
// 配置配置文件//让所有的静态资源构建后到 static 目录fis.match('*.{png,js,css}', { release: '/static/$0'});//加 md5fis.match('*.{png,js,css}', { useHash: true});//压缩文件fis.match('*.js', { // fis-optimizer-uglify-js 插件进行压缩,已内置 optimizer: fis.plugin('ug.原创 2020-06-08 15:42:12 · 238 阅读 · 0 评论 -
jquery自定义分页插件(带回调函数) 链接分享
https://www.cnblogs.com/x0216u/p/7463679.html原创 2020-06-02 17:35:29 · 155 阅读 · 0 评论 -
使用RGBA实现背景颜色半透明并兼容低版本IE浏览器
示例: background: rgba(0,0,0,.5); filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);IE渐变滤镜:filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr= #AARRGGBB,endColorStr= #AARRGGBB,grad...原创 2020-05-30 14:56:45 · 699 阅读 · 0 评论 -
css 样式 单行、多行文本溢出 显示省略号 方法
单行省略号:overflow: hidden; text-overflow:ellipsis; white-space: nowrap;多行省略号:display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;注:-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。...原创 2020-05-30 13:51:08 · 177 阅读 · 0 评论 -
阻止点击事件冒泡
//需要排除的元素 阻止点击事件冒泡$('.a').click(function(e){ e.stopPropagation();})$('body').click(function(e){ if($(e.target) !== $('.a')){ //除了元素.a 之外的空白 }})原创 2020-05-30 13:40:08 · 322 阅读 · 0 评论 -
有些浏览器底部工具栏遮挡吸底内容解决方案
苹果、UC浏览器、QQ浏览器:<!--删除苹果默认的工具栏和菜单栏--><meta name="apple-mobile-web-app-capable" content="yes"/><--UC强制全屏--><meta name="fullscreen" content="yes"><!--QQ强制全屏--><...原创 2020-04-14 17:08:25 · 3841 阅读 · 0 评论 -
网站 灰色调
如何让实现整站变灰色调 (一般用于悼念活动)html{filter: grayscale(100%);filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);}那么问题来了,IE 10...原创 2020-04-03 17:43:35 · 451 阅读 · 0 评论 -
倒计时 canvas 绘制
不能匀速 还不知道咋改<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...原创 2019-07-29 09:12:32 · 173 阅读 · 0 评论 -
flex 布局 详细总结(弹性布局)
Flex 是 Flexible Box 的缩写,意为"弹性布局"任何一个容器都可以指定为 Flex 布局块元素: display: flex; 行内元素: display: inline-flex; 如果是webkit内核浏览器,需加上-webkit- : display: -webkit-flex兼容:Chrome 21+ 、 Opera 12.1+ 、Firefox ...原创 2019-07-29 15:18:14 · 146 阅读 · 0 评论 -
textarea根据输入内容增高
$.fn.extend({ autoHeight: function(){ return this.each(function(){ var $this = $(this); console.log($this.outerHeight()); ...原创 2018-12-17 09:43:50 · 208 阅读 · 0 评论 -
利用伪类 编写 纯css 飘带效果
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-11-27 14:27:31 · 1013 阅读 · 0 评论