函数的预解析
声明函数预解析时候整个页面都被提升到scrpit的标签上面
赋值式的预解析函数整个页面都被提
升到scrpit的标签上面,后面的赋值函数忽略
// scyHello()
// 声明
function sayHello(){
console.log("hello")
}
// 预解析
// 变量预解析,将声明的变量提升至scrpit标签的最上边
console.log(a) //由于变量的预解析,故此处打印的是undefind
var a = 10
console.log(a) //由于上面已经进行赋值,故此处打印的是10
var b=10
console.log(b)
// b()
function b(){
console.log("aa")
}
console.log(b)
// b()
var a="张三"
function test(){
// 用来计算两个数的和
var result=10+20
// console.log(result)
console.log(a)
}
test()
// console.log(test())
// console.log(result)
作用域
全局作用域:整个页面,只有页面关闭时,全局作用域才会失效
局部作用域:全局作用域有划分出小范围的作用域,函数内部可以创建局部作用域,到目前为止,也只有函数内部可以创建局部变量
全局变量可以在函数内部进行访问,但是函数内部定义的变量不能在函数外部进行访问
function test_1(){
var c = "李四"
// console.log(a)
function test_2(){
c="王五"
}
// console.log(a)
}
test_1()
console.log(c)
function test_3(){
num=100
}
test_3()
console.log(num) //自动转换成全局变量
DOM
1.什么是dom
1)DOM 英文全称“Document Object Model”,译为“文档对象模型”。
2)DOM 是一个与平台和编程语言无关的接口,通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式。
2. DOM 的组成
1)核心DOM - 针对任何结构化文档的标准模型。
2)XML DOM - 针对 XML 文档的标准模型。
3)HTML DOM - 针对 HTML 文档的标准模型。
3.节点 Node
文档中的每一个部分都是节点,包括document 元素 属性 文本...
4.节点分类
document 文档节点
elementNode 元素节点
attributeNode 属性节点
textNode 文本节点
commentNode 注释节点
5.节点属性
nodeName 节点名 元素节点通过nodeName可以获取标签名
nodeValue 节点值
nodeType 节点类型 值是数字: document(9) element(1) attribute(2) text(3) comment(8)
<div class="item">
这是一个div
<span>这是一个span标签</span>
</div>
<input type="text" name="" id="uname">
<a class="item" href="#">超链接</a>
<input type="radio" name="sex" id="">男
<input type="radio" name="sex" id="">女
// 整个html文档
console.log(document.documentElement)
// 获取头部head
console.log(document.head)
// 获取主体body
console.log(document.body)
// 获取
// 获取到了body的标签
var body = document.body
//获取到body中的第一个元素
var div = body.firstElementChild
console.log(div)
var div_0=body.firstChild
console.log(div_0)
var lastEle =body.lastElementChild
console.log(lastEle)
//获取的是相邻兄弟(下一个)
console.log(div.nextElementSibling)
var input = div.nextElementSibling
//获取的是相邻兄弟(下一个)
console.log(input.previousElementSibling)
//通过函数来获取元素
// getElementById():通过标签的id的值获取到某个标签
console.log(document.getElementById("uname"))
// getElementByClassName()根据标签的class属性的值来获取一组标签
console.log(document.getElementsByClassName("item"))
// getElementsByName() 根据标签的name属性的值来获取一组标签
console.log(document.getElementsByName("sex"))
// getElementByTagName() 根据标签名来获取一组标签
console.log(document.getElementsByTagName(div))
//querySelector():根据选择器名称来获取满足条件的并且是遇到的第一个标签
console.log(document.querySelector("div"))
console.log(document.querySelectorAll("div"))
var divs = document.querySelectorAll("div")
//通过循环可将一组元素打印输出
for(var i=0;i<divs.length;i++){
console.log(divs)
}
console.log(document.querySelector("#name"))
console.log(document.querySelector(".item"))
console.log(document.querySelectorAll(".item"))
// 通过标签的id值来获取标签
console.log(uname)
节点案例
<input type="button" value="添加" id="add" onclick="add()">
<input type="button" value="删除" id="del" onclick="del()">
<input type="button" value="修改" id="update" onclick="update()">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<script>
function add(){
var ul = document.querySelector("ul") //获取ul
var li = document.createElement("li") //创建节点
li.innerHTML="新的li"
ul.appendChild(li)
}
function del(){
var ul = document.querySelector("ul") //获取ul
var li = ul.lastElementChild //选择要删除的是最后一个开始
// ul.removeChild(li) //删除
ul.remove() //删除所有子元素本身以及所有子元素
}
function update(){
var ul = document.querySelector("ul") //获取ul
var li = ul.lastElementChild
li.innerHTML="<a href=#>dd</a>"
}
</script>
效果:
标签属性
<body>
<input type="text" value="文本框" id="user">
<div id="div_1" class="div_1" stuname="张三">第一个div</div>
<div id="div_2" data-index="1" data-xiaoming="男"></div>
<script>
// 获取标签的属性(自带的)
// 第一种方式:元素名.属性名
// 第一步,先找到标签,第二步,获取标签的属性
var input=document.getElementById("user")
console.log(input.value)
// 更改数值
input.value="admin"
// 自定义属性
var div_1 = document.getElementById("div_1")
// getAttribute()获取标签的属性的值(包括一些自定义的值)
console.log(div_1.getAttribute)
console.log(div_1.getAttribute("stuname"))
console.log(div_1.getAttribute("class"))
div_1.setAttribute("stuid","1001")
//attributes:获取的是标签的自带的属性以及自定属性
console.log(div_1.attributes)
console.log(div_1.attributes["id"])
// 自定义属性:data-***
console.log(div_2.dataset)
console.log(div_2.dataset.index)
</script>
</body>
案例密码框的显示隐藏
<body>
<input type="password" name="" id="pwd">
<input type="button" name="" id="btn" value="眼睛" onclick="test()">
<script>
//方法1
var pwd = document.getElementById("pwd")
var btn = document.getElementById("btn")
btn.onclick = function(){
if (pwd.type=="password") {
pwd.type="text"
} else {
pwd.type="password"
}
}
//方法2
// function test(){
// if (pwd.type=="password") {
// pwd.type="text"
// } else {
// pwd.type="password"
// }
// }
</script>
</body>
input框全选
<body>
<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>
<script>
var selectAll = document.querySelector("#selectAll")
var inputAll = document.querySelectorAll(".shop input")
selectAll.onclick=function(){
for(var i = 0; i<inputAll.length;i++){
inputAll[i].checked=selectAll.checked
}
}
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
}
}
}
</script>
</body>