在移动端html中经常出现横向/纵向滚动的效果,但是在iPhone中滚动速度很慢,感觉不流畅,有种卡卡的感觉,但是在安卓设备上没有这种感觉;

要解决这个问题很简单:

一行代码搞定

1

-webkit-overflow-scrolling : touch;

CSS 中相对长度 rem 和 em 如何区别

做为相对长度单位的俩个活宝，

都是以倍数关系定长度，只是参照物不一样，这里就事例分析两者的区别：

1，em 的参照倍数对象为其自身字体大小，font-size;如果没有向上继承；

2，rem的参照倍数对象为根元素html

white-space: pre-line;

 标签。

浮动的时候，父级的padding有效阻挡子元素的浮动

子元素设置绝对布局时，父级的padding不能阻挡子元素

弹性布局(新)

flex-direction

1

flex-direction：row | row-reverse | column | column-reverse

默认值：++row++
适用于：flex容器

flex-wrap

1

flex-wrap：nowrap | wrap | wrap-reverse

默认值：++nowrap++
适用于：flex容器

justify-content

1

justify-content：flex-start | flex-end | center | space-between | space-around

默认值：flex-start
适用于：flex容器

align-items

1

align-items：flex-start | flex-end | center | baseline | stretch

默认值：stretch
适用于：flex容器

align-content

1

align-content：flex-start | flex-end | center | space-between | space-around | stretch

默认值：stretch
适用于：多行的弹性盒模型容器

flex-flow(复合属性)

1

flex-flow：<' flex-direction '> || <' flex-wrap '>

默认值：看各分拆属性
适用于：flex容器

flex-grow

1

flex-grow：<number>

默认值：0
适用于：flex子项

取值：

：
用数值来定义扩展比率。不允许负值

flex-shrink

flex-shrink：
默认值：1
适用于：flex子项

取值：

：
用数值来定义收缩比率。不允许负值

flex-basis

1

flex-basis：<length> | <percentage> | auto | content

默认值：auto
适用于：flex子项

flex(复合属性)

1

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

默认值：看各分拆属性
适用于：flex子项

order

1

order：<integer>

默认值：0
适用于：flex子项和flex容器中的绝对定位子元素

取值：

：
用整数值来定义排列顺序，数值小的排在前面。可以为负值。

align-self

1

align-self：auto | flex-start | flex-end | center | baseline | stretch

默认值：auto
适用于：flex子项

弹性布局(旧)

display:box 或者 inline-box

box-orient

1

box-orient：horizontal | vertical | inline-axis | block-axis

默认值：horizontal
适用于：伸缩盒容器

horizontal：
设置伸缩盒对象的子元素从左到右水平排列
vertical：
设置伸缩盒对象的子元素从上到下纵向排列
inline-axis：
设置伸缩盒对象的子元素沿行轴排列
block-axis：
设置伸缩盒对象的子元素沿块轴排列

box-direction

1

box-direction：normal | reverse

默认值：normal
适用于：伸缩盒容器

取值：
normal：
设置伸缩盒对象的子元素按正常顺序排列
reverse：
反转伸缩盒对象的子元素的排列顺序

box-pack

1

box-pack：start | center | end | justify

默认值：start
适用于：伸缩盒容器

取值：
start：
设置伸缩盒对象的子元素从开始位置对齐（大部分情况等同于左对齐，受）
center：
设置伸缩盒对象的子元素居中对齐
end：
设置伸缩盒对象的子元素从结束位置对齐（大部分情况等同于右对齐）
justify：
设置或伸缩盒对象的子元素两端对齐

box-align

1

box-align：start | end | center | baseline | stretch

默认值：stretch
适用于：伸缩盒容器

取值：
start：
设置伸缩盒对象的子元素从开始位置对齐
center：
设置伸缩盒对象的子元素居中对齐
end：
设置伸缩盒对象的子元素从结束位置对齐
baseline：
设置伸缩盒对象的子元素基线对齐
stretch：
设置伸缩盒对象的子元素自适应父元素尺寸

box-lines

1

box-lines：single | multiple

默认值：single
适用于：伸缩盒容器

取值：
single：
伸缩盒对象的子元素只在一行内显示
multiple：
伸缩盒对象的子元素超出父元素的空间时换行显示

box-ordinal-group

1

box-ordinal-group：<integer>

默认值：1
适用于：伸缩盒子元素

取值：

：
用整数值来定义伸缩盒对象的子元素显示顺序。

box-flex

box-flex：
默认值：0
适用于：伸缩盒子元素

取值：

：
使用浮点数指定对象所分配其父元素剩余空间的比例。

01-同时使用背景图片和背景颜色？

1

.test{background:url("图片链接") center center no-repeat; background-color：#000;}

1

.test{background:url("图片链接") #000000 center center no-repeat;}

1. 背景图片需要在背景颜色之前；
2. 需要设置多个值时使用background，只需图片链接时可直接用background-img链接;

02-line-height 和 height会传递给子级

03-font

可以按顺序设置如下属性：

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

04-text-align: center;

这个属性是用来对齐行内内容的，所以，==不应该对块级内容起作用==。
块状元素用==margin: 0 auto;==

05-box-sizing

跟正常盒子一样,从边框接触处算起,不占边框

查看图片

06-tab切换

1
2
3
4
5
6

.goods_tab{float: right;height: 34px;margin-top: 5px;border:1px solid #ededed;border-bottom: none;z-index: 1;line-height: 34px;}
.goods_tab li{float: left;display: inline;height: 34px;position: relative;}
.goods_tab li a{float: left;height: 32px;padding: 0 16px;overflow: hidden;border-top: 3px solid  rgba(0,0,0,0);border-left: solid 1px rgba(0,0,0,0);border-right: solid 1px rgba(0,0,0,0);border-bottom:1px solid rgba(0,0,0,0);color: #666;position: relative;top: -1px;z-index: 2;}
.goods_tab li span{position: absolute; width: 1px; background: #ededed; overflow: hidden; height: 14px; top: 10px; right: -1px;z-index: 1;}
.goods_tab li:hover a{color: #c81623;border-left: solid 1px #c81623; border-right: solid 1px #c81623; border-top: 3px solid #c81623;border-bottom:1px solid #fff;} 
.goods_tab li:hover span{display: none;}

查看图片

07-tab切换

==a标签不能嵌套a标签,否则会自动分离成各自a标签==

08-浮动 li

==浮动li里面包含a>img标签时候,a标签宽度会自动包裹图片宽度,li宽度随a img==

1

import { lastName as surname } from './profile';

import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。

如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。

1

import {myMethod} from 'util';

上面代码中，util是模块文件名，由于不带有路径，必须通过配置，告诉引擎怎么取到这个模块。

轮播图

如果父级设定position:relative,子级设定position:absolute要设父级高度,否则高度撑不开;

jq on()方法

$(".div1").on('click', function(event) {
    // console.log($(this)[0].tagName);
    // console.log($(this).attr('class'));
    // $(this).html("hello");
    // event.preventDefault();
    console.log(event.target.tagName+" : "+$(event.target).attr('class')+" "+$(this).attr('class'));
    // $(this)指的是绑定事件的元素,也就是.div1
});

$(this)[0].tagName
如果委托的元素没有写出来,那么$(this)指的是 $(“.div1”),如果有写委托元素,那么$(this)指的是委托元素

jq的取值赋值

• 当一组元素的时候,取值是一组中的第一个
• 当一组元素的时候,赋值是一组中的所有元素

  $().text()是特例,会获取所有选中元素的文本内容,不包括html标签

return false;

阻止默认事件event.preventDefault(); 又阻止冒泡event.stopPropagation();

offset();

offset().left//获取到屏幕的左距离
position().left//自己转换为定位元素,忽略margin值

Parent() offsetParent();

Parent()//获取父级
offsetParent()//获取有定位的父级

screenX clientX pageX的区别

查看图片

outerWidth()与原生offsetWidth

//outerWidth():可以获取到隐藏元素的值
//offsetWidth : 是获取不到隐藏元素的值

clone()

clone(true)会把绑定到原来元素的事件也一并克隆.

包装

• wrap() : 包装

• wrapAll() : 整体包装

• wrapInner() : 内部包装

• unwrap() : 删除包装 ( 删除父级 : 不包括body )

表单序列化

1
2
3
4
5
6
7
8
9

//console.log($('form').serialize());  //string : a=1&b=2&c=3
	
	console.log( $('form').serializeArray() );
	
	[
		{ name : 'a' , value : '1' },
		{ name : 'b' , value : '2' },
		{ name : 'c' , value : '3' }
	]

stop()

• $(‘#div1’).stop(); //默认 : 只会阻止当前运动

• $(‘#div1’).stop(true); //阻止后续的运动

• $(‘#div1’).stop(true,true); //可以立即停止到指定的目标点

• $(‘#div1’).finish(); //立即停止到所有指定的目标点

jsonp

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$.ajax({
					url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
					type: 'get',//默认get,不用写也可以
					dataType: 'jsonp',
					jsonp: "cb",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
					// jsonpCallback:"baidu",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
					data:{
//						json:1,
						wd:"a"
					},
					success:function (data) {
						console.log(data);
					}
				});

插件

• $.extend({}) //工具方法
• $.fn.extend({})//$()方法

$.grep()

1
2
3
4
5
6
7

jQuery.grep( array, function [, invert ] )

$.grep( [0,1,2], function(n,i){
   return n > 0;
 });
 //结果:
 //[1, 2]

插件的几种参数用法:

1. 传入json对象:

   1 2 3 4

   $( ".selector" ).button({ disabled: true, create: function( event, ui ) {} });

2.传入参数:

1
2
3
4
5

$( ".selector" ).button( "disable" );

var isDisabled = $( ".selector" ).button( "option", "disabled" );

$( ".selector" ).button( "option", "disabled", true );

3.事件绑定:

1

$( ".selector" ).on( "buttoncreate", function( event, ui ) {} );

index()

1
2
3
4
5
6
7
8
9
10
11

<ul> 
<li id="foo">foo</li> 
<li id="bar">bar</li> 
<li id="baz">baz</li> 
</ul> 

$('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置 
$('li').index($('#bar')); //1，传递一个jQuery对象 
$('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置 
$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置 
$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。

选择元素

• $() ★★★★★
• css() ★★★★★
• 省略原生的循环操作
• $ == jQuery

JS与JQ关系

• 之间不能混写
• 函数中返回原生this，$()选择元素
• 例子 : 选择颜色填充方块

取值与赋值的关系

• 通过参数决定
• 属性 attr() ★★★★★
• 值 val() ★★★
• 多元素取值
  第一个元素

JQ的链式操作

$().css().html().click()
==针对设置的时候==

集合的长度

size() ★
length ★★★★★
==$()获取到的都是一个集合==

节点的选择

prev() next() ★★★★★
prevAll() nextAll() ★★★
siblings() ★★★
参数的筛选功能

节点的选择

first() ★★★
last() ★★★
slice() ★
children() 针对子节点,不针对孙节点 ★★★
find() :查找范围更加广泛 ★★★★★

• children和find区别

节点的选择

parent() ★★★
parents() ★
closest() ★★★★★
精准的查找能力，实战开发之王
找的是最近的唯一一个元素(包括自身)
例子 : 点击查找指定节点

添加节点

insertBefore() before() ★★★★★
insertAfter() after() ★★★★★
appendTo() append() ★★★★★
prependTo() prepend() ★★★★★
两种写法的区别

• append() : 把元素添加到指定的节点的里面的最后
• prepend() : 把元素添加到指定的节点的里面的最前面
• before() : 把元素添加到指定的节点的前面
• after() : 把元素添加到指定的节点的后面

JQ中的索引

index() ★★★★★

• 第一种用法，兄弟中的排行
• 第二种用法，筛选后的排行
• 善于利用索引做实际开发
  • 例子 : 选项卡

遍历

each() ★★★★★
回调函数的两个参数 (value返回的是原生js对象)
this指向 == value
return false;

包装

//wrap() : 包装

//wrapAll() : 整体包装

//wrapInner() : 内部包装

//unwrap() : 删除包装( 相当于删除父节点 , body是不能被删 )

1
2
3
4
5

//$('span').wrap('<div>');
	
//$('span').wrapAll('<div>');
	
//$('span').wrapInner('<div>');

get()

get() ★★★★★
与eq的区别
为什么要转，比如：
获取内容的高度
元素之间的比较

1

$nowLi.get(0) == $nowLi.parent().children().eq(0).get(0)