js

原生js方面的兼容性问题

由 夙愿已清 提交于 2020-02-16 01:54:16
1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题 我们都知道js通过style不可以获取行外样式，当我们需要获取行外样式时: 我们一般通过这两个方法获取行外样式： IE下: currentStyle Chrome,FF下: getComputedStyle(oDiv,false) 兼容两个浏览器的写法: if(oDiv.currentStyle){ alert(oDiv.currentStyle.width); }else{ alert(getComputedStyle(oDiv,false).width); } *注:在解决很多兼容性写法时,都是用if..else.. 封装一个获取行外样式的函数:(兼容所有浏览器,包括低版本IE6,7) funtion getStyle(obj,name){ if(obj.currentStyle){ //IE return obj.currentStyle[name]; }else{ //Chrom,FF return getComputedStyle(obj,false)[name]; } } 调用：getStyle(oDiv,'width'); 2.关于用“索引”获取字符串每一项出现的兼容性问题: 对于字符串也有类似于 数组 这样的通过 下标索引 获取每一项的值, var str=

JS注册事件 JS:attachEvent和addEventListener 使用方法

由 本小妞迷上赌 提交于 2020-02-16 01:51:48
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS</title> </head> <body> <input id="para" type="text" /> <script type="text/javascript"> function test(){ alert("test"); } function pig(){ alert("pig"); } window.onload = function(){ var element = document.getElementById("para"); if(element.addEventListener){ // firefox , w3c element.addEventListener("focus",test,false); element.addEventListener("focus",pig,false); } else { // ie element.attachEvent("onfocus",test);

js 跨浏览操作

由 生来就可爱ヽ(ⅴ＜●) 提交于 2020-02-16 01:49:38
/* 跨浏览器添加事件绑定 obj :　需要绑定js时间的对象 type: 欲绑定的事件类型，如：click ,mounseover 等事件 不需要添加on fn : 触发的脚本 */ function addEvent(obj,type,fn){ if(typeof obj.addEventListener !='undefined'){ //W3C obj.addEventListener(type,fn,false) ; //false表示不捕获冒泡 }else{ //IE IE提供的添加事件绑定存在问题 //为了便于删除事件 特将对象绑定的事件都绑定在该对象本身上，删除的时候同样传递一个该对象即可 if(!obj.events[type]){ obj.events[type] = [] ; //创建一个存放事件处理函数的数组 //把第一次的事件处理函数先储存到第一个位置上 if(obj["on"+type]){ obj.events[type][0] = fn; } }else{ //同一个注册函数进行屏蔽，不添加到计数器中 if (addEvent.equal(obj.events[type], fn)) return false; } //从第二次开始我们用事件计数器来存储 obj.events[type][addEvent.ID++] = fn; //执行事件处理函数

JS中一些兼容性问题

由 孤街浪徒 提交于 2020-02-16 01:45:25
1. 获取滚动距离 document.documentElement.scrollTop () document.body.scrollTop() ==> 兼容IE 2. 获取非行间样式 getcomputedStyle() 参数1：当前对象 参数2：伪类选择器，通常不会使用，用false代替 currentStyle() 【语法】：对象.current[attr] 3. 事件中兼容性问题 var e = e || event； 4. 找到事件源 e.target || e.srcElement ==> 例如点击事件 ，则获取的是点击位置标签名(大写) 5. 获取按下的键盘码 e.keyCode || e.which 6. 阻止事件冒泡 e.stopPropagation() || e.cancelBubble 7. 阻止浏览器默认行为(例如点击右键出来菜单栏) e.preventDefault() || e.returnValue = false 8. DOM2级监听事件兼容 addEventListener removeEventListener attachEvent detachEvent ===> IE兼容 9. 创建ajax对象 var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP"

js中添加事件 attachEvent 与 addEventListener

由 让人想犯罪 __ 提交于 2020-02-16 01:10:38
给元素添加事件时，使用js进行实现时产生了疑惑，有关事件浏览器兼容的问题，在此记录如下。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>IFE JavaScript Task 01</title> 6 </head> 7 <body> 8 9 <label>请输入北京今天空气质量：<input id="aqi-input" type="text"></label> 10 <button id="button">确认填写</button> 11 12 <div>您输入的值是：<span id="aqi-display">尚无录入</span></div> 13 14 <script type="text/javascript"> 15 16 (function() { 17 /* 18 在注释下方写下代码 19 给按钮button绑定一个点击事件 20 在事件处理函数中 21 获取aqi-input输入的值，并显示在aqi-display中 22 */ 23 var zhiliang = document.getElementById("aqi-input"); 24 var button1 = document.getElementById("button"); 25 var

js中的所有兼容问题总结

由 大兔子大兔子 提交于 2020-02-16 01:10:17
js兼容问题总结 ​ 在学习js过程中很多人都遇到过兼容问题，这些兼容问题是因为各版本浏览器不同导致的，为了解决这些兼容问题，js给我们提供了解决这些兼容问题的方案，对此，我个人进行了汇集以及总结。 1.阻止事件冒泡的兼容 var e = eve || window.event; stopBubble(e); function stopBubble(e){ if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; } } 2.阻止默认事件的兼容 var e = eve || window.event; stopDefault(e); function stopDefault(e){ if(e.preventDefault){ e.preventDefault() }else{ e.returnValue = false; } } 3.事件监听的绑定方式的兼容 obox.addEventListener("onclick",fn1) function fn1(){ console.log(1) } obox.attachEvent("onclick",function(){ console.log(2) }) 4.事件解绑的兼容 removeEventListener() detachEvent

js 添加事件 attachEvent 和 addEventListener 的用法

由 假装没事ソ 提交于 2020-02-16 01:05:36
一般我们在JS中添加事件,是这样子的 obj.onclick=method 这种绑定事件的方式，兼容主流浏览器,但如果一个元素上添加多次同一事件呢? obj.onclick=method1; obj.onclick=method2; obj.onclick=method3; 如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法 //object.attachEvent(event,function); btn1Obj.attachEvent("onclick",method1); btn1Obj.attachEvent("onclick",method2); btn1Obj.attachEvent("onclick",method3); 使用格式是前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是 method3->method2->method1 可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法 //element.addEventListener(type,listener,useCapture); btn1Obj

JavaScript 基础学习（一）JavaScript 简介

由 非 Y 不嫁゛ 提交于 2020-02-15 23:52:47
定义 JavaScript是基于对象和事件驱动的语言，应用与客户端。其中： 基于对象：提供好了很多对象，可以直接拿过来使用 事件驱动：html做网站静态效果，javascript动态效果(网页能根据客户操作事件作出响应) 客户端：专门指的是浏览器 特点 解释型语言：无需编译，直接运行 交互性：信息的动态交互 安全性：js不能访问本地磁盘的文件 跨平台性：只要是能够支持js的浏览器，都可以运行 javascript 和 java 的区别 java是sun公司，现在oracle；js是网景公司 JavaScript 是基于对象的，java是面向对象 java是强类型的语言，js是弱类型的语言。比如java里面 int i = "10"; js: var i = 10; var m = "10"; JavaScript只需解析就可以执行，而java需要先编译成字节码文件，再执行 javascript 的组成 ECMAScript：核心 DOM：文档对象模型 BOM：浏览器对象模型 ECMAScript 和 Javascript ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。 这种语言在万维网上应用广泛

全局配置css和js

由 本小妞迷上赌 提交于 2020-02-15 18:43:54
配置全局css global.css html, body { margin: 0; } a { color: black; text-decoration: none; } ul { margin: 0; padding: 0; } main.js 配置全局css import '@/assets/css/global.css' // import global_css from '@/assets/css/global.css' // 资源需要用变量保存,方便以后使用 // require('@/assets/css/global.css') (推荐) // let global_css = require('@/assets/css/global.css') // 资源需要用变量保存,方便以后使用 配置全局js settings.js export default { base_url: 'https://127.0.0.1:8000' } main.js 配置自定义js设置文件 import settings from '@/assets/js/settings.js' Vue.prototype.$settings = settings; // 在任何一个组件中的逻辑,可以通过 this.$settings访问settings.js文件的{}数据 来源： https:/

JS--基础

由 六眼飞鱼酱① 提交于 2020-02-15 17:20:24
001、你对js的理解 a、由网景公司（Netscape）开发 b、这是一个跨平台的脚本语言 c、应用在网页中，用来操作浏览器及网页内容 d、javascript最初的设计是为了检验HTML表单输入的正确性 002、js的三大组成部分 ECMAScript：一种规范 BOM(browser) object Model：浏览器对象模型 DOM(document):文档对象模型 003、js引入的方式 1、<div onclick="alert(1)"></div> 2、写在<script></script> <script> alert(1) </script> 3、写在js文件 <script src="js/index.js"></script> 004、js的注释 单行注释：// 多行注释：/**/ 005、js中变量的命名规则 规则：数字、字母、下划线、$符号，其中不能以数字开头 声明：不可以使用关键字和保留字 建议：见名知意 命名方法：驼峰命名法、常规命名(_连接)、匈牙利命名 006、js中的数据类型有哪些 js的数据类型分为：基本数据类型、复杂数据类型 基本数据类型：number string boolean null undefined 复杂数据类型：object 007、null 、 true false转换成数字的值都是多少 false如果转换成一个数字的话是0
订阅 js