JS高度融合入门笔记(一)

复制下面的代码到编辑器里，让编辑器自动排版一下格式，效果会好一点，自我感觉我笔记的条理还是比较容易记忆的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body div{
margin-top: 1000px;
}
</style>
</head>
<body onresize="">

<form action="" onsubmit="return on_submit()" onreset="return on_reset()">
<input type="text" onkeydown="on_keydown()">
<input type="text" onkeypress="on_keypress()">
<input type="text" onkeyup="on_keyup()">

<div style="width:100px;height: 100px;float: left;margin-left: 10px; background-color: red" onclick="on_click()">单击</div>
<div style="width:100px;height: 100px;float: left;margin-left: 10px; background-color: orange" ondblclick="on_dbclick()">双击</div>
<div style="width:100px;height: 100px;float: left;margin-left: 10px; background-color: yellow" onmousemove="on_mousemove()">移动</div>
<div style="width:100px;height: 100px;float: left;margin-left: 10px; background-color: green" onmouseout="on_mouseout()">移出</div>
<div style="width:100px;height: 100px;float: left;margin-left: 10px; background-color: skyblue" onmouseover="on_mouseover()">OVER</div>
<div style="width:100px;height: 100px;float: left;margin-left: 10px; background-color: blue" onmousedown="on_mousedown()">鼠标down</div>
<div style="width:100px;height: 100px;float: left;margin-left: 10px; background-color: purple" onmouseup="on_mouseup()">鼠标up</div>

<button id="btn">停止</button>
<button id="start">开始</button>
<script type="text/javascript">
//基本语法略:创建对象var obj = {};
//可以写JS的四个地方:略
//循环:略
//类型及类型转换
//js有六种类型:数值布尔字符 undefined 对象 null
/*数值型*/
var a = 100;
var c = a + 'b'; //数值和字符相加变成字符拼接。
//转换成数值型
parseInt('123'); //123
parseInt('123asdf'); //123
Number('123'); //123
Number('123adf'); //报错
parseFloat('123.23');
//转成字符型
a = a.toString();
console.log(100..toString());
//转成布尔型
var f = 0;
Boolean(0);
Boolean('');
Boolean(null);
Boolean(undefined);
//特殊的转型布尔方式
var g = 1 ;
console.log(!!g);

//函数:略

//对象、遍历对象和事件
var obj = {
attr1 : val1,
attr2 : val2,
fun1:function(){},
fun2:function(){}
}
//删除属性或方法使用delete
delete obj.attr1;
//使用对象里面的内容
obj.attr1;
//或者使用中括号
obj[0];
//调用函数,加中括号,中括号里面函数名需要引号，还要在后面加括号
obj['fun1']();
//遍历对象
for(var i in obj){
if (typeof obj[i] == 'function') { obj[i]();}
else{ console.log(obj[i])}
}

//数组,数组也是对象,数组下标从0开始
var array = [];

//JS内置的一些对象
//一、Number对象
//查看对象的详细内容
console.dir(Number);
var a = 3;
//Number的一些方法
a.toString();
a.valueOf(); //返回数值对象的原始数值
//二、Boolean对象
Boolean(123);
//三、Math对象
Math.abs();
Math.ceil(); //向上取整
Math.floor(); //向下取整
Math.max(); //取最大
Math.min(); //取最小
Math.pow(a,b); //a的b次方
Math.random(); //返回0-1的随机数
Math.round(); //进行四舍五入
Math.cos(); //三角函数，使用弧度
Math.sqrt(); //开方
Math.exp();
//四、字符串对象
var str = 'adsfasdfasgasdf';
str.length; //得到字符串的长度
str.indexOf('s'); //搜索从第二个参数(可选)开始第一个字符出现的位置,不论从哪儿找,该字符串第一个元素记为第零个
str.indexOf('s',12);
str.lastIndexOf('s');//与上面的类似，从后往前
//字符串切片
str.slice(5,8); //从字符串的第一个参数开始截取到第二个(可选,默认是字符串尾);
str.slice(-2); //参数是负数表示左边界从右边开始算起,而且第二个参数一定要在第一个参数的右边
//字符分割
str.split('s'); //第二个参数可选，表示返回值中数组的最大长度
//字符串提取
str.substr(5,2); //从第一个参数起始，截取第二个参数要截取的长度
str.substring(3,8); //从第一个参数起始，截取到这个字符串在第二个参数的位置
//字符串拼接
str.concat('asdfasf');
str.concat('fasd','fasdf');
//大小写转换
str.toLocaleUpperCase();
str.toUpperCase();
str.toLocaleLowerCase();
str.toLowerCase();
//五、正则表达式
//由四部分组成
//定界符、原子、元字符、模式修正符
//元字符:没有单独存在的意义，它只能用来修饰原子，而且修饰的是紧挨它前方的原子
var c = /[23][34]{3,6}/
//- 连接，根据ascii吗表连续的内容
c.test('asd'); //使用我们的正则来判断里面的字符串
//中括号
var i = /[a-z]/;
var j = /[^abc]/; //表示除中括号内规则以外的内容
var k = /.{1,8}/;
var l = /\w{1,9}/; //\w相当于[a-zA-Z0-9_] \W相当于[^a-zA-Z0-9_]
var m = /\d{1,8}/; //\d相当于[0-9] \D相当于[^0-9]
var n = /\s{1,8}/; //\s表示任意空白字符
var o = /^[1-9]/; //^表示起始必须符合我们表达式的起始
var p = /^[1-9]\d{4,9}/; //$表示结尾也必须符合我们的表达式的结尾
// *相当于{0,},+相当于{1,},?相当于{0,1}
//模式修正符写在定界符之外
var b = /ah/i; //i表示前面的正则表达式不区分大小写匹配
var c = /ah/g; //g表示全局匹配，多次调用正则会一次将符合规则的结果匹配出来
var d = /ah/m; //m表示多行匹配

//子模式的外在表现一般使用一个小括号包着的部分就是一个子模式
//子模式最多只能有99个
//我们可以用$1……$99来调用缓冲区的内容
//六、时间对象
var d = new Date();
d.getFullYear();//显示年份
d.getMonth(); //显示第几月，从0开始
d.getDay(); //显示星期几，从零(周日)开始
d.getDate(); //显示几号

d.getHours(); //显示当前时间的小时数
d.getMinutes(); //显示当前时间的分钟数
d.getSeconds(); //显示当前时间的秒数
d.getMilliseconds();//显示当前时间的毫秒

d.getTime(); //获取从1970年一月一号至今的毫秒数
d.getTimezoneOffset(); //北京时间东八区，比格林威治时间早八个小时，所以值是-480
Date.parse('1970-01-02'); //返回毫秒数

d.toTimeSring();
d.toDataString();
d.toLocaleString();
d.toLocaleDateString();
d.toLocaleTimeString();

//对时间应用的例子
function getMytime(){
var d = new Date();
var f =
d.getFullYear() + '-'
+ addZero(d.getMonth()+1) + '-'
+ addZero(d.getDate()) + ''
+ addZero(d.getHours()) + ':'
+ addZero(d.getMinutes()) + ':'
+ addZero(d.getSeconds());
}

//在不到10的日子\时间前面补一个零
function addZero(){
x = x >= 10 ? x : '0' + x;
return x;
}

var xxx;

var a = document.getElementById('btn');
var b = document.getElementById('start');

a.onclick = function(){
clearInterval(xxx);
}
b.onclick = function(){
if (confirm('确定?')) {
xxx = setInterval(getMytime,1000);

setTimeout( function(){alert('这里???');} , 5000); //未解
}
}
//七、数组对象
var a = [];
var b = ['a','b'];
var c = new Array(4); //这个可以指定数组的长度
var aa = [1,2,3,543,232,88];
var bb = ['2',5];

aa.concat(bb); //拼接数组
bb.concat(aa);
aa.join('-'); //join可以指定一个分割符号，然后将数组的每个值使用该分隔符一次连接起来，形成一个字符串
aa.toString();
aa.pop(); //从数组的末端删除一个元素
aa.shift(); //从数组的首端删除一个元素
aa.push(); //从数组的尾部添加一个或多个元素
aa.unshift(); //从数组的首端添加一个或多个元素
aa.reverse(); //将原来的数组进行调转排列
aa.slice(); //这个跟字符串的slice的一样
//之后李阳搞了个桃子的玩意儿，没写

//JS事件
//一、鼠标事件
function on_click(){
alert('鼠标单击事件触发');
}
function on_dbclick(){
alert('鼠标双击事件触发');
}
function on_mousemove(){
alert('鼠标移动事件触发')
}
function on_mouseout(){
alert('鼠标移出');
}
function on_mouseover(){
alert('鼠标over');
}
function on_mousedown(){
alert('鼠标按下');
}
function on_mouseup(){
alert('鼠标抬起');
}
//二、键盘事件
function on_keydown(){
alert('键盘按下事件触发');
}
function on_keypress(){
alert('键盘按着事件触发');
}
function on_keyup(){
alert('键盘抬起事件触发');
}
//三、其他事件
function on_focus(){
alert('获得焦点事件触发');
}
function on_blur(){
alert('失去焦点事件触发');
}
function on_change(){
alert('内容改变事件触发');
}
function on_submit(){
return confirm('你确定提交?');
}
function on_reset(){
return confirm('你确定清空内容吗?');
}

//JS的DOM操作
document.getElementsByClassName('class_name'); //使用类名选择元素，注意是Elements
document.getElementsByTagName('tab_name'); //使用标签名选择元素，也是Elements
document.getElementsByName('name'); //使用名字属性选择
document.getElementById('id_name');

document.querySelector('#id');
document.querySelector('.class_name'); //querySelector()方法选择的是复合要求的第一个节点对象
document.querySelectorAll(); //选择所有复合规则的节点对象

//某个节点对象的一些属性和方法
var z = document.getElementById('z'); //
z.nodeName; //获取当前节点名
z.childNodes;
z.children; //获取子元素节点

//下面两个将获取元素和文本节点
z.firstChild;
z.lastChild;
//下面两个只能获取元素节点
z.firstElementChild;
z.lastElementChild;
//下(上)一个同级节点
z.nextSibling;
z.previousSibling;
//下(上)一个同级元素节点
z.nextElementSibling;
z.previousElementSibling;
//父级节点
z.parentElement;
z.parentNode;

//当前节点的属性列表
z.attributes;
//使用数字下标获取属性的名称和值(不保险，不推荐使用)
z.attributes[0].name;
z.attributes[0].value;
//获取一个节点的属性值
z.getAttribute('id');
z.setAttribute('data-ssse',1234);

//在一个节点中插入一个新节点
var a = document.getElementById('a_name');
var c = document.getElementById('c_name');
var b = document.createElement('div');

//对b进行一系列的设置，如 b.innerHTML = '这里填写想要显示的字符串';b.style.color = 'blue';
a.insertBefore(b,c); //c必须是a的子节点,b将被插到c之前,参数2选填，可以使null

//如果我们想在某个子节点的后面插入，其实相当于在该节点的下一个兄弟节点前面插入
var n = c.nextElementSibling;
a.insertBefore(b,n);

//删除一个节点
c.remove();
//删除一个节点对象的子节点
document.getElementById('').removeChild(c);
//克隆一个节点
c.cloneNode();

//检验节点对象是否含有某个属性
c.hasAttribute('class,title');

//从一个节点列表中获取指定索引的节点
document.getElementById('').children.item(0);

</script>

</body>
</html>

JS高度融合入门笔记(一)的更多相关文章

JS高度融合入门笔记(二)
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS ...
React.js入门笔记
# React.js入门笔记核心提示这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
Linux 入门笔记
一开始对linux总有些抵触,黑黑的命令框不知道如何下手,这次因为工作交接的缘故需要负责之前同事的Node后端部分,node,redis这些都是部署在Linux上的,看了几次运维的同学噼里啪啦的敲命令 ...
Vue (一) --- vue.js的快速入门使用
=-----------------------------------把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添 ...
「Android 开发」入门笔记
「Android 开发」入门笔记(界面编程篇) ------每日摘要------ DAY-1: 学习笔记: Android应用结构分析界面编程与视图(View)组件布局管理器问题整理: Andr ...
转：asm.js 和 Emscripten 入门教程
转:http://www.ruanyifeng.com/blog/2017/09/asmjs_emscripten.html asm.js 和 Emscripten 入门教程作者: 阮一峰日期: ...
JavaScript基础——JavaScript入门(笔记)
JavaScript入门(笔记) JavaScript是一种轻量级.解释型的Web开发语言,该语言系统不是很庞杂,简单易学.由于所有现代浏览器都已嵌入JavaScript引擎,JavaScript源代 ...
纯JS实现KeyboardNav(学习笔记)二
纯JS实现KeyboardNav(学习笔记)二这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码 ...

随机推荐

centOs升级
因为军佬放弃制作Centos7的网络重装包,又Centos7的安装引导和6有较大区别所以,选择曲线救国(技术不行,只能这样乱搞)前文:Centos6.9一键重装包https://ppx.ink/net ...
.Net常用的命名空间
-----------常用的命名空间--------地狱的镰刀 System.Collections //命名空间包含接口和类,这些接口和类定义各种对象(如列表.队列.位数组.哈希表和字典)的集合. ...
Eclipse Equinox DS(Declarative Service)
Equinox DS's METE-INF/MANIFEST.MF Manifest-Version: 1.0 Lazy-ManifestFilter: (Service-Component=*) B ...
《ArcGIS Runtime SDK for Android开发笔记》——数据制作篇：紧凑型切片制作（Server缓存切片）
1.前言在ArcGIS 10中出现了一种新的切片缓存文件格式:紧凑型存储(Compact).与之前的松散型存储(Exploded)相比,它有迁移方便.创建更快.减少存储空间等诸多优点,已经成为了现在 ...
mysql便于管理的几个shell脚本
[mysql@clark scripts]$ lsmysql_db_shutdown.sh mysql_db_startup.sh mysql_env.ini mysqlplus.sh[mysq ...
Python简单介绍以及Python环境搭建(入门1)
转载请标明出处: http://www.cnblogs.com/why168888/p/6400694.html 本文出自:[Edwin博客园] Python 简单介绍适合领域: Web网站和各种网 ...
TCP的建立和关闭
一.TCP头信息简单的至少应该知道,源端口,目的端口,序号,确认号,标志位,校验和二.TCP的建立 1.客户端将SYN标志位置1,同时生成随机的序号,确认号是0. 2.服务器接收到SYN,知道有人 ...
Bootstrap Table的使用小结
1.Jquery中的一些东西学习一下子,补充完善一下,毕竟有些时候没有使用到这个方式很有用,在使用bootstrap table的时候,选择当前已经选择的节点的事件中的ID的值当前rows中有很多 ...
单独使用JDBC编程
一.jdbc编程步骤 1. 加载数据库驱动 2. 创建并获取数据库链接 3. 创建jdbc statement对象 4. 设置sql语句 5. 设置sql语句中的参数(使用preparedStatem ...
JDBC执行存储过程的四种情况 (转)
本文主要是总结如何实现 JDBC调用Oracle的存储过程,从以下情况分别介绍: [1].只有输入IN参数,没有输出OUT参数 [2].既有输入IN参数,也有输出OUT参数,输出是简单值(非列表) ...

JS高度融合入门笔记(一)

JS高度融合入门笔记(一)的更多相关文章

随机推荐

热门专题