简单javascript学习总结

2019-10-19　　//文章汇总于绿叶学习网

console.log()                              //控制台输出

目录

数据类型：.... 2

函数：.... 3

字符串.... 3

设置字符串字体属性.... 3

日期.... 4

数组.... 4

window对象.... 5

打开窗口.... 5

关闭窗口.... 5

定时器.... 5

对话框.... 6

文档对象.... 7

1.document对象属性... 7

... 7

2.document对象方法... 7

DOM对象.... 8

获取DOM中指定元素：.... 8

创建节点.... 8

插入节点.... 8

删除节点.... 8

复制节点.... 9

替换节点.... 9

innerHTML(含有标签)和innerText（仅文本）... 9

js操作css样式.... 9

js事件.... 10

script中调用事件.... 10

鼠标事件.... 10

表单事件.... 10

编辑事件.... 11

js页面相关事件.... 11

正则表达式：.... 11

数据类型：

基本数据类型：Number，String，Boolean

特殊数据类型：null型，undefined型，转义字符

定义数据： var str=”hello js”;

获取文本框的值：var value = document.getElementById(“idno”).value;

value = parseFloat(value);//将获取的字符串转换为浮点数

alert(“弹出对话框”);

onclick(“alert(“对话框”)”);                          //点击时弹出对话框

操作字符串中的字符:str.charAt(0);            //str中下标为0的字符

函数：

定义函数：function hello(){        document.write( “hello js” );       }

document.write(“输出内容是” +content)   //在网页显示

console.log()  //显示在网页的日志中

typeof(a)       判断数据类型

parseInt(a)     //将字符串形转换为整型

a.toString()     //将数值型数据转换为字符串

isNaN()          //判断是否是数值，返回true或者false

eval（string）//把字符串当js表达式去执行

字符串

字符名.length       //返回字符串长度

str.match(“world”) //在str中查找world，有则返回world，否则返回null

str.search(“world”)//在str中查找world的起始位置,没有则返回-1

str.indexOf(“world”)//

str.replace(原字符串，新字符串);             

str.charAt(0)          //获取字符串中的某一个字符

str.toLowerCase()  //将str全部转换为小写

str.toUpperCase()  //将str全部转换为大写

str3 = str.concat(str1,str2)    //不如直接 str3 = str1 +str2;

var arr =new arr()  ;arr = str.stlit(“ “)                  //以空格为分隔符，分割成字符串数组

设置字符串字体属性

str.big()          //大字体               str.small()       //小字体

str.bold()        //粗体                   str.strike()       //删除线显示

str.fontcolor(“Red”)                     //红色大字号

日期

1. var date = new Date();
2. var date = new Date(日期字符串);      "2019-10-1"  "Oct 1,2019" "2019/10/1"
3. 转换为字符串        (a). date.toString()         (b). date.toUTCString()

                                  (c). date.toLocaleString();      //获取日期时间用本地格式表示

4.  获取星期几            date.getUTCDay()    //用数组存储，返回设为周日，返回 6设为周六

数组

创建：var arr = new Array();

var arr = new Array(0,1,2,3,4);

var arr = new Array(4);

获取长度：arr.length

arr.slice(0,3)           //获取数组下标为0,1,2的值

arr.unshift(新元素1,新元素2,新元素3。。。)     //在arr数组开头添加元素，并返回该数组

arr.push(新元素1,新元素2,新元素3。。。)        //在数组末尾添加元素，防火新的长度

arr.shift()                                    //删除数组中第一个元素，并且返回第一个元素的值。

arr.pop()                                    //删除并返回数组中的最后一个元素

arr.toString()                              //将数组转换为字符串，以“ , ”连接

arr.join(“分隔符”)                        //将数组中的所有元素以“分隔符”连接成一个字符串

arr0.concat(arr1, arr2, arr3…)       //返回将多个数组连接的数组，不改变原来的数组

arr.sort()                                    //数组升序排列

       function des(a,b){return b-a ;}     arr.sort(des);  //降序数组排序

arr.reverse()                               //方向排序数组，改变原有数组

window对象

window对象就是用来操作“浏览器窗口”的一个对象。

打开窗口:

function openLvye(){

var newWindow = window.open("http://www.lvyestudy.com","lvye","top = 200, left = 200, width = 1000, height=1000, scollbars");     //打开新窗口，设置属性，名称，可滑动

}

<input type=”button” onclick=”openLvye()” value =”打开绿叶”>   //创建按钮

关闭窗口:

newWindow.close() close() this.close()

定时器：

window.onload = funtion(){   };

    1.var t= setTimeout(“函数” , 2000);     //一次性，2秒

2.var t= setInterval (“函数”, 2000);     //重复性,2秒

3.clearInterval(t)       //暂停定时器

 

setInerval的使用

<script type=text/javascript>

    var n = 5;

    window.onload = function(){

    window.setInerval(“countDown()” ,1000);                        

 

}

function countDown(){

    if(n>0){

        n--;

        document.getElementById(“num”).innerHTML = n;

}

}

</script>

 

<p>秒杀倒计时：<span id=”num”>5</span></p>

t = setInterval(“函数” ,1000) 配合 clearInterval(t)

document.getElementById(“id”).onclick = function(){}直接在window.onload中设置点击事件,    .innerHTML 为该id的值；

<script type="text/javascript">

        var n = 0;

        function countNum() {

                n++;

                document.getElementById("num").innerHTML = n;

            }

        window.onload = function () {

            var t = setInterval("countNum()", 1000);

 

            document.getElementById("btn_pause").onclick = function () {

                clearInterval(t);

            }

 

            document.getElementById("btn_continue").onclick = function () {

                if(confirm("继续浏览页面？"))

                    t = setInterval("countNum()", 1000);

            }

           

        }

    </script>

对话框

1.alert()                 //只有确定按钮,无返回值

2.confirm()            //确定和取消按钮,返回true或者false

3.prompt()            //具有提示文字，返回“字符串”；var name = prompt(“请输入你的名字”);

window.location.href = "http://www.lvyestudy.com";       //当前窗口地址跳转到绿叶学习网

文档对象

1.document对象属性

 

document.title(“明月复苏的博客”);

document.lastModified;              //返回最后修改的时间

document.URL                           //获取当前HTML文档地址或者设置文档的跳转地址。

document.fgColor = “white”；    //设置文本字体为白色

document.bgColor = “red”;        //设置背景为红色

document.LinkColor = “red”;      //未访问的超链接为红色

2.document对象方法

document.write()          //没有换行符                     

document.writeln()       /*相当于document.write(“ ”);

没有<pre><pre/>就相当于一个小空隙而已*/

实现真正换行：document.writeln(“<pre>hello”);  document.wirteln(“js</pre>”);

DOM对象

获取DOM中指定元素：

1. document.getElementById("元素id");
2. document.getElementsByName(“表单元素name值”);     //返回一个数组

创建节点

在JavaScript中，创建新节点都是先用document对象中的createElement()和createTextNode()这2种方法创建一个元素节点，然后再通过appendChild()、insertBefore()等方法把新元素节点插入现有的元素节点中去。

例如：1.var e = document.createElement(“h1”);

              var text = document.createTextNode(“绿叶学习网”);

              e.appendChild(text);                          //把元素内容插入元素中

         2. var e = document.createElement（“input”）;

             e.id = “submit”; e.type = “submit”; e.value=”提交”;

             document.body.appendChild(e);

插入节点

1. obj.appendChild(e)
2. list.insertBefore(e, list.firstChild)  

删除节点

1. obj.removeChild(oldChild);

例如：var e  =  document.getElementById(“id”);

        if(e.hasChildNodes){

e.removeChild(e.lastChild);         //删除e元素最后一个子节点

}

例如：

    var e = document.getElementById(“list”)；

    document.body.removeChild(e);      //删除body节点下的e节点

复制节点

1. obj.cloneNode(bool);

/*i. 1或true:表示复制节点本身复制该节点下的所有子节点

 ii. 0或false:不复制该节点的子节点*/

例如：var e = document.getElementById(“list”);

        document.body.appendChild(e.cloneNode(1));

替换节点

1. obj.replceChild(new ,old);

例如：var tag =  document.getElementById(“tag”).value;

          var txt = document.getElementById(“txt”).value;

          var p = document.getElementById(“lvye”);

          var e = document.createElement(tag);           //创建tag标签的节点 

          var t = document.createTextNode(txt);          //创建文本

          e.appendChild(t);                    //把文本放入标签

          document.body.replaceChild(e, lvye);           //将body标签下的id=lvye的标签换为e

innerHTML(含有标签)和innerText（仅文本）

js操作css样式

1. obj.style.属性名             //obj：document.getElementById(“id”)      DOM对象

var e = document.getElementById(“lvye”);

e.style.color = “red”;      e.style.border = “1px solid gray”;

js事件

script中调用事件

var e = document.getElementById(“btn”);         //获取button节点

e.onclick = function(){

       alert(“绿叶学习网”);

}

鼠标事件

移入移出

var e = document.getElementById(“lvye”);

 //移入事件

e.onmouseover = function(){            

       e.style.color = “red”;     e.style.borderColor = “red”;

}

//移出事件

e.onmouseout = function(){              

       e.style.color = “black”;         e.style.borderColor = “black”;

}

表单事件

1. onfocus
2. onblur
3. onchange              //下拉列表
4. onselect                 //选中文本框中的内容

编辑事件

1. oncopy
2. oncut
3. onpaste

js页面相关事件

1. window.onload()    在文档加载完毕再执行的事件。
2. onresize   页面大小
3. onerror    出错事件