JavaScript整理篇

来源：互联网发布：通过网线共享网络编辑：程序博客网时间：2024/05/17 03:39

/*通过父级和子元素的class类获取该同类子元素的数组
*/
function getClassObj(parent,className){
    var obj=parent.getElementsByTagName('*');//获取父级的所有子集
    var pinS=[];//创建一个数组用于收集子元素
    for (var i=0;i<obj.length;i++) {//遍历子元素、判断类别、压入数组
        if (obj[i].className==className){
            pinS.push(obj[i]);
        }
    };
    return pinS;
}

var aPin=getClassObj(document.getElementById('parent'),'pin');// 获取存储块框pin的数组aPin
for(var i=0;i<aPin.length;i++){
   aPin[i].onclick=function(){
       alert(this.innerHTML);
   }
}
console.log(aPin.length);

获取元素的宽度高度
var iPinW=aPin[0].offsetWidth;// 一个块框pin的宽
var pinH=aPin[i].offsetHeight;
console.log(iPinW);
var imgv=document.getElementById('id').offsetWidth;     //获得宽
var imgh=document.getElementById('id').offsetHeight;    //获得高

js改写元素样式
aPin[0].style.cssText='width:100px; border:1px solid #ccc;';//js改写元素样式

//向下区整数
document.write(Math.floor(0.6066) + "<br />")//0
document.write(Math.floor(0.40) + "<br />")//0
document.write(Math.floor(5) + "<br />")//5
document.write(Math.floor(5.1) + "<br />")//5

//apply取数组中最小的数
var kk=[55,2,3,4]
document.write(Math.min.apply(null, kk) + "<br />")
document.write(Math.max.apply(null, kk) + "<br />")
document.write(Math.max(-3,-5) + "<br />")//-3 取大的那一个
document.write(Math.min(7.25,7.30))//7.25 取小的那一个

//数组循环再判断
var hhj=[1,2,3,4,5,6,7,8]
var pinHArr=[];
for(var i=0;i<hhj.length;i++){
   if(i<5){
        pinHArr[i]=hhj[i]; //
    }
}
console.log(pinHArr);

//监听事件
var eventOne = function(){
alert("第一个监听事件");
}
function eventTwo(){
alert("第二个监听事件");
}
window.onload = function(){
var btn = document.getElementById("mmn");
//addEventListener：绑定函数
btn.addEventListener("click",eventOne,false);
btn.addEventListener("click",eventTwo,false);
//btn.removeEventListener("click",eventOne,false);       去除监听事件
//btn.removeEventListener("click",eventTwo,false);
}

var bnj={huag:function(elem,type,hand){
        elem.addEventListener(type,hand,false);
   }}
bnj.huag(im,'mousemove',myReady2)
bnj.huag(im,'click',myReady)

//获取事件类型id目标
var btn5=document.getElementById('btn5')
btn5.onclick=function bhsj(event){
   console.log(event.type)   // 获取事件类型
   console.log(event.target)   //事件目标
   console.log(event.target.id)   //事件目标id
   console.log(event.target.nodeName)   //获取事件目标的节点名称
   console.log(event.target.nodeName )
   event.stopPropagation()     //阻止事件冒泡
}

//jq手机弹窗
$(function(){
   $("#tankop_ju").click(function(){
       $(window.document.body).append('<div class="quanbop"><span></span></div>');
       $('.quanbop').bind( "touchmove", function (e) {
           e.preventDefault();
       });

       $(".quanbop span").click(function(){
           $(".quanbop").remove();
       })

   })
})

//事件冒泡
<body>
<div id="box" style=" width:100px; height:100px; background:#ccc;">
<button id="btn">按钮</button>
</div>

<div id="box1" style=" width:100px; height:100px; background:#ccc;">
<button id="btn1">按钮</button>
</div>

<script>
var btn=document.getElementById('btn');
var box=document.getElementById('box');
function bhsj(event){
   //event.type    获取事件类型
   //event:target   事件目标
   //event.target.nodeName   获取事件目标的节点名称
   alert(event)
   event.stopPropagation()     //阻止事件冒泡
}
function boom(v,c){
   alert(v*c)
}
//btx.onclick=function(){boom(10,20)}
btn.onclick=bhsj
box.onclick=function(){
   boom(2,5);
}

$("#box1").click(function(e){
   alert(1);
})
$("#btn1").click(function(){
       alert(2)
       event.stopPropagation()
})
</script>
</body>

0 0