韩伦20170831

[Han-Lun]

#20170831

基础数据类型都是值传递
对象都是引用传递, 传递的是对象的内存地址，这个地址能够访问到真实的对象

html5的正则验证
-pattern="1[3578]\d{9}" 填写格式
-required   必须填写（跳出弹出框）

回车搜索
获取元素
 元素绑定keyup事件 = function(event){
    event = event || window.event;
    console.log(event.keyCode);
    if (判断输入的键码是回车键keyCode === 13) {
        location.href = "https://www.baidu.com/s?wd="+this.value
    }
}


回车下一级
元素遍历for(var i=0;i<元素.length;i++){
//IIFE
	(function(i){
		元素[i].addEventListener('keydown',function(event){
			event = event || window.event;
			if(this.type != submit && 判断输入的键码是回车键event.keyCode === 13){
				event.preventDefault();//阻止默认回车样式
				元素[i+1].focus();
			}
		})
	})(i);
}


事件委托模型
//浏览器会向所有的事件方法中传递一个实际的事件对象，在方法中写一个 event接收
oDom.onclick = function(event) {
  event = event || window.event;
  event.type //通用的事件类型
  var target = event.target || event.srcElement; //事件目标,在冒泡中，依然是触发事件的那个元素
  if (target.nodeName === 'LI') {
        target.parentNode.removeChild(target);
    }
}


自定义滚动条
//当开始选择的时候返回false， 禁止选择
      oContent.onselectstart = function(){
        return false;
      }
//内容和盒子高度比
rate = 内容.clientHeight / 盒子.clientHeight;
//设置滑块初始的高度
      滑块.style.height = 内容.clientHeight * rate + "px";
      //拖拽模型
  滑块.onmousedown = function(event){
	event = event || window.event;
	var deltaY = event.clientY - this.offsetTop;
        document.onmousemove = function(event) {
          event = event || window.event;
          var y = event.clientY - deltaY;
          if (y < 0) y = 0;
          if (y > oBox.clientHeight - oBarb.clientHeight) {
            y = oBox.clientHeight - oBarb.clientHeight;
          }//设置滑块的内容
         	 内容.style.top = y + 'px';
          //内容按比例升高，内容跑得比滑块快。滑动1px, 内容走 1 / rate像素
        	 盒子.style.top = -y / rate + 'px';
          //给这个事件返回一个false值，就不能选文字了
          return false;
        }
} 


//返回这个元素在页面中的净位置
function getAllTop(obj){
	var allTop = obj.offsetTop;
	while(obj = obj.offsetparent){
		allTop += obj.offsetTop;
	}
	return allTop;
}

//卷动量
//高级浏览器认为卷动值是body的属性
//IE6、7、8认为卷动值是html标签的属性
//如何得到HTML标签呢，JS中document.documentElement就是html标签
document.body.scrollTop || document.documentElement.scrollTop


//resize事件可以用来做响应式，根据不同的窗口大小设置不同的CSS的src

//实现响应式
判断window的width
windowWidth = document.body.clientWidth || document.documentElement.clientWidth;
留一个没写href=""的<link/>
判断windowWidth的大小，换取css的路径

//设置卷动值
document.body.scrollTop = document.documentElement.scrollTop = 3000;

//回到顶部（不加动画）
    window.onscroll = function(){
      var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      if (scrollTop > 500) {
        oBack.style.display = 'block';
      } else {
        oBack.style.display = 'none';
      }
    }

    oBack.onclick = function() {
     document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
    
//
//大图800*800 大图盒子 400*400
//小图盒子350*350 放大镜175*175
//所以放大镜总行程是350-175 = 175,  大图的总行程 800 - 400 = 400
// var rate = 400 / 175;//可以用这句话代替下面的四行，下面四行是更通用的代码
var bigPicWidth = parseFloat(fetchComputedStyle(oBigPic, 'width'));
var smallPicWidth = parseFloat(fetchComputedStyle(oSmallPic, 'width'));
var zoomWidth = parseFloat(fetchComputedStyle(oZoom, 'width'));
var rate = (800 - bigPicWidth) / (smallPicWidth - zoomWidth) ;
//event.offsetX不能用
//因为onmousemove事件冒泡，鼠标碰到zoom这个放大镜时事件将往上传播
//会触发oSmallPic的onmousemove事件。因此event.offsetX的坐标，以zoom左上角为准
// var x = event.offsetX;
// var y = event.offsetY;

当鼠标浮上小图时，大图出现。小图中的zoom的top，left的值x,y在大图中时，负值*rate
	  oZoom.style.top = y + 'px';
      oZoom.style.left = x + 'px';
      oBigPic.style.backgroundPosition = -x * rate + 'px ' + -y * rate + 'px';