6小时玩转Jquery
1. 盒子模型宽度
公式:
= width > min-width ? width : min-width;
= width >max-width ? max-width : width;
注意:1.如果不设置,盒子的默认宽度就是父容器的宽度。2.中文会自动换行排列,字母不会。3.如果只设置max-with 网页宽度发生变化时中文会自动缩进排列,字母不会。
2.块级行内元素浮动
inline-block
1.如果块级行内元素浮动,比如 flot=left,谁先浮动谁先往最左排,他们的排列顺序 还是 要一行一行的排。
2.后面的那个元素如果没浮动,下面的元素排列 以后面那元素高度为准。没浮动的和下面那个相当于是一个整体
3.input和button
1.input和button 都是inline-block元素。
2.input去游览器默认边框 outline: 0; 或者border:0
3.input该怎样显示不规则时 试试这个属性box-sizing: border-box;
4.表单中的button: (Internet Explorer 的默认类型是 “button”,而其他浏览器中(包括 W3C 规范)的默认值是 “submit”)。如果不静止button的默认事件(e.preventDefault()),button点击后会触发form中的action规定的路径,而不是执行我们理想的方法。表单中执行button的代码:
//$form_add_task是form对象
$form_add_task.on("submit",function (e) {
e.preventDefault();
new_task.content= $(this).find("input[name=content]").val();
console.log("abc",new_task);
})
4.jquery 不会主动去监听页面变化,他只会监听第一次静态页面的,当页面刷新 或者删除之后。需要手动去再一次监听。比如在很多个列表的item绑定了 button事件,但是当刷新或者删除 第二次点击就没效果了
持续更新。。。。。。
3.$.Deferred();
"use strict";
function pop() {
//0.创建
var dfd= $.Deferred();
var isclick;
var timer;
$(".sure").on("click",function () {
isclick=true;
});
$(".det").on("click",function () {
isclick=false;
});
//1.循环监听,
timer = setInterval(function () {
if (isclick !== undefined) {
//2.点击了记录结果,存入dfd中
dfd.resolve(isclick);
clearInterval(timer);
$(".one").hide();
}
}, 50);
//3.把结果回掉出去
return dfd.promise();
}
//调用
pop().then(function (reslut) {
console.log(reslut);
if (reslut){
}
})
注意:1.deferred 相当于是异步的回调。比如 程序弹出个alert,alert后面的覆盖了的界面代码是不会执行的。使用deffered 后面的照常执行。 2. 好处,不用把逻辑嵌套的太深,直接在外面通过then 方法的参数判断就行了。
响应式开发一招制胜
1. ul li问题
ul{
text-align: right;
}
ul li{
display: inline-block;
}
当设置这些属性的时候 li 会排成一行,(和浮动差不多)。 但是一行的每个li中间会有一小段空格(行内元素排列都有这个问题),那是因为li 标签默认的换行符 相当于是空白,有如下解决办法:
1. ul 设置font-size:0 li设置font-size:1.2 。但是下面的间距会出现空格。
2. 把li标签的每次结束标签写在下一行
3. 给li 设置margin-left :-3px
2.webstorm快捷
1. shift+回车:光标滑到下一行 ctl+alt+回车:光标滑到上一行
2. ctl+alt+t: 包裹代码
3. + () ^ > . # [] lorem {} & :快速创建标签
4. shift+上下: 选择代码块
5. alt: 多次重复选择
6. ctl+shift:移动方法
7. shift+alt:移动单行代码
8. ctl+shift+v:多次粘贴
9. ctl+加号或者减号:折叠代码. ctl+shift+加号或者减号:全部折叠或者展开
10. ctl+m:定位标签的 范围
11. ctrl+G:定位行
Vue.js高仿饿了么外卖App
调节背景资源模糊度:
backdrop-filter:blur(10px);
//或者
filter: blur(10px);
设置文字省略:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
export default
1.在.js中引用js中才是暴露接口。
2.在.vue中相当于是自己的组件。
//第一种 这种写法只是为了验证 传过来的数据对不对
props: {
seller: {
type: Object
}
},
created() {
this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
}
//第二种
props: ['seller']
};
Sticky Footer 绝对底部
这种套路的思路是,给内容区域设置 min-height: 100%,将 footer 推到屏幕下方
然后给 footer 添加 margin-top,其值为 footer 高度的负值,就能让 footer 回到屏幕底部
html
<div class="wrap">
<div class="content">
<p>填充内容</p>
</div>
</div>
<div class="footer">
<p>这是页脚</p>
</div>
css
html,body {
height: 100%;
}
body > .wrap {
min-height: 100%;
}
.content {
/* padding-bottom 等于 footer 的高度 */
padding-bottom: 60px;
}
.footer {
width: 100%;
height: 60px;
/* margin-top 为 footer 高度的负值 */
margin-top: -60px;
}
需要注意的就是内容区域 content 的 padding、footer 的 height 和 margin, 必须保持一致
这种写法的兼容性非常好,实测 IE7 也能正常展示
但是如果页面的主体布局有其他兼容性问题,Sticky Footer 就需要做一些相应的修改
五角星
<template>
<div class="star" :class="starType">
<span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" key="index"></span>
</div>
</template>
<script type="text/ecmascript-6">
const LENGTH = 5;
const CLS_ON = 'on';
const CLS_HALF = 'half';
const CLS_OFF = 'off';
export default {
props: {
size: {
type: Number
},
score: {
type: Number
}
},
computed: {
starType() {
return 'star-' + this.size;
},
itemClasses() {
let result = [];
let score = Math.floor(this.score * 2) / 2;
let hasDecimal = score % 1 !== 0;
let integer = Math.floor(score);
for (let i = 0; i < integer; i++) {
result.push(CLS_ON);
}
if (hasDecimal) {
result.push(CLS_HALF);
}
while (result.length < LENGTH) {
result.push(CLS_OFF);
}
return result;
}
}
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixin.styl"
.star
font-size: 0
.star-item
display: inline-block
background-repeat: no-repeat
&.star-48
.star-item
width: 20px
height: 20px
margin-right: 22px
background-size: 20px 20px
&:last-child
margin-right: 0
&.on
bg-image('star48_on')
&.half
bg-image('star48_half')
&.off
bg-image('star48_off')
&.star-36
.star-item
width: 15px
height: 15px
margin-right: 6px
background-size: 15px 15px
&:last-child
margin-right: 0
&.on
bg-image('star36_on')
&.half
bg-image('star36_half')
&.off
bg-image('star36_off')
&.star-24
.star-item
width: 10px
height: 10px
margin-right: 3px
background-size: 10px 10px
&:last-child
margin-right: 0
&.on
bg-image('star24_on')
&.half
bg-image('star24_half')
&.off
bg-image('star24_off')
</style>
//手机的屏幕密度 来选择加载什么图片
bg-image($url)
background-image: url($url + "@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
background-image: url($url + "@3x.png")
计算属性
1.当需要监听动态的改变时用计算属性。
2.方法只是调用一次。计算属性时一直监听。
//currentIndex计算属性
:class="{'current':currentIndex===index}"
@click=”selectMenu(index,$event)”
selectMenu(index, event) {
//游览器默认事件返回,只执行自定义的
if (!event._constructed) {
return;
}
let foodList = this.$refs.foodList;
let el = foodList[index];
this.foodsScroll.scrollToElement(el, 300);
},
在create() 生命周期方法中获取数据赋值,如果要改变dom节点更新应用this.$nextTick。
vue自身的js引用用import,css引用用@import. export default是自己用的
.js 文件的 export default 才是给别人暴露的接口
fixed 是针对页面 不管他的父元素的是否设置position absolute 和relative 和父元素设置position有关
如果要给prots 和data 里面的 属性 添加 其他的没有的属性 要用Vue.set 方法
父组件 能调用子组件的方法或者计算属性 先找到子组件:this.$refs.food.show();
如果要在新的页面加载网络图片,但是大小不确定可以用:
.food .image-header{
position: relative;
width: 100%;
height: 0;
padding-top: 100%
}
.food .image-header img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
计算属性 父子组件都会影响 如果子组件用方法想改变父组件的属性 应该用$emit
音乐webapp
1.ES6现在浏览器都支持的不够, nodejs的v8同样, 即使用use strict, 很多特性也都不支持
babel可以把es6转成传统的javascript, 就是说你写es6, 然后用babel, 就可以正常在浏览器中运行了, es6是发展方向。
"babel-runtime": "^6.25.0",
"babel-polyfill": "^6.23.0"
transform-runtime只会对es6的语法进行转换,而不会对新api进行转换。
如果需要转换新api,就要引入babel-polyfill.
2.从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作。
//解决禁用300毫秒的问题
"fastclick": "^1.0.6",
文字水平铺开
.leftName{
vertical-align: top;
line-height: 30px;
height: 30px;
overflow: hidden;
margin: 20px 10px 0 20px;
display: inline-block;
text-align: justify;
width: 50px;
&::after{
content:”;
padding-left:100%;
display: inline-block;
}
}