JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支


Posted in Javascript onJuly 04, 2019

本文实例讲述了JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支。分享给大家供大家参考,具体如下:

页面加载事件的比较

  • window.onload
  • jquery 中的 document.ready
document.ready = function (callback) {
  // 兼容FF,Google
  if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', function () {
      document.removeEventListener('DOMContentLoaded', arguments.callee, false);
      callback();
    }, false)
  }
  // 兼容IE
  else if (document.attachEvent) {
    document.attachEvent('onreadystatechange', function () {
       if (document.readyState == "complete") {
            document.detachEvent("onreadystatechange", arguments.callee);
            callback();
        }
    })
  }
  else if (document.lastChild == document.body) {
    callback();
  }
}
window.onload = function () {
  alert('onload'); // 后执行
};
document.ready(function () {
  alert('ready'); // 先执行
});
  • 内部实现细节如上

数组的常用操作方法

  • push 从后面追加一个或多个,返回新数组的长度
  • unshift 从前面追加一个或多个,返回新数组的长度
  • pop 删除最后一个元素,返回被删除的元素
  • shift 删除第一个元素,返回第一个被删除的元素
  • concat 连接数组,返回新的数组
  • join 将数组转字符串,参数是分隔符,默认是分隔符是逗号”,”
  • split 将字符串转换为数组,默认分割符是逗号 stringObject.split(separator,howmany), howmany 参数可指定返回的数组的最大长度

js 的构成

  • ECMAScript 描述了js语法和基本对象
  • DOM (文档对象模型) 提供了文档结构化表示,并定义了如何通过脚本来访问文档结构
  • BOM (浏览器对象模型) 提供与浏览器交互的方法和接口

dom 节点

  • 标签节点
  • 文字节点
  • 属性节点
  • 注释节点

获取节点的方式

document.getElementById(“id”)
document.getElementByTagName(“div”)
document.getElementsByClassName(“classname”) ie 678 不支持
document.querySelector(); // 返回第一个匹配的dom元素
document.querySelectorAll(); // 返回所有dom元素匹配的集合

获取浏览器是否支持的写法如下

if(document.querySelector){
 // do your business
}

节点的访问

父节点(唯一):

dom.parentNode

兄弟节点 (兼容写法):

// nextSibling 和 previousSibling 是IE的写法
var next = (dom.nextElementSibling) || (dom.nextSibling);
var pre = (dom.previousElementSibling) || (dom.previousSibling);

孩子节点 (兼容写法):

// firstChild, lastChild 是IE的写法
var first = father.firstElementChild || father.firstChild;
var last = father.lastElementChild || father.lastChild;

孩子们节点:childNodes 和 children

// childNodes 是w3c推荐使用, 但谷歌等浏览器把换行也看成一个节点
// 用下面的方式实现,比较麻烦
var demo = document.getElementById("demo");
var nodes = demo.childNodes;
for(var i=0;i<nodes.length;i++) {
 if(nodes[i].nodeType == 1) {
  nodes[i].style.display = "none";
 }
}
// children 在ie678里面包含注释节点, 注意在编码时避开使用注释
var demo = document.getElementById("demo");
var child = demo.children;
child[0].style.backgroundColor = "red";  // 第一个孩子
child[child.length-1].style.backgroundColor = "red";  // 最后一个孩子

dom 节点操作

创建节点:

var dom = document.createElement(“div”);

添加节点:

// appendChild 将dom追加到dom1的最后面
dom1.appendChild(dom) ;
// insertBefore 将newDom 插入到 ReferencedDom 的前面, 返回值为新插入的值, dom1 为父节点
dom1.insertBefore(newDom, ReferencedDom)

删除节点:

removeChild() eg: domA.removeChild(domB); // 删除domA里面的孩子节点domB

克隆节点: cloneNode 复制节点,接受一个布尔值,true表示深复制(复制节点及其内部所有节点), false 表示浅复制

// 深复制
demo.cloneNode(true);
// 浅复制
demo.cloneNode(false);

属性设定

非兼容ie6,7的写法
- 获取:dom.getAttribute(“属性”);
- 设置:dom.setAttribute(“属性”,”值”);
- 删除:dom.removeAttribute(“属性”);

兼容写法举例:
- 获取:var cn = dom.className
- 设置:dom.className = “dcl”
- 删除:dom.className = null;

特殊样式属性

cssText 用于更改多个样式属性设置

dom.style.cssText = "width:30px;height:10px;"

常用的循环

  • for
  • while
  • do while

switch 多分支语句

var str = "abc";
switch(str) {
 case "a"
  // ...
  break;
 case "b"
  // ...
  break;
 case "c"
  // ...
  break;
 case "abc"
  // ...
  break;
 default:
  // ...
}

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
通过jQuery源码学习javascript(一)
Dec 27 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
iview table高度动态设置方法
Mar 14 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 #Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 #Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 #Javascript
vue-cli配置flexible过程详解
Jul 04 #Javascript
vue动态配置模板 'component is'代码
Jul 04 #Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 #Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 #jQuery
You might like
简单的php 验证图片生成函数
2009/05/21 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
JavaScript对象的property属性详解
2014/04/01 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
Python ftp上传文件
2016/02/13 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
计算机软件个人的自荐信范文
2013/12/01 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL