博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
初入javascript知识点（五）
阅读量：4605 次
发布时间：2019-06-09

本文共 13787 字，大约阅读时间需要 45 分钟。

导航按钮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

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

html代码

  
      作业1

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代码

  
      作业2

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:    跳转    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为例

                    Sample Page                            
Hello, World!

文档节点是每个文档的根节点.在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)

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

javascriptif(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()会返回新增的节点.

使用方法：

javascriptsomeNode.appendChild(anotherNode);

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

javascript//someNode 有多个子节点var returnedNode = someNode.appendChild(someNode.firstChild);alert(returnedNode == someNode.firstChild); //falsealert(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); //truealert(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()方法的两种模式：

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

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

document.createElement(tagName)

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

javascriptvar myDiv = document.createElement('div');

option的移动

html代码

    
        option的移动

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

事件驱动模型

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:JavaScript:var btn = document.getElementById("btn");方式1:btn.onclick = function() {}方式2:function test() {    console.log(123);}btn.onclick = test;

3.2 标签中绑定事件

3.3 监听器

IE CHROM,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对象

  IE w3c
事件源对象 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

    
        我以开始慢慢练习

js

// json// JavaScript Object Notation // js对象表示法var oData = [    {        name:'四川省',        city:['成都市','达州市','南充市','攀枝花市']    },{        name:'甘肃省',        city:['兰州市','天水市']    },{        name:'西藏',        city:['拉萨','昌都']    }];(function(){    var province = document.getElementById('province');    var city = document.getElementById('city');    for(i = 0;i < oData.length;i++){        var option = document.createElement('option');        option.innerHTML = oData[i].name;        province.appendChild(option);    }    showCity(0);    province.onchange =function(){        showCity();    };    function  showCity(){            city.innerHTML = '';            for(i=0;i

取消绑定

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

转载于:https://www.cnblogs.com/plainsailing/p/5990898.html

你可能感兴趣的文章
js 循环读取 json的值
查看>>
c# 范型Dictionary实用例子
查看>>
C#实现动态页面静态化
查看>>
可选参数、命名参数、.NET的特殊类型、特性
查看>>
利用CGLib实现动态代理实现Spring的AOP
查看>>
面试之SQL（1）--选出选课数量>=2的学号
查看>>
IIS处理并发请求时出现的问题
查看>>
数学作业
查看>>
使用pycharm开发web——django2.1.5（二）创建一个app并做一些配置
查看>>
[ZPG TEST 105] 扑克游戏【Huffman】
查看>>
_bzoj2005 [Noi2010]能量采集
查看>>
pat 团体天梯赛 L3-010. 是否完全二叉搜索树
查看>>
烟草MES系统介绍-序
查看>>
优先队列小结
查看>>
线程安全与可重入函数之间的区别与联系
查看>>
bat批处理中如何获取前一天日期
查看>>
{Nodejs} request URL 中文乱码
查看>>
异常及日志使用与项目打包
查看>>
努力，时间，坚持，自律
查看>>
真三 bug PT的凤凰
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-10-19 11:36:01   当前IP: 18.226.93.104   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我