zoukankan      html  css  js  c++  java
  • 网易云课堂js学习笔记

    javascript:用来在页面中编写特效的,和html/css一样都是由浏览器解析的

    javascript语言:
    一、js如何运行的(javaScript,jscript,vbscript,applet)

    二、输出
    alert(什么类型都可以)
    document.write(字符串)

    三、如何在html中使用js
    1.使用<script></script>将js语法嵌入到html中,可以使用多个,每一个之间都是有关联的
    2.href="javascript:js代码"
    3.事件中
    4.写到外部文件中(.js)<script src="文件位置"></script>

    js语法:
    命名规范
    1.一定要有意义
    2.不能以数字开头,不能是系统的关键字
    大小写:javaScript严格区分大小写
    变量名和函数:驼峰式命名
    对象:每个单词首字母都要大写 Date(); new Object();
    分号
    功能执行语句加分号 var name="lisi";

    结构定义语句后面不加分号 if function(){}
    注释:
    // 单行
    /* */ 多行
    四、变量
    var a=10; 跟别的语言不一样,js只要浏览器没有关闭,变量一直在浏览器内存中。
    注意:javaScript是弱类型语言,(和PHP一样)

    var a=10; 声明
    int a=10; 赋值


    五、数据类型

    typeof(变量)
    1.number(int float double) 注意:计算时还是按整型和浮点型分开使用
    2.string (string char)-----------所有的浮点数都是近似数,10个0.1相加等于0.9999999999....
    3.boolean
    4.object(object,array,null)注意:分别处理
    5.undefiend 没有声明变量

    字符串声明,"" '' 双引号和单引号都是一样的。所有转义都可以使用

    +连接两个字符串

    六、运算符和表达式

    算数运算符号
    赋值运算符号
    条件运算符号
    逻辑运算符号
    位运算符号
    其他运算符号
    七、流程控制
    一个整型,一个字符类型,用switch,其他类型就用别的好了。

    八、函数
    定义:是一段完成"指定功能"的已经"命名"的代码段。
    1.函数名
    2.参数 --根据需要使用参数
    3.函数体(功能)
    4.返回值(可选)

    函数遇到return 就终止了。
    看函数的类型: alert(typeof(函数名()))这样是错误的-----加了括号是调用函数,这里应该去掉括号
    函数的类型是function
    函数可以赋给一个变量, var test=function(){
    alert("################");
    }
    函数不加(),代表这整个函数。
    回调函数:变量解决不了的问题,传一个函数进去
    例:function talble(start,end,check){
    for(var i=start;i<end;i++){

    if(check(i)){
    document.write(i+"<br/>");
    }
    }
    }
    //1.从这个函数中(10,500)取出3的倍数
    //2.从这个函数中(-200,200)取出负数

    table(10,500,function(num){
    if(num%3==0){
    return true;
    else
    return false;
    }
    })
    函数只有调用才能使用到,

    应用:
    全局:在函数外面声明的变量
    局部:在函数内部声明的变量
    var test=10;
    function demo(){test+=20} demo();demo(); alert(test);-----50


    九、对象
    十、内置js对象
    十一、数组

    DOM和BOM

    DOM-----文档对象模型

    document(HTML或XML)
    object对象(html元素转成的js对象)

    1.转成对象的方式
    a.标记名(多个) ---id(唯一) ,,name(多个)
    doucument.getElementsByTagName("div")-----document.getElementyById()-----document.getElementsByName()

    2.操作属性

    var shopping = document.getElementById("purchases");
    shopping.setAttribute("title","a list of goods");

    3.操作内容
    innerText----火狐里不兼容,ie能用,火狐的话用textContent
    innerHTML(设置或取出内容,带上了HTML标签)


    4.操作样式
    对象.style.backgroundColor=""
    对象.style.fontSize=""

    对象.className=""---------批量操作

    获取某个区域内的元素----document.getElementById().getElementsByTagName()

    事件处理:

    一、事件源:任何一个html元素(节点)body,div,button,p,a ,h1........

    二、事件:你的操作
    鼠标:
    click 单击
    dbclick 双击
    contextmenu(在body)文本菜单

    mouseover 放上
    mouseout 离开
    mousedown 按下
    mouseup 抬起
    mousemove 移动
    键盘:
    keypress
    keyup
    keydown
    文档:
    load: 加载(页面全部加载完后再执行)
    unload: 关闭
    beforeunload:关闭之前

    表单:
    focus:焦点
    blur 失去焦点
    submit:提交
    change: 改变
    其他:
    scroll:滚动事件
    selected:事件

    三、事件处理程序

    有3种方法加事件

    第一种:
    格式:on事件---比如onclick onMouseover

    <button onclick='getElementById("demo").innerHTML=Date()'>现在的时间是??</button>


    第二种:
    对象.on事件=处理程序
    对象.onclick=function(){}

    第三种:
    <script for="事件源" event="事件">事件处理程序</script>


    屏蔽右键按钮
    <body oncontextmenu="return false"></body>

    在外部引用的js里写 onload=function(){} ----------这样可以在页面全部加载完之后再执行相关操作了。。


    事件对象:event 它的属性:srcElement 事件源对象
    keyCode 事件发生时的键盘码
    clientX 白色区域的x轴距离
    clientY
    screenX 屏幕的x轴
    screenY
    returnVlaue
    cancleBubble 取消某个方法

    event 这个事件对象在火狐里面不兼容,要想兼容,写:var ev=e || window.event;


    <div onkeypress="show()">
    <script>
    function show(){
    alert(event.keyCode);
    }
    </script>

    </div>

    定时器:setInterval(function(){},1000)

    关闭定时器的操作:clearInterval();

    setTimeout()

       从载入后延迟指定的时间去执行一个表达式或者是函数;
           仅执行一次 ;和window.clearTimeout一起使用.

    setInterval()

       在执行时,它从载入页面后每隔指定的时间执行 一个表达式或者是函数;(功能类似于递归函数);和window.clearInterval一起使用.

           鼠标移动上去图片能够移动:


    <div id="one" style="position:absolute;left:100px;top:100px;200px;height:30px;background:red;"></div>

    <script>

    var one=document.getElementById("one");

    var down=false;
    var dx=0;
    var dy=0;
    document.onmousemove=function(e){
    var ev=e || window.event;
    if(down){
    one.style.top=ev.clientY-(dy-sy);
    one.style.left=ev.clientX-(dx-sx);
    }


    }

    one.onmousedown=function(){

    var ev=e || window.event;
    dx=ev.clientX;
    dy=ev.clientY;
    sx=parseInt(one.style.left);
    sy=parseInt(one.style.top);
    if(!down)
    down=true;

    }
    document.onmouseup=fuction(){
    if(down)
    down=false;
    }

    </script>


    window对象:当前浏览器窗体--------所有对象都是窗体对象的子对象,,包括document,event,frames,location

    它的属性:status
    opener
    closed

    方法:alert()
    confirm()----确认框 onclick="return confirm("您确定要取消吗?")"
    setInterval()-----只要页面上动的东西,都要用到这个
    clearInterval()

    setTimeout()-----只执行一次
    clearTimeout()
    open()


    做一个页面上滚来滚去的图片

    <html >
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Document</title>
     </head>
     <body>
    
     <div id="one" style="background:red;position:absolute;left:0;top:0;100px;height:100px;">我是广告</div>
    
    
    
    <script>
    
       var x=0;
       var y=0;
    
       var xs=10;
       var ys=10;
    
      var one=document.getElementById("one");
      
      function move(){
       
                 x+=xs;
                 y+=ys;
               if(x>=document.body.clientWidth-one.offsetWidth-20 || x<=0){
                     xs=-1*xs;
              }
              if(y>=document.body.clientHeight-one.offsetHeight-20 || y<=0){
                      ys=-1*ys;       
              }
              
              one.style.left=x;
              one.style.top=y;
               
    
          }
        
    
       var dt=setInterval("move()",200);
       one.onmouseover=function(){
    
                     clearInterval(dt);
        }
       one.onmouseout=function(){
                   dt=setInterval("move()",100);
        }
    
    </script>
      
     </body>
    </html>

    window.open("url","窗口名称","窗口的相关参数");

    用连接打开的窗口么有父子关系,用window.open方法打开的窗口存在父子关系。

    找到父窗口:opener

    做跑马灯效果
    var num=0;
    var dir=1;
    var space="";
    setInteval(function(){

    if(num>40||num<0){
    dir=-1*dir;
    }
    num+=dir;
    var space="";
    for(var i=0;i<num;i++){
    space+="";
    }
    window.status=space+"www.brbphp.com";},100)


    做frameset的时候也存在父子关系

    window.parent.parent最外层的那个窗口

    window.parent.parent.frames[0] 获得了分层结构的子窗口,数组形式,从上到下,从左到右数

    window.parent.parent.frames['main'] 也可以通过name来查找

    window对象中的常用对象属性:

    它的子对象:document--
    location---跳转位置
    html的跳转--<meta http-equiv="refresh" content="3;url=http://www.baidu.com">--3秒钟后刷新这个页面
    js的跳转:window.navigate(url)
    location.href='url'
    location='url';也可以跳转
    location.replace=('url')---前面的都是重定向,这个是替换,后退不回去
    location.reload();-----刷新,可放在定时器里定时刷新。
    要记住的:
    location='url',,,,,,,location.reload();
    history----历史对象
    javascript:history.back()
    javascript:history.go(-1)--返回上一步,,-2就是返回上两步
    screen---屏幕对象

    screen.width
    表单对象


    document.forms.username;
    document.表单名称.username----取表单的内容

    表单的属性:
    action
    method
    title---不常用
    enctype

    表单的方法:

    submit();

    事件:
    onfocus();焦点事件
    onblur();失去焦点
    onchange();内容改变触发

    登陆界面光标为表单第一个输入框:
    onload="document.getElementById("表单的id").username.focus()"----用户操作更方便


    onsubmit---表单提交之前触发,成功了就提交过去了,失败了就提交不过去

    <form name="" action="" onsubmit="return check()" method="">

    document.form(表单名称).username.value=='' -----取表单内容


    onscroll=""-----滚动事件

    -----------页面上有一个图片随着滚动条移动位置不变---------------------

    <style>

    #tu{

    position:fixed;-----相对于html的位置,可以防止在拉动滚动条时 出现图片闪烁
    top:100px;
    left:100px;

    }
    </style>

    <body>
    <testarea cols="100" rows="100"></textarea>

    <img src="" id="tu">
    </body>

    注意:文件头加上dtd文件头



     

    jquery

    ----------天道酬勤----------------
  • 相关阅读:
    171. Excel Sheet Column Number (Easy)
    349. Intersection of Two Arrays (Easy)
    453. Minimum Moves to Equal Array Elements (Easy)
    657. Judge Route Circle (Easy)
    CSS笔记
    保存页面状态
    UI开发总结
    ubuntu 下配置munin
    反向代理配置
    JavaScript 高级程序设计第二版
  • 原文地址:https://www.cnblogs.com/jiliunyongjin/p/6931329.html
Copyright © 2011-2022 走看看