1.JS是一种脚本语言,不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行
JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定
2.alert警告提示信息,弹出框
3.输入 prompt() 输入对话框
输出 document.write() 向body内输出内容,可以写HTML标签
输出 alert() 浏览器弹出警示框
输出 console.log() 浏览器控制台打印输出信息
4.js中设置style样式都是加在行间 style取样式也是从行间来取
5.如果有行间样式再修改className是不起作用的 跟css优先级一样 一般要么就用class要么就用样式,不能混用
6.window.onload作用等页面加载完成后加载
7.var div = document.grtElementsByTagName('div') 是获得标签名 能获得多组 获得的是数组
div.length 数组都有长度 一次只能对一个元素设置样式 直接对数组设置样式会报错
8.ECMAScript:翻译将js翻译给计算机 核心 解释器
9.DOM Documen Object Model 操作HTML的能力 document
10.BOM Browser Object Model 操作对象是浏览器 window
11.BCMA 几乎没有兼容性
DOM 有一些操作不兼容
BOM 没有兼容问题(完全不兼容)
12.typeof 运算符 常见类型为 number string boolean undefined object function null NaN
undefined 1.没有定义 2.定义了但是没有给东西
一个变量应该只放一种类型的数据
13.文本框里边的是字符串
parseInt 是从左向右看转换为数字的 12px34 转换为12 如果不是数字则是NAN 非数字 如果第一个是数字则返回数字,第一个是字符则返回NAN 如 1ab2 返回1 a1b2 返回NAN
14. 任何数字和NAN相加还是NAN 数字加字符为字符
15.NAN和NAN是不相等的 如var a = parseInt('abc) var b = parseInt('def'); a和b是不相等的
16.一个函数检测是不是NAN alert(isNAN(a))如果a是NAN则返回true
17.paseFloat 在不知道是小数还是整数的时候就用paseFloat
18.也叫做强制类型转换 显示类型转换
19.隐式类型转换 ==是先转换类型再比较 ===是不转换直接比较 -也是隐式转换 a='7' b = '5' a-b等于2
-号在js中只有数字相减
20.全局变量在函数上边声明,在任何地方都可以用 局部变量只能在定义她的函数里边才能用
闭包是子函数可以使用父函数的局部变量
21. json = {a:12,b:5,c:'abc'} json是用花括号 alert(json.a) json['a'] arr[0]json的下标是字符串 数组的下标是数字 json没有length for(var i in json) 用for in解决json循环
JSON的数据结构是基于文本的,由键值对组成,键必须是字符串类型,值可以是字符串、数字、布尔值、数组、对象或null。
22. rutern 没给值返回的是undefined 一个函数只返回一种类型的值 也可以没有return
23.arguement 可变参 不定参 arguement是数组里边是传定的参数 function(){}
取非行间的样式
window.addEventListener('load',function() {
var oDiv = document.querySelector('#div1');
if(oDiv.currentStyle) {
alert(oDiv.currentStyle.width);
}else {
alert(getComputedStyle(oDiv,false).width);
}
})6
24
// 获取目标元素
const element = document.getElementById("yourElementId");
// 使用 window.getComputedStyle 获取行外样式
const computedStyle = window.getComputedStyle(element);
得到的为json
// 获取特定的样式属性
const color = computedStyle.color; // 获取颜色
const fontSize = computedStyle.fontSize; // 获取字体大小
const width = computedStyle.width; // 获取宽度
console.log("Color:", color);
console.log("Font Size:", fontSize);
console.log("Width:", width);
兼容性:
window.getComputedStyle()是现代浏览器的标准方法,兼容性非常好,适用于所有主流浏览器(包括IE9及以上版本)。
var styles = window.getComputedStyle(div);求行外样式
25.数组
创建数组 var a = [1,2,3];
var a = new Array(1,2,3);
数组的length即可以获取又可以设置 例如 var a = [1,2,3,4,5,6] a.length = 3 则数组a就变成了a[1,2,3];
快速清空数组的值 a.length = 0;
数组里边应该只存在一种类型的变量
数组的添加
push()数组末尾添加 pop()数组末尾删除 unshift()数组头部添加 shift()头部删除
arr.splice(起点,长度) 如 arr[1,2,3,4,5,6] arr.splice(2,3) arr会变成[1,2,6];
插入 arr.splice(起点,长度,添加的元素); arr.splice(2,0,'a','b');在第二个元素之后添加ab 0表示删除0给元素
替换 arr.splice(2,2,'a','b') 将数组第二个之后的两个元素替换成a和b
数组连接
var a=[1,2,3],var b = [4,5,6]; a.concat(b) 将a数组和b数组拼接连接为一个数组 谁在左边连接谁
数组拼接
var arr = [1,2,3] arr.join('-') 就将数组连接成 1-2-3 的字符串
数组的排序 arr.sort() 方法将数组里边的数进行排序 数字进行排序的时候将排序第一位数字
var arr = [1,7,32,6,82,2]; 排序后 [1,2,32,6,7,82] 是将数组当成字符串进行排序的了 sort只认识字符串
arr1.sort(function(a, b) {
// return a - b; 升序的顺序排列
return b - a; // 降序的顺序排列
});
24.定时器
setInterval(函数不加括号,时间ms) 一直都会执行
setTimeout(函数不加括号,时间) 到时间执行一次 只执行一次
清除定时器
clearInterval(定时器名字); setTimeout同理
定时器打开的时候不会立即执行 会在第一个时间之后执行
字符串用charAt【i】
使用定时器时有时候需要开局清除定时器然后再添加
25.Date
var oDate = new Date(); 创建时间
getFullYear()年 getMounth()月份是从0开始的 getDate()日 getDay()星期 周日是0
26.offsetLeft 是获得当前对象的left值
27.最大值和最小值 Number.Max—VALUE Number_—VALUE infinity表示无穷大 -infinity表示无穷小
NaN 表示是非数值
28.字符串长度为 string.length
29.字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
30.num.toString()可以将数字转换为字符串 或者String(num) 或者 num + ''
31.流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构
32.函数命名
尽量小驼峰式命名法
前缀应该为动词
can 判断是否可执行某个动作
has 判断是否含有某个值
is 判断是否没某个值
get 获取某个值
set 设置某个值
load 加载某些数据
33.
//生成M-N之间随机整数的函数
function getRandomInt(M, N){
return Math.floor(Math.random() * (N - M + 1)) + M
}
32.节点
oUl.childNodes[i].nodeType nodeType 为检测节点的类型
nodeType = 3 为文本节点 元素节点为1
oUl.children 只包含元素不包含文本 兼容 子节点只算第一层
oUl.parentNode 为父节点
offsetParent 根据样式会发生改变
第一个子节点 oUl.children[0] 最后一个子节点 oUl.children[oUl.children.length - 1]
获取元素属性的值
getAttributes(名称)
设置元素属性的值
setAttribute(名称,值)
删除removeAttribute(名称)
var aEle = oParent.getElementsByTagName('*') * 通配符意味着选取所有的子级
var li = document.createElement('li'); document.createElement(创建的标签名称)
这两个都是对父元素进行操作的
ul.appendChild(li); appenChild(创建的节点) 这是给元素添加子节点
ul.insertBefore(li,ul.children[0]) 是在第0个元素前插入子元素 insertBefore(需要添加的子元素,哪个子元素)
父级删除子级元素 ul.removeChild(要删除的li)
文档碎片 对高级浏览器基本没什么用,可能会降低性能,对于低级浏览器有用
var ul = document.querySelector('ul');
var oFag = document.createDocumentFragment();//创建文档碎片
for(var i = 0; i < 100000;i++) {
var li = document.createElement('li');
oFag.appendChild(li);
}
ul.appendChild(oFag);
33.表格
var oTb = document.querySelector('#tab1');
oTab.tBodies[0] 取tbody时要用[0]
oTb.tBodies[0].rows 取的是所有的行
oTb.tBodies[0].rows[0].cells 取的是某一行的所有td
给表格删除行时要从tbody里边进行删除
一般添加一个id之后的表格里边的id就不能重复用了 删除之后不能再用 一般在用过之后id++
.toLowerCase()方法是将字符串全转为小写 一般用于输入小写的时候也能搜出来大写的比较
str.search('要找的字符') 找到的话返回位置 没找到的话-1
str = 'abc 123 ert'
var arr = str.split(' ')将字符串切割分为数组
34.表单
表单.onsunmit = function(){} 给表单提交时触发的 事件
表单.onreset = function(){} 给表单重置时触发的事件
35.修改类名
element.className = ''
element.classList.add('')
element.classList.remove('')
element.classList.toggle('')
事件监听的其他版本
DOM L0:事件源.on事件 = function() { }
DOM L2:事件源.addEventListener(事件, 事件处理函数)
区别:on方式会被覆盖,addEventListener方式可绑定多次,拥有事件更多特性,推荐 使用