JS高度融合入门笔记(一)
2018-08-26 17:27:23来源：博客园 阅读 ()
复制下面的代码到编辑器里，让编辑器自动排版一下格式，效果会好一点，自我感觉我笔记的条理还是比较容易记忆的
<!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>
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- javascript面向对象入门基础详细介绍 2020-03-29
- jQuery动态改变多行文本框高度的操作方法 2019-11-10
- 入门webpack,看这篇就够了 2019-08-14
- 解决 niceScroll 自适应DOM 高度变化 2019-08-14
- 剑指前端（前端入门笔记系列）——BOM 2019-08-14
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
