JS学习第4天
一、JS操作标签属性、样式的修改
<style>
#name{
color: red;
}
.bold{
font-weight: bold;
}
.green{
color: greenyellow;
}
</style>
</head>
<body>
<!-- title 属性 当鼠标悬停在标签上时所提示的信息 -->
<h1 id="name" title="多喝热水">多喝热水</h1>
<p web="55" class="bold" id="first">我是p标签</p>
<script>
// 查找标签元素
var h1 = document.getElementById("name")
// html标签的预定义属性称之为标准属性,都可以通过对象.属性名直接访问
console.log(h1.title)
h1.title = "要你管？"
// 通过js修改标签的样式
// 把标签的style属性值设置为一个字符串,h1在给style属性赋值之前,会将字符串解析成一个样式对象,然后在赋值给style属性
// h1.style = "color: blue;font-size:25px;"
// 对于style属性,比较特殊,因为值是一个字符串,如果修改标签样式使用style属性直接赋值,会导致之前设置的样式被覆盖
// 标签.style属性.样式名 = 样式值
h1.style.color = "blue"
// css样式中font-size js不能使用-这种特殊符号连接
h1.style.fontSize = "26px"
h1.style.backgroundColor = "black"
// ------------------------------------------\
// 标签class属性可以有多个值
var p = document.getElementById("first")
// className 标签的class属性值
console.log(p.className)
// 直接将标签的class属性值覆盖
// p.className = "bold green"
// classList 包含class值的一个对象,提供修改class值的方法
console.log(p.classList)
// classList.add() 添加class值
p.classList.add("green")
// classList.remove()删除class值
p.classList.remove("bold")
// classList.toggle() 切换一个class值,有则删除,无则添加
p.classList.toggle("bold")
// contains()判断标签class中是否包含某个值,返回值是布尔类型,包含true 不包含false
console.log(p.classList.contains("xxx"))
// 标签的自定义属性,不能通过标签对象.属性名的方式进行访问
console.log(p.web)
// getAttribute() 方法,获取标签的自定义属性,也可以用于获取标准属性
var value = p.getAttribute("web")
console.log(value)
// setAttribute() 方法, 用于设置或者添加一个自定义属性
// p.setAttribute("state", "readonly")
// console.log(p.getAttribute("state"))
// hasAttribute()判断标签是否拥有某个属性
console.log(p.hasAttribute("qwer"))
// 删除标签某个属性
p.removeAttribute("web")
// 这种写法也可以添加属性,这种属性叫做对象
// p.state = 'write\read'
// 这种添加的属性,只能通过对象.属性名进行获取
// console.log(p.state)
</script>
二、JS操作属性样式的小练习
<style>
#box{
width: 100px;
height: 100px;
background-color: red;
/* opacity: 1; */
/* display: none; 脱离文档流，原来的位置在网页中不存在*/
/* visibility: hidden; 不脱离文档里，原来的为还在 */
/* opacity: 0; 不脱离文档里，原来的为还在 */
}
.hide{
opacity: 0;
}
</style>
</head>
<body>
<div id="box"></div>
<button onclick="hideOrShow()">点击</button>
<script>
var i = 0
function hideOrShow(){
// 找到标签
var box = document.getElementById("box")
// console.log(box.style.opacity)
// 判断样式值
// if (box.style.opacity == "" || box.style.opacity == 1){
//
// box.style.opacity = 0
// }else{
// box.style.opacity = 1
// }
// 通过class值控制样式
box.classList.toggle("hide")
// 判断class中是否包含某个值
// if (box.classList.contains("hide")){
//
// box.classList.remove("hide")
// }else{
// box.classList.add("hide")
// }
// i ++
// if (i%2 == 0){
// box.style.opacity = 1
// }else{
// box.style.opacity = 0
// }
}
</script>
三、JS创建标签
<style>
.item{
color: green;
font-size: 20px;
text-decoration: underline;
}
</style>
</head>
<body>
<h1 id="top">
我是h标签
<span>我是span标签</span>
</h1>
<script>
// document.createElement() 用于创建一个标签对象,参数就是要创建标签的名称,返回的就是创建好的标签对象
var h1 = document.createElement("h1")
// 可以直接对创建出的标签对象进行属性和样式的设置
// 设置标签显示的文本内容 innerText 只负责将内容进行,不会对内容中的标签进行解析
h1.innerText = "标签内<small>容<small>我是通过innerText添加的内容</small>"
// innerHTML 会将内容的标签先进行解析,然后再进行渲染
// h1.innerHTML = "标签内容<small>我是通过innerText添加的内容</small>"
// h1.textContent = "标签内容<small>我是通过innerText添加的内容</small>"
// console.log(document.getElementById("top").innerText)
// 保留文本中回车换行符/空格等特殊符号
// console.log(document.getElementById("top").textContent)
h1.id = "title"
h1.className = "green"
h1.style.color = "green"
// 将标签添加到页面上显示
// document.body 网页中的body标签对象,不需要进行查找
// appendChild() 用于为标签添加一个子标签,参数就是要添加的子标签
document.body.appendChild(h1)
// 创建的新标签
var h2 = document.createElement("h2")
h2.innerText = "我要添加到top之前"
// 找到指定位置的标签
var topP = document.getElementById("top")
console.log(topP)
// insertBefore(新建的标签,目标位置标签) 将一个标签作为子标签加入到另一个子元素之前
document.body.insertBefore(h2, topP)
// ul>li*10
// 先创建外层标签
var ul = document.createElement("ul")
for (var i=0;i<10;i++){
// 创建子标签
var li = document.createElement("li")
li.innerText = "第" + (i+1) + "行"
li.className = "item"
// 将li标签添加到ul标签
ul.appendChild(li)
}
document.body.appendChild(ul)
</script>
四、鼠标移入、移除事件
<style>
div{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
cursor: pointer;
}
</style>
</head>
<body>
<!-- event 事件参数 默认参数 不需要手动传递 -->
<div onclick="btnClick(event)" onmouseenter="enter(event)" onmouseleave="leave(event)"></div>
<div id="second"></div>
<script>
function btnClick(e){
// event 参数 指鼠标事件对象
// event.target 触发事件的标签对象
console.log(event.target)
console.log("我被点了！")
console.log(e)
}
function enter(e){
console.log("来了，老弟！")
console.log(e)
// e.target 就是触发事件的div标签
e.target.style.backgroundColor = 'blue'
}
function leave(e){
console.log("走了!")
e.target.style.backgroundColor = "red"
}
// 通过id找到标签
var btn2 = document.getElementById("second")
// 通过js给标签对象添加事件
// 标签对象.属性名 = 匿名函数
btn2.onclick = function(e){
console.log("通过js代码添加的事件")
console.log(e)
}
btn2.onmouseenter = function(e){
}
btn2.onmouseleave = function(e){
}
</script>
五、总结练习
<style>
.nav{
width: 1000px;
height: 44px;
margin: 0 auto;
background-color: lightgrey;
display: flex;
justify-content: space-around;
align-items: center;
}
.nav>section{
width: 200px;
height: 44px;
text-align: center;
line-height: 44px;
background-color: orange;
}
.content {
width: 1000px;
height: 200px;
background-color: lightcyan;
margin: 0 auto;
display: flex;
justify-content: space-around;
}
</style>
</head>
<body>
<nav class="nav">
</nav>
<div class="content">
</div>
<script>
var originData = [
{
"name": "web55期",
"students": [
{
"name": "张三",
"age": 22
},
{
"name": "李四",
"age": 23
},
{
"name": "王五",
"age": 25
}
]
},
{
"name": "web56期",
"students": [
{
"name": "小明",
"age": 22
},
{
"name": "小李",
"age": 23
},
{
"name": "小红",
"age": 25
}
]
},
{
"name": "web57期",
"students": [
{
"name": "大黄",
"age": 22
},
{
"name": "大黑",
"age": 23
},
{
"name": "大绿",
"age": 25
}
]
}
]
// 遍历数据,动态创建标签进行加载
for (var idx in originData){
// idx 根据索引取出数据
var classInfo = originData[idx]
// 创建导航连接标签
var section = document.createElement("section")
section.innerText = classInfo.name
// 给创建的标签对象添加属性,记录当前是第几个section,目的为了在事件找到标签对应的数据的索引
section.index = idx
// 绑定鼠标进入事件
section.onmouseenter = function(e){
// 先清空之前显示的内容
document.querySelector(".content").innerHTML = ""
// 如何找到进入的标签对应的数据
// 根据section标签对象记录的索引,取出索引对应的数据
var data = originData[e.target.index]
// 遍历班级数据中的students学员数据
for(var s of data.students){
// 创建div
var div = document.createElement("div")
// 创建h1显示学员姓名
var h1 = document.createElement("h1")
h1.innerText = s.name
// 添加到div中
div.appendChild(h1)
var p = document.createElement("p")
p.innerText = s.age
div.appendChild(p)
// 将div添加到content中
document.querySelector(".content").appendChild(div)
}
}
// 将section加入nav标签中
document.querySelector(".nav").appendChild(section)
}
/*
1.循环遍历外层数组，获取数据索引
2.根据索引取出对应的数据
3.创建导航中的section标签，渲染内容，给section添加属性记录标签对应的数据索引
4.给section添加事件
4.1 鼠标事件中，先清除content之前显示的内容
4.2 根据e.target记录的index属性值，获取标签对应的数据
4.3 循环遍历students小数组
4.4 创建div、h1、p标签 渲染数据
4.5 添加到content中
5.将section加入到nav中
*/
</script>
965
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
