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的闭包
Jan 17 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
javascript拖拽应用实例
Mar 25 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
php学习之简单计算器实现代码
2011/06/09 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
javascript+mapbar实现地图定位
2010/04/09 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
python实现简单加密解密机制
2019/03/19 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
岗位竞聘书范文
2014/03/31 职场文书
中学生寄语大全
2014/04/03 职场文书
2014年内部审计工作总结
2014/12/09 职场文书