JavaScript简单笔记

发表于 分类于 ， ， 阅读次数： Waline： 本文字数： 11k 阅读时长 ≈ 10 分钟
JavaScript 皮毛学习

系列链接

HTML简单笔记

CSS简单笔记

JavaScript简单笔记

jQuery简单笔记

拓展简单笔记

JavaScript 皮毛学习

什么是JavaScript.PNG

BOM浏览器对象模型.PNG

DOM文档对象模型.PNG

一 基本结构

1
2
3
4
<script type="text/javascrip">
语句;如:
alert("hello");写完整: window.alert("hello"); BOM里面的window的方法
</script>

写到js文件里

1
<script type="text/javascript" src=""></script> language="javascript"省略了

另一种写法

1
2
<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('你来啦');"/>
双引号里用单引号

二 例子

1
2
3
4
5
6
<script type="text/javascript">
    document.write("123");
    for(var i=0;i<5;i++){
    document.write("233");
    }
</script>

三 语法

1. `js`弱类型语法: 声明都用`var` 类型由赋值决定
 - `var i=1;` `i=1.1;` `i="aaa";` `i=new Date();` `var j=233;` `var i,j,k=10;` `l=233;`
 - `alert(typeof(i));`可看类型 (提示框)
   - `typeof `运算符返回值如下：
     - `undefined`：变量被声明后，但未被赋值
     - `string`：用单引号或双引号来声明的字符串
     - `boolean`: `true`或`false`
     - `number`：整数或浮点数
     - `object`: `javascript`中的对象、数组和`null`
 - 输入框: `prompt("提示信息","提示信息");`

四 函数

  1. parseInt() : 字符串转整数 parseDouble() : 转小数 isNaN : is not a number(不是数返回真,数返回假)

  2. 自定义函数

    • 无参

      function 方法名(){

      }

    • 带参

      function 方法名(变量名1,变量名2){

      }

  3. 匿名写法

    • 事件名=function(){代码;}
    • (function (){代码;}())

  4. 直接运行

    • window.onload=function(){代码}
    • <body onload="事件名()"> (事件 我理解 on 开头 onload onmouseover onclick onchange)

五 window对象

  1. 名称 说明
    screen 有关客户端的屏幕和显示性能的消息
    location 有关当前URL的信息

    例子:

    1
    alert(screen.width+","+screen.height);
    1
    window.location.href="https://github.com/pengxiandyou";
    1
    <a onclick="javascript:window.location.href='https://github.com/pengxiandyou'">我的主页</a> //javascript:不写也对

  2. window常用方法 : alert() prompt() confirm()确认框

    定时器 setTimeout() setInterval()

    例子 :

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    //不要运行,运行下面的
    function  test(){
    	 var item=document.getElementById("mytxt");
    	 item.value="2";//.value就是取值
     	document.getElementById("mydiv").innerHTML="<h1>我爱你</h1>";// 可以放标签 innerText只能放文本
     	var num=parseInt(item.value)+1;
     		item.value=num;
     setTimeout("test",1000);//感觉像递归
    }
    window.onload=function(){
    	 setTimeout("test",1000);//指定多久以后制行一次 只执行一次	
    }
     
    -----------------------------------------------
    <input type="text" id="mytxt"/>
    <div id="mydiv"> aaa </div>
    <input type="button" value="0" onclick="test()"/>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function  test(){
    	var item=document.getElementById("mytxt");
    	var num=parseInt(item.value)+1;
    	item.value=num;
    	setTimeout("test()",1000);
    }
    window.onload=function(){
    	setTimeout("test()",1000);
    }
    -----------------------------------
     <input type="text" id="mytxt" value="0"/>
    <input type="button" value="0" />
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var tm;
    function start(){
    var item=document.getElementById("mytxt");
    var num=parseInt(item.value)+1;
    item.value=num;
    tm=setTimeout("start()",1000);
    }
    function stop(){
    clearTimeout(tm);
    }
    -----------------------------------------------
    <input type="text" id="mytxt" value="0"/>
    <input type="button" value="开始" onclick="start()"/>//开始点得越多动得越快结束也要点多次
    <input type="button" value="结束" onclick="stop()"/>//虽然看起来tm只有一个
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var tm;
    function start(){
    var item=document.getElementById("mytxt");
    var num=parseInt(item.value)+1;
    item.value=num;
    document.getElementById("begin").disabled=true;
    tm=setTimeout("start()",1000);
    }
    function stop(){
    document.getElementById("begin").disabled=false;
    clearTimeout(tm);
    }
    -----------------------------------------------
    <input type="text" id="mytxt" value="0"/>
    <input type="button" value="开始" onclick="start()" id="begin"/>
    <input type="button" value="结束" onclick="stop()"/>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function  test(){
    	var item=document.getElementById("mytxt");
    	var num=parseInt(item.value)+1;
    	item.value=num;
    	
    }
    window.onload=function(){
    	setInterval("test()",1000);
    }
    -----------------------------------
     <input type="text" id="mytxt"value="0"/>
    <input type="button" value="0" />
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var tm;
    function  test(){
    	var item=document.getElementById("mytxt");
    	var num=parseInt(item.value)+1;
    	item.value=num;
    	
    }
    function begin(){
    	tm=setInterval("test()",1000);
    }
    function stop(){
    	clearInterval(tm);
    }
    -----------------------------------
    <input type="text" id="mytxt"/>
    <input type="button" value="开始" onclick="begin()" id="begin"/>//多点几次也动得快,但结束只能结束一个
    <input type="button" value="结束" onclick="stop()"/>

BOM编程

使用display样式属性控制元素的隐藏和显示 自带属性可以直接点 css样式要点style再点

  1. Document对象常用方法
方法 描述
getElementByID() 返回对拥有指定id的第一个对象的引用
getElementsByName() 返回带有指定名称的对象的集合
getElementsByTagName() 返回带有指定标签名的对象的集合
write() 向文档写文本、HTML表达式或JavaScript代码

visibility属性的值

值 描述
visible 表示元素可见
hidden 表示元素不可见

语法 : object.style.visibility="值" 一般不用,隐藏会留空,用display

  1. 查看/修改属性节点

    • getAttribute(“属性名”)

    • setAttribute(“属性名”.“属性值”)

    • 例子 :

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      window.onload=function(){
      	document.getelementById("bt").onclick=function(){
      		var item=document.getelementById("link");
      		alert(item.getAttribute("href"));	
      		alert(item.href);
      		item.setAttribute("href","http://pengxiandyou.gitee.io");
      		item.href="htttp://www.baidu.com";
      	};
      }
      --------------------------------------------------------
      <a href="http://www.baidu.com" id="link">百度</a>
      <input type="button" id="bt" value="点击"/>

  2. 创建和增加节点

    • createElement() : 创建节点

    • appendChild() : 末尾追加方式插入节点

    • nsetBefore() : 在指定节点前插入新节点

    • 例子 :

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
       window.onload=function(){
              	document.getElementById("bt").onclick=function(){
             		 var myimg=document.createElement("img");
         myimg.setAttribute("src","https://i.loli.net/2019/08/07/YLJRbAhD7tS9Tk3.gif");
              //document.body.appendChild(myimg);
              document.body.insertBefore(myimg,document.getElementById("mydiv"));
      	};
      };
      -----------------------------------
        <div id="mydiv">aaaaaa</div>
      <input type="button" id="bt" value="点击"/>

  3. 删除和替换节点

    • removeChild() : 删除节点

    • replaceChild() : 删除节点

    • 例子 :

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
       window.onload=function(){
              	document.getElementById("bt").onclick=function(){
             		 var myimg=document.createElement("img");
         myimg.setAttribute("src","https://i.loli.net/2019/08/07/YLJRbAhD7tS9Tk3.gif");
              //document.body.appendChild(myimg);
              document.body.insertBefore(myimg,document.getElementById("mydiv"));
      	};
      };
      -----------------------------------
        <div id="mydiv">aaaaaa</div>
      <input type="button" id="bt" value="点击"/>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
        	document.getElementById("bt").onclick=function(){
          		var myimg=document.createElement("img");    		myimg.setAttribute("src","https://i.loli.net/2019/08/07/YLJRbAhD7tS9Tk3.gif");
         		 	//document.body.appendChild(myimg);
         		 	document.body.insertBefore(myimg,document.getElementById("mydiv"));
      	};
      	document.getElementById("bt1").onclick=function(){
          		var myimg=document.getElementsByTagName("img");
          		for(i=myimg.length;i>0;){   //注意 其他写法有可能在多张图片下要点多次删除 或者 数组越界
          		i--	;		
          			document.body.removeChild(myimg[i]);
          		}
          		
      	};
      };
      ------------------------------------------
        <div id="mydiv">aaaaaa</div>
      <input type="button" id="bt" value="点击"/>
      <input type="button" id="bt1" value="删除"/>

  4. 样式操作

    例子 :

    1
    2
    3
    4
    5
    6
    7
    8
    p{
    font-size:25px;
    background-color:pink;
    }
    -------------
    驼峰命名
    .style.fontSize
    .style.backgroundColor

    • 改变样式属性

      • style属性 一次改一个

      • className属性 可以指定样式表的名字

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        ul li{
            float: left;
            list-style: none;
            padding: 10px;
            background: url("https://i.loli.net/2019/08/07/3OwH5qKcXdsRzGC.jpg");
            width: 1100px;
            height: 600px;
        }
        ---------------------
          <ul>
          	<li onmouseover="this.style.backgroundImage='url(https://i.loli.net/2019/08/07/YLJRbAhD7tS9Tk3.gif)'"
          	onmouseout="this.style.backgroundImage='url(https://i.loli.net/2019/08/07/3OwH5qKcXdsRzGC.jpg)'"
          	>1233222222222222222222222222</li>
         
          </ul>
        1
        2
        3
        两类样式
        -------------------------
        this.className="类名";

  5. 表单验证

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
         	function validate(){
          		var name=document.getElementById("name").value;
          		if (name=="") {
          			document.getElementById("nameerror").innerHTML="用户名不能为空";
          			return false;
          		}
          		if (name.length<3 ||name.length>6) {
          			document.getElementById("nameerror").innerHTML="长度3到6之间";
          			return false;
          		}
          		
          		var password = document.getElementById("password").value;
          		if (password=="") {
          			document.getElementById("passworderror").innerHTML="密码不能为空";
          			return false;
          		}
          		if (password.length<8 ||password.length>16) {
          			document.getElementById("passworderror").innerHTML="长度8到16之间";
          			return false;
          		} 
      
          		 var cfpassword = document.getElementById("cfpassword").value;  		    
          		 if (cfpassword=="") {
          			document.getElementById("cfpassworderror").innerHTML="请确认密码";
          			return false;
          		}
          		
         			if (cfpassword!=password) {
          			document.getElementById("cfpassworderror").innerHTML="密码不相同";
          			return false;
          		}     
      
          		var email = document.getElementById("email").value;  
          		 if (!(/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(email)) )
          		 {
          			document.getElementById("cfemail").innerHTML="请输入正确邮箱";
          			return false;
          		} 		   		
          		return true;
          	}
          	    window.onload=function(){
              	document.getElementById("bt").onclick=function(){
              		if (validate()) {
              			document.getElementById("myform").submit();
              		}}};
       ------------------------------
       <form action="#" method="get" onsubmit="return validate()"><!--返回真假  必须要return-->
      	用户名 : <input type="text" name="name" id="name"/><span id="nameerror"></span><br/>
      	密 码 : <input type="password" name="password" id="password"/><span id="passworderror"></span><br/>
    确 认 : <input type="cfpassword" name="cfpassword" id="cfpassword"/><span id="cfpassworderror"></span><br/>
      	邮 箱 : <input type="text" name="email" id="email"> <span id="cfemail"></span>	<br/>
      	<input type="submit" value="注册">
      </form>