• javascript的笔记精简版


    在写javascript的代码时一定要用单引号或者双引号括起来,不带引号的话就以字符串来处理

    在javascript里面不能以纯数字或者click命名函数或者变量

    要想修改标签的属性,在html里面怎么写,javascript里面就怎么写,但有一个例外,就是class,要写成className

    鼠标的响应事件:onmouseover、onmouseout

    在javascript 中获得标签的属性值有两种方法 点(.)/方括号(万能的)

    设置标签的背景图片:  background-image:url('jrwm.png');注意一定得是单引号,如果是双引号就不行了


    style加的样式是加在行间的

    标签的优先级:
       行间>id>class>标签


    js里面的匿名函数,就是直接写function(),不用取名字,方便,当然也可以取名字


    html在head中有时候标签没执行,就调用这个未知的标签就会报错,window.onload就可以解决这个问题,作用是等页面加载完成 之后调用。
    window.onload=function(){这里写函数的内容};


    返回的是一个数组,运用和c语言里面的数组一样
    document.getElementsByTagName('这里面写标签的类型,比如div');

    在js中input的checkbox要想选种就要这样写:xxx.checked=true/false;


    在javascript中,this的作用就相当于oc中的self,谁调用它就是谁

    通过html加入的自定义属性有些浏览器是不认的,只有在js中加入才有用的

    innerHTML:
       可以设置标签的值或读取标签的值,还可以写html代码


    ECMAScript : 翻译   核心 解释器
    DOM  document Object Model 文档对象模型
    BOM  Browser Object Model  浏览器对象模型
     
    alert(a==b)  先转换类型,然后再比较
    alert(a===b)  不转换类型,直接比,尽可能用三个等号,因为严谨


    css中的position重点:
    如果sub1不存在一个有着position属性的父对象,那么那就会以document(非body,当body有margin等属性时,sub1并不受影响,除非body的position不为static)为定位对象,这个比较容易理解。

    获取当前的样式,比如宽度

    在IE中可以这么写:xxx.currentStyle.width  

    在火狐中可以这么写:xxx.getComputedStyle(odiv,false).width);  第二个参数填什么都行,这里面填的是false,个人爱好

    数组的使用:

    定义:var a=[1,2,3]; 或  var a=new Array(1,2,3);

    数组添加新(单个)的元素:a.push(xxx)     相当于向数组的尾部添加一个xxx元素

    数组的删除(单个)元素  : a.pop()       相当于删除数组尾部的一个元素

    数组从头部开始删除一个元素: a.shift()  

    数组的头部添加一个元素:   a.unshift(xxx)

    a.splice的两种用法:

    数组同时删除多个元素: a.splice(2,3)   表示从2开始,删除3个元素

    插入/替换:  a.splice(2,3,"a","b")   表于从2开始,删除3个元素,再从2开始,添加a和b

    两个数组的合并:

    比如数组a与数组b, a.concat(b)    表示连接a、b数组

    数组的连接符: join  比如:数组a , a.join(‘-’)数组里面的元素用-连接起来了

    数组的排序: sort() 可以直接调用这个方法排序字符串,但是排序数字的时候有点小区别 比如:a.sort(function(n1,n2){return n1-n2;}  这样就可以准确排序数字了

    arguments 这是一个数组,是函数中保存函数所有的参数,有length属性。

    js中的两种定时器: 

    倒计定时器函数:setTimeout()   里面有两参数,一个是要执行的函数,后面的一个是时间,单位是毫秒

    循环定时器函数:setInterval()   里面有两参数,一个是要执行的函数,后面的一个是时间,时间是每隔多少调用的

    javascript事件的两具阶段:

    捕获与冒泡

    比如用记点击<a>标签,document的点击会首先发生,然后是<body>的处理函数等最后到<a>元素,这就是捕获阶段。

    冒泡: 比如鼠标的移入移出,只支持事件的冒泡,不支持捕获。

    行内元素和块级元素使用浮动后的变化

    有人说行内元素浮动后会变成块级元素,于是继续在网上搜索,又有人说不加display:block 就变不了块级元素,个人总结 下

    行内 元素设置成浮动之后变得更加像inline-block(行内块级元素,设置成这个属性的元素会同时拥有行内和块级的特性,最明显的不同是它的默认宽度不是100%),这时候给行内元素设置padding-top和padding-botton或者width、height都是有效果的

    给块级元素设置浮动的时候也是同样的情况,属性更加像是inline-block

    表单验证:

    onblur的使用:

    事件会在对象失去焦点时候发生,比如离开输入框

    onfocus  :对象在获得焦点的时候调用 

     

    writeIn与write的区别

    两者都javascript向客户端输出的方法,对比可知写法上的差别是一个in line的简写,换言之,writeIn方法是以行输出的,相当于在write输出抂加上一个换行符

    为什么有时再写window.onload时不没反应

    首先,不是没有反应,而是这个函数再调用时函数可以还没有(也就是说不存在)。这个函数是在加载整个文档(document)完成的时候系统自动调用的,我想大家应该知道了吧,我们再深入了解一个,比如要响应点击事件的话,不能放在window.onload事件里面,因为这个方法是相当于oc(ios中的loadView方法)当创建一个对象完成的时候就自动调用,点击事件的话还没发生,另一种可能就是作用域问题,写在window.onload中的函数是闭包在一个匿名函数中的,自然无法访问这个函数。

    在select中通过属性 .length可以获得option 的个数,也就是长度

    textarea的简单说明(文本域):

    创建如: <textarea rows="10" cols="3"></textarea>

    cols: 是列   全称是coumns  rows: 是行

    在用js设置背景图片位置时需要注意的地方:

    比如: a.style.backgroundPosition="-25px" + -50+"px";   这是错的(缺少空格

             a.style.backgroundPosition="-25px " + -50+"px";  这才是对的

        或者这样分开写:

            a.style.backgroundPositionX="-25px";
            a.style.backgroundPositionY=-((i-1)*25)+"px";

     定时器的循环调用的问题:

    在  setInterval(move,30);这个move是个函数,不要这样写setInterval(move(),30);这是错误的,如果非得这样写,可以这样、setInterval(function(){ 代码},30);

    DOM基础:

    什么是DOM?其实就是document

    查看子节点的个数: childNodes.length    不同的浏览器个数不同,有两种情况,一种是:空的结点数加上实际的结点数,第二种是不包括空的结点数,什么是空的结点,就是没有标签包围的区域,也就是说文本没有语义修饰。

    childNodes[i].nodeType==3时是文本节点(也就是空的结节点)、属性节点是2   如果等于1话那就是元素结点

    children这也是数组,和上面的相比,直接只算元素的个数,不包括空的结点

    parentNode:获取到父结点

    offsetParent:可以获取自身根据哪个父类来定位的

    创建DOM元素

    createElement(标签名)    创建一个节点

    appendChild(节点)        添加一个节点

    插入元素: insertBefore(节点,原有节点,在谁之前 )在已有元素前插入

    删除DOM元素:removeChild(节点)   删除一个节点

    // oDiv.style.filter='alpha(opacity:'+alpha+')';
    oDiv.style.opacity=alpha/100;

     

    开启定时器:返回值=setInterval(function(){ 
    oDiv.style.left=oDiv.offsetLeft+10+'px';},30);


    关闭定时器:clearInterval(返回值)

    opacity与filter:alpha(opacity=20)的区别:
    opacity属性主要是针对高处版本及主流浏览器,filter主要是针对ie低版本用的

    参数:filter :  要使用的滤镜效果。多个滤镜之间用空格隔开。

    说明:
    设置或检索对象所应用的滤镜效果。
    要使用该属性,对象必须具有height,width,position三个属性中的一个。
    滤镜的机制是可扩展的。可以开发和使用第三方滤镜。
    该属性在MAC平台上不可用。
    对应的脚本特性为filter。

    IE4.0以上版本,支持以下14种滤镜:

    滤镜名 说明

    Alpha 让HTML元件呈现出透明的渐进效果
    Blur 让HTML元件产生风吹模糊的效果
    Chroma 让图像中的某一颜色变成透明色
    DropShadow 让HTML元件有一个下落式的阴影
    FlipH 让HTML元件水平翻转
    FlipV 让HTML元件垂直翻转
    Glow 在元件的周围产生光晕而模糊的效果
    Gray 把一个彩色的图片变成黑白色
    Invert 产生图片的照片底片的效果
    Light 在HTML元件上放置一个光影
    Mask 利用另一个HTML元件在另一个元件上产生图像的遮罩
    Shadow 产生一个比较立体的阴影
    Wave 让HTML元件产生水平或是垂直方向上的波浪变形
    XRay 产生HTML元件的轮廓,就像是照X光一样

    Alpha 滤镜参数详解

    参数名 说明 取值说明
    Opacity 不透明的程度,百分比。 从0到100,0表是完全透明,100表示完全不透明。
    FinishOpacity 这是一个同Opacity一起使用的选择性的参数,当同时Opacity和FinishOpacity时,可以制作出透明渐进的效果,比较酷。 从0到100,0表是完全透明,100表示完全不透明。
    Style 当同时设定了Opacity和finishOpacity产生透明渐进时,它主要是用赤指定渐进的显示形状。 0:没有渐进;1:直线渐进;2:圆形渐进;3:矩形辐射。
    StartX 渐进开始的 X 坐标值
    StartY 渐进开始的 Y 坐标值
    FinishX 渐进结束的 X 坐标值
    FinishY 渐进结束的 Y 坐标值

  • 相关阅读:
    风火轮 –动画效果:擦除、形状、轮子、随机线条、翻转远近、缩放、旋转、弹跳效果
    风火轮 –动画效果:浮入与劈裂
    风火轮 – 飞入动画效果
    风火轮 1
    CB XE6初体验
    在CB2010中调用ffmpeg(5)
    在CB2010中调用ffmpeg(4)
    在CB2010中调用ffmpeg(3)
    在CB2010中调用ffmpeg(2)
    0-99累加
  • 原文地址:https://www.cnblogs.com/qq1871707128/p/5998892.html
Copyright © 2020-2023  润新知