简单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的使用
<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(“\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 出错事件
