动态脚本 加载外部脚本 方式一,直接写代码: var script = document.createElement("script"); script.type = "text/javascript"; script.src = "js/test.js"; document.body.appendChild(script); 方式二,封装成函数: function createScript(url){ var script = document…

原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀   var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver      // 选择目标节点   var target = document.querySelector('#some-id');       // 创建观察…

JS总体包括ECMAScript,DOM,BOM三个部分,但是能够和浏览器进行交互的只有DOM和BOM,那么到底什么是DOM和BOM呢 概念 BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”. DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素. BOM Window对象是客户端JavaScript最高层对象之一,由于window对象是其它大部分对象的共同祖先,…

1.Javascript组成(此文为转载) JavaScript的实现包括以下3个部分: 1)核心(ECMAScript):描述了JS的语法和基本对象. 2)文档对象模型 (DOM):处理网页内容的方法和接口 3)浏览器对象模型(BOM):与浏览器交互的方法和接口 ECMAScript扩展知识: ① ECMAScript是一个标准,JS只是它的一个实现,其他实现包括ActionScript. ② “ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力……”,即ECMAScript不…

原生Js监听普通dom尺寸变化 具体做法有以下几种: 初始化项目后,轮询,反复查看 dom 尺寸是否变化,这种一听就感觉不好,开销太大. 监听元素的滚动事件,在 目标 dom 里面包裹一个同等大小的 div,是隐藏不可见的,当目标 dom 大小变化时,触发滚动事件.参考文章 通过 MutationObserver 监听dom 节点变化,MutationObserver 是在DOM4规范中定义的,它的前身是 MutationEvent 事件,该事件最初在 DOM2 事件规范中介绍,到来了 DOM3…

1.首先按目前研究 print可以打印dom 2.被设置overflow:hidden 的模块,打印时会被截掉. 3.被设置成 display:none 的dom 打印不会有样式 边框等. 4.如果需要改变打印样式则需要css3媒体查询,并确保样式被加载到输出的dom中: 例如: <style type="text/css">@media print {.showy>p{display:none;}.cls{display:none;}td {background-c…

一.JS中的三种函数 1.普通函数 function func(){ console.log("Hello World"); } func() 2.匿名函数 setInterval(function(){ console.log(123) },5000) 中间的function()就是匿名函数. 3.自运行函数 (function(arg){ console.log(arg) })(1) (1)是传递给arg的参数,该函数会在导入JS时自动执行.(可以用来作为容器,包含第三方库,避免命…

目录 引入 BOM操作 window对象 history对象 location对象(重点) 弹出框 定时器 计时器相关 DOM 查找标签 直接查找 间接查找 节点操作 创建节点及添加节点 删除节点 替换节点 属性节点及文本节点 获取值操作 标签类(class)属性 标签样式操作 事件 常用事件 绑定事件方式 引入 JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"…

一．初识DOM 1．什么是DOM?为什么学习DOM 2．DOM是实现js在网页实现交互的关键环节,我们的js代码就是通过DOM的方法来实现对于html内容的操作. 3．认识DOM实现了js和网页结合的原理: 4．认识DOMTREE;认识DOM的分类: 5．简单获取元素,简单事件绑定: 6．认识DOM,js,html,所运行的环境BOM: #二．BOM简介:Browser Object Model **1. Bom ** 是什么? 由浏览器实现的供JavaScript程序调用的一组对象 2. **…

事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. ----------------------------------------------------------------------------------------------------------- 一.事件流 事件流:描述的是页面中接收事件的顺序.     IE:事件冒泡流,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档):     NetScape:事件捕获流,即…

在 js 高程 22.3.3章节 里看到了 函数节流 的概念,觉得给出的代码可以优化,并且概念理解可以清晰些,所以总结如下: 先看 函数节流 的定义,书上原话(斜体表示): 产生原因/适用场景: 浏览器中某些计算和处理要比其他的昂贵很多.例如,DOM 操作比起非 DOM 交互需要更多的内存和 CPU 时间.连续尝试进行过多的 DOM 相关操作可能会导致浏览器挂起,有时候甚至会崩溃.尤其在 IE 中使用onresize 事件处理程序的时候容易发生,当调整浏览器大小的时候,该事件会连续触发. 在on…

js 高程 书中原话(斜体表示): 22.1.4 函数绑定 另一个日益流行的高级技巧叫做函数绑定.函数绑定要创建一个函数,可以在特定的this 环境中 以指定参数调用另一个函数.该技巧常常和回调函数与事件处理程序一起使用,以便在将函数作为变量 传递的同时保留代码执行环境.请看以下例子: var handler = { message: "Event handled", handleClick: function(event) { console.log(this); //改编,方便测试…

Javascript中关于数组对象的操作方法比较多也比较杂,正好再次捡起<Javascript高级程序设计>来读,把它们一一总结梳理了一下: 方法类别 方法名称 方法描述 参数 返回值 备注 转换方法 toString() 把数组转换为字符串,并返回结果. 无 以逗号分隔的字符串 调用每一项的toString()方法 valueOf() 返回数组对象的原始值. 无 原数组 toLocaleString() 把数组转换为字符串,并返回结果. 无 以逗号分隔的字符串 调用每一项的toLocaleS…

一.理解对象 ECMA-262定义对象:无序属性的集合,其属性可以包含基本值.对象或者属性. 我们可以把 ECMAScript 的对象想象成 散列表:无非就是一组 名值对,其中值可以是数据或函数. 创建自定义对象的2种方式: (1)创建一个 Object 的实例,然后为其添加属性和方法         --最简单(早期开发人员的选择) // 创建一个 Object() 的实例,为其添加属性和方法 var person = new Object(); person.name = "Nicholas…

继上篇<JS高程>对象&原型笔记,对JavaScript中的Object对象进行了整理,梳理一遍~ 参考文章:详解Javascript中的Object对象 ----------------------------------------------------------------------------------------------整体概览: 分解预览: (1)创建对象 (2)对象实例的属性和方法 (3)属性的类型 (4)Object的方法…

看JS高程遇到 Preflighted Reqeusts不大理解,遂百度下: 转自:http://todoit.me/ajax-preflight/ 最近在做一个 VUE 的项目的时候, 和后端的小伙伴对接口, 想方便开发, 于是要求后端的小伙伴在所有的接口都加上跨域的许可 (Access-Control-Allow-Origin) (后来事实证明这不是一个很好的解决方案, 因为 vue-cli 提供了 proxy-table 作为 AJAX请求的代理, 只需要配置一下就好, 编译上线也不要改动…

创建对象 这是js高程3--第6章面向对象的程序设计--第二节创建对象的总结与自己的理解,每一种模式都有自己的优点与缺点,搞清楚它们出现的历史原因,优缺点,我们才能使用的更加游刃有余! 本片文章并没有将细节的挖的特别深,重点关注的是每种模式的优缺点,怎么形成的.细节会在另写博客总结. 正文开始 我们都知道创建单个对象有两种方法,构造函数和字面量的形式. var obj = new Object(); //构造函数 var obj1 = {}; //字面量 如果我们想要创建多个对象,这两种形式就有…

1.前言   在平时工作开发中,大部分开发人员都花费大量的时间在维护其他人员的代码.很难从头开始开发新代码,很多情况下都是以他人成果为基础的,或者新增修改需求,自己写的代码也会被其他开发人员调用,所以写好一份高质量可维护的代码就显得十分重要. 2.什么是可维护代码 可维护代码需要遵循以下几个特点. 1.可理解性-其他人可以接手代码并理解它的意图和一般途径. 2.直观性-代码中的东西一看就明白,不管其操作过程有多复杂. 3.可适应性-代码以一种数据变化不要求完全重写的方法撰写. 4.可扩展性-在代…

DOM是针对HTML和XML文档的一个API.DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 1,节点层次 DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构.每个节点都有自己的特点.数据和方法,也与其他的节点存在某种关系.构成了层次. <html>元素为文档元素.是文档的最外层元素.每一段标记都可以通过一个节点来表示.HTML元素通过元素点表示,特性通过特性点来表示.文档类型通过文档类型节点来表示.注释通过注释节点来表示.共有12种节点类型,这些…

引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Ember早就开始用虚拟DOM技术来提高页面更新的速度了. 若想了解它是如何工作的,就要先认清这几个概念: 1.更新DOM是非常昂贵的操作 当我们使用Javascript来修改我们的页面,浏览器已经做了一些工作,以找到DOM节点进行更改,例如: document.getElementById('myId').ap…

我们在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法. 要判断一个对象是否DOM对象,首先想到的无非就是它是否具有DOM对象的各种属性或特征,比如是否有nodeType属性,有tagName属性,等等.判断的特征越多,也就越可靠,因为毕竟我们自定义的js对象也可以有那些属性.还有其他方法吗? 在DOM Level2标准中定义了一个HTMLElement对象,它规定所有的DOM对象都是HTMLElement的实例,…

1.1 动态脚本 动态加载的外部JS文件能够立即运行.难点在于如何知道脚本加载完成了?可以通过事件来检测.IE对待<script>元素特殊性,不允许DOM访问其子节点.使用元素的text属性来指定JS代码. 1.2 动态样式 IE对待<style>元素特殊性,不允许DOM访问其子节点.使用元素的styleSheet属性来指定代码.小心IE的styleSheet属性,在重复设置和设置为空时,可能导致浏览器崩溃. 1.3 操作表格 为了方便创建表格,HTMLDOM为<table&…

一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了. HTML DOM类型 Node类型 Javascript中的所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法. 除IE外其他浏览器都可以访问到这个类型. 每个节点都有一个NodeType属性,用于表明节点的类型,节点类型由在Node类型中定义的下列12个常数值来表示,任何节点类型必居其一. 根据这些常量值可以很容易的判断节点类型. if(someNode…

一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木有?则RSS或盗版)然后撤了. 事件是个大课题,真要从断奶开始讲起的话,可以写个12期的连载.关于JS事件的文章(类似DOM/BOM事件模型,IE与其他浏览器事件差异,DOM1/DOM2事件定义等)落叶般随处可见.熟豆子反复炒一点意思都没有,因此,这里谈谈自己感兴趣的自定义事件以及周边. 所谓自定义…

jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); //第一个参数是数组里面的值,第二个参数是索引 }) //=========================================// , "gender": "男" }; for (var key in keyWord) { alert(key + '===…

废话不说,直接上图 一 js的基本操作 (1)js 的六种数据类型 var n4;//六种数据类型用typeof来确定类型,Null类型的用typeof是不行的,这个是特殊 alert(typeof (n4)); var n1 = 123; alert(typeof n1); var n2 = "hahaha"; alert(typeof (n2)); var n3 = true; alert(typeof (n3)); var n5 = null; alert(String(n5))…

JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript,为了能够使JavaScript操作Html,JavaScript就有了一套自己的dom编程接口. 对于Html,dom使得html形成一棵dom树,类似于一颗家族树一样,一层接一层,子子孙孙. 所以说,有了DOM,在我看来就是相当于JavaScript拿到了钥…

javascript的Bom和Dom对象使我们学习的重点,这篇随笔可以重点阅读 一.BOM对象 1.window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使用即可. 2.Window 对象方法 alert() 显示带有一段消息和一个确认按钮的警告框. confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框. prompt() 显示可提示用户输入的对话框.…

一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq(index)是jQuery实例对象; 直接下标访问, $(DOM对象)[index]; 二.两者操作DOM的对比 一.创建元素节点 1.1 原生JS创建元素/文本节点 document.createElement("p"); 1.2 jQuery创建元素/文本节点 $('<p>…

Bom 概念 BOM : Browser Object Model 浏览器对象模型,描述与浏览器进行交互的方法和接 口, ECMAscript是javascript的核心,但如果要在web中使用javascript,那么 BOM则无疑才是真正的核心. BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关. window对象 窗口高度 var  a  = window.innerheight 窗口宽度 var a = window.innerwidth 打开一个新的页面 open…