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 相关文章推荐
JS代码放在head和body中的区别分析
Dec 01 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
javascript操作cookie
Jan 17 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
vue实现动态按钮功能
May 13 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 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中$_SERVER的详细参数与说明
2008/07/29 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
python中MySQLdb模块用法实例
2014/11/10 Python
通过C++学习Python
2015/01/20 Python
Python实现的质因式分解算法示例
2018/05/03 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
资产评估专业学生的自我鉴定
2013/11/14 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
优秀班主任材料
2014/12/16 职场文书
国庆庆典邀请函
2015/02/02 职场文书
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python