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项目源码 ...

随机推荐

有关table布局时tr 属性display:block显示布局错乱
display:block display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的; display:table-row tab ...
Java NIO（一） Java NIO 概述
Java NIO 由以下几个核心部分组成: Channels Buffers Selectors 虽然Java NIO 中除此之外还有很多类和组件,但在我看来,Channel,Buffer 和 Sel ...
Android自定义验证码输入框
未经允许,禁止
Android存储扩展学习-----应用的清除数据和清除缓存
前几天和朋友聊到了APP清除数据这块,聊到了清除数据都会清掉哪些数据,我们每个人的手机在”设置–>应用管理”里面,选择任意一个App,都会看到两个按钮,一个是清除缓存,另一个是清除数据,那么当我 ...
Matlab GUI选项卡
1.在这个网址下载一个工具包,里面应该有四个文件:tabselectionfcp.p.tabselectionfcn.m.tabpanel.p和tabpanel.m,显然代码用.p格式进行加密了. 2 ...
SQL获取本周，上周，本月，上月的开始时间和结束时间
),),--本周 ),),--上周 ),),--本月 ),),--上月 ),),--近半年 ),)--近一年 ), ,, ),)--本周开始时间 ), ,, ),)--本周结束时间 ),,, ),)- ...
Selenium2学习（六）-- 定位神器CSS
前言大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css ...
织梦Dedecms主要文件夹目录及模板文件说明
虽然织梦DedeCMS因为安全问题被人所诟病,但瑕不掩瑜,无论从用户群数量还是时间等各方面,织梦DedeCMS都是国内排名前几的CMS建站程序.如果你想学习CMS的二次开发,织梦DedeCMS是必须需 ...
May 24th 2017 Week 21th Wednesday
Always remember that you are absolutely unique. 永远记住,你是独一无二的. I am unique, in the way that all I do ...
SAP C4C里如何实现Sales Unit和Seller的自动determination
先看一个效果,我录了一个视频,发布在视频网站上,大家可以先看看SAP Cloud for Customer里启用了partner 自动determination后的效果. 在SAP Cloud for ...

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

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

随机推荐

热门专题