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 相关文章推荐
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
js Flash插入函数免激活代码
Mar 31 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
set_include_path在win和linux下的区别
2008/01/10 PHP
PHP的博客ping服务代码
2012/02/04 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
简单解决Python文件中文编码问题
2015/11/22 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
Python的互斥锁与信号量详解
2019/09/12 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
成品仓库管理员岗位职责
2015/04/09 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android