nodeName是节点的属性,tagName是元素的属性.元素是节点的子集.不是任何节点都有tagName的,比如文本节点,仅有nodeName属性. 这个和css中的倾斜和斜体的关系是一样的.不是所有元素都有斜体的,但是都能倾斜…

DOM里常见的三种节点类型(总共有12种,如docment):元素节点,属性节点以及文本节点,例如<h2 class="title">head</h2>,其中h2是元素节点,class是属性节点,head是文本节点,tagName和nodeName的语义是一样的,都是返回所包含标签的名称,例如上面的h2标签,都是返回h2,但是tagName只能在元素标签上使用,而nodeName则可以在所有的节点上使用. 从DOM层次来看,nodeName是node 接口上的p…

a．最容易出现的就是js的命名冲突①.变量名冲突变量有全局变量和局部变量当全局变量变量和局部变量名称一致时,就会js冲突,由于变量传递数值或地址不同就会产生JavaScript错误,甚至死循环.②.方法名冲突函数中有很多方法,不同的js之间可能函数名一样,这就使得程序执行时不知道改调用那个方法或者哪个方法执行后的结果,最终导致程序加载失败.③.函数名冲突一般是命名导致JS冲突.解决方法主要是查找在加载的js中是否具有相同命名的情况,然后修改命名 b．onload 事件冲突如果在js中调用了win…

作者:zccst 看一下是如何写的 jQuery.extend({ prop:"" method:function(){} }); 可以看出,这些方法是jQuery的静态属性和方法(也即是工具方法),将来既可以直接提供给用户使用,也可以在内部使用. 具体实现的工具属性和方法有(同时也标注了哪些在内部使用) jQuery.extend({        expando  :  生成唯一JQ字符串(内部)        noConflict()  :  防止冲突        isRead…

expando:生成唯一JQ字符串(内部使用) noConflict():防止冲突 isReady:DOM是否加载完成(内部) readyWait:等待多少文件的计数器(内部) holdReady():推迟DOM触发 ready():准备DOM触发 isFunction():是否为函数 isArray():是否为数组 isWindow():是否为window isNumeric():是否为数字 type():判断数据类型 isPlainObject():是否为对象自变量 isEmptyObjec…

我觉得吧,是这么个原因,就是响应式要找这个node改它的内容,没找着,就报错了. 用computed监控vuex的state属性,绑定到页面上,如果这个属性改了,因为响应式,那么就要更改页面,如果页面不是当前页面,那么就会出现vue.common.js?e881:433 TypeError: Cannot read property 'nodeName' of undefined这样的报错..... 但是vue.common.js里写 // Sort queue before flush. //…

今天,某个环境报了个js错误,TypeError: 'undefined' is not a function (evaluating 'elem.nodeName.toLowerCase()') [jquery.js:1904](jquery 1.12),经常页面中使用了id为nodeName的元素所致,按说这个问题1.7就应该修复了,改成其他名字后,问题修复.…

getElementById() getElementsByName() getElementsByTagName() hasChildNodes() nodeName nodeType=1元素节点/2属性节点/3文本节点 nodeValue <script type="text/javascript"> //取得input元素的名字 nodeName,类型nodeType值nodeValue; var inputElement=document.getElementByI…

思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动显示. 页面显示的不是第一平时,当鼠标指针滑动到页面的头部区域,导航栏向右滑出:鼠标指针移出头部区域时,导航栏向左滑动隐藏. 当视口尺寸小于768px时,切换页面不隐藏导航条,但是导航条的项目要隐藏,通过点击按钮来显示和隐藏项目. 本篇代码是重构前的代码. HTML代码: <!DOCTYPE htm…

网上关于实现各种滚动效果的插件不胜枚举,这里,我简单介绍一下自己用过的两款比较有代表性的插件: 1.jquery.slimscroll.js,需要先引入jquery类库,主要用于模拟传统的浏览器滚动条(竖向),将要设置的内容外加div元素(可以取id为wrapper)包裹,然后在$(function(){})中进行实例化的参数设置: var myScroll=$("#wrapper").slimScroll({ // width:"300px",//容器宽度度 he…

什么是DOM? DOM:文档对象模型(Document Object Model),又称为文档树模型.是一套操作HTML文档的API. 什么是文档对象模型? DOM将html文档看成了一个对象,html文档中的所有内容都封装成了一个一个的对象. 因此我们学习DOM就是学习这些对象的属性和方法. 所有的内容:标签.属性.文本.注释,这些都被封装成了对象 什么是API? api就是工具,做不同的事情需要不同的工具(api) DOM:用来操作页面元素的一套API.BOM:用来操作浏览器一些行为的一套A…

前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前后端之间代码敲得飞起,从此由前端晋升为'前后端'. 图片来自G+ 本文将使用Node.js加web socket协议打造一个网页即时聊天程序,取名为HiChat,中文翻过来就是'嗨聊',听中文名有点像是专为寂寞单身男女打造的~ 其中将会使用到express和socket.io两个包模块,下面会有介绍…

1.对于DIV注入的,可以初始化时检查全部html代码. 检测是否被劫持比较简单,但对抗就略麻烦,这个在说完第2点之后再解释. 2.对于js注入,可以在window监听DOMNodeInserted事件. 事件有srcElement,可以获取到刚插入的dom节点. 这里开始简单粗暴的做正则匹配,匹配所有url. 再逐个比较是否白名单域名,如果不是,则判定为劫持.可以上报,同时可以移除dom.parentNode.removeChild(dom); 但这样容易造成误伤,因为正常页面中可能有外部链接…

因为工作的需求之前也封装过一个JS分享插件,集成了我们公司常用的几个分享平台. 但是总感觉之前的结构上很不理想,样式,行为揉成一起,心里想的做的完美,实际上总是很多的偏差,所以这次我对其进行了改版. 这次的核心就是:JS只负责事件+结构,也就是把功能实现出来,具体的外观样式,则使用者自己进行定义. 以下是新版分享插件的代码: (function(root){ 'use strict'; function share(params){ this.params = params; this.dom…

jquery.hammer.js使用时要先引入hammer.min.js 下面代码是滑动效果:   $("#nav").hammer().bind('swiperight', function (e) {                $("#result").html(e.gesture.deltaX)                var currPos = $(".menu").scrollLeft();                va…

什么是事件委托:通俗的讲,onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也就是:利用冒泡的原理,把事件加到父级上,触发执行效果. 好处1,提高性能. 先看一个例子:需要触发每个li来改变他们的背景颜色. <ul id="ul"> <li>aaaaaaaa</li> <li>bbbbbbb</li> &l…

js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮');">点击这个按钮</button> 二. 属性绑定(DOM0级事件) 只能绑定一个函数 button.onclick = function() {}; 三. 事件监听函数(DOM2级事件) element.addEventListener(<event-name>, &…

1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE10以上不支持. 如果你安装了多个IE,条件注释将会以最高版本的IE为标准. 条件注释的基本结构和HTML的注释(<!– –>)是一样的.因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容. 条件注释使用方法示…

JS单向流动其实就是数据到视图的过程, 这几天突发奇想,想着弄一个插件, 把DOM结构使用JS进行描述: 因为DOM中的Class , content, id, attribute, 事件, 子元素全部通过JS进行描述, 最后把这些元素拼接在一起, 生成一个DOM树, 如果有些DOM数是可以复用的,我们就把他包装成组件(Component), 方便复用, 但是使用结构化的JS描述DOM并不形象, 不如直接使用HTML生成,如果能够准确把握JS结构, 然后封装各个JS组件, 能够极大的降低耦合,…

用typeof 来检测数据类型 Javascript自带两套类型:基本数据类型(undefined,string,null,boolean,function,object)和对象类型. 但是如果尝试用typeof 来检测对象类型都一律返回"object"并不能加以区分 typeof null // "object" typeof [] // "object" typeof document.childNodes //"object&qu…

js复习-01---03 一 JS简介 1,文档对象模型 2,浏览器对象模型 二 在HTML中使用JS 1,在html中使用<script></script>标签 2,引入外部JS文件 三,JS基本概念 1,ECMAScript中的一切(变量,函数名,操作符)都区分大小写,函数名不能用关键字 2,ECMAScript变量是松散型的,松散型:可以用来保存任何值 3,全局变量和局部变量(var) 4,数据类型:ECMAScript有5种简单的数据类型(基本数据类型):undefined…

关于js编程, 主要是, 绝大部分是用 jquery. 但是, js原生的一些方法和属性也是要掌握的, 这个只是在 遇到的时候, 记一下就好了, 如: event的relatedTarget属性: 主要就是针对 mouseout和 mouseover而言的, 返回跟这个事件 相关的 dom元素, mouseout会返回被 进入的dom元素, mouseover会返回被 离开的元素: $("p").mouseover(function(e){ alert(e.relatedTarget.…

起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了…

JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前一直用各种js库的事件代理,如 jQuery,非常方便实用.今天尝试用原生 js 实现该功能. var addEvent = (function () { if (document.addEventListener) { return function (element, type, handler…

在项目中遇到按下Backspace键让浏览器后退的问题,上网搜了几种解决方案都不太理想.于是集众人之智,采众家之长,归纳如下: 这里主要参考博客http://q821424508.iteye.com/blog/1587025 1.在公用js中定义阻止Backspace的方法 function banBackSpace(e){ var ev = e || window.event; //各种浏览器下获取事件对象 var obj = ev.relatedTarget || ev.srcElement…

<html> <head></head> <style> body{padding-top:50px;padding-left:100px;padding-right:150px;} .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #cccccc;margin-right:10px;…

本文出自前端档案,以作学习参考之用.自己也补充了一些内容 长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 一.函数和方法差异: 二.样式访问和设置: 三.DOM方法及对象引用: 四.事件处理: 五.其他差异的兼容处理. 一.函数和方法差异 1. getYear()方法 [分析说明]先看一下以下代码: var year= new…

1.盒子模型典型标签 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"…

jsp对控件显示 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jquery</title> &…

原地址:http://www.malot.fr/bootstrap-datetimepicker 修改的地方有三处: 1. var months = this.setTitle('.datetimepicker-months', year) .end() .find('span').removeClass('active'); 修改为: var months = this.setTitle('.datetimepicker-months', year) .end() .find('span.mo…