一、 变量与属性的区别
1.var a = 123;//此为变量
2.var object = document.getElementById('box'); //此时object 为节点对象（node）
3.object.abc = 888888; //为object自定义了abc属性，且此属性的值888888
4.object.abc； //888888 对象.属性名 可以获取属性值
属性分节点属性 和js属性
节点属性 :元素自带属性
js属性:js中自定义的属性
当js属性为合法节点属性的时候，可以修改节点属性的值
1.
2.var object.id = 'box';
二、自定义属性/自定义标签属性
1.自定义属性
function fn(){};
let obj = {};
let arr = [];
fn.chuxin = 123;
console.log(fn.chuxin);
访问一个对象不存在的属性，那么就相当于这个对象默认值有一个
undefined.操作符就是来获取一个对象的属性的
也可以使用 [] 里面不加 "" 获取的就是一个变量，加了获取的就是它的属性
function fn(){};
let obj = {
a : 1,
b : 2
};
let arr = [];
let a = "b";
console.log(obj[a]);
- 数值通过
[]来访问属性的时候，[]里面加不加字符串都是表示拿到它的属性；
// 还是拿到它的属性
console.log(arr["0"]);
寄存在标签中的属性，叫做自定义标签属性
寄存在JS环境中的属性，叫做自定义属性
获取自定义属性：直接通过 . 来获取
<div id="box" cx="123"></div>
<script>
let cx = "132";
console.log(cx); // 获取到的是 132
</script>
获取自定义标签属性：通过 api . getAttribute("自定义属性名");
<div id="box" cx="123"></div>
<script>
cx = "456";
console.log( box.getAttribute("cx") ); // 获取到的是 123
</script>
设置自定义标签属性 ：通过 api . setAttribute("自定义属性名","值");
<div id="box" cx="123"></div>
<script>
cx="456";
box.setAttribute("cx", "我爱你");
</script>
删除自定义标签属性：api . removeAttribute("自定义属性名");
<div id="box" cx="123"></div>
<script>
cx="456";
box.removeAttribute("cx");
</script>
function fn(a, b) {
let res = a + b;
return res;
}
let num = fn(1,2);
console.log(num);
函数执行结束，默认返回undefined;
函数里只能有一个return，遇到return就停止运行。并且把return后面的值返回出来
自定义获取ID方式
<div id="box"></div>
<script>
let a = getId("box");
function getId(str){
return document.getElementById(str);
}
a.innerHTML = "132";
// 通过设置一个函数 实参 box
// 调用这个函数，给它传一个形参
// 返回值，就是找到这个Id本身
</script>
三、函数/对象方法
对象可以
自定义属性
2.对象的属性，如果赋值的是一个函数function(){}，我们称之为对象的方法
1.var object = document.getElementById('box'); //此时object 为节点对象（nodelist）
2.object.abc =function(){}; //为object自定义了方法
四、事件属性
事件:是当事人，在特定的时间在特定的地点发生了 某事
1、js中的事件: 元素.事件属性 = 事件函数
1. var object = document.getElementById('box');
2. object.onclick = function(){}
function(){}; 是一个固定的写法，在这个例子中，它被称之为事件函数。
1.var object = document.getElementById('box');
2.object.onclick = function(){}//
我们也可以用有名函数
1.var object = document.getElementById('box');
2.object.onclick = fn;//
3.function fn(){}
4.
2、javascript中的事件[ 鼠标事件, 键盘事件, 表单事件, 系统事件]
onclick —————— 点击（单击）事件
onmouseover ———– 鼠标滑入事件（会冒泡）
onmouseout—————鼠标离开事件（会冒泡）
onmouseenter————鼠标滑入事件（不会冒泡，区别后面讲）
onmouseleave————鼠标离开事件（不会冒泡，区别后面讲）
ondblclick ——————- 双击（单击）事件
更多参考http://www.w3school.com.cn/tags/html_ref_eventattributes.asp
