YHC -- WebApi

文章目录

自定义js文件
杂谈
案例冒泡排序实现sort()排序方法原理
案例去除超链接默认跳转
案例 JS querySelect 选择器API模拟JQ的$()原理
案例对属性textContent做兼容性处理
节点元素操作
案例 --- 点击按钮设置div中P标签改变背景颜色
案例 --- 节点操作隔行变色
案例节点使用兼容代码
案例 checkbox全选和全不选的实现
元素创建的不同方式
第一种元素的创建方式
第二种元素的创建方式
案例点击按钮创建列表
拓展的页面中嵌入广告
第三种元素创建方式
案例动态创建列表
案例点击按钮创建一个表格
元素相关的方法
只创建一个元素
为元素绑定多个事件
为元素绑定事件编写兼容性代码
复习
绑定事件的区别
为元素解绑事件
为元素绑定事件和解绑事件的兼容代码
事件冒泡
事件的三个阶段
为同一个元素绑定多个不同事件指向同一个事件处理函数
案例百度搜索智能提示
BOM
系统弹窗
加载事件
location 对象
history对象
navigator 对象
定时器
案例一起摇起来
案例定时器控制图片src切换
setTimeout()
按钮禁用
div渐变
设置div的宽度
案例移动元素
封装动画函数
动画函数封装
轮播图轮播
offset 系列
offset系列具体的值
通过document获取元素
案例鼠标移动挂件

自定义js文件

common.js

/**
 * Created by Administrator on 2017-08-18.
 */
//格式化日期的代码

//根据id获取元素的代码

//innerText和textContent的兼容

//获取第一个子元素的兼容

//获取最后一个子元素的兼容

/**
 * Created by Administrator on 2017/3/24.
 */

/**
 * 格式化日期
 * @param dt 日期对象
 * @returns {string} 返回值是格式化的字符串日期
 */
function getDates(dt) {
    var str = "";//存储时间的字符串
    //获取年
    var year = dt.getFullYear();
    //获取月
    var month = dt.getMonth() + 1;
    //获取日
    var day = dt.getDate();
    //获取小时
    var hour = dt.getHours();
    //获取分钟
    var min = dt.getMinutes();
    //获取秒
    var sec = dt.getSeconds();
    month = month < 10 ? "0" + month : month;
    day = day < 10 ? "0" + day : day;
    hour = hour < 10 ? "0" + hour : hour;
    min = min < 10 ? "0" + min : min;
    sec = sec < 10 ? "0" + sec : sec;
    str = year + "年" + month + "月" + day + "日 " + hour + ":" + min + ":" + sec;
    return str;
}
/**
 * 获取指定标签对象
 * @param id 标签的id属性值
 * @returns {Element}根据id属性值返回指定标签对象
 */
function my$(id) {
    return document.getElementById(id);
}

function setInnerText(element, text) {
    if (typeof element.textContent == "undefined") {
        element.innerText = text;
    } else {
        element.textContent = text;
    }
}
/**
 * 获取元素的文本内容
 * @param element 任意元素
 * @returns {*} 任意元素中的文本内容
 */
function getInnerText(element) {
    if (typeof(element.textContent) == "undefined") {
        return element.innerText;
    } else {
        return element.textContent;
    }
}
/**
 * 获取父级元素中的第一个子元素
 * @param element 父级元素
 * @returns {*} 父级元素中的子级元素
 */
function getFirstElement(element) {
    if (element.firstElementChild) {
        return element.firstElementChild;
    } else {
        var node = element.firstChild;
        while (node && node.nodeType != 1) {
            node = node.nextSibling;
        }
        return node;
    }
}
/**
 * 获取父级元素中的最后一个子元素
 * @param element 父级元素
 * @returns {*} 最后一个子元素
 */
function getLastElement(element) {
    if (element.lastElementChild) {
        return element.lastElementChild;
    } else {
        var node = element.lastChild;
        while (node && node.nodeType != 1) {
            node = node.previousSibling;
        }
        return node;
    }
}
/**
 * 获取某个元素的前一个兄弟元素
 * @param element 某个元素
 * @returns {*} 前一个兄弟元素
 */
function getPreviousElement(element) {
    if (element.previousElementSibling) {
        return element.previousElementSibling
    } else {
        var node = element.previousSibling;
        while (node && node.nodeType != 1) {
            node = node.previousSibling;
        }
        return node;
    }
}
/**
 * 获取某个元素的后一个兄弟元素
 * @param element 某个元素
 * @returns {*} 后一个兄弟元素
 */
function getNextElement(element) {
    if (element.nextElementSibling) {
        return element.nextElementSibling
    } else {
        var node = element.nextSibling;
        while (node && node.nodeType != 1) {
            node = node.nextSibling;
        }
        return node;
    }
}
/**
 * 获取某个元素的所有兄弟元素
 * @param element 某个元素
 * @returns {Array} 兄弟元素
 */
function getSiblings(element) {
    if (!element)return;
    var elements = [];
    var ele = element.previousSibling;
    while (ele) {
        if (ele.nodeType === 1) {
            elements.push(ele);
        }
        ele = ele.previousSibling;
    }
    ele = element.nextSibling;
    while (ele) {
        if (ele.nodeType === 1) {
            elements.push(ele);

        }
        ele = ele.nextSibling;
    }
    return elements;
}
/**
 * 返回当前浏览器是什么类型的浏览器
 */
function userBrowser(){
    var browserName=navigator.userAgent.toLowerCase();
    if(/msie/i.test(browserName) && !/opera/.test(browserName)){
        console.log("IE");
    }else if(/firefox/i.test(browserName)){
        console.log("Firefox");
    }else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){
        console.log("Chrome");
    }else if(/opera/i.test(browserName)){
        console.log("Opera");
    }else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){
        console.log("Safari");
    }else{
        console.log("不知道什么鬼!");
    }
}



//为任意一个元素绑定事件:元素,事件类型,事件处理函数
function addEventListener(element,type,fn) {
    if(element.addEventListener){
        //支持
        element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
        element.attachEvent("on"+type,fn);
    }else{
        element["on"+type]=fn;
    }
}
//为任意的一个元素解绑某个事件:元素,事件类型,事件处理函数
function removeEventListener(element,type,fn) {
    if(element.removeEventListener){
        element.removeEventListener(type,fn,false);
    }else if(element.detachEvent){
        element.detachEvent("on"+type,fn);
    }else{
        element["on"+type]=null;
    }
}

杂谈

标签自定义的属性需要用getAttribute()方法获取

案例冒泡排序实现sort()排序方法原理

    var arr = [12,15,30,45,84,99,100,1,5,74,999];
    /*冒泡排序实现sort()排序方法原理*/
    function MyArray(){
        // 实例方法：通过实例对象调用的方法 ---> 排序
        this.mySort = function(arr){
            for(var i=0;i<arr.length-1;i++){
                for(var j=0;j<arr.length-1-i;j++){
                    if(arr[j] > arr[j+1]){
                        var temp = arr[j];
                        arr[j] = arr[j+1];
                        arr[j+1] = temp;
                    }// end if
                }// end for
            }// end for
        }// end function
    }

    var myArray = new MyArray();
    myArray.mySort(arr)
    console.log(arr)

在这里插入图片描述

案例去除超链接默认跳转

 <a href="http://www.baidu.com" id="ak">百度</a>
    <script>
        // 阻止超链接默认跳转 return false
        // 此处return false 需写在onclick方法内，调用方法内return false无效
        document.getElementById("ak").onclick = function(){
            alert('gaga');
            return false;
        }
    </script>


	 <a href="http://www.baidu.com" onclick="return f1()">百度</a>
    <script type="text/javascript">
        function f1(){
            alert('gaga')
            // 这里被调用函数f1返回false
            return false;
        }
    </script>

案例 JS querySelect 选择器API模拟JQ的$()原理

JS 的发展时代决定JQ终究被抛弃


	<div id="box">我是box</div>
	    <div class="demo">
	        我是demo
	        <div class="demosss">gaga</div>
	        <div id="ch">llll</div>
	    </div>
	    <script type="text/javascript">
	        
	        function my$(element){
	            return document.querySelector(element)
	        }
	        console.log(my$('#box').innerText)
	        console.log(my$('.demo').innerText)
	        console.log(my$('.demo .demosss').innerText)
	        console.log(my$('.demo #ch').innerText)
	    </script>

案例对属性textContent做兼容性处理

common.js


//设置任意的标签中间的任意文本内容
function setInnerText(element,text){
    //判断浏览器是否支持这个属性
    if(typeof element.textContent == 'undefined'){
        // 对textContent 做兼容性处理
        element.innerText = text;
    }else{
        // 支持这个属性
        element.textContent = text;
    }
}

// 获取任意标签中间的文本内容
function getInnerText(element) {
    if(typeof element.textContent == 'undefined'){
        return element.innerText;
    }else{
        return element.textContent;
    }
}

节点元素操作

节点&元素的概念

文档:document
元素:页面中所有的标签,元素—element, 标签----元素—对象
节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node
根元素:html标签

 * 节点的属性:(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来)
  * nodeType:节点的类型:1----标签,2---属性,3---文本
  * nodeName:节点的名字:标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text
  * nodeValue:节点的值:标签节点---null,属性节点---属性值,文本节点---文本内容

获取相关的节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<div id="dv">
  <span>这是div中的第一个span标签</span>
  <p>这是div中的第二个元素,第一个p标签</p>
  <ul id="uu">
    <li>乔峰</li>
    <li>鹿茸</li>
    <li id="three">段誉</li>
    <li>卡卡西</li>
    <li>雏田</li>
  </ul>
</div>

<script src="common.js"></script>
<script>

  var ulObj=my$("uu");
  console.log(ulObj.parentNode);//div
  console.log(ulObj.parentNode.parentNode);//body
  console.log(ulObj.parentNode.parentNode.parentNode);//html
  console.log(ulObj.parentNode.parentNode.parentNode.parentNode);//document
  console.log(ulObj.parentNode.parentNode.parentNode.parentNode.parentNode);//null

//  //ul标签的父级节点
//  console.log(ulObj.parentNode);
//  //ul标签的父级元素
//  console.log(ulObj.parentElement);
//
//  console.log(ulObj.parentNode.nodeType);//标签的---1
//  console.log(ulObj.parentNode.nodeName);//标签---大写的标签名字
//  console.log(ulObj.parentNode.nodeValue);//标签---null

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<div id="dv">哦哦
  <span>这是div中的第一个span标签</span>
  <p>这是div中的第二个元素,第一个p标签</p>
  <ul id="uu">
    <li>乔峰</li>
    <li>鹿茸</li>
    <li id="three">段誉</li>
    <li>卡卡西</li>
    <li>雏田</li>
  </ul>
</div>

<script src="common.js"></script>
<script>
  //div
//  var dvObj=document.getElementById("dv");
//  //获取里面的每个子节点
//  for(var i=0;i<dvObj.childNodes.length;i++){
//    var node=dvObj.childNodes[i];
//    //nodeType--->节点的类型:1---标签,2---属性,3---文本
//    //nodeName--->节点的名字:大写的标签--标签,小写的属性名---属性,#text---文本
//    //nodeValue-->节点的值:标签---null,属性--属性的值,文本--文本内容
//    console.log(node.nodeType+"====="+node.nodeName+"===="+node.nodeValue);
//  }

  //div
//  var dvObj=document.getElementById("dv");
//  //获取的是属性的节点
//  var node=dvObj.getAttributeNode("id");
//  console.log(node.nodeType+"----"+node.nodeName+"===="+node.nodeValue);


  //div
//  var dvObj=document.getElementById("dv");
//  //子节点
//  console.log(dvObj.childNodes);//7个子节点
//  //子元素
//  console.log(dvObj.children);



</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<div id="dv">哦哦
  <span>这是div中的第一个span标签</span>
  <p>这是div中的第二个元素,第一个p标签</p>
  <ul id="uu">
    <li>乔峰</li>
    <li>鹿茸</li>
    <li id="three">段誉</li>
    <li>卡卡西</li>
    <li>雏田</li>
  </ul>
</div>
<script src="common.js"></script>
<script>

  //12行代码:都是获取节点和元素的
  //ul
  var ulObj=document.getElementById("uu");
  //父级节点
  console.log(ulObj.parentNode);
  //父级元素
  console.log(ulObj.parentElement);
  //子节点
  console.log(ulObj.childNodes);
  //子元素
  console.log(ulObj.children);
  console.log("==============================================");
  //第一个子节点
  console.log(ulObj.firstChild);//------------------------IE8中是第一个子元素
  //第一个子元素
  console.log(ulObj.firstElementChild);//-----------------IE8中不支持
  //最后一个子节点
  console.log(ulObj.lastChild);//------------------------IE8中是第一个子元素
  //最后一个子元素
  console.log(ulObj.lastElementChild);//-----------------IE8中不支持
  //某个元素的前一个兄弟节点
  console.log(my$("three").previousSibling);
  //某个元素的前一个兄弟元素
  console.log(my$("three").previousElementSibling);
  //某个元素的后一个兄弟节点
  console.log(my$("three").nextSibling);
  //某个元素的后一个兄弟元素
  console.log(my$("three").nextElementSibling);



  //总结:凡是获取节点的代码在谷歌和火狐得到的都是  相关的节点
  //凡是获取元素的代码在谷歌和火狐得到的都是   相关的元素
  //从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持








//  var ulObj=document.getElementById("uu");
//
//
//  console.log("==============================================");
//  //第一个子节点
//  console.log(ulObj.firstChild.innerText);//------------------------IE8中是第一个子元素
//  //第一个子元素
//  console.log(ulObj.firstElementChild);//-----------------IE8中不支持
//  //最后一个子节点
//  console.log(ulObj.lastChild.innerText);//------------------------IE8中是第一个子元素
//  //最后一个子元素
//  console.log(ulObj.lastElementChild);//-----------------IE8中不支持
//  //某个元素的前一个兄弟节点
//  console.log(my$("three").previousSibling.innerText);
//  //某个元素的前一个兄弟元素
//  console.log(my$("three").previousElementSibling);
//  //某个元素的后一个兄弟节点
//  console.log(my$("three").nextSibling.innerText);
//  //某个元素的后一个兄弟元素
//  console.log(my$("three").nextElementSibling);
//



</script>
</body>
</html>

案例 — 点击按钮设置div中P标签改变背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 300px;
      height: 450px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="变色" id="btn"/>
<div id="dv">
  <span>这是span</span>
  <p>这是p</p>
  <span>这是span</span>
  <p>这是p</p>
  <span>这是span</span>
  <p>这是p</p>
  <span>这是span</span>
  <a href="http://www.baidu.com">百度</a>
</div>
<script src="common.js"></script>
<script>

  my$("btn").onclick = function () {
    //先获取div
    var dvObj = my$("dv");
    //获取里面所有的子节点
    var nodes = dvObj.childNodes;
    //循环遍历所有的子节点
    for (var i = 0; i < nodes.length; i++) {
      //判断这个子节点是不是p标签
      if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {
        nodes[i].style.backgroundColor = "red";
      }
    }
  };
  //点击按钮,设置p变色---节点的方式做


</script>
</body>
</html>

案例 — 节点操作隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="变色" id="btn"/>
<ul id="uu">
  <li>爆炒助教</li>
  <li>油炸班主任</li>
  <li>清蒸小苏</li>
  <li>红烧班长</li>
  <li>红烧肉</li>
  <li>糖醋排骨</li>
  <li>凉拌秋葵</li>
  <li>鱼香胡萝卜丝</li>
</ul>
<script src="common.js"></script>
<script>
  //隔行变色--li
  my$("btn").onclick = function () {
    var count=0;//记录有多少个li
    //获取ul中所有的子节点
    var nodes = my$("uu").childNodes;
    for (var i = 0; i < nodes.length; i++) {
      //判断这个节点是不是li标签
      if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") {
        nodes[i].style.backgroundColor=count%2==0?"red":"yellow";
        count++;//8个
        //nodes[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
      }
    }
  };

</script>
</body>
</html>

案例节点使用兼容代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<ul id="uu">
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
  <li>第四个</li>
  <li>第五个</li>
</ul>
<script src="common.js"></script>
<script>
  //第一个节点和第一个元素的获取的代码在IE8中可能不支持

  //element.firstChild--->谷歌和火狐获取的是第一个子几点
  //element.firstChile--->IE8获取的是第一个子元素
  //element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持
  //获取任意一个父级元素的第一个子级元素
  function getFirstElementChild(element) {
    if(element.firstElementChild){//true--->支持
      return element.firstElementChild;
    }else{
      var node=element.firstChild;//第一个节点
      while (node&&node.nodeType!=1){
        node=node.nextSibling;
      }
      return node;
    }
  }
  //获取任意一个父级元素的最后一个子级元素
  function getLastElementChild(element) {
    if(element.lastElementChild){//true--->支持
      return element.lastElementChild;
    }else{
      var node=element.lastChild;//第一个节点
      while (node&&node.nodeType!=1){
        node=node.previousSibling;
      }
      return node;
    }
  }

  console.log(getFirstElementChild(my$("uu")).innerText);
  console.log(getLastElementChild(my$("uu")).innerText);

  //最后一个节点和最后一个元素的获取的代码在IE8中可能不支持
  //前一个节点和前一个元素的获取的代码在IE8中可能不支持
  //后一个节点和后一个元素的获取的代码在IE8中可能不支持
  
  //学习节点操作还是为了操作元素


</script>
</body>
</html>

案例 checkbox全选和全不选的实现

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }

    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }

    td {
      font: 14px "微软雅黑";
    }

    tbody tr {
      background-color: #f0f0f0;
    }

    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>
<body>
<div class="wrap">
  <table>
    <thead>
    <tr>
      <th>
        <input type="checkbox" id="j_cbAll"/>
      </th>
      <th>菜名</th>
      <th>饭店</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>红烧肉</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>西红柿鸡蛋</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>油炸榴莲</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>清蒸助教</td>
      <td>田老师</td>
    </tr>

    </tbody>
  </table>
</div>
<script src="common.js"></script>
<script>

  //获取全选的这个复选框
  var ckAll = my$("j_cbAll");
  //获取tbody中所有的小复选框
  var cks = my$("j_tb").getElementsByTagName("input");
  //点击全选的这个复选框,获取他当前的状态,然后设置tbody中所有复选框的状态
  ckAll.onclick = function () {
    //console.log(this.checked);
    for (var i = 0; i < cks.length; i++) {
      cks[i].checked = this.checked;
    }
  };

  //获取tbody中所有的复选框,分别注册点击事件
  for(var i=0;i<cks.length;i++){
    cks[i].onclick=function () {
      var flag=true;//默认都被选中了
      //判断是否所有的复选框都选中
      for(var j=0;j<cks.length;j++){
        if(!cks[j].checked){
          //没选中就进来了
          flag=false;
          break;
        }
      }
      //全选的这个复选框的状态就是flag这个变量的值
      ckAll.checked=flag;
    };
  }

</script>
</body>
</html>

元素创建的不同方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>

    /*
    *
    * 元素创建-----为了提高用户的体验
    * 元素创建的三种方式:
    * 1. document.write("标签的代码及内容");
    * 2. 对象.innerHTML="标签及代码";
    * 3. document.createElement("标签的名字");
    *
    *
    *
    *
    *
    * */
  </script>
</head>
<body>
京东
<script src="common.js"></script>
<script></script>
</body>
</html>

第一种元素的创建方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="创建一个p" id="btn"/>
小苏是一个快乐的小男孩,人家今年才38岁.好帅哦
<script src="common.js"></script>
<script>
  //document.write("标签代码及内容");
  my$("btn").onclick=function () {
    document.write("<p>这是一个p</p>");
  };
 // document.write("<p>这是一个p</p>");

  //document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉


</script>
</body>
</html>

第二种元素的创建方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      border:2px solid pink;
    }
  </style>
</head>
<body>
<input type="button" value="创建一个p" id="btn" />
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //点击按钮,在div中创建一个p标签
  //第二种方式创建元素: 对象.innerHTML="标签代码及内容";

  my$("btn").onclick=function () {
    my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";
  };
</script>
</body>
</html>

案例点击按钮创建列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 300px;
      height: 400px;
      background-color: green;
    }
  </style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>

  //  my$("btn").onclick=function () {
  //    my$("dv").innerHTML="<ul><li>杨过</li><li>小龙女</li><li>张无忌</li>  <li>张三丰</li></ul>";
  //  };


  var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"];
  my$("btn").onclick = function () {
    var str = "<ul style='list-style-type: none;cursor: pointer'>";
    //根据循环创建对应对数的li
    for (var i = 0; i < names.length; i++) {
      str += "<li>" + names[i] + "</li>";
    }
    str += "</ul>";
    my$("dv").innerHTML = str;

    //代码执行到这里,li已经有了
    //获取所有的li,遍历,添加鼠标进入事件,鼠标离开事件
    var list = my$("dv").getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
      //鼠标进入
      list[i].onmouseover = function () {
        this.style.backgroundColor = "yellow";
      };
      //鼠标离开
      list[i].onmouseout = function () {
        this.style.backgroundColor = "";
      };

    }

  };


</script>
</body>
</html>

拓展的页面中嵌入广告

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style type=text/css>
    div {
      font-size: 12px;
      font-family: arial
    }

    .baidu {
      font-size: 14px;
      line-height: 24px;
      font-family: arial
    }

    a, a:link {
      color: #0000cc;
    }

    .baidu span {
      color: #6f6f6f;
      font-size: 12px
    }

    a.more {
      color: #008000;
    }

    a.blk {
      color: #000;
      font-weight: bold;
    }</style>
</head>
<body>

<script language="JavaScript" type="text/JavaScript"
        src="http://news.baidu.com/ns?word=x%20title%3Aiphone&tn=newsfcu&from=news&cl=2&rn=5&ct=0">
</script>
//这里 script脚本嵌入的链接文件打开是  document.write('...')   之所以链接的方式是后台开发人员可以改代码来改变广告的内容

</body>
</html>

第三种元素创建方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 200px;
      height: 150px;
      border: 2px dashed pink;
    }
  </style>
</head>
<body>
<input type="button" value="创建p" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //第三种方式创建元素
  //创建元素
  //document.createElement("标签名字");对象
  //把元素追加到父级元素中
  //点击按钮,在div中创建一个p

  my$("btn").onclick = function () {
    //创建元素的
    var pObj = document.createElement("p");
    setInnnerText(pObj, "这是一个p");
    //把创建后的子元素追加到父级元素中
    my$("dv").appendChild(pObj);
  };


</script>
</body>
</html>

案例动态创建列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
      cursor: pointer;
    }

    div {
      width: 200px;
      height: 400px;
      border: 2px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];

  //点击按钮动态的创建列表,把列表加到div中
  my$("btn").onclick = function () {
    //创建ul,把ul立刻加入到父级元素div中
    var ulObj = document.createElement("ul");
    my$("dv").appendChild(ulObj);
    //动态的创建li,加到ul中
    for (var i = 0; i < kungfu.length; i++) {
      var liObj = document.createElement("li");
      //设置li中间的文字内容
      liObj.innerHTML = kungfu[i];
      ulObj.appendChild(liObj);
      //为li添加鼠标进入事件
      liObj.onmouseover = mouseoverHandle;
      //为li添加鼠标离开事件
      liObj.onmouseout = mouseoutHandle;
    }
  };

  //此位置.按钮的点击事件的外面
  function mouseoverHandle() {
    this.style.backgroundColor = "red";
  }
  function mouseoutHandle() {
    this.style.backgroundColor = "";
  }

  //如果是循环的方式添加事件,推荐用命名函数
  //如果不是循环的方式添加事件,推荐使用匿名函数


</script>
</body>
</html>

案例点击按钮创建一个表格

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="创建表格" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>

  var arr=[
    {name:"百度",href:"http://www.baidu.com"},
    {name:"谷歌",href:"http://www.google.com"},
    {name:"优酷",href:"http://www.youku.com"},
    {name:"土豆",href:"http://www.tudou.com"},
    {name:"快播",href:"http://www.kuaibo.com"},
    {name:"爱奇艺",href:"http://www.aiqiyi.com"}
  ];

  //点击按钮创建表格
  my$("btn").onclick=function () {
    //创建table加入到div中
    var tableObj=document.createElement("table");
    tableObj.border="1";
    tableObj.cellPadding="0";
    tableObj.cellSpacing="0";
    my$("dv").appendChild(tableObj);
    //创建行,把行加入到table中
    for(var i=0;i<arr.length;i++){
      var dt=arr[i];//每个对象
      var trObj=document.createElement("tr");
      tableObj.appendChild(trObj);
      //创建第一个列,然后加入到行中
      var td1=document.createElement("td");
      td1.innerText=dt.name;
      trObj.appendChild(td1);
      //创建第二个列
      var td2=document.createElement("td");
      td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
      trObj.appendChild(td2);
    }
  };

</script>
</body>
</html>

元素相关的方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<input type="button" value="干掉第一个子元素" id="btn2"/>
<input type="button" value="干掉所有子元素" id="btn3"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>

  var i=0;
  my$("btn").onclick=function () {
    i++;
   var obj= document.createElement("input");
    obj.type="button";
    obj.value="按钮"+i;
    //my$("dv").appendChild(obj);//追加子元素
    //把新的子元素插入到第一个子元素的前面
    my$("dv").insertBefore(obj,my$("dv").firstElementChild);
    //my$("dv").replaceChild();---自己玩
  };

  my$("btn2").onclick=function () {
    //移除父级元素中第一个子级元素
    my$("dv").removeChild(my$("dv").firstElementChild);
  };

  my$("btn3").onclick=function () {
    //点击按钮删除div中所有的子级元素
    //判断父级元素中有没有第一个子元素
    while(my$("dv").firstElementChild){
      my$("dv").removeChild(my$("dv").firstElementChild);
    }

  };
</script>
</body>
</html>

只创建一个元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //有则删除,无则创建


//先判断有没有,有就删除,然后再创建
//  my$("btn").onclick=function () {
//    //判断,div中有没有这个按钮,有就删除
//    //判断这个按钮的子元素是否存在
//    if(my$("btn2")){//如果为true就有
//      my$("dv").removeChild(my$("btn2"));
//    }
//    var obj=document.createElement("input");
//    obj.type="button";
//    obj.value="按钮";
//    obj.id="btn2";
//    my$("dv").appendChild(obj);
//  };


  my$("btn").onclick=function () {
    //判断,div中有没有这个按钮,有就删除
    //判断这个按钮的子元素是否存在
    if(!my$("btn2")){//如果为true就有
      var obj=document.createElement("input");
      obj.type="button";
      obj.value="按钮";
      obj.id="btn2";
      my$("dv").appendChild(obj);
    }

  };


</script>
</body>
</html>

为元素绑定多个事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>
  //为元素绑定事件(DOM):一种,但是不兼容,有两种
  //1 对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
  //2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持

  //为按钮绑定点击事件
  //参数1:事件的类型---事件的名字,没有on
  //参数2:事件处理函数---函数(命名函数,匿名函数)
  //参数3:布尔类型,目前就写false-----没有为什么,不解释,明天说

  //为同一个元素绑定多个相同的事件--
//  my$("btn").addEventListener("click",function () {
//    console.log("小苏猥琐啊");
//  },false);
//  my$("btn").addEventListener("click",function () {
//    console.log("小苏龌龊啊");
//  },false);
//  my$("btn").addEventListener("click",function () {
//    console.log("小苏邪恶啊");
//  },false);
//  my$("btn").addEventListener("click",function () {
//    console.log("小苏下流啊");
//  },false);

  //参数1:事件类型---事件名字，有on
  //参数2:事件处理函数---函数(命名函数,匿名函数)

//  my$("btn").attachEvent("onclick",function () {
//    console.log("小杨好帅哦1");
//  });
//
//  my$("btn").attachEvent("onclick",function () {
//    console.log("小杨好帅哦2");
//  });
//
//  my$("btn").attachEvent("onclick",function () {
//    console.log("小杨好帅哦3");
//  });


</script>
</body>
</html>

为元素绑定事件编写兼容性代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>

  //为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
  function addEventListener(element,type,fn) {
    //判断浏览器是否支持这个方法
    if(element.addEventListener){
      element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
      element.attachEvent("on"+type,fn);
    }else{
      element["on"+type]=fn;
    }
  }

  addEventListener(my$("btn"),"click",function () {
    console.log("哦1");
  });
  addEventListener(my$("btn"),"click",function () {
    console.log("哦2");
  });
  addEventListener(my$("btn"),"click",function () {
    console.log("哦3");
  });



//  my$("btn")["on"+"click"]=function () {
//
//  };

//  function Person(name) {
//    this.name=name;
//    this.sayHi=function () {
//      console.log("您好啊");
//    };
//  }

//  var per=new Person("小明");
//  if(per.sayHii){//判断这个对象中有没有这个方法
//    per.sayHii();
//  }else{
//    console.log("没有这个方法");
//  }






</script>
</body>
</html>

复习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    /*
     *
     * 节点:
     * 节点:页面中所有的内容都是节点(标签,属性,文本:文字,空格,换行)
     * 文档：document---页面中的顶级对象
     * 元素:页面中所有的标签,   标签---元素--对象(通过DOM的方式来获取这个标签,得到了这个对象,此时这个对象叫DOM对象)
     * 节点的属性:作用:为了将来获取很多节点,得到节点中的标签(元素),识别节点中的标签元素
     * 节点的类型:1标签节点,2属性节点,3文本节点
     * nodeType:节点的类型,1---标签节点,2----属性节点,3---文本节点
     * nodeName:标签节点--大写的标签名字,属性节点---小写的属性名字,文本节点---#text
     * nodeValue:标签---null,属性---属性的值,文本---文本内容
     * if(node.nodeType==1&&node.nodeName=="P")
     *
     * 获取节点及元素的代码(下面呢)
     *
     *
     *
     * 元素的创建
     * 三种元素创建的方式
     * 1. document.write("标签代码及内容"); 如果在页面加载完毕后创建元素.页面中的内容会被干掉
     * 2. 父级对象.innerHTML="标签代码及内容";
     * 3. document.createElement("标签名字");得到的是一个对象,
     *   父级元素.appendChild(子级元素对象);
     *   父级元素.inerstBefore(新的子级对象,参照的子级对象);
     *   移除子元素
     *   父级元素.removeChild(要干掉的子级元素对象);
     *
     * 事件的绑定:为同一个元素绑定多个相同的事件
     * 三种方式:
     * 1. 对象.on事件名字=事件处理函数      如果是多个相同事件注册用这种方式,最后一个执行,之前的被覆盖了
     * my$("btn").onclick=function(){};
     * 2. 对象.addEventListener("没有on的事件名字",事件处理函数,false);
     * my$("btn").addEventListener("click",function(){},false);
     * 3. 对象.attachEvent("有on的事件名字",事件处理函数);
     * my$("btn").attachEvent("onclick",function(){});
     *
     *
     *
     * */

    //为任意的一个元素,绑定任意的一个事件
    function addEventListener(element,type,fn) {
      if(element.addEventListener){
        element.addEventListener(type,fn,false);
      }else if(element.attachEvent){
        element.attachEvent("on"+type,fn);
      }else{
        element["on"+type]=fn;
      }
    }
//    my$("btn")["on"+"click"]=function(){};
//
//      var obj={
//        name:"张三",
//        sayHi:function () {
//
//        }
//
//      };


    //获取当前节点的父级节点
    console.log(my$("uu").parentNode);
    //获取当前节点的父级元素
    console.log(my$("uu").parentElement);
    //获取当前节点的子级节点
    console.log(my$("uu").childNodes);
    //获取当前节点的子级元素
    console.log(my$("uu").children);


    //获取当前节点的第一个子级节点
    console.log(my$("uu").firstChild);
    //获取当前节点的第一个子级元素
    console.log(my$("uu").firstElementChild);
    //获取当前节点的最后一个子级节点
    console.log(my$("uu").lastChild);
    //获取当前节点的最后一个子级元素
    console.log(my$("uu").lastElementChild);
    //获取当前节点的前一个兄弟节点
    console.log(my$("uu").previousSibling);
    //获取当前节点的前一个兄弟元素
    console.log(my$("uu").previousElementSibling);
    //获取当前节点的后一个兄弟节点
    console.log(my$("uu").nextSibling);
    //获取当前节点的后一个兄弟元素
    console.log(my$("uu").nextElementSibling);


    //    document.write("<p>这是一个p</p>")
    //
    //    document.body.innerHTML="<p>这是一个p</p>";
  </script>
</head>
<body>

<script src="common.js"></script>
<script>


  //  var pObj=document.createElement("p");
  //  父级元素.appendChild(pObj);

</script>
</body>
</html>

绑定事件的区别

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>



  /*
  *
  * 总结绑定事件的区别:
  * addEventListener();
  * attachEvent()
  *
  * 相同点: 都可以为元素绑定事件
  * 不同点:
  * 1.方法名不一样
  * 2.参数个数不一样addEventListener三个参数,attachEvent两个参数
  * 3.addEventListener 谷歌,火狐,IE11支持,IE8不支持
  *   attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
  * 4.this不同,addEventListener 中的this是当前绑定事件的对象
  *   attachEvent中的this是window
  * 5.addEventListener中事件的类型(事件的名字)没有on
  *  attachEvent中的事件的类型(事件的名字)有on
  *
  *  现在遇到的逆境,都是以后成长的阶梯
  *
  *
  *
  *
  *
  *
  *
  *
  *
  * */


  //为按钮绑定多个点击事件

//  my$("btn").addEventListener("click",function () {
//    console.log(this);
//  },false);

//  my$("btn").attachEvent("onclick",function () {
//    console.log(this);
//  });







</script>
</body>
</html>

为元素解绑事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="小苏" id="btn"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<script src="common.js"></script>
<script>
  //1 对象.on事件名字=事件处理函数----绑定事件
//  my$("btn").onclick=function () {
//    console.log("我猥琐");
//  };
//  my$("btn2").onclick=function () {
//    //1.解绑事件
//    my$("btn").onclick=null;
//  };

//  function f1() {
//    console.log("第一个");
//  }
//  function f2() {
//    console.log("第二个");
//  }
//  my$("btn").addEventListener("click",f1,false);
//  my$("btn").addEventListener("click",f2,false);
//
//  //点击第二个按钮把第一个按钮的第一个点击事件解绑
//  my$("btn2").onclick=function () {
//    //解绑事件的时候,需要在绑定事件的时候,使用命名函数
//    my$("btn").removeEventListener("click",f1,false);
//  };


  function f1() {
    console.log("第一个");
  }
  function f2() {
    console.log("第二个");
  }
  my$("btn").attachEvent("onclick",f1);
  my$("btn").attachEvent("onclick",f2);

  my$("btn2").onclick=function () {
      my$("btn").detachEvent("onclick",f1);
  };



  //解绑事件:
  /*
  * 注意:用什么方式绑定事件,就应该用对应的方式解绑事件
  * 1.解绑事件
  * 对象.on事件名字=事件处理函数--->绑定事件
  * 对象.on事件名字=null;
  * 2.解绑事件
  * 对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件
  * 对象.removeEventListener("没有on的事件类型",函数名字,false);
  * 3.解绑事件
  * 对象.attachEvent("on事件类型",命名函数);---绑定事件
  * 对象.detachEvent("on事件类型",函数名字);
  *
  *
  * */


</script>



</body>
</html>

为元素绑定事件和解绑事件的兼容代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="按钮" id="btn1"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<script src="common.js"></script>
<script>

  //绑定事件的兼容
  function addEventListener(element,type,fn) {
    if(element.addEventListener){
      element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
      element.attachEvent("on"+type,fn);
    }else{
      element["on"+type]=fn;
    }
  }
  //解绑事件的兼容
  //为任意的一个元素,解绑对应的事件
  function removeEventListener(element,type,fnName) {
    if(element.removeEventListener){
      element.removeEventListener(type,fnName,false);
    }else if(element.detachEvent){
      element.detachEvent("on"+type,fnName);
    }else{
      element["on"+type]=null;
    }
  }
  function f1() {
    console.log("第一个");
  }
  function f2() {
    console.log("第二个");
  }
  addEventListener(my$("btn1"),"click",f1);
  addEventListener(my$("btn1"),"click",f2);
  my$("btn2").onclick=function () {
    removeEventListener(my$("btn1"),"click",f1);
  };


</script>
</body>
</html>

事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    #dv1{
      width: 300px;
      height: 200px;
      background-color: red;
    }
    #dv2{
      width: 250px;
      height: 150px;
      background-color: green;
    }
    #dv3{
      width: 200px;
      height: 100px;
      background-color: blue;
    }
  </style>
  <script>

    //事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.
  </script>
</head>
<body>
<div id="dv1">
  <div id="dv2">
    <div id="dv3"></div>
  </div>
</div>

<script src="common.js"></script>
<script>

  //事件冒泡,阻止事件冒泡,
  //如何阻止事件冒泡: window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

  // e.stopPropagation(); 谷歌和火狐支持,

  my$("dv1").onclick=function () {
    console.log(this.id);
  };
  my$("dv2").onclick=function () {
    console.log(this.id);
    //window.event.cancelBubble=true;
  };
  //事件处理参数对象
  my$("dv3").onclick=function (e) {
    console.log(this.id);
    //阻止事件冒泡
    //e.stopPropagation();

    console.log(e);
  };

//  document.body.onclick=function () {
//      console.log("颤抖吧,你们这些愚蠢的标签");
//  };







</script>
</body>
</html>

事件的三个阶段

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    #dv1 {
      width: 300px;
      height: 200px;
      background-color: red;
    }

    #dv2 {
      width: 250px;
      height: 150px;
      background-color: green;
    }

    #dv3 {
      width: 200px;
      height: 100px;
      background-color: blue;
    }
  </style>
  <script>

    //事件有三个阶段:
    /*
     *
     * 1.事件捕获阶段  :从外向内
     * 2.事件目标阶段  :最开始选择的那个
     * 3.事件冒泡阶段  : 从里向外
     *
     * 为元素绑定事件
     * addEventListener("没有on的事件类型",事件处理函数,控制事件阶段的)
     * 事件触发的过程中,可能会出现事件冒泡的效果,为了阻止事件冒泡--->
     * window.event.cancelBubble=true;谷歌,IE8支持,火狐不支持
     * window.event就是一个对象,是IE中的标准
     * e.stopPropagation();阻止事件冒泡---->谷歌和火狐支持
     * window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准
     * 事件参数e在IE8的浏览器中是不存在,此时用window.event来代替
     * addEventListener中第三个参数是控制事件阶段的
     * 事件的阶段有三个:
     * 通过e.eventPhase这个属性可以知道当前的事件是什么阶段你的
     * 如果这个属性的值是:
     * 1---->捕获阶段
     * 2---->目标阶段
     * 3---->冒泡
     * 一般默认都是冒泡阶段,很少用捕获阶段
     * 冒泡阶段:从里向外
     * 捕获阶段:从外向内
     *
     *
     *
     *
     *
     *
     *
     * */
  </script>
</head>
<body>
<div id="dv1">
  <div id="dv2">
    <div id="dv3"></div>
  </div>
</div>
<script src="common.js"></script>
<script>
  //事件冒泡:是从里向外

  //同时注册点击事件
  var objs = [my$("dv3"), my$("dv2"), my$("dv1")];
  //遍历注册事件
  objs.forEach(function (ele) {
    //为每个元素绑定事件
    ele.addEventListener("click", function (e) {
      console.log(this.id+"====>"+e.eventPhase);

    }, true);

  });


  //该属性在事件参数对象中存在

</script>
</body>
</html>

为同一个元素绑定多个不同事件指向同一个事件处理函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="小苏" id="btn"/>
<script src="common.js"></script>
<script>
  //为同一个元素绑定多个不同的事件,指向相同的事件处理函数
  my$("btn").onclick = f1;
  my$("btn").onmouseover = f1;
  my$("btn").onmouseout = f1;
  function f1(e) {
    switch (e.type) {
      case "click":
        alert("好帅哦");
        break;
      case "mouseover":
        this.style.backgroundColor = "red";
        break;
      case "mouseout":
        this.style.backgroundColor = "green";
        break;
    }
  }
  //  my$("btn").onmouseover=function (e) {
  //    console.log(e);
  //  };
</script>
</body>
</html>

案例百度搜索智能提示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #box {
      width: 450px;
      margin: 200px auto;
    }

    #txt {
      width: 350px;
    }

    #pop {
      width: 350px;
      border: 1px solid red;
    }

    #pop ul {
      margin: 10px;
      padding: 0px;
      width: 200px;
      list-style-type: none;

    }

    #pop ul li {

    }
  </style>
</head>
<body>

<div id="box">
  <input type="text" id="txt" value="">
  <input type="button" value="搜索" id="btn">

</div>

<script src="common.js"></script>
<script>


  var keyWords = ["小杨才是最纯洁的", "小杨才是最帅的", "小段是最猥琐的", "小超是最龌龊的", "传智播客是一个培训机构", "传说在传智有个很帅很纯洁的小杨", "苹果好吃", "苹果此次召回还是没有中国"];
  //获取文本框注册键盘抬起事件
  my$("txt").onkeyup = function () {


    //每一次的键盘抬起都判断页面中有没有这个div
    if(my$("dv")){
      //删除一次
      my$("box").removeChild(my$("dv"));
    }
    //获取文本框输入的内容
    var text = this.value;
    //临时数组--空数组------->存放对应上的数据
    var tempArr = [];
    //把文本框输入的内容和数组中的每个数据对比
    for (var i = 0; i < keyWords.length; i++) {
      //是否是最开始出现的
      if (keyWords[i].indexOf(text) == 0) {
        tempArr.push(keyWords[i]);//追加
      }
    }
    //如果文本框是空的,临时数组是空的,不用创建div
    if (this.value.length == 0 || tempArr.length == 0) {
      //如果页面中有这个div,删除这个div
      if (my$("dv")) {
        my$("box").removeChild(my$("dv"));
      }
      return;
    }
    //创建div,把div加入id为box的div中
    var dvObj = document.createElement("div");
    my$("box").appendChild(dvObj);
    dvObj.id = "dv";
    dvObj.style.width = "350px";
    //dvObj.style.height="100px";//肯定是不需要的------
    dvObj.style.border = "1px solid green";
    //循环遍历临时数组,创建对应的p标签
    for (var i = 0; i < tempArr.length; i++) {
      //创建p标签
      var pObj = document.createElement("p");
      //把p加到div中
      dvObj.appendChild(pObj);
      setInnerText(pObj, tempArr[i]);
      pObj.style.margin = 0;
      pObj.style.padding = 0;
      pObj.style.cursor = "pointer";
      pObj.style.marginTop = "5px";
      pObj.style.marginLeft = "5px";
      //鼠标进入
      pObj.onmouseover = function () {
        this.style.backgroundColor = "yellow";
      };
      //鼠标离开
      pObj.onmouseout = function () {
        this.style.backgroundColor = "";
      };
    }


  };


</script>

</body>
</html>

BOM

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    body{
      height: 2000px;
    }
  </style>
  <script>
    /*
    * JavaScript分三个部分:
    * 1. ECMAScript标准---基本语法
    * 2. DOM--->Document Object Model 文档对象模型,操作页面元素的
    * 3. BOM--->Browser Object Model 浏览器对象模型,操作浏览器的
    *
    * 浏览器中有个顶级对象:window----皇上
    * 页面中顶级对象:document-----总管太监
    * 页面中所有的内容都是属于浏览器的,页面中的内容也都是window的
    *
    * 变量是window的
    *
    *
    * */

//    var num=100;
//    console.log(window.num);

//    function f1() {
//      console.log("小苏我也从了");
//    }
//    window.f1();

    //因为页面中的所有内容都是window的,window是可以省略的.

    //window.document.write("哈哈");


//    var name="您好";
//    console.log(window.name);

//    console.log(top);
//    console.log(window);


  </script>
</head>
<body>

</body>
</html>

系统弹窗

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>

    //window.alert("您好啊");//以后不用,测试的时候使用
    //window.prompt("请输入帐号");
//    var result=window.confirm("您确定退出吗");
//    console.log(result);
  </script>
</head>
<body>
<p>这是一个P</p>

</body>
</html>

加载事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>

    //页面加载的时候,按钮还没出现,页面没有加载完毕

    //页面加载完毕了,再获取按钮
    //只要页面加载完毕,这个事件就会触发-----页面中所有的内容,标签,属性,文本,包括外部引入js文件
//    window.function () {
//      document.getElementById("btn").onclick=function () {
//        alert("您好");
//      };
//    };


    //很重要
//    function () {
//      document.getElementById("btn").onclick=function () {
//        alert("您好");
//      };
//    };

    //扩展的事件---页面关闭后才触发的事件
//    window.onunload=function () {
//
//    };
    //扩展事件---页面关闭之前触发的
//    window.onbeforeunload=function () {
//      alert("哈哈");
//    };

  </script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
</body>
</html>

location 对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>

    //对象中的属性和方法
    //location对象
    //console.log(window.location);

//    //地址栏上#及后面的内容
//    console.log(window.location.hash);
//    //主机名及端口号
//    console.log(window.location.host);
//    //主机名
//    console.log(window.location.hostname);
//    //文件的路径---相对路径
//    console.log(window.location.pathname);
//    //端口号
//    console.log(window.location.port);
//    //协议
//    console.log(window.location.protocol);
//    //搜索的内容
//    console.log(window.location.search);

    function () {
      document.getElementById("btn").onclick=function () {
        //设置跳转的页面的地址
       //location.href="http://www.jd.com";//属性----------------->必须记住
       //location.assign("http://www.jd.com");//方法
        //location.reload();//重新加载--刷新
        //location.replace("http://www.jd.com");//没有历史记录



      };
    };

  </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>

</body>
</html>

history对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="跳过去" id="btn1"/>
<input type="button" value="前进" id="btn2"/>
<input type="button" value="后退" id="btn"/>
<script src="common.js"></script>
<script>
  //跳转的
  my$("btn1").onclick = function () {
    window.location.href = "15test.html";
  };
  //前进
  my$("btn2").onclick = function () {
    window.history.forward();
  };
	//后退
	  my$("btn").onclick = function () {
	    window.history.back();
	  };
	</script>
</body>
</html>

navigator 对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>


    通过userAgent可以判断用户浏览器的类型
    console.log(window.navigator.userAgent);
    //通过platform可以判断浏览器所在的系统平台类型.
    //console.log(window.navigator.platform);
  </script>
</head>
<body>


</body>
</html>

定时器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>

    //BOM中有两个定时器---计时器


  </script>
</head>
<body>
<input type="button" value="停止" id="btn"/>
<script>
  //定时器
  //参数1:函数
  //参数2:时间---毫秒---1000毫秒--1秒
  //执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数.....
  //返回值就是定时器的id值
  var timeId = setInterval(function () {
    alert("hello");//断言
  }, 1000);
  document.getElementById("btn").onclick = function () {
    //点击按钮,停止定时器
    //参数:要清理的定时的id的值
    window.clearInterval(timeId);
  };
</script>

</body>
</html>

案例一起摇起来

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    img {
      width: 200px;
      height: 200px;
    }

    div {
      position: absolute;
    }
  </style>
</head>
<body>
<input type="button" value="摇起来" id="btn1"/>
<input type="button" value="停止" id="btn2"/>
<div id="dv">
  <img src="images/heihei.jpg" alt=""/>
  <img src="images/lyml.jpg" alt=""/>
</div>
<script src="common.js"></script>
<script>
  //点击按钮摇起来
  var timeId="";
  my$("btn1").onclick = function () {
    timeId= setInterval(function () {
      //随机数
      var x = parseInt(Math.random() * 100 + 1);
      var y = parseInt(Math.random() * 100 + 1);
      //设置元素的left和top属性值
      my$("dv").style.left = x + "px";
      my$("dv").style.top = y + "px";
    }, 10);
  };

  my$("btn2").onclick=function () {
    clearInterval(timeId);
  };
</script>
</body>
</html>

案例定时器控制图片src切换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<img src="" alt="" id="im" />
<script src="common.js"></script>
<script>


  function f1() {
    //获取当前时间
    var dt = new Date();
    //获取小时
    var hour = dt.getHours();
    //获取秒
    var second = dt.getSeconds();

    hour = hour < 10 ? "0" + hour : hour;
    second = second < 10 ? "0" + second : second;

    my$("im").src="meimei/"+hour+"_"+second+".jpg";
  }
  f1();
  //页面加载完毕后,过了1秒才执行函数的代码
  setInterval(f1,1000);

</script>
</body>
</html>

setTimeout()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>

    //常用的,反复的执行
//    window.setInterval(function () {
//      alert("哈哈");
//    },1000);

    //window.clearInterval(定时器id);//清理定时器


    //另一个定时器-------一次性的定时

    /*
    * 参数1:函数
    * 参数2:时间---1000毫秒---1秒
    * 返回值:该定时器的id
    *
    *
    * */
   // window.setTimeout(函数,时间);


    //页面加载后
    window.function () {
      //一次性的定时器
      var timeId=window.setTimeout(function () {
        alert("您好");
      },1000);

      //点击这个按钮,停止这个一次性的定时器
      document.getElementById("btn").onclick=function () {
        clearTimeout(timeId);
      };
    };

  </script>
</head>
<body>
<input type="button" value="停下" id="btn"/>
<script>

</script>
</body>
</html>

按钮禁用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<textarea name="texta" id="" cols="30" rows="10">
  这个世界就是这么疯狂,你不同意,我就让你注册,秦始皇,打钱
</textarea>
<input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled" />
<script src="common.js"></script>
<script>

  var time=5;
 var timeId= setInterval(function () {

    time--;
   my$("btn").value="请仔细阅读协议("+time+")";
    if(time<=0){
      //停止定时器就可以
      clearInterval(timeId);
      //按钮可以被点击了
      my$("btn").disabled=false;
      my$("btn").value="同意";
    }

  },1000);
</script>
</body>
</html>

div渐变

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: hotpink;

    }
  </style>
</head>
<body>

<div id="dv"></div>
<input type="button" value="渐变" id="btn"/>
<script src="common.js"></script>
<script>


  my$("btn").onclick=function () {

    var opacity=10;
    //按钮的点击事件
    var timeId=setInterval(function () {
      //透明化了
      opacity--;
      if(opacity<=0){
        clearInterval(timeId);//清理定时器
      }
      //设置div的透明度
      my$("dv").style.opacity=opacity/10;
    },200);


  };


</script>
</body>
</html>

设置div的宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 200px;
      height: 150px;
      background-color: red;
      border-radius: 100px;
    }
  </style>
</head>
<body>
<input type="button" value="变宽" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  my$("btn").onclick = function () {
    var width = 200;
    var timeId = setInterval(function () {
      width+=10;
      if(width==800){
        clearInterval(timeId);
      }
      my$("dv").style.width=width+"px";
    }, 20);
  };
</script>

</body>
</html>

案例移动元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>

    * {
      margin: 0;
      padding: 0;
    }

    input {
      margin-top: 20px;
    }

    div {
      margin-top: 30px;
      width: 200px;
      height: 100px;
      background-color: green;
      position: absolute;
    }
  </style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //div要移动,要脱离文档流---position:absolute
  //如果样式的代码是在style的标签中设置,外面是获取不到
  //如果样式的代码是在style的属性设置,外面是可以获取
  //获取div的当前位置
  //console.log(my$("dv").offsetLeft);

  //点击第一个按钮移动到400px

  my$("btn1").onclick = function () {
    //一会要清理定时器(只产生一个定时器)
   var timeId= setInterval(function () {
      //获取div的当前的位置
      var current = my$("dv").offsetLeft;//数字类型,没有px
      //div每次移动多少像素---步数
      var step = 9;
      //每次移动后的距离
      current += step;
     //判断当前移动后的位置是否到达目标位置
      if(current<=400){
        my$("dv").style.left=current+"px";
      }else{
        //清理定时器
        clearInterval(timeId);
      }
    }, 20);
  };
  //点击第二个按钮移动到800px

  my$("btn2").onclick = function () {
    //一会要清理定时器(只产生一个定时器)
    var timeId= setInterval(function () {
      //获取div的当前的位置
      var current = my$("dv").offsetLeft;//数字类型,没有px
      //div每次移动多少像素---步数
      var step = 10;
      //每次移动后的距离
      current += step;
      //判断当前移动后的位置是否到达目标位置
      if(current<=800){
        my$("dv").style.left=current+"px";
      }else{
        //清理定时器
        clearInterval(timeId);
      }
    }, 20);
  };
</script>
</body>
</html>

封装动画函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>

    * {
      margin: 0;
      padding: 0;
    }

    input {
      margin-top: 20px;
    }

    div {
      margin-top: 30px;
      width: 200px;
      height: 100px;
      background-color: green;
      position: absolute;
    }
  </style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //div要移动,要脱离文档流---position:absolute
  //如果样式的代码是在style的标签中设置,外面是获取不到
  //如果样式的代码是在style的属性设置,外面是可以获取
  //获取div的当前位置
  //console.log(my$("dv").offsetLeft);

  //点击第一个按钮移动到400px

  my$("btn1").onclick = function () {
    animate(my$("dv"), 400);
  };
  //点击第二个按钮移动到800px

  my$("btn2").onclick = function () {
    animate(my$("dv"), 800);
  };
  //动画函数---任意一个元素移动到指定的目标位置
  function animate(element, target) {
    //先清理定时器
    clearInterval(element.timeId);
    //一会要清理定时器(只产生一个定时器)
    element.timeId = setInterval(function () {
      //获取div的当前的位置
      var current = element.offsetLeft;//数字类型,没有px
      //div每次移动多少像素---步数
      var step = 10;
      step = current < target ? step : -step;
      //每次移动后的距离
      current += step;
      //判断当前移动后的位置是否到达目标位置
      if (Math.abs(target - current) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定时器
        clearInterval( element.timeId );
        element.style.left = target + "px";
      }
    }, 20);
  }
</script>
</body>
</html>

动画函数封装

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: red;
      /*脱离文档流*/
      position: absolute;
    }
  </style>
  <script>

    //设置任意的一个元素,移动到指定的目标位置
    function animate(element, target) {
      clearInterval(element.timeId);
      //定时器的id值存储到对象的一个属性中
      element.timeId = setInterval(function () {
        //获取元素的当前的位置,数字类型
        var current = element.offsetLeft;
        //每次移动的距离
        var step = 10;
        step = current < target ? step : -step;
        //当前移动到位置
        current += step;
        if (Math.abs(current - target) > Math.abs(step)) {
          element.style.left = current + "px";
        } else {
          //清理定时器
          clearInterval(element.timeId);
          //直接到达目标
          element.style.left = target + "px";
        }
      }, 20);
    }

  </script>
</head>
<body>


</body>
</html>

轮播图轮播

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }

    .all {
      width: 500px;
      height: 200px;
      padding: 7px;
      border: 1px solid #ccc;
      margin: 100px auto;
      position: relative;
    }

    .screen {
      width: 500px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }

    .screen li {
      width: 500px;
      height: 200px;
      overflow: hidden;
      float: left;
    }

    .screen ul {
      position: absolute;
      left: 0;
      top: 0px;
      width: 3000px;
    }

    .all ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }

    .all ol li {
      float: left;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
    }

    .all ol li.current {
      background: #DB192A;
    }

    #arr {
      display: none;
    }

    #arr span {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #000;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑体';
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border: 1px solid #fff;
    }

    #arr #right {
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<div class="all" id='box'>
  <div class="screen"><!--相框-->
    <ul>
      <li><img src="images/1.jpg" width="500" height="200"/></li>
      <li><img src="images/2.jpg" width="500" height="200"/></li>
      <li><img src="images/3.jpg" width="500" height="200"/></li>
      <li><img src="images/4.jpg" width="500" height="200"/></li>
      <li><img src="images/5.jpg" width="500" height="200"/></li>
    </ul>
    <ol>
    </ol>
  </div>
  <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script src="common.js"></script>
<script>
  //获取最外面的div
  var box = my$("box");
  //获取相框
  var screen = box.children[0];
  //获取相框的宽度
  var imgWidth = screen.offsetWidth;
  //获取ul
  var ulObj = screen.children[0];
  //获取ul中的所有的li
  var list = ulObj.children;
  //获取ol
  var olObj = screen.children[1];
  //焦点的div
  var arr = my$("arr");

  var pic = 0;//全局变量
  //创建小按钮----根据ul中的li个数
  for (var i = 0; i < list.length; i++) {
    //创建li标签,加入到ol中
    var liObj = document.createElement("li");
    olObj.appendChild(liObj);
    liObj.innerHTML = (i + 1);
    //在每个ol中的li标签上添加一个自定义属性,存储索引值
    liObj.setAttribute("index", i);
    //注册鼠标进入事件
    liObj.onmouseover = function () {
      //先干掉所有的ol中的li的背景颜色
      for (var j = 0; j < olObj.children.length; j++) {
        olObj.children[j].removeAttribute("class");
      }
      //设置当前鼠标进来的li的背景颜色
      this.className = "current";
      //获取鼠标进入的li的当前索引值
      pic = this.getAttribute("index");
      //移动ul
      animate(ulObj, -pic * imgWidth);
    };
  }
  //设置ol中第一个li有背景颜色
  olObj.children[0].className = "current";


  //克隆一个ul中第一个li,加入到ul中的最后=====克隆
  ulObj.appendChild(ulObj.children[0].cloneNode(true));

  //自动播放
 var timeId= setInterval(clickHandle,1000);

  //鼠标进入到box的div显示左右焦点的div
  box.onmouseover = function () {
    arr.style.display = "block";
    //鼠标进入废掉之前的定时器
    clearInterval(timeId);
  };
  //鼠标离开到box的div隐藏左右焦点的div
  box.onmouseout = function () {
    arr.style.display = "none";
    //鼠标离开自动播放
    timeId= setInterval(clickHandle,1000);
  };
  //右边按钮
  my$("right").onclick =clickHandle;
  function clickHandle() {
    //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
    //所以,如果用户再次点击按钮,用户应该看到第二个图片
    if (pic == list.length - 1) {
      //如何从第6个图,跳转到第一个图
      pic = 0;//先设置pic=0
      ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
    }
    pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
    animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
    //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
    if (pic == list.length - 1) {
      //第五个按钮颜色干掉
      olObj.children[olObj.children.length - 1].className = "";
      //第一个按钮颜色设置上
      olObj.children[0].className = "current";
    } else {
      //干掉所有的小按钮的背景颜色
      for (var i = 0; i < olObj.children.length; i++) {
        olObj.children[i].removeAttribute("class");
      }
      olObj.children[pic].className = "current";
    }

  };
  //左边按钮
  my$("left").onclick = function () {
    if (pic == 0) {
      pic = 5;
      ulObj.style.left = -pic * imgWidth + "px";
    }
    pic--;
    animate(ulObj, -pic * imgWidth);
    //设置小按钮的颜色---所有的小按钮干掉颜色
    for (var i = 0; i < olObj.children.length; i++) {
      olObj.children[i].removeAttribute("class");
    }
    //当前的pic索引对应的按钮设置颜色
    olObj.children[pic].className = "current";

  };

  //设置任意的一个元素,移动到指定的目标位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定时器的id值存储到对象的一个属性中
    element.timeId = setInterval(function () {
      //获取元素的当前的位置,数字类型
      var current = element.offsetLeft;
      //每次移动的距离
      var step = 10;
      step = current < target ? step : -step;
      //当前移动到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定时器
        clearInterval(element.timeId);
        //直接到达目标
        element.style.left = target + "px";
      }
    }, 10);
  }
</script>


<script>


  //  var num=0;
  //  function f1(){
  //
  //    num=1000;
  //  }
  //  f1();
  //  console.log(num);
</script>
</body>
</html>

offset 系列

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    input{
      top: 250px;
      position: absolute;
    }
    #dv1{
      width: 200px;
      height: 150px;
      background-color: red;
      position: absolute;
      left: 100px;
      top: 30px;
    }
    #dv2{
      width: 100px;
      height: 50px;
      background-color: green;
    }
  </style>
  <script>

    //三个大的系列:
    /*
    * 三组属性
    * 1. offset系列中的属性
    *
    *
    * */
  </script>
</head>
<body>
<div id="dv1">
  <div id="dv2"></div>
</div>
<input type="button" value="显示效果" id="btn"/>
<script src="common.js"></script>
<script>

  //红色div的宽和高
  my$("btn").onclick=function () {
    //在style标签中设置的样式属性获取不到
    //style属性中设置的样式属性是可以获取到的
    //获取元素的样式,下面的方式废了
    //console.log(my$("dv1").style.width);
    //console.log(my$("dv1").style.height);

    //以后获取元素的宽和高,应该使用offset系列来获取
    /*
    *
    * offsetWidth:获取元素的宽
    * offsetHeight:获取元素的高
    * offsetLeft:获取元素距离左边位置的值
    * offsetTop:获取元素距离上面位置的值
    *
    * */
   console.log(my$("dv1").offsetWidth);
   console.log(my$("dv1").offsetHeight);


    console.log(my$("dv1").offsetLeft);
    console.log(my$("dv1").offsetTop);
  };
</script>
</body>
</html>

offset系列具体的值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    input{
      top: 250px;
      position: absolute;
    }
    #dv1{
      width: 200px;
      height: 150px;
      background-color: red;
      /*父级元素*/
      position: relative;
      margin-left: 10px;
      padding-left: 10px;
      left: 100px;
    }
    #dv2{
      width: 100px;
      height: 50px;
      background-color: green;
      position: absolute;
      left: 10px;
      margin-left: 100px;

    }
  </style>
  <script>

    //三个大的系列:
    /*
    * 三组属性
    * 1. offset系列中的属性
    *
    *
    * */
  </script>
</head>
<body>
<div id="dv1">
  <div id="dv2"></div>
</div>
<input type="button" value="显示效果" id="btn"/>
<script src="common.js"></script>
<script>


  my$("btn").onclick=function () {

    //没有脱离文档流:
    /*
    *
    * offsetLeft:父级元素margin+父级元素padding+父级元素的border+自己的margin
    *
    *
    * 脱离文档流了
    * 主要是自己的left和自己的margin
    * */
    //子级元素的
    console.log(my$("dv2").offsetLeft);

  };
</script>
</body>
</html>

通过document获取元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>24kcs好帅哦</title>

</head>
<body>
<script>


  //获取body
  console.log(document.body);//获取的是元素--标签
  //获取title
  console.log(document.title);//标签中的值
  document.title="嘎嘎去";
  //获取html
  console.log(document.documentElement);
</script>

</body>
</html>

案例鼠标移动挂件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    img{
position: absolute;
    }
  </style>
</head>
<body>
<img src="images/tianshi.gif" alt="" id="im">
<script src="common.js"></script>
<script>
  //鼠标在页面中移动,图片跟着鼠标移动
  document.onmousemove=function (e) {
    //鼠标的移动的横纵坐标
    //可视区域的横坐标
    //可视区域的纵坐标
    my$("im").style.left=e.clientX+"px";
    my$("im").style.top=e.clientY+"px";
  };
</script>
</body>
</html>

文章目录

自定义js文件

杂谈

案例 冒泡排序实现sort()排序方法原理

案例 去除超链接默认跳转

案例 JS querySelect 选择器API模拟JQ的$()原理

案例 对属性textContent做兼容性处理

节点 元素 操作

案例 — 点击按钮设置div中P标签改变背景颜色

案例 — 节点操作隔行变色

案例 节点使用兼容代码

案例 checkbox全选和全不选的实现

元素创建的不同方式

第一种元素的创建方式

第二种元素的创建方式

案例 点击按钮创建列表

拓展的页面中嵌入广告

第三种元素创建方式

案例 动态创建列表

案例 点击按钮创建一个表格

元素相关的方法

只创建一个元素

为元素绑定多个事件

为元素绑定事件 编写兼容性代码

复习

绑定事件的区别

为元素解绑事件

为元素绑定事件和解绑事件的兼容代码

事件冒泡

事件的三个阶段

为同一个元素绑定多个不同事件指向同一个事件处理函数

案例 百度搜索智能提示

BOM

系统弹窗

加载事件

location 对象

history对象

navigator 对象

定时器

案例 一起摇起来

案例 定时器控制图片src切换

setTimeout()

按钮禁用

div渐变

设置div的宽度

案例 移动元素

封装动画函数

动画函数封装

轮播图轮播

offset 系列

offset系列具体的值

通过document获取元素

案例 鼠标移动挂件

猜你喜欢

案例冒泡排序实现sort()排序方法原理

案例去除超链接默认跳转

案例对属性textContent做兼容性处理

节点元素操作

案例节点使用兼容代码

案例点击按钮创建列表

案例动态创建列表

案例点击按钮创建一个表格

为元素绑定事件编写兼容性代码

案例百度搜索智能提示

案例一起摇起来

案例定时器控制图片src切换

案例移动元素

案例鼠标移动挂件