一.数据类型
1.基本类型
数字 整数 小数
字符串 '' "" 都可以
布尔类型
var d=true;
只需要用var声明不需要在前面声明数据类型
打印出来undefined 说明声明一个变量但没有赋值
null 涉及到一个量但是这个量是空 说明没有声明
2.复合类型
数组
数组通过下标访问 arr.length获取长度
var arr=[10,50.6,"hello",true,undefined,null,[20,11,5]];
里面可以嵌套各种数据 比如对象函数 函数推荐使用匿名函数等
要注意如果要声明一个函数在第九个位置那么相当于这个函数完全变成了arr[8]
不能再用原来函数的名字 要调用可以用arr[8]m1()
对象
var obj={} 这就声明了一个对象 里边是属性 值 对象
用对象.属性可以访问对象中具体某个属性
例如
var obj={
name:"张三";
age:50;
marry:true;
play:[1,10.3,"篮球"];
friend:{
name:"李四";
age:51;
}
}
函数
命名函数
function m1（）{
alert(1)
}
调用 m1();
匿名函数 更推荐用
var aa=function(){}
aa()就可以调用
3.函数调用和交互相关
注意:在html中链接js时这么写
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="/js/dom操作.js" defer></script><!-- defer是让js操作延时产生 因为程序从上到下走 防止先js而对象还没产生 -->
</head>不要忘了defer 或者也可以把script加在下面 但比较麻烦
onclick单击
ondblclick双击
onmouseenter鼠标放上去
onmouseleave鼠标离开
实现背景的每次单击变化颜色与生成随机数
document.onclick=function(){var bg="";for(var i=0;i<6;i++){bg=bg+Math.round(Math.random()*9);//调用Math函数生成随机数原本是0-1 *9之后生成0-9的随机数 再用round四舍五入取整}document.nody.style.background="#"+bg;//字符串拼接而成不做加法
}4.查找
//document.getElementById 根据id进行查找 查找符合条件的第一个对象
//var obj=document.getElementById("aa")
//document.getElementsByClassName
//根据class值进行查找 查找符合条件的所有对象组成的数组
var arr=document.getElementsByClassName("aa");
for(var j=0;j<arr.length;j++)
{arr[j].onclick=function(){var bg="";for(var i=0;i<6;i++){bg=bg+Math.round(Math.random()*9);}this.style.background="#"+bg;//用this指点到这个标签的时候}
}//document.getElementsByTagName通过元素名字查找 也是符合条件的组成数组
var arr=document.getElementsByTagName("div")
//选择器 括号里边用法和css选择器完全一样 找到符合条件的第一个对象
document.querySelector()
//找的所有 返回数组
document.querySelectorAll()通过关系查找
有Element找的是元素 标签
没有Element找的是兄弟节点可以是文本 元素 注释等任何类型的
找孩子 childNode children
第一个孩子firstChild firstElementChild
最后一个孩子firstChild firstElementChild
找父亲 parentNode parengElemen
找上一个 previousSibling previousElementSibling
找下一个 nextSibling nextElementSibling
5.修改
innerText innerHTML value
innerTEXt=”修改的内容“ innerHTML也会随之变化 所以如果只想修改文本内容选择其中一个就可以
但是如果想加上h3等标签需要用innerHTML
value指比如有一个获取信息的元素 如单行文本框 里边默认值
比如var input=document.querySelector("input")
input.value="修改的内容"
这时候用前两个是不管用的 要用value修改文本框中默认值
改属性
对象.属性=值 自定义属性 getAttribute()获取 setAttribute设置
改样式
对象.style.属性=值 obj.style.cssText="css样式
例如obj.style.cssText="background:red;color:green"
6.添加
创建元素createElement()
例如
var newNode=document.createElement("h1")
newNode.innerText = "新添加的元素"
newNode.style.color = "pink"
newNode.className = "ppp"*/
复制元素 cloneNode() true:全部复制 false只复制外壳
var oldNode = document.getElementById("pp")
var newNode = oldNode.cloneNode(true)
添加元素
appendChild() 默认在最后
insertBefore() 在...之前一个插入
replaceChild() 代替...
7.删除
找父级元素，父级元素调方法进行删除 removeChild()
var obj = document.getElementById("aa")
var p = document.querySelector("p")
obj.removeChild(p)或p.parentElement.removeChild(p)
