js-API相关案例

案例拖拽对话框

阻止浏览器的默认跳转 两种

return false 都支持

e.preventDefault()有兼容问题

当给按钮注册点击事件 和给body注册事件 两个事件控制同意元素会出现事件冒泡

阻止事件冒泡 这两种

e.stopPropagation

window.event.cancelBubble=true;

鼠标按住对话框 进行拖拽

点击的时候出现鼠标不在当前的位置 是margin造成的

鼠标点击事件

拖拽的最大距离

####案例放大镜和隐藏遮挡层和大层

document.onmousedown = function(e) {
            var spaceX = e.clientX - mask.offsetLeft;
            var spaceY = e.clientY - mask.offsetTop;

思考这个案例和上一个案例的区别

最后设置的是这个marginLeft 和marginTop的值 进行移动

自定义滚动条案例

设置鼠标移动的时候让文字不要被选中

 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

元素隐藏的不同方式

    //隐藏div
    //不占位
    //my$("dv").style.display="none";
    //占位
    //my$("dv").style.visibility="hidden";
    //占位
    //my$("dv").style.opacity=0;
    //占位
    //my$("dv").style.height="0px";
    //my$("dv").style.border="0px solid red";

当写等号的时候 至少要写两个等号

鼠标进入的时候 需要把以前的颜色保存起来 就可以解决颜色回不来

lastColor = this.style.backgroundColor;

引入第三方变量

案例tab栏切换

大量字符串拼接

一种字符串的方式 一种数组的方式

    //  var str="abcef";
    //  console.log(str[2]);
    //  str[2]="H";
    //  console.log(str);

这边的str[2]=“H”;不能改变字符串str里面的值

str=“abcef”;这个可以看作是字符串拼接而成的数组

arr.join("|")
这个可以将一个数组变成以  | 进行分割 的字符串

推荐使用数组的方式进行进行存储 最后在拼接成字符串

####案例无刷新评论

 //获取按钮,注册点击事件
  document.getElementById("btn").onclick = function () {
    //获取昵称的元素
    var userName = my$("userName");
    //获取评论的元素
    var tt = my$("tt");
    //创建行
    var tr = document.createElement("tr");
    //行加到tbody中
    my$("tbd").appendChild(tr);
    //创建列
    var td1 = document.createElement("td");
    tr.appendChild(td1);
    td1.innerHTML = userName.value;
    //创建列
    var td2 = document.createElement("td");
    tr.appendChild(td2);
    td2.innerHTML = tt.value;
    //清空
    userName.value = "";
    tt.value = "";
  };

  var arr=[20,10,40,50,30];
  for(var i=0;i<arr.length-1;i++){
      for(var j=0;j<arr.length-1-i;j++){
          if(arr[j]<arr[j+1]){
              var temp=arr[j];
              arr[j]=arr[j+1];
              arr[j+1]=temp;
          }//end if
      }// end for
  }//end for
  for(var i=0;i<arr.length;i++){
      console.log(arr[i]);
  }

创建行和列 可以一个个创建 然后一个一个的接受变量值 然后追加

另外一种方法在案例里边 有详细的解析