javascript整理笔记（一）-----写项目的小技巧

------------恢复内容开始------------

1.获取text的内容：表单元素获取内容的话：需要获取value; 普通元素获取内容的话，需要获取innerHTML属性

<script>

/*
    0：点击btn
    1：获取text的内容
    2：在list中添加一个li，li的内容是我们获取到的 text 的内容
*/
// 1. 获取元素
var text = document.querySelector("#text");
var btn = document.querySelector("#btn");
var list = document.querySelector("#list");
btn.onclick = function(){
    // 获取获取text的内容 -- 注意 表单元素要获取内容的话：需要获取 value
    // console.log(text.value);


    // 普通元素获取内容的话，需要获取 innerHTML 属性
    console.log(list.innerHTML);
    // 直接操作innerHTML 会把 元素本身的内容都覆盖掉
    list.innerHTML = "<li>天气不错2</li><li>天气不错3</li>";
};
</script>

 

2.在js中默认为行间样式是为空的

   如下面所示：显示隐藏ul列表

<body>
    <div class="wrap">
        <div class="menu">
            <div class="title" id="tit">菜单</div>
            <ul class="list" id="ulist">
                <li>微博</li>
                <li>图片</li>
                <li>博客</li>
                <li>视频</li>
                <li>更多>></li>
            </ul>
        </div>
    </div>
<script>
/*
思路：点击菜单
如果ul是显示的就让他隐藏，如果ul是隐藏的就让他显示

*/
var title = document.getElementById('tit')
var list = document.getElementById("ulist")

title.onclick = function(){
    console.log(list.style.display) //打印出来的是空，默认为行间没有样式
   /* if(ul.style.display == "block"){
        ul.style.display ="none"
    }else{
        ul.style.display ="block"
    }*/

    if(list.className == "list show"){
        list.className = "list"
    }else{
        list.className = "list show"
    }

}

 

3.经常遇到的开关切换问题，

/*
    很多时候，我们没有办法直接用一些东西去做判断条，比如 src
    那我们就需要自定去定义一些判断条 - 开关
*/ 
var icon = document.querySelector("#icon");
var isMonster = true; // false代表现在显示是monster,false 代表现在显示的monster2,默认显示是monster，所以初识 isMonster为true
icon.onclick = function(){
    // 比较运算符: 比较运算符的运算结果 - true||false
    // if(false){ // if 最终只接受一个布尔值(true||false)
    //     console.log("成立");
    // } else {
    //     console.log("不成立");
    // }
    if(isMonster){// true 1 张 false 2张
        icon.src = "img/monster2.png";
        //isMonster = false;
        //isMonster = !isMonster;
    } else {
        icon.src = "img/monster.png";
        //isMonster = true;
        //isMonster = !isMonster;
    }
    isMonster = !isMonster;
    // 总结：开关(状态)帮助我们去记录

    /*
        isMonster 记录员：记录我们图片切换到哪一张
    */
};
</script>

 

 

4.点击当前项获取到当前的对象

 <div @click="showThree(sonitem,sonindex)" :class="{showback:sonitem.NodeId===currentTab}"> //如果当前的nodeId等于当前点击的NodeId就添加 一个背景类
                                            <i class="iconfont icon-weibiaoti- fontstyle" ></i>
                                            <span>{{sonitem.Name}}</span> 
 </div>

<script>
 //点击时展开
        showThree(pitem,pindex){
           
  //标识当前点击项
            this.currentTab = this.currentTab == pitem.NodeId ? '' : pitem.NodeId;
           
            //将当前项保存下来传到子组件中           
            this.$store.commit("SET_ALERTINFO",pitem)//将新数组同步提交到vuex中    
            
            //点击当前项右边显示当前的数据,
            console.log(this.currentTab)
            this._thisGetDepartmentUsers(this.currentTab,this.keywords)

        },


</script>

 

5.点击前进 和 后退按钮 下面相应的小索引按钮也会同时被选中

<script>
var img = document.querySelector("#img");
var prev = document.querySelector("#prev");
var next = document.querySelector("#next");
var txt = document.querySelector("#txt");
var navs = document.querySelectorAll("#navs a");
var nub = 0;
var data = [
    "img/img1.jpg",
    "img/img2.jpg",
    "img/img3.jpg",
    "img/img4.jpg",
    "img/img5.jpg"
];
var text = [
    "这是程序员的春天-1",
    "这是程序员的秋天-2",
    "随便来点啥呗-3",
    "随便来点啥呗-4",
    "随便来点啥呗-5"
]
// 获取数组最后一位，数组从0开始计数，所以最后一位就是 length - 1
// console.log(data.length - 1);
next.onclick = function(){
    nub++;
    //  nub = nub>数组的最后一位?0:nub;
    nub = nub>data.length - 1?0:nub;
    img.src = data[nub];
    txt.innerHTML = text[nub];
    // 不管之前有没有选中吗，我们先把他全部清除了
    for(var i = 0; i < navs.length; i++){
        navs[i].className = "";
    }
    // 给当前个对应的小点 加上 class
    navs[nub].className = "active";
};
prev.onclick = function(){
    nub--;
    // nub = nub < 0?数组的最后一位:nub;
    nub = nub<0?data.length - 1:nub;
    img.src = data[nub];
    txt.innerHTML = text[nub];
    for(var i = 0; i < navs.length; i++){
        navs[i].className = "";
    }
    navs[nub].className = "active";
};
</script>

 

 

6.for循环中this指向的问题

/*批量添加事件*/
for(var i = 0; i < navs.length; i++){ //循环是在js代码读取到这时就执行了

    // onmouseover 鼠标移入事件
    navs[i].onmouseover = function(){
        //鼠标移入时才会执行这里代码,这会 for 循环早已经执行完了,所以只能拿到循环结束之后的结果
        // !!! 注意事件函数中不要去调用外边循环的循环变量，这回循环早已经执行完了
        //console.log("鼠标移入");
        console.log(i);
    };

    // onmouseout 鼠标移出事件
    navs[i].onmouseout = function(){
        //console.log("鼠标移出");
    };

}

 

/*批量添加事件*/
for(var i = 0; i < navs.length; i++){ //循环是在js代码读取到这时就执行了
    navs[i].onmouseover = function(){
      // this
      /*
        谁调用 this 指向谁
        this 在事件处理函数中，代表的是当前调用事件的元素
      */
        //console.log(this);
        var sImg = this.querySelector(".img");
        sImg.style.display = "block";
        console.log(sImg);
    };

    // onmouseout 鼠标移出事件
    navs[i].onmouseout = function(){
        var sImg = this.querySelector(".img");
        sImg.style.display = "none";
    };

}

 

------------恢复内容结束------------

posted @ 2019-12-06 17:38  mysunshine_SZZ  阅读(224)  评论(0)  编辑  收藏  举报