简单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 出错事件
简单javascript学习总结的更多相关文章
- Javascript学习-简单测试环境
Javascript学习-简单测试环境 在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很 ...
- JavaScript学习(一) —— 环境搭建与JavaScript初探
1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
- javascript学习笔记(2)————this
//简单的学习JavaScript中this关键词 //this在于我简单的理解就是谁调用了当前方法(函数),this就指向谁 var a = 20; function fn1(){ this.a = ...
- JavaScript学习(2):对象、集合以及错误处理
在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...
- 3、Javascript学习 - IT软件人员学习系列文章
接下来,我们开始进入Javascript语言的学习. Javascript语言是一种解释性的语言,不同于ASP.NET.C#语言的这种编译性的语言.它随着HTML网页的发布而发布,就是说嵌入到HTML ...
- HTMl5/CSS3/Javascript 学习推荐资源
HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...
- JavaScript学习总结-技巧、有用函数、简洁方法、编程细节
整理JavaScript方面的一些技巧.比較有用的函数,常见功能实现方法,仅作參考 变量转换 //edit http://www.lai18.com var myVar = "3.14159 ...
- JavaScript学习总结(二)
JavaScript学习总结(二) ---- 对象 在JavaScript中,几乎用到的每个js都离不开它的对象.下面我们深入了解一下js对象. js中对象的分类跟之前我们学过的语言中函数的分类一样, ...
- Java程序猿JavaScript学习笔记(2——复制和继承财产)
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
随机推荐
- Python学习笔记之面向对象
下面是初步总结的Python的面向对象的参数定义,后面会逐渐完善面向对象的相关知识.
- 【AOP】在Aspect中无法获取实现类方法的注解
问题 MethodSignature methodSignature = (MethodSignature) (joinPoint.getSignature()); Method method = m ...
- Zabbix在Docker中的应用和监控
目录 Zabbix在Docker中的应用和监控 一.如何使Zabbix跑在Docker里 1.Docker基础环境配置 2.Docker-compose安装配置 3.启动zabbix server 4 ...
- map的查询和修改方法
1:map查询的方法 package com.cn.util; import java.util.ArrayList; import java.util.HashMap; import java.ut ...
- stm32 解析sbus
转载 https://blog.csdn.net/Brendon_Tan/article/details/89854751 STM32 Futaba SBUS协议解析1. S.BUS1.1 协议介绍 ...
- IP、TCP、DNS
负责传输的IP协议 按层次分,IP网际协议位于网络层.几乎所有使用网络的系统都会用到 IP 协议. “IP”和“IP地址不同”,“IP”是一种协议的名称.IP 协议的作用是把各种数据包传送给对方.而要 ...
- 常用命令提示符(cmd)
MS-DOS(Microsoft Disk Operation System)命令提示符(cmd) 启动: win+ R 输入cmd回车切换盘符 盘符名称:进入文件夹 cd 文件夹名称进入多级 ...
- 「JSOI2008」Blue Mary的旅行
传送门 Luogu 解题思路 分层图加网络流,有点像这题 可以证明最多不超过100天,所以才可以分层,不然图的规模会很大. 首先连源点汇点: \((s,1,INF), (n, t, INF)\) 以时 ...
- java web开发_购物车功能实现
java web开发_购物车功能实现 之前没有接触过购物车的东东,也不知道购物车应该怎么做,所以在查询了很多资料,总结一下购物车的功能实现. 查询的资料,找到三种方法: 1.用cookie实现购物车: ...
- springCloud 之 Eureka注册中心高可用配置
springCloud的eureka高可用配置方案思路是:几个服务中心之间相互注册,比如两个注册中心,A注册到B上,B注册到A上,如果是三个注册中心则是:A注册到BC上,B注册到AC上,C注册到AB上 ...