前端三剑客之 JavaScript (BOM操做和DOM操做)

BOM操做

// window 操做
window.innerHeight                            // 浏览器窗口的内部高度
window.innerWidth                 // 浏览器窗口的内部宽度
window.open()                       // 打开新窗口
window.close( )                     // 关闭当前窗口
window.navigator.appName　　           // Web浏览器全称
window.navigator.appVersion　　    // Web浏览器厂商和版本的详细字符串
window.navigator.userAgent        // 客户端绝大部分信息
window.navigator.platform　　　        // 浏览器运行所在的操做系统
window.history.forward()                // 前进一页
window.history.back()                       // 后退一页
window.location.href                        // 当前页面获取URL
window.location.href="URL"            // 跳转到指定页面
window.location.reload()                    // 从新加载页面

// 弹窗
alert()                                                   // 警告框
confirm()                                               // 确认框
prompt()                                                    // 提示框

// 定时
setTimeout('须要定时的函数',1000); // 设置单次定时触发
clearTimeout(t)                                     // 清除
setInterval('须要定时的函数',1000); // 设置循环触发
clearInterval(t)                                    // 清除

DOM操做

经过JS代码操做html页面，实现相应效果

要想操做html页面，实现相应动态效果，第一步仍是得先解决查找标签的事情

查找标签

直接查找

document.getElementById('须要查找的id')                              // 用id查找
document.getElementsByClassName('须要查找的类名')           // 用类名查找
document.getElementsByTagName('须要查找的标签名')               // 用标签名查找

间接查找

使用方法：
    var dEle = document.getElementById('p1');
    dEle.parentElement

parentElement            //父节点标签元素
children                 //全部子标签
firstElementChild        //第一个子标签元素
lastElementChild         //最后一个子标签元素
nextElementSibling       //下一个兄弟标签元素
previousElementSibling   //上一个兄弟标签元素

节点操做

• 1.建立节点，2.添加自定义属性，3.添加固有属性，4.添加到DOM树中浏览器展现

  // appendChild 直接尾部添加
  
  // 建立标签
  var imgEle = document.createElement('img');
  // 设置自定义属性
  imgEle.setAttribute('id','i1')
  // 设置固有的属性
  imgEle.src = 'longzhu.png'
  // 添加到DOM树中，让浏览器展现出来
  var d1Ele = document.getElementById('d1')  // d1为须要插入的位置标签id
  d1Ele.appendChild(imgEle)

• 1.建立节点，2.添加固有属性和标签文本值，3.指定位置添加标签

  // insertBefore 固定位置添加
  
  // 建立标签
  var aEle = document.createElement("a")
  aEle.href = 'https:www.baidu.com'
  aEle.innerText = '点我点我'
  // 获取参考点标签
  var d3Ele = document.getElementById('d3')
  var s1Ele = document.getElementById('s1')
  // 在d3标签内部，s1标签上方添加建立的a标签
  d3Ele.insertBefore(aEle,s1Ele)

• innerText和innerHTML的区别

  // 获取一个标签
  var d2Ele = document.getElementById('d2');
  // 仅仅能获取到d2标签的内部文本
  d2Ele.innerText
  // 不只获取文本，标签页所有获取到
  d2Ele.innerHTML
  
  // 获取标签
  var d2Ele = document.getElementById('d2');
  // 设置内部文本
  d2Ele.innerText = '哈哈'
  d2Ele.innerHTML = '呵呵'
  // 设置内部文本(文本中包含标签)
  d2Ele.innerText = '<h1>我是h1</h1>' // 不认识html标签
  d2Ele.innerHTML = '<h1>我是h1</h1>' // 可以识别html标签

• 获取值操做

  // 用于获取用户选择或输入的标签
  input
  select
  textarea
  
  // 获取值
  demoEle.value
  // 设置值
  demoEle.value = '我改了'

• class操做

  // 注意点：经过class获取到的数据是一个数组，须要经过索引拿到单个对象
  
  // 根据class找到相应的标签对象
  var c1Ele = document.getElementsByClassName('c1')[0]
  
  // 获取该标签对象的class属性列表并移除背景红色
  c1Ele.classList.remove('bg-red')
  
  // 添加属性
  c1Ele.classList.add('bg-green')
  
  // 判断是否存在
  c1Ele.classList.contains('bg-green')
  c1Ele.classList.contains('bg-red')
  
  // 有则删除，无则添加
  c1Ele.classList.toggle('bg-green')

• style样式操做

  // 修改高度样式
  d1Ele.style.height = '200px'
  // 修改宽度样式
  d1Ele.style.width = '200px'
  // 修改背景色样式
  d1Ele.style.backgroundColor = 'blue'

事件绑定

经常使用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素得到焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,表明已经输入完了,咱们能够对它进行验证.
onchange       域的内容被改变。             应用场景：一般用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

两种绑定事件的方法

• 标签内直接调用相应事件函数
• js代码自动查找标签并绑定事件

示例

<div class="bg-red " id="d1"></div>
<button id='b1' onclick='change();'>开关1</button>
<button id='b2'>开关2</button>
<script>
    // 标签直接绑定事件
    function change(){
        var d1Ele = document.getElementById('d1');
        d1Ele.classLict.toggle('bg-green');
    }
    // 经过JS代码绑定事件
    var b2Ele = document.getElementById('b2');
    b2Ele.onclick = ()=>{
        change();
    }

搜索框案例

<input type="text" value="苹果手机" id="i1">
    var i1Ele = document.getElementById('i1');
    i1Ele.onfocus = function (ev) {
        i1Ele.value = '';
        // 也能够直接用this
        this.value = ''
    };
    i1Ele.onblur = function (ev) {
        i1Ele.value = '苹果电脑';
        // 也能够直接用this
        this.value = '苹果电脑'
    }

计时器案例

// 全局变量
var t;
// 步骤1 
// 将当前时间填写到i1中
var now = new Date();
var i1Ele = document.getElementById('i1');
i1Ele.value = now.toLocalString();

// 步骤2(点开始，时间动起来)>>>(每隔一秒执行一次展现时间操做)
    // 将添加时间的功能封装成一个函数
function showTime(){
    var now = new Date();
    var i1Ele = document.getElementById('i1');
    i1Ele.value = now.toLocalString();
};
    // 页面一刷新先展现当前时间
showTime()
    // 找到开始按钮，绑定事件
var b1Ele = document.getElementById('b1');
b1Ele.onclick = function(){
    // 判断是否已经开启过定时器了
    if (!t){
        // t指代定时器
        t = setInterval(showTime,1000);
    }
}

// 步骤3(给中止按钮绑定事件，点击后清除定时器)
var b2Ele = document.getElementById('b1');
b2Ele.onclik = function(){
    // 问题来了，清除谁呢？须要有一个变量指代定时器
    clearInterval(t)；
}

// 步骤4(若是点击屡次开始按钮，发现没法清除定时器)
// 判判定时器是否已开启

省市联动案例

data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
      // 先提早将两个标签对象查找到
    var pEle = document.getElementById('province');
    var cEle = document.getElementById('city');
    // 先展现省份信息
    for (var province in data){
        var proEle = document.createElement('option');
        proEle.innerText = province;
        pEle.appendChild(proEle)
    }
      // 绑定变化事件
    pEle.onchange = function () {
        // 获取对应的省信息
        var currentProvince = pEle.value;
        // 将以前的省对应的市清除
        cEle.innerHTML = '';
      
        // 添加默认的请选择项
        var newEle = document.createElement('option');
        newEle.innerText = '请选择';
        cEle.appendChild(newEle);
      
        // 获取当前省对应的市
        relCity = data[currentProvince];
        // 循环对应的市，添加到市对应的选择框中
        for(var i=0;i<relCity.length;i++){
            var cityEle = document.createElement('option');
            cityEle.innerText = relCity[i];
            cEle.appendChild(cityEle)
        }
    }