JS笔记

=============数据类型===================
console.log(str.length); 获取字符串的长度
console.log(typeof str); 查看变量的类型
======将其他类型转化为字符串类型的三种方法======
1. console.log(num.toString());
2. console.log(String(num));
3. console.log(num+'');
======将其他的类型转化为数值类型的方法========
1. console.log(Number(str));
2. console.log(parseInt(str)); ***parseInt不能转化布尔型的类型,当字符类型为 '123abc' 这种数字开头的字符,则转化为数字。以'abc123' 字符开头的则NAN
3. console.log(parseFloat(str));
4. console.log(+str);
======布尔值转化为false的情况==============
console.log(Boolean(str)) 1. null 2.undefined 3. '' 4. 0
========js的三种引用=====================
1.行内引用
<input type="button" onclick="alert("1111111")">
2.直接用
<script></script>
3.外部引用
<script src="index.js"></script>

============表达式=================
表达式由运算符和运算数组成,并且会返回一个结果(值)

========运算符=====================
===算术运算符=====
+ - * / (两个运算数的运算符是二元运算符)
===一元运算符=====
前置 ++num 先运算++num,再返回值
后置 num++ 先返回num原来的值,再执行num++对num自身+1
===逻辑运算符=====
与&& 或|| 非!
===关系运算符=====
< > >= <= == === !== !===

*** == !== 双等号判断的是值是否相等
*** === !=== 三等号判断的是类型和值是否相等
===三元运算符=====
表达式1?表达式二:表达式3
============arguments=================
作用:可以通过arguments来获取函数调用时的实参
例如:
function getfirst(){
var first=arguments[0];
return first;
}
// 函数的返回值是调用该函数时传入的第一个参数; getfirst(4,5,6);的返回值时4
============访问对象属性两种方法=================
1. 对象名.属性; 例:dog.name;
2. 对象名['属性']; 例: dog['name'];
============函数和对象的区别=================
函数: 独立存在的函数;用于封装一些代码,可以重复使用;
方法: 属于对象的函数就是方法;
============自定义构造函数===================
function Hero(name,weapen,equipment,blood){
//this指向的就是对象本身
this.name=name;
this.weapen=weapen;
this.blood=blood;
this.equipment=equipment;
}

调用:
var hero1=new Hero('盖伦','大宝剑',['头盔','战甲'],100);
============this出现在以下位置,分别代表什么===================
1.函数中 this指向window
2.在方法中 this指向这个方法所属的对象
3.构造函数 this指向的是构造函数所创造的对象
============遍历对象属性和值===================
var obj={
name:'zs',
age:19,
score:99
}
for(var key in obj){
console.log(key+'------'+obj[key]);
}
====删除对象的属性====
delete obj.name
==============API的概念====================
概念:一些事先预定好的函数
==============webAPI的概念====================
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

==============DOM里面内容相关概念================
DOM:是一种基于树的API文档,文档对象类型
BOM:是浏览器对象类型
文档: 一个网页可以成为文档
节点:网页中的所有内容都是节点(标签,属性,文本,注释等)
元素:网页中的标签

=====判断是否是数组对象


=====Math和公式
//返回一个介于min和max之间的随机数
function getRandom(min,max){
return Math.random()*(max-min)+min;
}
//返回一个介于min和max之间的整型随机数
function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1)+min);
}
//返回最大
Math.max(1,2,3,4,5)
//返回最小
Math.min(1,2,3,4,5)
//返回一个小于或等于给定数字的最大整数
Math.foor(10.9); 返回10

=====根据id获取页面元素
var main=document.getElementById('main');
通过console.dir(main)可以该对象的方法 _proto_: 后面跟的是这个对象的类型
=====根据标签名来获取所有的标签
var div=document.getElementsByTagName('div');
返回的对象是所有的div
=====根据标签的class属性获取元素(仅支持ie8以后的浏览器版本)
var name=document.getElementClassName('name');
=====根据选择器获取元素(仅支持ie8以后的浏览器版本)
var element=document.querySelector('.a'); //仅能获取一个元素
var elements=document.querySelectorAll('.a'); // 获取所有符合条件的元素
=====截取一段字符串
var s='';
s=s.substr(开始位置,结束位置);
================非表单元素的属性=========================
引用图片 img.src="";
取消a标签的跳转行为 在a标签的点击事件里面加上return false;就可以;
=====获取div标签里面的内容
div.innerHTML; 会显示div里面的所有信息,包括标签

div.innerText;
div.textContent; 会显示div里面的文本信息,不包括标签,
***两个都支持的浏览器:新谷歌,新火狐,新ie,旧版火狐只支持textContent,旧版ie只支持innerText
================表单元素的属性=========================
disabled:禁用属性
checked:复选框选中属性
selected:下拉菜单选中属性
***当这些属性的属性值只有一个值的时候,在js中操作只有true和false两个值
======获取自定义的属性的值
1.box.getAttribute('age');
======设置自定义的属性的值(包括已有的属性的值)
box.setAttribute('age',9);
======删除自定义的属性的值
box.removeAttribute('age');

================获取父元素中的子元素(父子结构)=========================
parentNode 父节点
childrenNodes 子节点
children 子元素
firstChild 获取第一个子节点
lastChild 最后一个节点
firstElementChild 第一个子元素
lastElementChild 第一个子元素
nextSibling 下一个兄弟节点
previousSibling 上一个兄弟节点
nextElementSibling 下一个兄弟元素
previousElementSibling 上一个兄弟元素

===============使a标签禁止跳转========================
1. <a href="javascript:void(0)"></a>
2. <a href="javascript:undefined"></a>


===============动态添加元素========================
1.document.write('hellow <p>World<p/>')
//和点击事件配合使用的话会把之前的整个html覆盖掉
2.box.innerHTML='<ul>';
box.innerHTML+='</ul>';

3. var ul=document.creatElement('ul');
my$('box').appendChild(ul); //往box盒子里面添加ul标签
****如果要添加的标签已经存在于页面中,会把之前的删掉,换到新的位置

=======删除元素
box.removeChild('box');

=======把元素插入到指定的位置
box.insertBefore(要插入的节点,插入的位置 )
=======把当前元素的标签替换
box.replaceChild(替换成什么元素,被替换的元素 )

================注册事件的3中方法================
1. btn.onclick=function(){

}

//移除该事件的办法
btn.onclick=null;

2.
function btnClick(){

}
btn.addEventListener('click', btnclick }) //ie9 +支持

//移除该事件的办法(不能使用匿名函数)
btn.removeEventListener('click', btnclick )


3.btn.attachEvent('onclick',function(){ //ie9 -支持

})

//移除该事件的办法(不能使用匿名函数)
btn.removeEventListener('onclick', 函数名)


==================事件对象==========================
=====获取真正触发事件的对象
e.target;
=====相对于屏幕的位置
e.clientX;
e.clientY;
=====相对于整个页面的位置(ie 9+ 支持)
e.pageX;
e.pageY;
=====获取页面的滚动距离
documet.body.scrollLeft;
document.body.scrollRight;
document.body.scrollTop;
=====获取盒子(div)的坐标
box.offsetLeft;
box.offsetTop;
=====取消默认行为
e.preventDefault();
=====取消冒泡
e.stopPropagation();

==================BOM==========================
bom:浏览器对象类型

=====onload
onload=function(){
} 页面加载完成后执行
=====onunload
onunload=function(){

} 页面卸载的时候运行

=====location
用来获取和设置url地址

location.href="";

=====history=====
history.forward(); //前进
history.back(); //后退

history.go() 参数1 -1 分别代表前进后退


===============定时器======================
setTimeout( fn, 3000 ) :定时炸弹 相隔一段时间执行一次(仅执行一次) 第一个参数是函数,第二个是时间
setInterval() : 闹钟 相隔一段时间执行一次
clearTimeout() : 取消定时器 参数是定时器名

======offset系列属性========
box.offsetParent 离子元素最近的有定位的父元素
box.offsetLeft 盒子的左偏移距离
box.offsetHeight 盒子的高度(包括边框和内边距的距离)
=======client属性==========
box.clientLeft 获取边框的的宽度
box.clientTop 获取边框的宽度

box.clientWidth 不包括边框的宽度(包括padding)
box.clientHeight 不包括边框的高度(包括padding)
=======scorll属性==========
box.scrollTop 距离滚动条上方滚动的距离

box.scrollHeight 整个文本框的高度(包括看不到的滚动条高度)

==========mouseenter和mouseover的区别=============
mouseover:
mouseout:
会触发事件冒泡

mouseleave:
mouseenter:不会触发事件冒泡


==================Ajax======================
不需要重新加载整个页面,可以局部跟更新数据

我要再和生活死磕几年,要么我就毁灭,要么我就注定辉煌,如果有一天,你发现我在平庸面前低了头,请向我开炮。
原文地址:https://www.cnblogs.com/nlovestudy/p/11711627.html