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()">
<input type="text" onfocus="on_focus()">
<input type="text" onblur="on_blur()">
<input type="text" onchange="on_change()">
<button type="reset">重置</button>
<input value="重置2" type="reset">
<button type="submit">提交</button>
</form>
<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>
