js基础之事件

各种事件及一些算法思想

1. 表单

   // value改变表单里的值：
   input.value = "被点击了";
   //禁用表单：
   disabled = true; 
   // this是指向事件函数的调用者
   this.disabled = true; 
   

2. 样式
   • 行内样式：element.style = ‘’;
   • 类名样式：element.className = ‘’;
3. 注册事件：
   • 获得焦点事件：onfocus; 失去焦点事件：onblur;
   • 移动或离开鼠标：onmouseover 和 onmouseout;
   • 按住或松开鼠标：onmousedown和onmouseup;
   • 点击：onclick
   • mouseenter和mouseover的区别
     • 两者类似，区别于：mouseover鼠标经过自身盒子触发，经子盒子也触发；mouseenter只会经过自身盒子触发
     • 原因：mouseenter不会冒泡、mouseleave也不会
4. 排他思想

    // 1. 获取所有按钮元素
    var btns = document.getElementsByTagName('button');
    // btns得到的是伪数组  里面的每一个元素 btns[i] 所有的button注册事件onclick
    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function() {
            // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
            for (var i = 0; i < btns.length; i++) {
                btns[i].style.backgroundColor = '';
            }
            // (2) 然后才让当前的元素背景颜色为pink 留下我自己
            this.style.backgroundColor = 'pink';
   
        }
    }
    //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
   

5. 添加类名：

   btn.onclick = function () {
   	//直接覆盖原先的   
   	this.className = 'chage';
   	//不覆盖原先的       
   	this.className = '原先 change';
   }
   

6. 复选框选中的状态：this.check
   • 返回true为选中；
   • false未选中
7. 属性的操作：
   • 获取属性：element.属性——获取内置属性
   • element.getAttribute(‘属性’)——获取自定义属性
   • H5自定义属性名用data-开头；用驼峰命名
     • 获取用div.dataset.属性名或div.dataset.[‘属性’]
   • 设置属性：element.属性 = ‘值’、class类名时用classnam
     • element.setAttribute(‘属性’，‘值’) 主要用于自定义属性
   • 移除属性：element.removeAttribute(‘属性’)
8. 除了innerHTML,也可用childNodes和nodeValue属性来获取元素

   document.getElementsByTagName("BUTTON")[0].childNodes[0].nodeValue
   

9. 三种创建元素方式区别：
   • document.write():创建元素（如果页面流动加载完毕，再调用导致重绘，之前加载的都没了）
   • element.innerHTML():创建多个元素效率高（不拼接字符，采取数组形式拼接）

   var inner = document.querySelector('.inner');
   // for (var i = 0; i <= 100; i++) {
   //     inner.innerHTML += '<a href="#">百度</a>'
   // }
   var arr = [];
   for (var i = 0; i <= 100; i++) {
       arr.push('<a href="#">百度</a>');
   }
   inner.innerHTML = arr.join('');
   
   // 直接添加
   <p id="p1">Hello World!</p>
   
   <script>
   document.getElementById("p1").innerHTML="New text!";
   </script>
   

   • createElement()：创建多个元素效率低一点，但结构比较清晰

节点操作

1. 父节点parentNode :
   • erweima.parentNode(没有最近的父亲返回null)
2. 字节点
   • childNodes 返回包含所有节点（包括元素、文本节点）
   • children 返回元素节点
   • parentNode.firstChild/lastChild 返回元素、文本节点
   • parentNode.lastElementChild / firstElementChild 返回元素节点 ie9才支持
   • 实际开发parentchildren[0]
3. 兄弟节点：
   • 下一个兄弟节点：nextSibling 包括所有节点 元素(换行/空格)、文本
   • nextElementSibling:只有元素节点、previousSibling: ie9以上兼容
4. 创建节点：
   • document.createElement(‘tagName’); 创建之后要进行添加操作才能显示
5. 添加节点 从后面追加：
   • node.appendChild(child) :ul.appendChild(li) （node父亲、child儿子）
6. 添加节点 (从前面添加)：
   • node.insertBefore(child追加的元素,指定的元素前ul.children[0])
7. 删除节点：
   • node父亲.removeChild(child)
8. 复制节点：node.clone()
   • 括号内为空或false为浅拷贝，只复制标签、不复制内容；
   • 括号内为true为深拷贝