• 网易云课堂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

    ----------天道酬勤----------------
  • 相关阅读:
    1.20
    1.18
    4.16python安装
    4.15Android学习
    4.14Android学习
    4.13Android学习
    4.12Android学习
    4.11Android学习
    4.10Android学习
    4.09Android学习
  • 原文地址:https://www.cnblogs.com/jiliunyongjin/p/6931329.html
Copyright © 2020-2023  润新知