//声明式
function sayHello(){
console.log('Hello');
}
//eat();
//赋值式
var eat = functon(){
console.log('喜欢吃');
}
预解析 从上往下解析
总结:
声明式的函数预解析时，整个函数将被提升到Script标签内的最上面
赋值时的函数预解析时，将赋值的变量提升到Script标签内的最上面，后面的赋值函数忽略
变量预解析:将声明的变量提升至script标签内的最上面
console.log(a) 融于变量的预解析，故此处打印的是undefinedl
var a=10
console.log(a) 由于上面已经进行赋值，故此处打印的是10。
JavaScvcript作用域
分两种:全局作用域和局部作用域
全局作用域:整个页面只有当页面关闭时，全局作用域才会失效 局部作用域:全局作用域又划分出小范围的作用域，函数内部可以创建局部作用域，目前为止，也只有函数内部可以创建局部变量，全局变量可以在函数内部进行访问，但是函数内部定义的变量不能在函数外进行访问。
var a = '张三';
function rest_1(){
var a = '李四' //变量采取的就近原则l
console.log(a);
function test_2(){
a = '王五';
}
console.log(a);
}
test_1()
console.log(a);
function text_3(){
num = 100;
}
test_3();
console.log(num);//自动转换全局变量DOM对象(文档对象模型)
<div class="item">这是一个DIV</div>
<input type="text" name="" id="uname">
<a href="#" class="item">超链接</a>
<input type="radio" name="sex" id="">男
<input type="radio" name="sex" id="">女
<div>
这是第二个div
</div>// 获取DOM中的节点，使用的是documen对象
// 获取整个html文档
console.log(document.documentElement);
// 获取头部head
console.log(document.head);
// 获取主体body
console.log(document.body);
// 获取元素
var body = document.body;//获取body标签
var div = body.firstElementChild;//获取某个元素中第一个元素
console.log(div);
var div_0 = body.firstChild;
console.log(div.nextElementSibling);//获取相邻兄弟（下一个）
var input = div.nextElementSibling;
console.log(input.previousElementSibling);//获取相邻兄弟(上一个)
// 通过函数来获取元素
// getElementById();通过标签的id属性获取标签
console.log(document.getElementById('uname'));
// 根据标签的class属性值获取一组标签
console.log(document.getElementsByClassName('item'));
// 根据标签的name属性来获取一组标签
console.log(document.getElementsByClassName('item'));
// 根据标签名获取一组标签
console.log(document.getElementsByTagName('div'));//获取标签名的
// 根据选择器名称来获取满足条件的并且是遇到的第一个的标签
console.log(document.querySelector('div'));
// All 获取所有的标签
console.log(document.querySelectorAll('div'));
var divs = document.querySelectorAll('div');
// 通过循环可将一组元素打印输出
for(var i = 0;i<divs.length;i++){
console.log(divs[i]);
}
//直接获取标签id名
console.log(document.querySelector('#uname'));通过获取对象来实现增删改节点的效果:
先写html部分:
css中利用list-style:none;去除无序列表的黑点，设置宽高
<input type="button" value='添加节点' id="btnAdd" onclick="Add()">
<input type="button" value='删除节点' id="btnDel" onclick="Del()">
<input type="button" value='修改节点' id="butUpDate" onclick="upDate()">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>增加节点:appendChild();
function Add(){
//添加节点:appendChild
//获取ul标签
var ul = docunment.querySelector('ul');
//获取要添加的元素
var li = document.createElement('li');
li.innerHTML = '新添加的标签';
ul.appendChild(li);
}效果图:
删除节点:removeChild();
function Del(){
// 删除节点:removeChild();
// 首先获取要删除的标签,然后再调用removeChild();
var ul = document.querySelector('ul');
var li = ul.firstElementChild;
ul.removeChild(li);
// remove删除元素本身以及所有元素
// ul.remove();//删除所有
}效果图:
删除前:
删除后： 
修改节点:replaceChild();
function upDate(){
var ul = document.querySelector('ul');
var li = ul.firstElementChild;
//声明修改后的内容
li.innerHTML = "小七";
ul.replaceChild(ul,li);
}修改后的效果图:
节点属性与元素操作:
声明html中的内容:
<input type="text" value="文本框" id="user">
<div id="one" stuname="张三" class="one_0"></div>
<div id="two" data-index="1" data-xiaoqi="男"></div>首先获取标签的属性
第一种 方式:元素名.属性
第一步:先找到标签，第二步获取标签的属性
var input = document.getElementById('user');
console.log(input.value,input.type);
// 更改属性值
input.value = '用户名'自定义属性:
var one = document.getElementById('one');
//getAttribute()获取标签的属性值(包括一些自定义属性)
console.log(one.getAttribute('stuname'));
console.log(one.getAttribute('class'));设置属性:
one.setAttribute('stuid','1001');
// attributes 获取的是标签的自带的属性以及自定义属性
console.log(one.attributes);
console.log(one.attributes['id']);自定义属性data-***：
dataset 只能获取到data-***的一些属性;
console.log(two.dataset);
console.log(two.dataset);
console.log(two.dataset['xiaoqi']);总结:
最后通过一个按钮的小案例来熟悉这些内容,要求，当点击全选的时候，下面水果全部选择，当下面水果没有全选的时候上面的全选按钮不选择。
html:
<p>
<input type="checkbox" id="selectAll">全选/全不选
</p>
<ul class="shop">
<li><input type="checkbox">苹果</li>
<li><input type="checkbox">西瓜</li>
<li><input type="checkbox">榴莲</li>
<li><input type="checkbox">香蕉</li>
<li><input type="checkbox">橙子</li>
</ul>首先做的是点击全选按钮的时候，下面水果按钮也选择：
思路:先获取全选按钮的ID；
再获取ul里面的li，然后使用for循环遍历li；
//获取全选按钮
var selectAll = document.querySelector('#selectAll');
// 获取li里面的input标签
var inputAll = document.querySelectorAll('.shop input');
selectAll.onclick = function(){
for(var i=0;i<inputAll.length;i++){
inputAll[i].checked = selectAll.checked;
}
}然后第二步:当下面没有全部选中的时候，全选按钮也不全选
思路:
1.首先给每个li里面input添加一个单击事件
2.给每个input绑定单击事件,设置一个存储点击次数的变量count
3.循环点击次数,判断是否点击,点击count++
4.判断点击的次数等于li长度进行全选,不等于li的个数不全选
// 给每一个水果选项绑定单击事件,使用for循环遍历
for(var i = 0;i<inputAll.length;i++){
inputAll[i].onclick = function(){
//声明一个存储点击次数的变量
var count = 0;
for(var m = 0;m<inputAll.length;m++){
if(inputAll[m].checked==true){
count++
}
}
if(count == inputAll.length){
selectAll.checked = true;
}else{
selectAll.checked =false;
}
}
}