------------恢复内容开始------------
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"; }; }
------------恢复内容结束------------