冷知识
position 的默认属性值 static ,继承 no
query中不能成功对动态渲染的dom绑定时间的 bind
关闭所有动画(所有效果会立即执行完毕)
在配置比较低的电脑上使用jQuery
jQuery.fs.off = true;
动画相关
hide 隐藏
$("id").hide("fast");
show:显示元素
$("id").show(3000);
也可以设置关于速度的关键字(字符字)
fast:快速
normal:正常
slow:慢速
$("div").show("slow");
也可以自定义关于速度的关键字
jQuery.fx.speeds.lsx = 1000;
$("id").show("lsx");
也可以有第二个参数,
第二个参数是动画运行结束后的回调函数
$("id").show("lsx",function(){
alert('动画执行完毕')
})
toggle:切换显示或隐藏 1.12之后 不建议使用
$(".div").toggle(100);
fadeIn:显示(效果是渐变)
$("div").fadeIn(1500);
fadeOut:隐藏(效果是渐变)
$("div").fadeOut(1500);
fadeToggle:切换隐藏和显示(效果是渐变)
$("div").fadeToggle(5000);
slideUp:隐藏(效果是从下到上隐藏)
$("div").slideUp(1000);
slideDown:显示(效果是从上到下显示)
$("div").slideDown(1000);
slideToggle:切换显示(效果是拉链效果)
$("div").slideToggle(1000);
animate()三个参数
参数1:设置CSS属性(部分属性,和运动相关属性)
参数2:设置动画时长
参数3:动画执行完毕后的回调函数
$("div").animate({
left:"+=200px",
opacity:0.3
},2000,function(){
alert("动画执行完毕");
})
stop:停止当前元素所运行的动画
$("div").stop();
finish:停止当前元素所运行的动画
(但是会立即完成CSS设置的样式)
$("div").finish();
delay:延迟执行,可以接受一个参数,
延迟多少毫秒后执行
$("div").fadeOut(1000).delay(2000).slideDown(1000);
==========
面试题
//================================
js基本数据类型 5+1种
字符串 数字 布尔 Null Undefined + 对象
typeof typeof() 返回数据类型(小写),这里的括号可有可无
注意:返回 的数据类型只有 六种
字符串 数字 布尔 对象 function Undefined 没有数组,增加了function,
null的 类型 返回 object
//================================
var a=b=c=d=5; // a b c d 都是5
--
假如 再写一个 d=9
则只修改了 d的值, abc还是5
//===============================
var a=b=c=d=[1,2,3,4,5];
console.log("a="+a+"b="+b+"c="+c+"d="+d);//abcd值都是数组[1,2,3,4,5]
d[5]=9;
console.log("a="+a+"b="+b+"c="+c+"d="+d);//123459
//每个元素增加了元素,中间元素为空
//d[5]=9 所有变量增加一个元素9
//若 d[n] 小于 当前的长度 ,则是更改
//d[3]=9 更改所有元素 的第3个元素
--
var a=b=c=d=[1,2,3,4,5];
d=[9,9];
console.log("a="+a+"b="+b+"c="+c+"d="+d);//更改 d 的值
//===============================
var n = (1,2,3,4,5); //n=5
//=================================
console.log("==========");
var str = true+11+null+9+undefined+' zhufengpeixun' + false + null + 9 +[];
console.log(str);
console.log(str.length);//27
console.log(true+11);//12
console.log(true+null);//1
console.log(false+1);//1
console.log(11+null);//11
console.log(true+11+null+9);//21
//测试 undefined
console.log(1+undefined);//NaN
console.log(true+undefined);//NaN
console.log(null+undefined);//NaN
//测试 string 类型
console.log("aa"+undefined);//aaundefined
console.log(undefined + "bb");//undefinedbb
/*
注意:
1.任何类型 和 string 类型计算 都是拼接
2.任何 非number 和 number 计算 都 是 NaN (true false 除外)
true 1 false 0
2.任何类型 和 undefined 计算结果都是 NaN(Not a Number)
*/
//====================================
正常的 for循环 删除 子元素 会造成 数组 塌陷
<ul id="ull">
<li>nodeList</li>
<li>nodeList</li>
<li>nodeList</li>
<li>nodeList</li>
<li>nodeList</li>
<li>nodeList</li>
<li>nodeList</li>
<li>nodeList</li>
<li>nodeList</li>
<li>nodeList</li>
</ul>
/*
//方法 一 在循环内 让 i-- 永远 删除 第一个元素
for(var i =0;i<eles.length;i++){
eles.item(i).parentNode.removeChild(eles.item(i));
//永远 删除 的是 0 元素
i--;
console.log(eles.length);
}
console.log(eles.length);
/
/
//方法二 倒着来
for(var i = eles.length-1;i>=0;i--){
console.log(i);
eles.item(i).parentNode.removeChild(eles.item(i));
}
*/
//================================
//2016.7.1 night
function fn(){
alert("我是全局变量");
}
function fn2(){//定义一个fn2方法
alert(fn);
fn = 3;
return;
function fn(){
alert("我是定义在fn2方法里边的");
}
}
/*
//调用 fn2() 函数的时候,先对内部的var(只声明,不赋值 可被function 覆盖)声明; function初始化(声明 并 赋值),
注意:预解释 不受 return 干扰
/
fn2();
/
结果:
function fn(){
alert("我是定义在fn2方法里边的");
}
*/
//=================================
var name = "china";
var age = 5000;
(function(chinaName ,chinaAge) {
var name = "珠峰培训";
var age = 4;
alert(chinaName + "有" + chinaAge +"历史" + name + "有" + age + "年");
})(name,age);
//china有5000历史珠峰培训有4年
//=============================
function a(x){ return x*2;}
var a;
alert(a);
//这里 function a(x) 先被初始化(声明+赋值),虽然后面再次var a,但是 未 赋值,所以是不覆盖
//function a(x)的,所以结果是打印 function(a)
//function a(x) {return x*2;}
// =================
var obj = {
"name" :"AA",
"age" :19,
"sayHello":function(){
console.log("大家好,我是" + this.name);
}
}
obj.sayHello();//大家好,我是AA
//假如 对象 有这个属性 则修改,没有人话 添加
obj.sex = "男";
console.log("sex:" + obj.sex);//sex:男
//================================
//按钮
//这样 写的话 每次 点击都会打印 button4
function btnFn(){
for(var i = 1 ;i<4;i++){
var tempBtn = document.getElementById("button" + i);
tempBtn.addEventListener("click",function(){
alert("button" + i);
},false);
//同上
// tempBtn.onclick = function(){
// alert("button" + i);
// }
}
}
btnFn();//调用 函数,i 不符合 for 条件 ,i =4,打印 button 4
//立即 执行
//无参
(function(){ alert("aaaa");})();
//带参
(function(num){ alert(num)})(44);
//示指定 参数
(function(){alert(arguments[0]);})(555);
================================
var pattern = /(.)\\s(.)/;
var str = 'google baidu';
var result = str.replace(pattern, '$2 $1'); //将两个分组的值替换输出
document.write(result);//baidu google
注意:这里 每个 括号 () 就是一个 $,所以 有 $2 $1
//================================
获取 ? 后面的 参数 ?=123
var url = localtion.search;
url.substr(1) //=123
==================
思路:
加载页面 首页
要实现效果: 加载页消失,首页 显示
直接在 加载页 最后 script 设置 定时器
setTimeout(function(){
//设置 样式
loading.style.display = "none";
//更改 地址
location.href = "#/home";
},2000);
=============
TagName 返回值为大写
eg:
var test = document.querySelector(".test");
//tagName 的返回值 都是大写
console.log(test.tagName);//DIV
typeof 返回值为小写
eg:
console.log(typeof "aa");//string
console.log(typeof 123); //number
==========
获取元素时注意
我们知道反斜杠是用来转义的,比如在字符串里,我们想表示空字符就使用"\\b",换行"\\n".同样, 在提供给querySelectoy点非常重要.
假如是如下
<div class = "foo:bar"></div>
===================
当script中 有各种 获取元素方法的时候,jquery在 js后面输出,因为 jquery是外部链接
======================
js是单线程的 js就是一个傻子,做着当前 的这件事情,没有完成之前 ,绝对不会做下一件事情
同步->上一件事情没有完成,继续处理上一伯事情,只有上一件事情完成了才会做下一件事情(js)中大部分都是同步编程的.
异步编程:
规划要做一件事情,但是不是当前立马去执行这件事情,需要等一定的时间,这样的话,我们不会等着它执行,而是继续自执行下面的操作,只有当下面的事情都处理完成了才会返回头处理之前的事情;如果下面的事情并没有处理完成,不管之前的事情有没有到时间,都踏踏实实的给我等 着
在JS中异步编程只有四种情况:定时器都 是异步编程 的,所有的事件绑定都是异步编程的,Ajax读取数据的时候,我们一般都设置为异步编程,回调函数也是异步编程 的.
每一个浏览器对于定时器的等待时间有一个最小的值,chrome 5-6ms IE:10-13ms 如果设置 的等待时间小于这个值,不起作用,还是需要等到最小时间才执行的;尤其是写0的时候
我们定时器设置 的等待时间 不一定就是最后执行的时间,如果定时器之后还有其他的事情正在处理中,不管定时器的时间有没有到,都是不会执行定时器
=============
图片的 懒加载 (延时加载)
保证页面打开的速度(3s之内如果首页打不开就已经算是死亡页面了)
原理:
1)对于首屏内容的图片:首先给对应 的区域一张默认的图片占位(默认图需要非常小,一般可以维持在5kb以内),当首屏内容都加载完成后(或者也可以给一个延迟的时间),我们再开始加载真实的图片
2)对于其它的屏中的图片:也是给一张默认的图片占位,当滚动条滚动到对应区域的时候,我们再开始加载真实的图片
扩展:数据的异步加载,开始只把前两屏的数据加载绑定出来,后面的数据不进行处理,当页面滚动到对应区域的时候再从新请求数据然后绑定渲染数据
=============
代码从上到下执行
link->外链式CSS
script
网站性能优化
->尽量较少向服务器的次数"减少HTTP请求"
css/js文件 进行合并 ICON 图片也进行合并->雪碧图/css sprite
在移动端
=========
元素 居中问题
1.在已知要居中元素宽度的情况下
给要居中元素绝对定位,left和top都设为50%,通过 margin-top和margin-left的负值设置
eg:
body,html{height:100%;}
div {height:100%; position:relative;}
p{width:100px; height:100px; position:absolute;top:50%;left:50%;margin-left:-50px;margin-top:-50px;}
2.在未知要居中元素宽度的情况下
1)要居中元素绝对定位,把其left,top,bottom,right均设置数值将其宽度撑开
div( height:100%;position:relative;}
p{position:absolute; top:200px; bottom:200px; left:50px; right:50px;}
2)给其父级元素加display:box属性实现
div{heigth:100%; display:box box-pack:center; box-align:center;
===============
<a href = "javascript:;"></a> 不跳转页面
字体无法缩小问题
页面有最小字体,如chorome 最小12px,以下就无法缩小了
解决思路,先放大再缩小,这样就可以无限缩小了
font-size:40px;
transform:scale(0.5);
============
调用 方法的时候 加括号 和 不加括号 的区别
function fun(){ return 5 ; }
var a = fun; //a是fun函数
var b = fun(); //b是5
JS中我们把以上代码的方法名,函数是一种叫做function引用类型的实例,因此函数是一个对象.对象是保存在内存中,函数名则是指向这个对象的指针
var a = fun 表示把函数名fun这个指针拷贝一份给变量a,但是这不是指函数本身被复制了一份
如果函数名后面加上圆括号就表示立即调用(执行)这个函数里面的代码(花括号部分的代码)
==========================
正常情况下,应该设置 margin-top 不生效时,设置 paading-top 试试
//下面的 操作 对象为 要设置 元素 排列方式的父元素
//设置为弹性盒子
display:flex;
//设置对齐方式为 两端 对方
justify-content:space-around;
=======================
小米 登录
设置 content before after 的时候 无法 设置 图片大小,这时 换成 background-image 就可以设置 background-size 大小了
当设置 一个 button 背景的 字体 无法 控制大小 的时候,改成 直接 写文字
=============
~ CSS3同级兄弟元素
--
label 为行间 块级 元素,要设置 背景要 改成block
input 设置 id
<input id = "id1"/>
label 要实现 和 input 关联
<label for = "id1"></label>
--
display 隐藏不占位
visiblity 隐藏 不可操作
opacity 隐藏占位
=========================================
====================
js
btn.innerHTML = "播放"
innerHTML 可以显示 标签
innerText 只显示 字
============
JS 无法获取到 伪类 标签,但是可以获取到样式(IE678除外)
获取伪类:before
var boxp = document.getElemntById("boxp");
window.getComputedStyle("boxp","before").content);
================
ul li input[type = 'checkbox']:checked+label+.options
这个样式 只操作最后的.options
=================
- 当前元素的下一个兄弟元素
~ 当前元素后面的所有兄弟元素
eg: ul li input[type = 'checkbox']:checked+label+.options{}
这里的操作对象 是 li下 input类型为 checkbox 的下一个兄弟元素为label,label的下一个兄弟元素为 类名为.options 的元素
假如 checkbox 下一个兄弟元素不是label
或者 label 下一个兄弟元素不是 类名为options的元素,则 丢失
========================================
$代表 当前 元素
var pattern = /(.)\\s(.)/;
var str = 'google baidu';
var result = str.replace(pattern, '$2 $1');
//将两个分组的值替换输出
document.write(result);//baidu google
注意:这里 每个 括号 () 就是一个 $,所以 有 $2 $1
=============================================
jquery checkbox反选
jquery 读取div中的内容
var $body = $("body");
//jquery 添加一个div 到body 样式
var $mapDiv = $("<div id=container class = mapDiv>afdf</div>").appendTo($body);
$(".mapDiv").css({
"width":"200px",
"height":"200px",
"background":"green",
"position":"absolute",
"top":$h/2+"px",
"left":$w/2-100+"px"
});
===========================
/*
以上那种写法 不好,以后写 插件 要采用以下方法
$ window document 是分别 传进来
的jQuery对象 window对象 document对象
这样写的好处: 可以加快 代码的执行速度
分号; 是防止 将来 代码压缩 或者 和防止 插件 没有正确 结尾导致的一些问题
*/
;(function($ , window , document ){
//开始 写插件
$.fn.print = function(message){
//this 就是当前对象,也就是所选元素,因为我们会通过 选择器获取 相应 的元素后(jQuery对象) , 在调用 扩展 的print方法.原理和构造函数 添加 原型方法 一模一样.
console.log($(this).html()+"---"+message);
console.log("开始,写插件!!1");
//如果 想要支持 链式 语法 的话,那么得返回 当前 对象,也就是当前 所选的元素.
return this;
}
})(jQuery , window , document );
//使用
$("p").print("参数");
$("p").print("参数").html();
===========
git使用
命令行常用命令：
mkdir test(文件夹名字)：创建一个新的文件夹
ls 查看目录
cd test :进入这个文件夹
pwd ： 查看路径
一、git 工作流程
1.git工作流总结
1.创建一个空目录 mkdir
2.进入目录： cd 目录名
3.git init 初始化仓库
4.新建文件到工作区
5.git add 添加到暂存区
6.git commit -m"注释" 添加到历史区
2.本地仓库和远程仓库关联起来
git remote add origin 远程仓库的地址
git remote add origin https://github.com/zhufengpeixun/JavaScript201606.git
查看远程仓库地址：
git remote -v
解除关联
git remote rm origin
3.远程仓库内容更新到本地仓库
git pull origin master
4.把本地内容提交到远程仓库
git push origin master
二、常用git命令总结
1.git pull origin master (这个一般是多人开发)
2.给本地仓库添加新内容
3.git add 要添加的文件名
4.git commit -m"新文件注释"
5.git push origin master
三、git作业流程
1.fork 讲师仓库的地址https://github.com/zhufengpeixun/JavaScript201606
2.克隆你自己的项目地址 git clone 仓库地址
https://github.com/你的github用户名/JavaScript201606.git
3.修改工作区的本地代码，添加你的练习
4.git add .或者 -A 提交到暂存区
5.git commit -m"提交练习" 提交到历史区
6.git push origin master 推送到本人的github上
7.发一个pull request
8.由讲师来合并代码
四、学员更新老师讲义
1.fork珠峰培训讲师的仓库：
1）登录自己的github
2）把讲师仓库地址复制到地址栏
3）fork
2.把自己的仓库下载到本地
1）git clone 自己的地址
2）git remote -v 查看当前本地都和哪些远程仓库保持了链接 (删除本地与远程仓库的通道：git remote rm origin名字)
3.在本地增加和讲师仓库链接
1）git remote add zhufeng(名字) 讲师的仓库地址
2）git remote -v 查看当前本地都和哪些远程仓库保持了链接 (删除本地与讲师仓库的通道：git remote rm zhufeng )
4.拉取老师的最新讲义信息
1）git remote update zhufeng (把本地和珠峰培训的链接通道进行更新)
2）git pull zhufeng master(把最新的讲义代码拉取到本地)
5.把本地拉取的最新讲义更新到自己的仓库中
1)git add ./-A
2)git commit -m”注释”
建议：git pull origin master(每次推送之前，先进行拉取；防止仓库中最新的本地没有，适用于多人开发)
3)git push origin master 把本地代码推送到自己的远程仓库中
注意：前3步第一次操作完成，以后都不需要再操作，以后操作直接从第四步开始；
===============
html常见的兼容性问题
1.png24位的图片在IE6浏览器不出现背景
解决方案:做成png8 , 也可以引用一段脚本处理
2.浏览器默认的margin和 padding不同
解决方案:加一个全局的*{margin:0; padding:0;}
3.IE6双边距bug: 在IE6下, 如果对元素设置 了浮动,同时又设置了margin-left或margin-right, margin会加倍
#box{float:left; width:10px; margin:0 0 0 10px}
这种情况之下IE会产生20px的距离
解决方案:在float的标签样式控制中加入display:inline 将其转化为行内属性(这个符号只有Ie6会识别)
4.渐进识别的方式,从总体中逐渐排除局部
首先,巧妙的使用'\\9'这一标记, 将IE浏览器从所有情况中分离出来
接着,再次使用'+'将IE8和IE7 IE6分离开来,这样IE8已经独立识别.
.bb{
background-color:#f1ee18;/所有识别/
.background-color:#00deff\\9;/IE6 7 8 识别/
+background-color:#a200ff;/IE6 7 识别/
_background-color:#1e0bd1;/IE6识别/
}
5.IE下 , event 对象 有x,y属性, 但是 没有 pageX,pageY属性; FireFox 下 ,event 对象有pageX,pageY属性, 解决办法:(添加注释)缺点 是在IE浏览器下 可能会增加额外的HTTP请求
6.Chorme 中文界面下默认会将小于 12px 的文本强制按照 12px显示,可通过 CSS 属性 -webkit-text-size-adjust:none ; 解决,如果这一属性 也不成,使用 transform:scale 来实施.
7.超链接访问过后 hover 样式就不出现了,被点击访问过的超链接不再具有 hover和 active样式了
解决办法:是改变CSS属性的排列顺序: LoVe-HAte (爱恨原则)
a:link{} a:visited{} a:hover{} a:active{}
