python前端第三大技术
JS基础
1.JS代码写在哪
-
写在标签的事件属性中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="p1"我是段落一</p> <script type="text/javascript"> document.getElementById('p1').innerText = 'hello world' </script> <p id="p2">我是段落2</p> </body> </html>效果显示：段落一被修改成了hello world
-
写在script中，script写在html标签中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="p1"我是段落一</p> <p id="p2">我是段落2</p> </body> <script> document.getElementById('p1').innerText = 'hello world' </script> </html>效果显示：
-
将js代码写在外部的js文件中，然后在html里用script标签导入
js部分代码：
document.getElementById('p2').innerText = '你好，世界！'html部分代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="p1">我是段落一</p> <p id="p2">我是段落2</p> </body> <script src="js/01-测试你好世界.js"></script> </html>显示效果：
2.JS DOM操作
- 基本认识
DOM(document objectmode)操作：通过document对象 直接或者间接的操作网页内容
js中的document对象代表网页内容
DOM操作主要内容:获取标签、添加标签、删除标签、操作标签内容、操作标签属性、操作标签样式
- 获取标签
-
直接：
document.getElementById()：获取网页id属性特定值的标签，返回值是标签对象 document.getElementsByClassName()：获取网页class属性特定值的所有标签
document.getElementsByName()：
document.getElementsByTagName()：获取网页中所有指定的标签<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box1"> <p>段落1</p> <a href="">链接1</a> <p id="p1">段落2</p> <span class="c1">span1</span> <a href="" class="c1">链接2</a> </div> <div id="box2"> <input type="text" name="input"> <input type="radio" name="radio">男 <input type="radio" name="radio">女 </div> </body> <script> // 通过id查看 result = document.getElementById('p1') console.log(result) // 获取class的标签,是一个容器 result1 = document.getElementsByClassName('c1') console.log(result1) // 通过标签名获取标签 result = document.getElementsByTagName('p') console.log(result) // 获取所有name属性的标签，比如：input,radio result=document.getElementsByName('radio') console.log(result) </script> </html>在console中如下显示：
-
间接：
获取一个标签的第一 个子标签：标签对象.firstElementChild获取一个标签的最后一个子标签：标签对象.lastElementChild
获取父标签：标签对象.parentElement
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 获取子标签和父标签 --> <div id="box1"> <p>段落1</p> <a href="">链接1</a> <p id="p1">段落2</p> <span class="c1">span1</span> <a href="" class="c1">链接2</a> </div> <div id="box2"> <input type="text" name="input"> <input type="radio" name="radio">男 <input type="radio" name="radio">女 </div> </body> <script type="text/javascript"> // 间接获取：获取子标签：标签对象 var box1 = document.getElementById('box1') // 获取一个标签所有的子标签 result = box1.children console.log(result) // 获取第一个元素 var box1 = document.getElementById('box1') result = box1.firstElementChild result1 = box1.lastElementChild console.log(result) console.log(result1) //获取父标签 var child = document.getElementById('p1') result = child.parentElement console.log(result) </script> </html>
在console中如下显示：
3.JS的创建、添加
- 创建标签
var p1 = document.createElement('p') //创建p1标签
var a1 = document.createElement('a')
var img1 = document.createElement('img')
var input1 = document.createElement('input')
- 添加标签
var box = document.getElementById('box')
box.appendChild(p1)
//从box的第一个元素前插入
box.insertBefore(input1,box.firstElementChild)
显示效果：input被插入到最前面
-
删除标签
<script type="text/javascript"> var p2 = document.getElementById('p2') p2.remove() </script>显示效果：p2被删除
4.操作标签内容
-
修改标签内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="p0">你好</p> <p id="p1">你好</p> </body> <script> var p0 = document.getElementById('p0') var p1 = document.getElementById('p1') p1.innerText = 'hello1' p0.innerHTML = 'hello2' </script> </html>显示效果：p0，p1标签内容被修改
-
操作标签属性
var img1 = document.getElementsByTagName('img')[0] img1.title = 'picture1' //也可以修改链接 var a1 = document.getElementsByTagName('a')[0] a1.href = 'https://www.xxxxx' -
操作标签样式
注意css属性名中有‘-’，在js中‘-’之后的字母大写方式代替
方式一：
var p0 = document.getElementById('p0') p0.style.color = 'pink' p0.style.fontSize = '30px'显示效果：
方式二：
var p1 = document.getElementById('p1') p1.style = 'font-size:30px;color:red;'显示效果：
5.点击按钮操作页面
-
随机色：
r = parseInt(Math.random()*255) g = parseInt(Math.random()*255) b = parseInt(Math.random()*255) p1.style.backgroundColor = `rgb(${r},${g},${b},0.4)` -
生成一个如下的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box"></div>
<input type="text" name="" id="name" style="width: 330px;height: 30px;">
<!-- 直接将结果放在onclick中，点击才发生 -->
<button onclick="fruits()" style="height: 30px;">确定</button>
</body>
<script>
// 调用函数，函数+（）
function fruits(){
var box = document.getElementById('box')
box.style.width = '340px'
var input1 = document.getElementById('name')
// 拿标签内容
var fruitsname = input1.value
input1.value=''
var p1 = document.createElement('p')
p1.style.border = '1px solid rgb(0,0,0)'
r = parseInt(Math.random()*255)
g = parseInt(Math.random()*255)
b = parseInt(Math.random()*255)
p1.style.backgroundColor = `rgb(${r},${g},${b},0.4)`
p1.style.textAlign = 'center'
p1.style.margin='1px'
p1.innerText = fruitsname
p1.style.height = '30px'
var span = document.createElement('span')
span.innerText = 'x'
span.style.fontSize = '20px'
span.style.float = 'right'
span.onclick = 'onclick()'
p1.appendChild(span)
box.appendChild(p1)
}
</script>
</html>
6.练习
产生一个如下页面：点击添加则往大盒子里添加小盒子
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1"></div>
<div >
<button id="span1" οnclick="fangkuai()">添加</button>
<span id="span2" οnclick="">闪烁</span>
</div>
<style>
#div1{
width: 500px;
height: 300px;
border: 1px solid;
overflow: hidden;
}
#span1{
background-color: red;
padding: 5px;
margin: 10px;
position: absolute;
left: 210px;
font-size: 15px;
}
#span2{
border: 2px solid;
background-color: red;
padding: 4px;
margin: 10px;
position: absolute;
left: 270px;
}
</style>
</body>
<script>
function fangkuai(){
var div1 = document.getElementById('div1')
var fangkuai1 = document.createElement('span')
fangkuai1.style.float = 'left'
fangkuai1.style.width = '50px'
fangkuai1.style.height = '100px'
// fangkuai1.style.border = '1px solid'
r = parseInt(Math.random()*255)
g = parseInt(Math.random()*255)
b = parseInt(Math.random()*255)
fangkuai1.style.backgroundColor =`rgb(${r},${g},${b},0.4)`
fangkuai1.style.padding = 0
fangkuai1.style.margin = 0
div1.insertBefore(fangkuai1,div1.firstElementChild)
}
</script>
</html>
86
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
