您的位置：编程知识库>Javascript>javascript小记

javascript小记

作者：编程知识库 发布：2011-07-14 分类：Javascript 阅读：1,191次

js自定义方法–addClass

function addclass(elm,newclass){
　　var classes = elm.className.split(' ');
　　classes.push(newclass);
　　elm.className = classes.join(' ');
}
 
split() 方法用于把一个字符串分割成字符串数组。
join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。可指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。提示：要想数组的开头添加一个或多个元素，请使用 unshift() 方法。

 

 

a.x = a = { }, 深入理解赋值表达式
var o = {x : 1};
var a = o;
 
a.x = a = {name:100};
 
console.log(a.x);    // undefined
console.log(o.x);    // {name:100}
 
// a.x = a = {name:100};
// 等价于 a.x = (a = {name:100});
// 首先计算a.x的引用，然后计算(a = {name:100})的返回值
 
if 语句的简写
var condition = true, numb = 0;
if(condition) {
    alert('rain-man')
}
if(condition) {
    numb = 1 + 2;
}
等同于
var condition = true, numb = 0;
condition && alert('rain-man');
condition && (numb = 1 + 2);
 
&& 和 || 的计算取值
(true && 222);    // 222
!!(true && 222);    // true
(false && 222 );    // false
(false || 222);     // 222
!!(false || 222);   // true
!!variable 会返回和原值相等的boolean值
 
Object的构造
function Object() { [native code] }
Object.prototype = {
constructor: function Object() { [native code] },
hasOwnProperty: function hasOwnProperty() { [native code] },
isPrototypeOf: function isPrototypeOf() { [native code] },
propertyIsEnumerable: function propertyIsEnumerable() { [native code] },
toLocaleString: function toLocaleString() { [native code] },
toString: function toString() { [native code] },
valueOf: function valueOf() { [native code] }
};
 
Object.prototype.constructor === Object;    // true
 
prototype中的一些细节
var A = function(){
    this.name = 'rain-man';
};
A.prototype = {
    name : 'cnblogs'
};
var o = new A();
console.log(o.name);    // 'rain-man'
var B = function(){};
B.prototype = {
    name : 'obj-B'
};
 
var o = new B();
o.name = 'obj-c';
delete o.name;
console.log(o.name);    //'obj-B'，暴漏原型链
 
创建对象，并保持原型链
var O = function(obj) {
    function T() {}
    T.prototype = obj;
    return new T();
};
 
var obj = {name: 'obj', age: 0 }, 
    obj1 = O(obj), 
    obj2 = O(obj1);
 
// 更改原型链的一处，所有原型链都会更改
obj.name = 'superclass';    
console.log(obj1.name);    // 'superclass'
console.log(obj2.name);    // 'superclass'
 
// 每一层可单独处理
obj1.name = 100;
console.log(obj1.name);    //100
delete obj1.name;    //暴漏原型链
console.log(obj1.name);    // 'superclass'
 
处理兼容性，获得事件对象
if(window.event) oEvent = window.event;  或者 oSrc = oEvent.srcElement?oEvent.srcElement:oEvent.target;
 

图片等比例缩放

function newDrawImage(ImgD){

 var image=new Image();
 var iwidth = 300;  //定义允许图片宽度
 var iheight = 300;  //定义允许图片高度
 image.src=ImgD.src; 
if(image.width>0 && image.height>0){
 if(image.width>=image.height){
  if(image.width>iwidth){  
  ImgD.width=iwidth;
  ImgD.height=image.height*(iwidth/image.width);
  }else{
  ImgD.width=image.width;  
  ImgD.height=image.height;
  }
  }
 else{
  if(image.height>iheight){  
  ImgD.height=iheight;
  ImgD.width=image.width*(iheight/image.height);  
  }else{
  ImgD.width=image.width;  
  ImgD.height=image.height;
  }
  }
}
} 
img onload=""newDrawImage(this)"" src=""http://pic8.nipic.com/20100809/1660047_025137350646_2.jpg""
JS弹出窗口
function read(url){
var D=250
var F=540
if(window.screen.height){
H=(window.screen.height-D)/2
}
if(window.screen.width){
B=(window.screen.width-F)/2
}
var newswin=window.open
 
(url,"newswin","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,re
 
sizable=no,top="+H+",left="+B+",width="+F+",height="+D+"");
newswin.focus();
}
a href=""http://www.baidu.com"" onclick=""read(this.href);return"
 
js 弹出窗口居中
/*弹出窗口居中*/
function openwindow(url,name,iWidth,iHeight)
{
    var url;                             //转向网页的地址;
    var name;                            //网页名称，可为空;
    var iWidth;                          //弹出窗口的宽度;
    var iHeight;                         //弹出窗口的高度;
    //获得窗口的垂直位置
    var iTop = (window.screen.availHeight-30-iHeight)/2;       
    //获得窗口的水平位置
    var iLeft = (window.screen.availWidth-10-iWidth)/2;          
    window.open(url,name,'height='+iHeight+',,innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no');
}
a href=""javascript:void(0)"" onclick=""openwindow('http://www.baidu.com','baidu',400,400)""

 

转载请注明：javascript小记 - 编程知识库

该文章由编程知识库发于2011年07月14日发表在Javascript分类下，你可以至底部留下评论。

原创文章转载请注明: javascript小记 | 编程知识库

关键字: ,

上一篇：

下一篇：

您可能还会对这些文章感兴趣

  • 2017-10-30 0次W3C是什么意思 W3C标准简介

    什么是W3C      W3C是英文 World Wide Web Consortium 的缩写,中文意思是W3C理事会或万维网联盟。W3C组织是对网络标准制定的一个非赢利组织,像HTML、XHTML、CSS、XML的标准就是由W3C来定制。       W3...

  • 2017-10-30 0次css font 属性的快捷写法

    font:italic small-caps bold 12px/1.5em arial,verdana; 等效于: font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:arial,verdana; 顺序:font-style | font-variant | font-weig...

  • 2017-10-30 0次如何使用html5与css3完成google涂鸦动画

    今天我们将介绍,如何使用css3完成google涂鸦动画。当你点击demo页面的【开始】按钮之后,页面中的骑手和马匹将会运动起来,http://demo.jb51.net/js/2012/googlecss3/ 这里需要强调的一点是,ie不支持css3的动画属性,再次抱怨下万恶的ie。但是我们不能以此...

  • 2017-10-30 0次DIV 边距属性在Chrome和IE中的区别深入理解

    突然间,在Chrome下看起来很整齐的布局,在IE下变成一团糟。为了找出原因,我改动了div的background-color属性。最后,发现同一个DIV的宽度在IE和Chrome下却不一样。这大晚上的,真是怪吓人滴! 之后,做了个测试。当: 复制代码代码如下: div1 { width:960px; m...

  • 2017-10-30 0次修复iPhone的safari浏览器上submit按钮圆角bug

    自从完成上次iPhone的几个页面效果后,一直在没有制作iPhone的页面效果了,今天在公司写了一个登录页面效果,让我碰到一个怪异的问题——“表单中的input[type="submit"]和input[type="reset"]按钮在iPhone的safari浏览器下圆角有一个bug”。下面我来简...

  • 2017-10-30 0次display:inline-block的原理分析

    在使用 CSS 实现表现的时候,会经常接触到 display:inline-block 这一属性,无论是初接触 Web 标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊。 复制代码代码如下: display:inline-block 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的...

  • 2017-10-30 0次分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)

    CSS 是我们使用的功能强大和最常用 web 语言。他可以兼容新旧不同的浏览器,打造出很多不同的特效,它已经成为Web开发最流行的语言之一,使用css3 打造出来的效果总是那么的绚丽,有一些特殊的属性以前使用需要javascript实现的特效,今天使用css3就可以完成,因此他大大简...

  • 2017-10-30 0次怎样对齐文本框和图像(image)按钮实现三点一线

    一个文本框旁边一个按钮是很经常用到的网页内容,比如搜索框等等,而如果旁边的按钮使用图像的话,他们竖直方向就很不容易对齐,即使使用 vertical-align、padding和margin等都不行(特别是在IE中,Firefox中使用vertical-align还可以)。 例如有如下代码: 复制代码代码如下...

大家正在看

推荐阅读

全部分类

AndroidCss HtmlCss3 Html5IosJavascriptJqueryLinuxMysqlPhpWordpress互联网体验其它前端技术移动经验设计资源资讯运营推广

阅读排行榜

www.wufangbo.com 编程知识库 编程开发 互联网 设计 it编程

编程知识库是国内专业的网站建设资源、IT编程技术学习类网站，提供php、javascript、jquery、web网页制作、网络编程、网站建设等it编程资料。

本次页面加载共7条查询，耗时0.131秒，消耗17.53MB内存，有待优化哦！