上节课复习

今日内容：
1、作用域
变量提升与函数提升
2、BOM操作=》控制浏览器
3、DOM操作=> 控制文档
4、js练习题

5、jquery

01.补充

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>// var arr=[]// for (var i=0;i<=4;i++) {//     function f() {//         console.log(i)//     }//     arr.push(f)// }// 闭包函数// var arr=[]// for (var i=0;i<=4;i++) {//     function outter(x){//         function f() {//             console.log(x)//         }//         return f//     }//     var f=outter(i)//     arr.push(f)// }// var arr=[]// for (var i=0;i<=4;i++) {//     function outter(x){//         function f() {//             console.log(x)//         }//         return f//     }//     var f=outter(i)//     arr.push(f)// }var arr=[]for (let i=0;i<=4;i++) {function f() {console.log(i)}arr.push(f)}
</script>
</body>
</html>

02.变量提升与函数提升

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>// 示例1：变量提升// var a// console.log(a)// var a=111;// a=111// console.log(a)// 示例2:// var x=111;// function f() {//     console.log("---->",x)//     var x=222//     console.log("====>",x)// }// f()// 示例3:// var x=111;// function f() {//     console.log("---->",x)//     x=222//     console.log("====>",x)// }// f()// var a=111// if (true) {//     console.log(a)  // 111//     var a=222//     console.log(a)  // 222// }// console.log(a) // 222console.log(f)f()function f() {console.log("fff")}console.log(f)
</script>
</body>
</html>

02.py

# l=[]
# for i in range(5):
#     def outter(x):
#         def f():
#             print(x)
#         return f
#     f=outter(i)
#     l.append(f)
#
# # print(l)
# l[0]()
# l[1]()
# l[2]()
# l[3]()x=111
def func():print(x)x = 222func()

03.BOM操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 200px;height: 200px;background-color: red;}</style>
</head>
<body>
<div class="box">我是div,点我</div>
<script>// document.getElementsByClassName("box")[0].οnclick=function () {//     location.href="http://www.baidu.com"// }// alert(123)// var res=confirm("你确定删库吗?")// console.log(res)// var username=prompt("请输入用户名: ")// var password=prompt("请输入密码: ")// console.log(username,password)// var win=open("http://www.baidu.com","_blanck","width=200,height=200")// win.close()// setTimeout(function () {// location.href="http://www.baidu.com"// location.reload()// console.log(123)// },3000)// setInterval(function () {// location.href="http://www.baidu.com"// location.reload()// console.log(123)// },3000)// var s1=setTimeout(function () {//     alert(123)// },3000)// clearTimeout(s1)var s2=setInterval(function () {alert(123)},2000)clearInterval(s2)
</script>
</body>
</html>

04.DOM查找

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script></script>
</head>
<body>
<div class="box">111</div>
<div class="box">2222</div>
<div id="btn">aaaa<p>111</p>bbb<p>2222</p>ccc
</div>
aaaaaaaaaaaaaaa
<div name="xxx"></div>
<input type="text" name="xxx">
<script>// var box3=document.getElementById("btn")// var box=document.getElementsByClassName("box")// var box=document.getElementsByTagName('div')// var box=document.getElementsByName("xxx")// console.log(box.length)// console.log(box[1])// var res1=document.getElementById("btn").childNodes// var res2=document.getElementById("btn").children// var res3=document.getElementById("btn").parentNode// var res4=document.getElementById("btn").nextSibling// var res5=document.getElementById("btn").nextElementSibling// var res6=document.getElementById("btn").previousElementSibling// var res7=document.getElementById("btn").firstElementChild// var res7=document.getElementById("btn").firstChild// var res7=document.getElementById("btn").lastElementChild// var res7=document.getElementById("btn").lastChild// console.log(res7)</script>
</body>
</html>

05.创建、删除、替换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 200px;height: 200px;border: 1px solid red;}</style>
</head>
<body><div class="box"><p>1111</p><p>2222</p><p>333</p><p>14444</p>
</div><script>// 创建元素var oDiv=document.createElement("div")oDiv.style.width="80px"oDiv.style.height="80px"oDiv.style.backgroundColor="red"// 末尾添加子元素// var box=document.getElementsByClassName("box")[0]// box.appendChild(oDiv)// 插入子元素// box.insertBefore(新节点,某个节点)// var p3=document.getElementsByTagName("p")[2]// console.log(p3)// box.insertBefore(oDiv,p3)// 删除子元素// var box=document.getElementsByClassName("box")[0]// var p3=document.getElementsByTagName("p")[2]//// box.removeChild(p3)// 替换子元素// box.replaceChild(新节点,某个节点)var box=document.getElementsByClassName("box")[0]var p3=document.getElementsByTagName("p")[2]box.replaceChild(oDiv,p3)</script>
</body>
</html>

06.修改元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 200px;height: 200px;border: 1px solid red;}</style>
</head>
<body><div class="box" name="123213123" style="background-color: pink"><div class="box2"></div><p>333333</p>
</div><img src="http://www.xxx.com/1.png" alt=""><p id="ppp" name="new attribute">4444444</p><!--<input type="text">-->
<script>var box=document.getElementsByClassName("box")[0]// box.innerText="哈哈哈"// box.innerHTML="<p>1111</p>"// box.innerText="<p>哈哈哈哈啊</p>"// var res=box.getAttribute("name")// var res=box.setAttribute("x","11111")// box.removeAttribute("class")// console.log(res)// box.setAttribute("style","background-color: red;width:100px")// box.style.fontSize="50px"// box.style.backgroundColor="red"// var img = document.getElementsByTagName('img')[0]// console.log( img.getAttribute("src"))// console.log(img.src)// var p=document.getElementById("ppp")// alert(p.innerText)// var inp = document.getElementsByTagName('input')[0]// alert(inp.getAttribute("value"))// alert(inp.value)// var p=document.getElementById("ppp")// alert(ppp.name)</script>
</body>
</html>

07.类属性操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 200px;height: 200px;border: 1px solid red;}.box {background-color: red;}.box3 {width: 300px;height: 300px;}</style>
</head>
<body>
<div>11111</div>
<hr>
<div>2222</div>
<hr>
<div class="box22222">3333</div>
<script>// var arr=document.getElementsByTagName('div')// for (var i=0;i<arr.length;i++){//     arr[i].classList.add("box")// }// var oDiv=document.getElementsByClassName("box3")[0]// oDiv.classList.remove('box3')// var oDiv=document.getElementsByClassName("box3")[0]// alert(oDiv.classList.contains("box3"))// var oDiv=document.getElementsByTagName("div")[2]// oDiv.classList.toggle("box3")
</script></body>
</html>

test.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 200px;height: 200px;border: 1px solid red;}</style><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script><script>// window.οnlοad=function () {//     document.getElementsByClassName("box")[0].style.backgroundColor="red";// }// window.οnlοad=function () {// document.getElementsByClassName("box")[0].style.fontSize="50px";// }jQuery(document).ready(function () {$(".box").css("background-color","green")})$(function () {})</script>
</head>
<body>
<div class="box" id="xxx">1111</div>
<div class="box" >1111</div>
<div class="box" >1111</div>
<div class="box" >1111</div>
<script>$(".box").css("background-color","red");
</script>
</body>
</html>

day57 闭包函数函数提升 BOM操作 js选择器替换元素类属性操作相关推荐

js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别，常用的元素的属性操作，仿电脑系统时间问好，表单元素的属性操作，案例：仿京东显示隐藏密码，样式属性操作
文章目录操作元素改变元素内容有两种方式: interText 和 innerHTML的区别常用的元素的属性操作案例:仿电脑系统时间问好表单元素的属性操作案例:仿京东显示隐藏密码样式属性操 ...
【JavaScript-事件②】表单元素的属性操作，密码显示隐藏的实现
目录前言 1.据时间事件改变状态 2.表单元素的属性操作 3.实现密码显示隐藏 4.循环精灵图前言阅读使人充实,会谈使人敏捷,写作使人精确. ...
js选择器获取元素的value值，如何判断为空
js选择器获取元素的value值,如何判断为空获取复选框有没有选中值为2的选项,判断是否为空, 可以直接与undefined进行比对,也可以使用typeof与变量类型进行比对 var month = ...
js修改伪元素的属性、styleSheets获取样式表，Failed to read the 'cssRules' property from 'CSSStyleSheet' Cannot acces
登录验证中的判断逻辑 1.提示输入用户,输入8 - 16位密码2.检验输入用户名和密码是否正确用户名不允许空格,任何字符数字都行,不允许为空密码8-16位,不允许空格 ,小于8位给出提示密码必须 ...
1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画...
这周的学习让我初步了解到JQuery作为js库的封装的伟大性.Write less Do more 才是我们真正应该做到的! 1.jQuery基础语法 · 链式编程 $("#div1&quo ...
jQuery操作标签--样式、文本、属性操作, 文档处理
1.样式 2.文本 3.属性操作全选,反选效果 4.文档处理操作标签一.样式操作样式类: addClass(); // 添加指定的css类名removeClass(); //移除指定的css类 ...
JS如何替换元素内容
前言我们网页中元素的内容有的是静态的,有的是动态的,特别是在一些网页交互的网页特效里,应用比较多,如何简单的替换元素的内容 01 原生JS实现在原生js中主要通过DOM提供的属性去修改的,遵循js ...
js动态给元素添加属性
最终效果: 具体代码: <!DOCTYPE html> <html lang="zh"> <head><meta charset=&qu ...
在线拖拽html,html5拖曳操作 HTML5实现网页元素的拖放操作
HTML5之前,要实现网页元素的拖放操作,需要依靠mousedown.mousemove.mouseup等API,通过大量的JS代码来实现:HTML5中引入了直接支持拖放操作的API,大大简化了网页元 ...

day57 闭包函数函数提升 BOM操作 js选择器替换元素类属性操作

01.补充

02.变量提升与函数提升

02.py

03.BOM操作

04.DOM查找

05.创建、删除、替换

06.修改元素

07.类属性操作

test.html

day57 闭包函数函数提升 BOM操作 js选择器替换元素类属性操作相关推荐

最新文章

热门文章

day57 闭包函数 函数提升 BOM操作 js选择器 替换元素 类属性操作

01.补充

02.变量提升与函数提升

02.py

03.BOM操作

04.DOM查找

05.创建、删除、替换

06.修改元素

07.类属性操作

test.html

day57 闭包函数 函数提升 BOM操作 js选择器 替换元素 类属性操作相关推荐

最新文章

热门文章

day57 闭包函数函数提升 BOM操作 js选择器替换元素类属性操作

day57 闭包函数函数提升 BOM操作 js选择器替换元素类属性操作相关推荐