js代码

深入jQuery中的data()

戏子无情 提交于 2020-03-18 02:01:41
引入   data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此。 data有什么作用?   在我们平时js编码过程中,我们经常会向DOM元素中添加各种自定义属性,这样有一个弊端。   1 假设我们在DOM元素中添加了一个属性,这个属性指向了某个js对象。 dom1.ele = jsObj   2 当这个js对象发挥完作用后,我们已经用不到他了。这时候按理说应该把这个js变量清空,释放内存。大家都知道,如果一个js对象 不存在 任何外在引用的话,解释器会自动将其在内存中删除,这也是javascript相对于c++等手动管理内存的程序的优点。   3 但是这时候问题来了,因为DOM元素引用了这个js对象,尽管这个js对象已经没有存在的意义了,但是解释器是不会把他删除的。如果想要把其删除,我们可能需要将DOM元素的这个属性设置为null。   4 我们编写了这么多的代码,哪里能把 每个js对象是不是被DOM元素引用了都记住啊?   5 而且,假如DOM元素与js对象之间相互循环引用,根本就无法删除! 这就是内存泄漏   6 所以,为了避免这种情况的发生,我们要尽量避免 引用数据 (这里的引用数据可以说是javascript对象) 直接依附在DOM对象上。   7

js将图片按比例缩放显示IE6

感情迁移 提交于 2020-03-18 01:16:43
将图片按比例缩放显示在IE6下会失效,原因是在image未加载的的时候去获取Image的高度和宽度是获取不到的,所以可以判断若浏览器是IE6的话就在图片加载以后获取图片的高度和宽度然后再将图片进行比例缩放。具体实现代码如下: //图片按比例缩放 @ImgID图片控件的ID,@iwidth指定的最大宽度,@iheight指定的最大高度 function DrawImage(ImgID, iwidth, iheight) { var image = new Image(); image.src = $("#"+ImgID).attr("src"); if (window.ActiveXObject) { var ua = navigator.userAgent.toLowerCase(); var ie = ua.match(/msie ([\d.]+)/)[1]; //判断是IE6 if (ie == 6.0) { image.onreadystatechange = function() { if (image.readyState == "complete") { ShowImg(image, iwidth, iheight,ImgID); } } } else { ShowImg(image, iwidth, iheight,ImgID); } } } function

IE打开网页加载js问题

…衆ロ難τιáo~ 提交于 2020-03-17 20:47:39
2020年3月13日工作问题 问题:在jsp页面,下有js文件没有加载出来,但是在f12下,刷新就加载出来了。 我打开的网页是360安全浏览器,内核设置为ie8,但是打开网页有一些js文件就是加载不出来,后来查询 得知。在ie8/9模式下,只能打开f12生效console方法。在ie6/7,根本没有这个方法。 解决: 1.直接一点,删除就可以了 2.用代码解决 if(window.console){ //一些console命令 console.info("gogo"); } 这次的问题发生了,及时的解决,才能更好的锻炼自己。 来源: CSDN 作者: 山沉 链接: https://blog.csdn.net/qq_43925043/article/details/104852580

JavaScript 进阶(一)JS的\"多线程\"

二次信任 提交于 2020-03-17 17:39:38
这个系列的文章名为“JavaScript 进阶”,内容涉及JS中容易忽略但是很有用的,偏JS底层的,以及复杂项目中的JS的实践。主要来源于我几年的开发过程中遇到的问题。小弟第一次写博客,写的不好的地方请诸位斧正,觉得还有一些阅读价值的请帮忙分享下。这个“JavaScript 进阶”是一个系列文章,请大家鼓励鼓励,我尽快更新。另外,如果你有比较好的话题,也可以在下面评论,我们一起研究提高。 JS是多线程的吗? 多线程编程相信大家都很熟悉,比如在界面开发中,如果一个事件的响应需要较长时间,那么一般做法就是把事件处理程序写在另外一个线程中,在处理过程中,在界面上面显示类似进度条的元素。这样界面就不会卡住,并且能够显示任务执行进度。记得刚开始做前端的时候,老板交代在界面上面做一个定时器,每秒更新用户的在线时间。当时拥有Java和C++开发经验的我自信满满的说我加一个线程就可以分分钟搞定了。所以查阅文档,发现setTimeout和setInterval可以很方便的实现该功能。那时候我就认为这就是JS中的多线程。setTimeout相当于启动一个线程,等待一段时间后执行函数,setInterval则是在另外的一个线程中,每隔一段时间执行函数。这个观念在我的头脑中存在了一年左右,直到遇到了这样的一个问题。 测试人员发现一个按钮的点击响应时间较长,在响应过程中,界面卡住了

你不知道的高性能Javascript

我与影子孤独终老i 提交于 2020-03-17 15:13:22
想必大家都知道,JavaScrip是全栈开发语言,浏览器,手机,服务器端都可以看到JS的身影。 本文会分享一些高效的JavaScript的最佳实践,提高大家对JS的底层和实现原理的理解。 数据存储 计算机学科中有一个经典问题是通过改变数据存储的位置来获得最佳的读写性能,在JavaScript中,数据存储的位置会对代码性能产生重大影响。 – 能使用{}创建对象就不要使用new Object,能使用[]创建数组就不要使用new Array。JS中字面量的访问速度要高于对象。 – 变量在作用域链中的位置越深,访问所需实践越长。对于这种变量,可以通过缓存使用局部变量保存起来,减少对作用域链访问次数 – 使用点表示法(object.name)和操作符(object[name])操作并没有太多区别,只有Safari会有区别,点始终更快 循环 在JS中常见的循环有下面几种: for(var i = 0; i < 10; i++) { // do something} for(var prop in object) { // for loop object} [1,2].forEach(function(value, index, array) { // 基于函数的循环}) 毋庸质疑,第一种方式是原生的,性能消耗最低的,速度也最快。第二种方式for-in每次迭代都回产生更多的开销(局部变量)

js通过Object.style.property=new style;改变html样式

百般思念 提交于 2020-03-17 14:50:28
HTML中的DOM(Document Object Model)文档对象模型允许 JavaScript 改变 HTML元素和CSS样式,//语法:Object.style.property=new style;其中Object是获取的元素对象,如通过document.getElementById("id")获取的元素。 e.g;改变 <div> 元素的样式,将背景改为蓝色、高度60px、颜色白色、大小18px、字体为宋体或雅黑,展示代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>改变HTML样式</title> 6 </head> 7 <body> 8 <div id="ceshi">《朝花夕拾》原名《旧事重提》,是现代文学家鲁迅的散文集,文集以记事为主,饱含着浓烈的抒情气息,往往又夹以议论,做到了抒情、叙事和议论融为一体,优美和谐,朴实感人。作品富有诗情画意,又不时穿插着幽默和讽喻;形象生动,格调明朗,有强烈的感染力...</div> 9 <script type="text/javascript"> 10 var myceshi=document.getElementById('ceshi'); 11 myceshi.style.background='#0000FF';

AngularJS从构建项目开始

大憨熊 提交于 2020-03-17 11:58:32
AngularJS体验式编程系列文章 ,将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板。Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒。用angularjs就像写后台代码,更规范,更结构化,更可控。 关于作者 张丹(Conan), 程序员Java,R,PHP,Javascript weibo:@Conan_Z blog: http://blog.fens.me email: bsspirit@gmail.com 转载请注明出处: http://blog.fens.me/angularjs-yeoman-project/ 前言 随着AngularJS被越来越多的开发人员所了解,AngularJS的应用受到市场的好评。AngularJS是一种新型的以Javascript为基础的框架,以后台的编程思路影响着web前端的开发。在扎根细节之前,让我们先了解AngularJS项目构架。自顶向下的开始,就是不一样的开发。Angular体验式编程从此开始。 目录 AngularJS介绍 构建AngularJS项目(Yeoman,angular-seed)

JS实现浏览器点击下载图片

落爺英雄遲暮 提交于 2020-03-17 10:44:19
点击下载图片分两种: 1、一种是同源地址图片(也就是本地本项目中的图片); 2、另一种是不同源的图片;(不同域名下,比如阿里云 七牛云上的图片) 下面我们就具体说一下这两种图片下载的方式: 第一种(同源)下载: 利用a标签下载, a标签有一个download的属性,添加了该属性,a标签将直接下载文件,并根据download属性的值设置下载文件的文件名,不为download属性设置值则文件将以默认文件名下载: 如: <!-- 文件名为默认名称 --> <a href="./baidu_jgylogo3.gif" download /> <!-- 文件名为baidu.gif --> <a href="./baidu_jgylogo3.gif" download="baidu" /> <!-- 文件名为baidu.png --> <a href="./baidu_jgylogo3.gif" download="baidu.png" /> 注意,它仅支持同源链接下载,非同源链接还是会直接打开图片: 如非同源 <a href="http://www.baidu.com/img/baidu_jgylogo3.gif" download /> 第一种(不同源)下载: 直接上代码 var x=new XMLHttpRequest(); x.open("GET", "http://danml.com

js (this,call,apply)(

别来无恙 提交于 2020-03-17 04:31:57
转自 http://blog.sina.com.cn/s/blog_68cb8c790100ytl5.html 对于我这种初学者来说this指的到底是哪里,实在头疼,再有了前面关于变量和作用域的概念后,今天我觉定学习关于this的用法,把这个烦人的家伙解决掉! (一)关于this 首先关于this我想说一句话,这句话记住了this的用法你也就差不多都能明白了: this指的是当前函数的对象 。这句话可能比较绕,我会举出很多例子和这句话 呼应 的!(看下文) 1.首先看下面这段代码, 定义一个函数,弹下this, function doSomething(){ alert(this); } doSomething(); 我是在firefox里面调试的,所以返回的结果是[Object Window]。 那么这个 [Object Window], 到底是什么呢?看看下面的代码 function doSomething(){ alert(this===window); } doSomething(); 看到弹出了true, 也就是说在这种正常情况下,this其实就是window 所以,我们定义了一个全局的变量的时候,可以 var test="Tony"; 也可以 window["test"]="Tony"; 下面这个例子,进一步说明,正常情况下,函数里的this就是window var

js call apply

这一生的挚爱 提交于 2020-03-17 04:31:27
1、方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象。 说明: call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。 apply方法: 语法:apply([thisObj[,argArray]]) 定义:应用某一对象的一个方法,用另一个对象替换当前对象。 说明: 如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。 如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。 2、常用实例 a、 Java代码 function add(a,b) { alert(a+b); } function sub(a,b) { alert(a-b); } add.call(sub,3,1); 这个例子中的意思就是用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4); // 注意:js