JS学习随手笔记
2024-10-18 22:35:18
- ===================字符串=====================
- 字符串中间的空格也是要算长度的。
- 每一个字符都可以返回对应的Unicode 编码
- 文字的简单加密都是通过charCodeAt()方法得到 Unicode 编码（一个数字）， 再减掉一定的值，最后用fromCharCode()方法将前者转为字符，就完成了加密。
- 字符串之间比较大小，先比较第一位的 Unicode 编码 大小！
- split()切割字符串会把他们放进一个数组。
- 用字符串的方法可以完成一个查找并替换文本的功能。
- 字符串的长度 不能设置！！ 只能读取！
- 颠倒字符串 先将字符串 切割成数组，用数组的颠倒方法 ，最后将 数组 转换成字符串就好。
- ===================JSON和数组=====================
- json的格式 var json = {'name':'leoo','age':29};
- 读取： json .name json['name']
- 设置： json .name = '李旺' json['name'] = '李旺'
- json 中可以包数组 var json = {'name':[1,2,3,5]};
- 数组中包json var arr= [ {'name':[1,2,3,5]}, {'name':[1,2,3,5]}];
- 用下标可以很方便的读取 设置值。。。
- 遍历json 使用 for( var attr in json){ alert(attr); //得到的是所有的json 的 键
- alert(json[attr]); //得到所有的json的每一个键的值。 }
- json 没有长度属性
- 数组 和 对象 也可以用 for in 来遍历
- 快速清空一个数组的内容可以用 arr.leng = 0
- push() 和 unshift()方法返回一个数组新的长度值, unshift()返回值IE6\7不支持。
- pop() 和 shift() 方法分别删除数组最后一个 和 第一个 值， 并返回删除的值。
- splice()方法可以删除 替换 增加 数组值操作， 返回值是被删除的值， 如果没有删除，返回值就是空！
- sort()方法默认是将数组的每一个值变成字符串后进行比较。 如果要进行数组 的数字比较，可以在sort()中传递一个函数，列如：
var arr2 =[4,3,8,78,92,5];
arr2.sort(function(a , b){
return a-b; // a - b 如果大于 是正数 ，a 和 b调换位置，负数 和 0，则/ //不动 =》 从小到大的排序 b - a 则是从大到小排序。
})
//还有很多其他的 排序方法 ： 希尔 、 快速 等等。。。 随机排序， 使用 return Math.random()-0.5; 原理是一会 交换位置， 一会不交换位置，实现随机排序。 - 随机数0-1 Math.round(Math.random())
- 随机数0-10 Math.round(Math.random()*10)
- 随机数5-10 Math.round(Math.random()*5+5)
- 随机数公式 x - y Math.round(Math.random()*(y-x)+x)
- 随机数公式 0 - x Math.round(Math.random()*x)
- 随机数公式 1 - x Math.ceil(Math.random()*x)
- ===================Dom=====================
- 元素的子节点 用 元素.children 属性，不用 childNodes 会包含文本节点！！
- 元素第一个子节点 元素.firstElementChild IE 6 7 8 用firstChild 但是，当元素没有元素子节点 而有文本节点的时候，会报错， 所以，推荐使用 children[0] 找第一个元素子节点
- 操作兄弟节点和操作子节点需要注意文本节点的问题。
- 父节点 parentNode 只有一个，不是集合 offsetParent 得到向上查找第一个有定位父节点 IE7以下，如果当前元素没有定位，默认是body，有则是html 。标准浏览器 IE8都是body。 IE 7及 以下，如果 haslayout被触发，则会指向这个元素 。
- 获取指定元素的指定属性值 obj.getAttribute('value'); 设置属性 obj.setAttribute(attr,value); 删除指定属性 obj.removeAttribute(attr);
- ie6 7 8下自定义的元素属性可以用 obj.name obj[name]形式取得。
- ================BOM=======================
- •可视区尺寸–document.documentElement.clientWidth–document.documentElement.clientHeight•滚动距离–document.body.scrollTop/scrollLeft–document.documentElement.scrollTop/scrollLeft•内容高度–document.body.scrollHeight•文档高度–document.documentElement.offsetHeight–document.body.offsetHeight
- ================BOM=======================
- 事件对象兼容的写法 var ev = ev || window.event；
- onmousemove 是在指定的时间内执行一次（如果目标发生了位置移动）
- 给元素添加的是事件处理函数，而不是事件。
- 事件冒泡机制： 当一个元素发生一个事件（例如：click 事件）的时候，他会把发生的这个事件 传递给 父级，其父级接收到后，又向上传递给其父级，一直到 document ，这个过程叫冒泡。 当其父级，或者其 祖先元素也同样绑定了 click 事件处理函数的话， 就会执行这些事件处理函数。 (元素是否绑定事件处理函数不影响其冒泡)
- 例如谷歌的下拉菜单： 点击按钮的时候，下拉的菜单显示。 点击页面上除 按钮 外的其他地方，下拉菜单消失（原因： 给document 绑定了点击事件处理函数，当我们点击页面中任何一个元素的时候，都会把 点击事件 最终传递给 document 接收到 ，而document 元素又绑定了一个点击事件处理函数，于是，就执行了，下拉菜单消失）。那么同样的，当我们点击按钮的时候，点击事件也会向上传递给 document 接收到 ，他也会执其绑定的仪的点击事件处理函数===》 就是让下拉菜单隐藏 ，这个时候，我们得让点击按钮的时候，阻止事件冒泡。
- 阻止事件冒泡：event.canceBubble = true;
- 有的时候，可以利用事件冒泡机制，只给其父亲绑定事件处理函数而实现效果。（例如：包含结构的下拉菜单， 只给其父级LI 绑定事件处理函数即可，而不是给按钮。）
- 事件绑定的两种方法： 1. obj.onclick = fn1; 2. 标准以及IE9+: obj.addEventListenner('click',fn2,false); IE9以下： obj.addachEvent('onclick',fn2);
//给一个对象绑定一个事件处理函数的第一种形式
//obj.onclick = fn;
function fn1() {
alert(this);
}
function fn2() {
alert(2);
} //document.onclick = fn1;
//document.onclick = fn2; //会覆盖前面绑定fn1 //给一个对象的同一个事件绑定多个不同的函数
//给一个元素绑定事件函数的第二种形式 /*
ie：obj.attachEvent(事件名称，事件函数);
1.没有捕获
2.事件名称有on
3.事件函数执行的顺序：标准ie-》正序 非标准ie-》倒序
4.this指向window
标准：obj.addEventListener(事件名称，事件函数，是否捕获);
1.有捕获
2.事件名称没有on
3.事件执行的顺序是正序
4.this触发该事件的对象
*/ /*document.attachEvent('onclick', function() {
fn1.call(document);
});
document.attachEvent('onclick', fn2);*/ //是否捕获 : 默认是false false:冒泡 true：捕获 /*document.addEventListener('click', fn1, false);
document.addEventListener('click', fn2, false);*/ function bind(obj, evname, fn) {
if (obj.addEventListener) {
obj.addEventListener(evname, fn, false);
} else {
obj.attachEvent('on' + evname, function() {
fn.call(obj);
});
}
} bind(document, 'click', fn1);
bind(document, 'click', fn2);我们调用函数的时候一般用 fn(); 其实这样也可以调用：fn.call(); call()是每一个函数下早已经定义好的方法，其默认第一个参数，可以改变 函数内部this的指向。
//call 函数下的一个方法，call方法第一个参数可以改变函数执行过程中的内部this的指向，call方法第二个参数开始就是原来函数的参数列表 function fn1(a, b) {
alert(this);
alert(a + b);
} //fn1(); //window
fn1.call(null, 10, 20); //调用函数 fn1() == fn1.call()事件捕获： 第二种事件绑定处理函数的最后一个参数： false 和 true 用来分别区分 设置 事件出去 的时候 触发，和事件进去的时候触发。 （事件触发的顺序是， 就像敲键盘一样， 有一个 先按下 （进去）然后再 弹起（出来）的过程。）
window.onload = function() { var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3'); function fn1() {
alert( this.id );
} /*oDiv1.onclick = fn1;
oDiv2.onclick = fn1;
oDiv3.onclick = fn1;*/ //false = 冒泡 //告诉div1，如果有一个出去的事件触发了你，你就去执行fn1这个函数
/*oDiv1.addEventListener('click', fn1, false);
oDiv2.addEventListener('click', fn1, false);
oDiv3.addEventListener('click', fn1, false);*/ //告诉div1，如果有一个进去的事件触发了你，你就去执行fn1这个函数
/*oDiv1.addEventListener('click', fn1, true);
oDiv2.addEventListener('click', fn1, true);
oDiv3.addEventListener('click', fn1, true);*/ oDiv1.addEventListener('click', function() {
alert(1);
}, false);
oDiv1.addEventListener('click', function() {
alert(3);
}, true);
oDiv3.addEventListener('click', function() {
alert(2);
}, false);
// }- 事件绑定的取消： 1. obj.onclick = null;
- 2. 第二种方式绑定的事件 取消：
- IE : obj.dettachEvent(事件名称，事件函数);
- 标准： obj.removeEventListener(事件名称，事件函数，是否捕获);
- event对象有三个属性， ctrlkey altkey shiftkey 分别返回 ctrl alt shift 三个键是否按下的布尔值。
- 只有一些表单元素 和 A标签 以及document 可以有 焦点事件和键盘事件。
- onkeydown: 如果按下不抬起，会连续触发。 （事实上，当你按下一个键准备输入文本，而不抬起的时候，你会发现第一个字母出来后，第二个字母需要等一下才出来，然后后续的很快就出来了，这是因为浏览器会给一定的时间来检查是否是用户误触。 但是，做游戏的时候，我们就需要解决这个问题了。 使用定时器来解决。）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
</style>
<script>
window.onload = function() { var oDiv = document.getElementById('div1');
var timer = null; //不是所有元素都能够接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素就能够接收键盘事件 //onkeydown : 如果按下不抬起，那么会连续触发
//定时器
document.onkeydown = function(ev) { var ev = ev || event; switch(ev.keyCode) {
case 37:
clearInterval(timer);
timer = setInterval(function(){
oDiv.style.left = oDiv.offsetLeft - 5 + 'px';
},20) break;
case 38:
clearInterval(timer);
timer = setInterval(function(){
oDiv.style.top = oDiv.offsetTop - 5 + 'px';
},20)
break;
case 39:
clearInterval(timer);
timer = setInterval(function(){
oDiv.style.left = oDiv.offsetLeft + 5 + 'px';
},20)
break;
case 40:
clearInterval(timer);
timer = setInterval(function(){
oDiv.style.top = oDiv.offsetTop + 5 + 'px';
},20)
break;
} } document.onkeyup = function(ev) {
clearInterval(timer);
} }
</script>
</head> <body>
<div id="div1"></div>
</body>
</html>- 取消默认事件： 1. return false;(用于 使用第一种方式绑定的事件处理函数 和 IE下 使用 第二种方式绑定的事件处理函数) 2. ev.preventDefault(); (用于 标准浏览器使用第二种方式绑定的事件处理函数。)
- =========================JS中的运动====================================
- JS中读取CSS值的时候，会把小数四舍五入， 而在CSS中，是可以设置并且应用一些带小数的值。所以，在做有些效果，比如 缓冲运动的时候， 需要 向上或者向下取整。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px;}
</style>
<script>
//摩擦，减速 : 在运动过程中，速度越来越慢
//愈接近目标点，速度就越小
window.onload = function() { var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');
var iTimer = null; oBtn.onclick = function() { clearInterval(iTimer);
var iSpeed = 0; iTimer = setInterval(function() { iSpeed = (500 - oDiv.offsetLeft) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); console.log( oDiv.offsetLeft + ' : ' + iSpeed ); if (oDiv.offsetLeft == 500) {
clearInterval(iTimer);
} else {
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
} }, 30); } }
</script>
</head> <body>
<input type="button" value="动起来" id="btn" />
<div id="div1"></div>
</body>
</html>- 加入缓冲的运动框架：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px; left: 400px;}
</style>
<script>
window.onload = function() { var oDiv1 = document.getElementById('div1'); oDiv1.onclick = function() { /*startMove(this, {
width : 200
}, function() {
startMove(this, {
height : 200
});
});*/ startMove(this, {
width : 200,
height : 200
});
} function startMove(obj, json, fn) {
clearInterval(obj.iTimer);
var iCur = 0;
var iSpeed = 0; obj.iTimer = setInterval(function() { var iBtn = true; for ( var attr in json ) { var iTarget = json[attr]; if (attr == 'opacity') {
iCur = Math.round(css( obj, 'opacity' ) * 100);
} else {
iCur = parseInt(css(obj, attr));
} iSpeed = ( iTarget - iCur ) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (iCur != iTarget) {
iBtn = false;
if (attr == 'opacity') {
obj.style.opacity = (iCur + iSpeed) / 100;
obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
} } if (iBtn) {
clearInterval(obj.iTimer);
fn && fn.call(obj);
} }, 30);
} function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
} }
</script>
</head> <body>
<div id="div1"></div>
</body>
</html>
最新文章
- Vue.js——基于$.ajax实现数据的跨域增删查改
- Struts2中获取servlet API的几种方式
- 【JDK源码分析】浅谈HashMap的原理
- Git使用ssh key
- Stronger (What Doesn't Kill You)
- 安装DirectX SDK (June 2010) 失败（Error Code S1023）（转）
- [java小笔记] 关于数组内存管理的理解
- [Redux] Generating Containers with connect() from React Redux (FooterLink)
- XML解析之DOM解析技术案例
- 新生命组件XAgent使用心得
- C#7.0中的解构功能---Deconstruct
- Hybrid App 开发模式
- 用 LSTM 做时间序列预测的一个小例子（转自简书）
- Ubuntu16.04修改IP及时生效
- 最终一致性2PC复杂场景，事务报数据库操作超时。
- pyspider爬一批文章保存到word中
- Ubuntu最新的主要操作系统放弃32位支持?
- 04 Zabbix4.0系统配置触发器trigger
- JIRA - 使用指南(项目跟踪管理工具)
- Oracle 统计量NO_INVALIDATE参数配置（下）