发表于： 2023-01-19 20:16:01
0 293
今天学习的js知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<ul>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
</ul>
<ol>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ol>
<script>
//1、获取了四个div的值
console.log($('div'));
//2、 给四个div设置背景颜色为粉色 jquery对象不能使用style
$('div').css('background','pink');
//3、隐式迭代就是把匹配的所有元素进行遍历循环，给每一个元素添加css这个方法
// $('ul li').css('color', 'red');
// :first 获取第一个元素 :eq(索引号index) 获取到索引号的元素 index从0开始
$(function() {
$('ol li:first').css('color','blue');
$('ol li:eq(2)').css('color','red');
$('ul li:odd').css('color','red'); // 所有索引号为奇数的元素
$('ul li:even').css('color','blue'); // 所有索引号为偶数的元素
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筛选方法</title>
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
</head>
<body>
<!-- <div class="grandfather">-->
<!-- <div class="father">-->
<!-- <div son>儿子</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="nav">-->
<!-- <p>我是屁</p>-->
<!-- <div>-->
<!-- <p>我是p</p>-->
<!-- </div>-->
<!-- </div>-->
<ol>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li class="item">我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
</ol>
<ul>
<li>我是ul 的li</li>
<li>我是ul 的li</li>
<li>我是ul 的li</li>
<li>我是ul 的li</li>
<li>我是ul 的li</li>
<li>我是ul 的li</li>
</ul>
<div class="current">我有current</div>
<div>我也有current</div>
<script>
// 注意 方法都是 带括号
$(function() {
//1、父 parent() 返回的是 最近一级的父级元素
console.log($(".nav").parent());
//2、子
// (1) 亲儿子 children() 子代选择器 类似于 ul>li
// $(".nav").children("p").css("color","red");
// (2) 可以选所有的子代 find() 类似于 后代选择器
$(".nav").find("p").css("color","red");
//3、兄
//(1)兄弟元素 siblings 除了自身元素之外的亲兄弟
$("ol .item").siblings("li").css("color","red");
// (2) nextAll 查询当前之后的 所有兄弟元素
// $("ol .item").nextAll("li").css("color","red");
// (3) prevAll 查询 当前之前的 所有兄弟元素
// $("ol .item").prevAll("li").css("color","blue");
//4、第n个元素
var index = 3;
//(1) 我们可以利用选择器的方式选择
$("ul li:eq(2)").css("color","red");
//(2) 我们可以利用选择方法的方式选择 更推荐这种写法
// $("ul li").eq(3).css("color","blue");
$("ul li").eq(index).css("color","blue");
//5、 判断是否有某个类名
console.log($("div:first").hasClass("current")); //true
console.log($("div:last").hasClass("current")); //false
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery下拉菜单练习</title>
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style-type: none;
text-decoration:none;
}
a {
margin: 0 10px;
color: #333333;
}
.nav {
display: flex;
width: 400px;
height: 50%;
margin: 100px auto;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">@我</a>
</li>
</ul>
</li>
</ul>
<script>
$(function() {
//鼠标经过
$(".nav>li").mouseover(function() {
// $(this) jQuery 当前元素 this不要加引号
// show() 是显示元素 hide() 是隐藏元素
$(this).children('ul').show();
})
//鼠标离开
$(".nav>li").mouseout(function() {
$(this).children('ul').hide();
})
})
</script>
</body>
</html>
返回列表
评论