简单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”) //红色大字号

日期

var date = new Date();
var date = new Date(日期字符串); "2019-10-1" "Oct 1,2019" "2019/10/1"
转换为字符串 (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的使用

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的值；

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(“\n”);

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

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

DOM对象

获取DOM中指定元素：

document.getElementById("元素id");
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);

插入节点

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

删除节点

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节点

复制节点

obj.cloneNode(bool);

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

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

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

document.body.appendChild(e.cloneNode(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样式

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”;

}

表单事件

onfocus
onblur
onchange //下拉列表
onselect //选中文本框中的内容

编辑事件

oncopy
oncut
onpaste

js页面相关事件

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