3.表单选择器
$(':input')
input/select/textarea/button
input标签的type属性的选择器
：text
:password
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jQuery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
width: 80vw;
margin: 0 auto;
background-color: #00f;
display: flex;
justify-content: space-around;
align-items: center;
}
.details {
display: none;
}
.pActive {
color: #fff;
}
.item>.divActive {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<!-- 标题 -->
<p>新闻</p>
<div class="details">这是新闻主体</div>
</div>
<div class="item">
<!-- 标题 -->
<p>天气</p>
<div class="details">这是天气主体</div>
</div>
<div class="item">
<!-- 标题 -->
<p>关于</p>
<div class="details">这是关于主体</div>
</div>
</div>
<script>
// 获取原生对象
var p = document.querySelectorAll('p');
var container = document.querySelector('.container');
// console.log(p);
// 给container添加鼠标事件
container.addEventListener('mouseover', function (e) {
// console.dir(e.target.tagName);
// 先确定鼠标是在p标签上
if (e.target.tagName == 'P') {
// console.log(1111);
// 给p标签添加类名
$(e.target).addClass('pActive');
// 切换---不能完全实现
// $(e.target).toggleClass('pActive');
// p标签的同级元素添加---下一个节点
// console.log(e.target.nextElementSibling);
// console.dir(e.target);
// $(e.target.nextElementSibling).addClass('divActive');
$(e.target.nextElementSibling).css('display', 'block');
// console.log(e.target.nextElementSibling);
}
});
container.addEventListener('mouseout', function (e) {
// console.dir(e.target.tagName);
// 先确定鼠标是在p标签上
if (e.target.tagName == 'P') {
// console.log(1111);
// 给p标签添加类名
$(e.target).removeClass('pActive');
// 切换---不能完全实现
// $(e.target).toggleClass('pActive');
// p标签的同级元素添加---下一个节点
// console.log(e.target.nextElementSibling);
// console.dir(e.target);
// $(e.target.nextElementSibling).addClass('divActive');
$(e.target.nextElementSibling).css('display', 'none');
// console.log(e.target.nextElementSibling);
}
});
</script>
</body>
</html>
|
