首页 > 代码库 > 初入javascript知识点（五）

初入javascript知识点（五）

2024-08-18 04:23:59   222人阅读

导航按钮JS

var odiv =document.getElementById(‘nav‘);
var listOfbtn = odiv.getElementsByTagName(‘button‘);
for( var i = 0;i < listOfbtn.length;i++){
    listOfbtn[i].index =i;
    listOfbtn[i].onclick = function(){
        for(var j = 0;j < listOfbtn.length;j++){
            listOfbtn[j].className =‘btn‘;
        }
            this.className =‘btn active‘;
    }
}

轮播按钮

var odiv2 =document.getElementById(‘lunBobtn‘);
var listOfbtn2 = odiv2.getElementsByTagName(‘div‘);
for( var i = 1;i < listOfbtn2.length-1;i++){
    listOfbtn2[i].index =i;
    listOfbtn2[i].onmouseover = function(){
        for(var j = 1;j < listOfbtn2.length-1;j++){
            listOfbtn2[j].className = ‘lunBobtn1‘;
        }
        this.className = ‘lunBobtn1 lunBobtn1-active‘;
    };
};
for( var i = 1;i < listOfbtn2.length-1;i++){
    listOfbtn2[i].index =i;
    listOfbtn2[i].onmouseout = function(){
        listOfbtn2[1].className = ‘lunBobtn1 lunBobtn1-active‘;
        listOfbtn2[2].className = ‘lunBobtn1‘;
        listOfbtn2[3].className = ‘lunBobtn1‘;
    };
};

选项卡 代码 详解

    var odiv=document.getElementById(‘div1‘);//获取div
    var btn=odiv.getElementsByTagName(‘input‘);//获取div下的input
    var div2=odiv.getElementsByTagName(‘div‘) ;//获取div下的div
    for(i=0;i<btn.length;i++)//循环每个按钮
    {
        btn[i].index=i;
//btn[i]是指定button的第i个按钮;为该按钮添加一个index属性，并将index的值设置为i。就是给每一个btn命名index，并赋值i.
        btn[i].onclick=function()//按钮的第i个点击事件
        {
            for(i=0;i<btn.length;i++)//循环去掉button的样式，把div隐藏
            {
                btn[i].className=‘‘;//清空按钮的样式
                div2[i].style.display=‘none‘;//隐藏div
            }
            this.className=‘active‘;//自身添加active
            div2[this.index].style.display=‘block‘;//this.index是当前div
        }
    }

有10个DIV 每次点击变色，且同时只能一个变色，点击自身的时候变灰初始颜色

html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>作业1</title>
  <style type="text/css">
    .box {
      width: 300px;
      height: 300px;
      background-color: green;
      margin-top: 20px;
      margin-left: 20px;
      float: left;
    }
    .box.selected {
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="box large"></div>
    <div class="box large"></div>
    <div class="box large"></div>
    <div class="box large"></div>
    <div class="box large small"></div>
    <div class="box large"></div>
    <div class="box large small"></div>
    <div class="box large"></div>
    <div class="box large"></div>
    <div class="box large"></div>
  </div>
  <script src="http://www.mamicode.com/js/作业1.js"></script>
</body>
</html>

JS代码

(function() {
  var listOfDiv = document.getElementById(‘container‘).getElementsByTagName(‘div‘);
  // 当前所选中的div的引用
  var selectedDiv = null;
  for(var i = 0; i < listOfDiv.length; i++) {
    listOfDiv[i].onclick = function() {
      if(selectedDiv === this) {
        selectedDiv.className = deleteClassName(selectedDiv.className, ‘selected‘);
        selectedDiv = null;
      } else {
        if(selectedDiv !== null) {
          selectedDiv.className = deleteClassName(selectedDiv.className, ‘selected‘);
        }
        this.className = this.className + ‘ selected‘;
        selectedDiv = this;
      }
    };
  }

  function deleteClassName(className, deleteClass) {
    var listOfClass = className.split(‘ ‘);
    var index = listOfClass.indexOf(deleteClass);
    // 要删除的类名在原类名字符串中本来就没有存在
    if(index === -1) {
      return className;
    }
    // 要删除的类名在原类名字符串中存在
    listOfClass.splice(index, 1);
    var newClassName = listOfClass.join(‘ ‘);
    return newClassName;
  };
})();

轮播（点击几个小按钮的时候切换到对应的图片）

html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>作业2</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    #container {
      position: relative;
      left: 0;
      top: 0;
      width: 430px;
      height: 430px;
      overflow: hidden;
    }
    #wrap {
      position: absolute;
      left: 0;
      top: 0;
      width: 1720px;
      height: 430px;
      overflow: hidden;
    }
    #wrap img {
      float: left;
    }
    #nav {
      width: 150px;
      height: 30px;
      list-style: none;
      position: absolute;
      bottom: 40px;
      left: 0;
      right: 0;
      margin: auto;
    }
    #nav>li {
      width: 30px;
      height: 30px;
      border-radius: 30px;
      background-color: rgba(255, 255, 255, 0.6);
      float: left;
      margin-left: 10px;
      cursor: pointer;
    }
    #nav>li:first-child {
      margin-left: 0;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="wrap">
      <img src="http://www.mamicode.com/images/imgA_2.jpg">
      <img src="http://www.mamicode.com/images/imgB_2.jpg">
      <img src="http://www.mamicode.com/images/imgC_2.jpg">
      <img src="http://www.mamicode.com/images/imgD_2.jpg">
    </div>
    <ul id="nav">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <script src="http://www.mamicode.com/js/作业2.js"></script>
</body>
</html>

JS代码

(function() {
  var wrapDiv = document.getElementById(‘wrap‘);
  var listOfLi = document.getElementById(‘nav‘).getElementsByTagName(‘li‘);
  var left = 0;
  function animateToImage(iamgeIndex) {
    // 动画最终的left值
    var targetLeft = iamgeIndex * (-430);
    var animateTime = 300;
    // speed为每次需要变化的距离
    var speed = (targetLeft - left) / (animateTime / 1000 * 60);
    console.log(speed);
    var timer = setInterval(function() {
      // 判断setInterval结束条件
      // 结束条件分为向左移动和向右移动
      if(speed >= 0 && left >= targetLeft) {
        left = targetLeft;
        wrapDiv.style.left = left + ‘px‘;
        clearInterval(timer);
      } else if(speed < 0 && left <= targetLeft) {
        left = targetLeft;
        wrapDiv.style.left = left + ‘px‘;
        clearInterval(timer);
      } else {
        wrapDiv.style.left = left + ‘px‘;
        left = left + speed;
      }
    }, 16.67);
  }
  for(var i = 0; i < listOfLi.length; i++) {
    listOfLi[i].index = i;
    listOfLi[i].onclick = function() {
      animateToImage(this.index);
    };
  }
})();

innerHTML：设置或获取标签中的内容

textContent:获取标签中的文本。注意 这个在IE中不支持，它只支持自己的属性innerText

解决这一兼容问题的代码

    var text;
    if(div.textContent !== undefined){
    text = div.textContent
    } else{
    text = div.innerText
    }

区别：

获取的时候：innerHTML是获取标签中的全部内容 包括标签，textContent 知识获取的文本

赋值的时候：innerHTML 是把赋值中的标签转换成真正意义的标签进行赋值，而textContent会把赋值中的标签 转换成文本 进行赋值。

6. 样式操作

6.1 行内样式 设置和获取: object.style.attr 示例: hover

    html:
    <a id="one" href="http://www.mamicode.com/#" style="color: red; padding: 3px;">跳转</a>
    javascript:
    (function() {
        var one = document.getElementById("one");
        one.onmouseover = function() {
            this.style.color = "blue";
            this.style.backgroundColor = "red";
        };
        one.onmouseout = function() {
            this.style.color = "red";
            this.style.backgroundColor = "blue";
        };
    }());

6.2 css层叠样式

  • 通过 className 修改样式

  • 获取或修改某个属性的值(兼容性问题)

属性描述
document.styleSheets 返回样式表的集合
document.styleSheets[index].rules / document.styleSheets[index].cssRules 返回样式表中选择器的集合
document.styleSheets[index].rules[index].style.attr 查找样式表中的样式属性(**ie chrom**)
document.styleSheets[index].cssRules[index].style.attr 查找样式表中的样式属性(**firefox**)
  • 动态添加或删除

document.styleSheets[index].insertRule("selector{attr:value}", index);

document.styleSheets[index].deleteRule(index);

document.styleSheets[index].addRule("selector","attr:value", index);

document.styleSheets[index].removeRule(index);

6.3 获取最终样式(只能获取,不能操作)

object.currentStyle.attr ( IE )

window.getComputedStyle(object,null).attr ( W3C )

6.4 获得元素尺寸(可直接运算)

clientWidth/clientHeight: 元素可视部分的高度和宽度(width + padding)

offsetWidth/offsetHeight: 元素实际的高度和宽度(width+padding+border)

DOM节点

DOM可以将任何HTML或者XML文档描绘成一个有多层节点构成的结构.

HTML或者XML页面中的每个组成部分都是某种类型的节点，这些节点有包含着不同类型的数据.

以下面的HTML为例

 <html>
        <head>
            <title>Sample Page</title>
        </head>
        <body>
            <p>Hello, World!</p>
        </body>
 </html>

文档节点是每个文档的根节点.在HTML中，文档节点只有一个子节点，即元素，我们称之为文档元素.文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中.每个文档只能有一个文档元素.在HTML页面中，文档元素始终都是<html>元素.在XML中，没有预定义的元素，因此任何元素都可能成为文档元素.

每一段标记都可以通过树中的一个节点来表示：HTML元素通过元素节点表示，特性（attribute）通过特性节点表示，文档类型通过文档类型节点表示，而注释则通过注释节点表示.总共有12种节点类型，这些类型都继承自一个基类型.

节点类型(Node类型)

每个节点都有一个nodeType属性，用于表明节点的类型.节点类型由Node类型中定义的下列12个数值常量来表示，任何节点类型必居其一：

  • Node.ELEMENT_NODE(1) ??
  • Node.ARRTIBUTE_NODE(2) ??
  • Node.TEXT_NODE(3) ??
  • Node.CDATASECTIONNODE(4)
  • Node.ENTITYREFERENCENODE(5)
  • Node.ENTITY_NODE(6)
  • Node.PROCESSINGINSTRUCTIONNODE(7)
  • Node.COMMENT_NODE(8) ??
  • Node.DOCUMENT_NODE(9) ??
  • Node.DOCUMENTTYPENODE(10)
  • Node.DOCUMENTFRAGMENTNODE(11)
  • Node.NOTATION_NODE(12)

通过比较上面这些常量，可以很容易地确定节点的类型

javascript
if(someNode.nodeType == 1) {
    alert(‘这个节点是一个元素节点‘);
}

节点关系

节点间的各种关系可以用传统的家族关系来描述，相当于把文档树比喻成家谱。在HTML中，可以将元素看成是元素的子元素；相应地，也就可以将元素看成是元素的父元素。而元素，则可以看成是元素的兄弟元素(同胞元素)，因为它们都是同一个父元素的直接子元素.

获取节点

通过元素获取

  • document.getElementById("elementID");
  • document.getElementsByTagName("tagname");
  • document.getElementsByName("name");
  • document.getElementsByClassName("classname");
  • ......

通过节点关系属性获得引用

  • someNode.parentNode: 获取该元素父节点
  • someNode.childNodes: 获取对象所有的子节点,只包含次级节点
  • someNode.firstChild: 获取该元素第一个子节点
  • someNode.lastChild: 获取该元素最后一个子节点
  • someNode.nextSibling: 获取该下一个兄弟节点
  • someNode.previousSibling: 获取该元素上一个兄弟节点

操作节点

appendChild(childNode)

操作节点中最常用的方法是appendChild()，用于向childNodes列表的末尾添加一个节点.添加完成后，appendChild()会返回新增的节点.

使用方法：

javascript
someNode.appendChild(anotherNode);

如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置.因此，如果在调用appendChild()时传入了父节点的第一个子节点，那么该节点就会成为父节点的最后一个子节点.

javascript
//someNode 有多个子节点
var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnedNode == someNode.firstChild); //false
alert(returnedNode == someNode.lastChild); //true

insertBefore(childNode, nextNode)

如果需要把节点放在childNodes列表中某个特定的位置上，而不是放在末尾，那么可以使用insertBefore()方法。这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling），同时被方法返回。如果参照节点是null，则insertBefore()与appendChild()执行相同的操作.

javascript
// 插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode, null);
alert(newNode == someNode.lastChild); //true

// 插入后成为第一个子节点
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); //true
alert(newNode == someNode.firstChild); //true

// 插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
alert(newNode == someNode.childNodes[someNode.childNodes.length - 2]); //true

replaceChild(newNode, removeNode)

replaceChild()方法接受的两个参数是：要插入的节点和要替换的节点.要替换的节点将由这个 方法返回并从文档树中被移除，同时由要插入的节点占据其位置.

javascript
// 替换第一个子节点
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

// 替换最后一个子节点
returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

removeChild(removeNode)

如果只想移除而非替换节点，可以使用removeChild()方法.这个方法接受一个参数，即要移除的节点。被移除的节点将成为方法的返回值.

javascript
// 移除第一个子节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);

// 移除最后一个子节点
var formerLastChild = someNode.removeChild(someNode.lastChild);

前面介绍的四个方法操作的都是某个节点的子节点，也就是说，要使用这几个方法必须先取得父节点（使用 parentNode属性）.另外，并不是所有类型的节点都有子节点，如果在不支持子节点的节点上调用了这些方法，将会导致错误发生.

cloneNode(isDeepCopy)

用于创建调用这个方法的节点 的一个完全相同的副本.cloneNode()方法接受一个布尔值参数，表示是否执行深复制。在参数为true的情况下，执行深复制，也就是复制节点及其整个子节点树；在参数为false的情况下，执行浅复制，即只复制节点本身。复制后返回的节点并没有为它指定父节点。因此，除非通过appendChild()、insertBefore()或 replaceChild()将它添加到文档中，否则它并不会在文档中显示.

例如，假设有下面的 HTML 代码:

  • 第1项
  • 第2项
  • 第3项

如果我们已经将<ul>元素的引用保存在了变量myList中，那么通常下列代码就可以看出使用 cloneNode()方法的两种模式：

javascript
var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length); // 当浏览器为IE8及更低版本的IE时，结果为3，其他浏览器结果为7
var shallowList = myList.cloneNode(false); alert(shallowList.childNodes.length); //0

deepList.childNodes.length中的差异主要是因为IE8及更早版本与其他浏览器处理空白字符的方式不一样.IE9之前的版本不会为空白符创建节点.

document.createElement(tagName)

通过标签名创建一个元素节点。document.createElement()方法接受一个字符串参数，这个字符串即为标签名字.

javascript
var myDiv = document.createElement(‘div‘);


option的移动

html代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>option的移动</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        width: 600px;
        margin: 0 auto;
    }
    div{
        float: left;
        margin-top: 100px;
    }
    select{
        width: 250px;
        height: 250px;
        margin-right: 50px;
    }
    option{
        margin-top: 10px;
    }
</style>
<body>
<div id="div1">
    <select  id="select1" size="8">
        <option value="">第1个</option>
        <option value="">第2个</option>
        <option value="">第3个</option>
        <option value="">第4个</option>
        <option value="">第5个</option>
        <option value="">第6个</option>
        <option value="">第7个</option>
        <option value="">第8个</option>
    </select><br>
    <button id="up1">向上移动</button>
    <button id="down1">向下移动</button>
    <button id="toRight">向右移动</button>
    <button id="all1">全部向右</button>
</div>
<div id="div2">
    <select  id="select2" size="8">
        <option value="">第1个</option>
        <option value="">第2个</option>
        <option value="">第3个</option>
        <option value="">第4个</option>
        <option value="">第5个</option>
        <option value="">第6个</option>
        <option value="">第7个</option>
        <option value="">第8个</option>
    </select><br>
    <button id="up2">向上移动</button>
    <button id="down2">向下移动</button>
    <button id="toLeft">向左移动</button>
    <button id="all2">全部向左</button>
</div>


<script type="text/javascript" src="http://www.mamicode.com/js/index.js"></script>
</body>
</html>

js代码

(function() {
var select1 = document.getElementById(‘select1‘);
var downBtn1 = document.getElementById(‘down1‘);
var upBtn1 = document.getElementById(‘up1‘);
var toRight = document.getElementById(‘toRight‘);
var all1 = document.getElementById(‘all1‘);

var select2 = document.getElementById(‘select2‘);
var downBtn2 = document.getElementById(‘down2‘);
var upBtn2 = document.getElementById(‘up2‘);
var toLeft = document.getElementById(‘toLeft‘);
var all2 = document.getElementById(‘all2‘);
//向下移动
function down(select){
    var index = select.selectedIndex;
    var option = select.options[index];
    if(inex !== -1){
        if(index === select.length - 2 || index === select.length - 1) {
            select.appendChild(option);
        } else {
            select.insertBefore(option, select.options[index + 2]);
        }
    }
}
//向上移动
function up(select){
    var index= select.selectedIndex;
    var option = select.options[index];
    if(index !== -1){
        if(index ===0){
            select.appendChild(option);
        }else{
            select.insertBefore(option,select.options[index -1]);
        }
    }
}
//向左、向右移动
function leftRight(leftorright){
    if(leftorright === select1){
        var index = leftorright.selectedIndex;
        var option = leftorright.options[index];
        if(index !== -1){
            select2.appendChild(option);
        }               
    }else if(leftorright === select2){
        var index = select2.selectedIndex;
        var option = select2.options[index];
        if(index !== -1){
            select1.appendChild(option);
        }
    }
}
//全部向左、向右移动
function  allLeftRight(allLR){
    if(allLR === select1){
        for(i=0;i<allLR.length;){
        var option = allLR.options[i];
        select2.appendChild(option);
        }
    }else if(allLR === select2){
        for(i=0;i<allLR.length;){
            var option = allLR.options[i];
            select1.appendChild(option);
        }
    }
}


downBtn1.onclick = function() {
    down(select1);
};
downBtn2.onclick = function() {
    down(select2);
};
upBtn1.onclick = function() {
    up(select1);
};
upBtn2.onclick = function() {
    up(select2);
};
toRight.onclick = function() {
    leftRight(select1);
};
toLeft.onclick = function() {
    leftRight(select2);
};
all1.onclick = function () {
    allLeftRight(select1)
};
all2.onclick = function () {
    allLeftRight(select2)
};
})();

事件驱动模型

javascript 使我们有能力创建动态页面。 事件是可以被javascript侦测到的行为。

1. 事件驱动要素

1.1 事件源 触发事件的元素

1.2 事件 被 JavaScript 侦测到的行为

事件举例：

  • 鼠标点击
  • 鼠标悬浮于页面的某个热点之上
  • 键盘按键
  • 确认表单
  • 在表单中选取输入框

1.3 事件处理函数

事件发生时要进行的操作,又叫做"事件句柄"或"事件监听器"

2. 事件分类

事件类型事件句柄触发时机
鼠标事件 onclick 鼠标点击操作
ondblclick 鼠标双击操作
onmousedown 按下鼠标按键
onmouseup 抬起鼠标按键
onmousemove 鼠标指针在元素上方移动
onmouseover 鼠标指针进入元素
onmouseout 鼠标指针移出元素
DOMMouseScroll 鼠标滚轮事件(FF)
onmousewheel 鼠标滚轮事件(IE,CHROM)
键盘事件 onkeyup 抬起键盘按键
onkeydown 按下键盘按键
onkeypress 按下或按住键盘按键
表单事件 onsubmit 按下表单的提交按钮
onblur input失去焦点
onfoucs input获得元素
onchange 更改input元素的内容
页面事件 onload 页面加载完成
onunload 文档的载入被撤销(例如页面跳转等情况时)
onbeforeunload 页面刷新或关闭时

3. 事件绑定

3.1 JavaScript脚本中绑定事件

html:
<input type="button" id="btn" value="http://www.mamicode.com/点我"/>
JavaScript:
var btn = document.getElementById("btn");
方式1:
btn.onclick = function() {}
方式2:
function test() {
    console.log(123);
}
btn.onclick = test;

3.2 标签中绑定事件

<input type="button" id="btn" value="http://www.mamicode.com/点我" onclick="test()"/>

3.3 监听器

IECHROM,FIREFOX
element.attachEvent(event, function);//添加 element.detachEvent(event, function);//删除 element.addEventListener(event, function, useCapture);//添加 element.removeEventListener(event, function, useCapture);//删除

4. 事件对象

4.1 什么是事件源对象

事件源对象是指event对象，其封装了与事件相关的详细信息. - 当事件发生时,只能在事件函数内部访问的对象 - 处理函数结束后会自动销毁

4.2 获取EVENT对象

 IEw3c
事件源对象 window.event e

4.3 EVENT对象的属性

4.3.1 鼠标事件

  • 相对于浏览器位置 event.clientX: 返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标 event.clientY: 返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标

  • 相对于屏幕位置 event.screenX: 返回事件发生时鼠标指针相对于屏幕的水平坐标 event.screenY: 返回事件发生时鼠标指针相对于屏幕的垂直坐标

  • 相对于事件源位置 event.offsetX: 返回事件发生时鼠标指针相对于事件源的水平坐标 event.offsetY: 返回事件发生时鼠标指针相对于事件源的垂直坐标 event.layerX: 返回事件发生时鼠标指针相对于事件源的水平坐标(FIREFOX) event.layerY: 返回事件发生时鼠标指针相对于事件源的垂直坐标(FIREFOX)

4.3.2 键盘事件

  • keyCode: 获取按下的键盘按键的值的字符代码
  • altKey: 指示在指定的事件发生时，Alt 键是否被按下
  • ctrlKey: 指示当事件发生时，Ctrl 键是否被按下
  • shiftKey: 指示当事件发生时，"SHIFT" 键是否被按下

4.3.3 type属性 用来检测事件类型

tips:

  • onkeypress事件，只有输入的是数字或者标准的大小写字母的时候，才会触发这个事件
  • 对于input框而言，只有在失去焦点的时候，才回去检测里面的内容是否发生了改变

省市联动

html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>我以开始慢慢练习</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;;
    }
    select{
        width: 100px;
    }
</style>
<body style="width: 950px ;margin: 50px auto">
<select name="" id="province">

</select>
<select name="" id="city">

</select>

<script type="text/javascript" src="http://www.mamicode.com/js/lianxi.js"></script>
</body>
</html>

js

// json
// JavaScript Object Notation 
// js对象表示法

var oData = http://www.mamicode.com/[>

取消绑定

重新给事件赋值函数， 并让函数为undefined或null。

初入javascript知识点（五）


联系
我们