js

js 事件对象相关笔记

感情迁移 提交于 2020-04-07 11:43:13
事件对象 event就是一个事件对象 写到我们的监听函数的括号里面 当形参来看 事件对象只有有了事件才存在,他是系统给我们自动创建的 不需要我们传递参数 事件对象是我们事件的一系列相关数据的集合 跟事件相关比如鼠标点击就包含了鼠标的相关信息等等 事件对象我们可以自己定义比如event,eve,e 事件对象也有兼容性问题 I E6,7,8通过window.event,兼容性的写法e = e || window.wvwnt 1 <div class="div">123</div> 2 <script> 3 var div = document.querySelector(".div") 4 div.onclick = function (event) { 5 console.log(event); 6 } 7 div.addEventListener('click', function (event) { 8 console.log(event); 9 }) 10 </script> 重点 常用的事件对象的属性和方法 e.target 返回触发事件的对象 标准 e.srcElement 返回触发事件的对象 非标准 e.type 返回事件的类型 比如click mouseover 不带on e.stopPropagation() 阻止冒泡 有兼容性问题 1 <div class="box

关于js中this指向的总结

心已入冬 提交于 2020-04-07 10:16:58
js中this指向问题一直是个坑,之前一直是懵懵懂懂的,大概知道一点,但一直不知道各种情况下指向有什么区别,今天亲自动手测试了下this的指向。 1. 在对象中的this 对象中的this指向我们创建的对象,例如: var obj ={ ccc : 1122, ddd : 2233, ded : function(){ console.log(this); } , fff : function(){ console.log(this === obj ); } } obj.ded(); obj.fff(); 在chrome中执行的答案如下: 上图我们可以看出我们执行obj对象下的ded函数时,打印出来的事Object对象里面的所有属性,展示这个对象 可以看到obj对象包含的方法和属性都包含在this对象下面,再运行fff函数,把this和obj对象进行比较,可以看出这两个是恒等的,所以在对象里的this指向这个对象。 2.直接调用函数时的this指向 先创建一个函数: function main(){ this.aad = 234; console.log(this); } main(); 运行效果如下: 可以看到我们打印出来的this对象指向全局变量window,而创建的aad变量直接包含在了window对象下面了,所以直接调用函数时this是指向window对象的。 3

js 实现动画功能,完整解析插件版 可更改配置参数 (正在更新....)

Deadly 提交于 2020-04-07 09:47:50
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽。 本篇文章为您分析一下原生JS写一个运动插件 基本功能: 补充中...... 补充中...... HTML结构 <div class="container"></div> <p> <button id="start">开始</button> <button id="stop">结束</button> </p> html的结构只是为了调试运动插件而随意创建的。 CSS样式 <style> .container { width: 100px; height: 100px; background-color: aqua; position: absolute; left: 0; top: 0; } p{ position: absolute; top: 50px; left: 100px; } </style> 页面效果如下: JS行为 需求分析: 动画: 某些元素的某些CSS属性,在一段时间内,从一个值变化到另一个值 动画插件: 某些数据(数字),在一段时间内,从一个值变化到另一个值 不考虑DOM元素,DOM元素由用户传入 创建一个构造函数,让用户传入一些必须的参数(值、函数) 引入helper.js插件(自己封装的),使用对象混合 计算运动的总次数 获取当前的运动状态

【Android】java中调用JS的方法

风格不统一 提交于 2020-04-07 08:47:45
最近因为学校换了新的教务系统,想做一个模拟登陆功能,发现登陆的账号和密码有一个js脚本来进行加密 整理了一下java中执行JS的方法 智强教务 账号 密码 加密方法 var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; function encodeInp(input) { var output = ""; var chr1, chr2, chr3 = ""; var enc1, enc2, enc3, enc4 = ""; var i = 0; do { chr1 = input.charCodeAt(i++); chr2 = input.charCodeAt(i++); chr3 = input.charCodeAt(i++); enc1 = chr1 >> 2; enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); enc4 = chr3 & 63; if (isNaN(chr2)) { enc3 = enc4 = 64 } else if (isNaN(chr3)) { enc4 = 64 } output = output + keyStr.charAt

.NET中WebBrowser控件内部页面的JS代码与外部C#代码的相互调用

蹲街弑〆低调 提交于 2020-04-07 08:39:58
今天为了应对一个工作中遇到的场景,研究了下使用.NET中自带的WebBrowser时内部的JS代码与外部的C#代码相互调用的问题 我的操作系统为Win7旗舰版,IDE版本为VS2012,.NET版本为4.5 经过测试我得出了如下几个结论:(C#写的部分简称C,WebBrowser内的页面代码简称B) 1、C调用B的JS代码,可以传参数,可以接返回值 使用的是 webBrowser.Document.InvokeScript("JS中函数名", new object[] {参数列表}) 2、B调用C中写的函数,可以传参数,可以接返回值 使用的是 window.external.[C#中的函数名](参数列表) 下面来说一下我是如何实现它们: 1、在C#代码中调用WebBrowser内页面的JS函数 可以通过WebBrowser控件中的Document.InvokeScript函数实现,不过要为放置WebBrowser的窗体相关类加特性: [System.Runtime.InteropServices.ComVisible(true)] 没有这个特性,运行时会报错: 2、从WebBrowser内的JS代码中调用C#相关函数 可以通过JS代码:window.external.函数名(参数) 来调用C#中同名同参数个数的函数

图片滚动js 实现图片无缝滚动

时光怂恿深爱的人放手 提交于 2020-04-07 07:43:59
在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止。它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的适用。 <!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>图片滚动</title> </head> <body> <style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; }

js_高级_继承

ⅰ亾dé卋堺 提交于 2020-04-07 07:38:51
1、继承---一般情况下是不用的,做网页特效啥的,比较简单功能的,没有很多重复代码的,一般不会用的,除非是造框架、重用属性较多,类型较多时才用继承。   a、面向对象3大特征         以上是对象的拷贝     什么是继承:真正的继承指的是类型和类型之间的关系     继承的目的:把子类型中共同成员(属性+方法--方法挂在父类原型对象上)提取到父类中,代码重用     继承的好处:代码重用    b、真正的继承---类型(构造函数)和类型(构造函数)之间的继承          继承方式1:原型继承:有缺点---无法设置继承时构造函数的参数(一般是不用这种方式继承的)          继承方式2:call()---改变函数中的this,直接调用函数,call继承的缺点---》无法继承绑在原型上的方法         1、bind的用法                  2、call的用法---调用函数的另一种方式                   3、call 继承---(call 改变函数中的this,直接调用函数)借用构造函数           call继承的缺点---》只能继承父类型中的属性无法继承绑在父类型原型上的方法                 继承方式3:组合继承---》借用构造函数方式(call)继承父类的属性 + 原型继承的方式继承父类的方法    

python之路-----前端之js(一)

一笑奈何 提交于 2020-04-07 07:25:36
  一.JS发展历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript 微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫Jscript. 为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会(ISO/IEC)也采纳 ECMAScript 作为标准(ISO/IEC-16262)。从此,Web 浏览器就开始努力(虽然有着不同的程度的成功和失败)将 ECMAScript 作为 JavaScript 实现的基础。EcmaScript是规范. 二.JS的简介   JS主要由ECMAScript ,DOM,BOM三部分组成。其中ECMAScript是基础,规定了js中的基本语法,例如变量,函数的定义。DOM是最重要的部分,它整合js,css,html,将三者关联起来。BOM将浏览器和JS整合起来。   JS的基于对象的语言,它内含众多类,我们可以进行实例化,使用它们。   

浅谈js中a+++a与a+a++值区别

戏子无情 提交于 2020-04-07 07:22:50
1.a++与++a区别 (1).a++是先运算再赋值自增,用旧值(未自增的值)计算,也就是输出旧值 (2).++a是先自增赋值再运算,用新值(自增后的值)计算,也就是输出新值。 2.由于后置等增运算符优先级高于前置递增运算符,a+++a等价于(a++)+a,先直接将a的旧值进行计算,然后a再自增赋值给后面的a值。 3.由于后置运算符优先于加法,a+a++等价于a+(a++),先将a值直接带入,而后面的a++,先自增再赋值运算。 4.运算机制 + / \ / \ a a++ 编译器的处理过程: 1. push(a), a入栈(1) 2. push(a++),即push(1),之后 a自增变成2 3. result = pop()+pop(), 出栈两个操作数(1,1)相加,得到2 + / \ / \ a++ a 编译器的处理过程: 1. push(a++), 即push(1),之后 a自增变成2 2. push(a),即push(2) 3. result = pop()+pop(), 出栈两个操作数(1,2)相加,得到3参考资料:https://blog.csdn.net/Lazy_Life/article/details/81214249 https://xiedaimala.com/tasks/94aebfab-e93d-403c-99c1-27f68ffede22

仿网页轮播图

我是研究僧i 提交于 2020-04-07 06:53:09
html部分 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网易轮播图js部分</title> <link rel="stylesheet" href="css/css.css"> <script src="js/slider.js"></script> <script src="js/animate.js"></script></head><body><div class="w-slider" id="js_slider"><!--js只支持下划线--> <div class="slider"> <div class="slider-main" id="slider_main_block"> <div class="slider-main-img"><a href="#"><img src="images/1.jpg" alt=""></a></div> <div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""></a></div> <div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""></a></div> <div