发表于： 2023-03-24 20:53:55
0 234
今天学习的jquery知识点：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
display: none;
}
</style>
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
</head>
<body>
<!-- <button>显示</button>-->
<!-- <button>隐藏</button>-->
<!-- <button>切换</button>-->
<!-- <div class="box">这是一个盒子</div>-->
<button>淡入</button>
<button>淡出</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<div class="box">这是一个盒子</div>
<script>
// $(function () {
// // 显示 跟着动画
// $("button").eq(0).click(function () {
// $(".box").show(1000)
// })
// // 隐藏 跟着动画
// $("button").eq(1).click(function () {
// $(".box").hide(1000, function () {
// alert(1)
// })
// })
// // 切换 跟着动画
// $("button").eq(2).click(function () {
// $(".box").toggle(1000)
// })
// })
//一般情况下，我们都不加参数直接显示隐藏 就可以了
//滑动
// $(function () {
// // 下拉滑动
// $("button").eq(0).click(function () {
// $(".box").slideDown(1000)
// })
// // 上拉滑动
// $("button").eq(1).click(function () {
// $(".box").slideUp(1000)
// })
// // 切换滑动
// $("button").eq(2).click(function () {
// $(".box").slideToggle(1000)
// })
// })
//淡入淡出效果
$(function () {
// 淡入 fadeIn()
$("button").eq(0).click(function () {
$(".box").fadeIn(1000);
});
// 淡出
$("button").eq(1).click(function () {
$(".box").fadeOut(1000);
});
// 淡入淡出切换
$("button").eq(2).click(function () {
$(".box").fadeToggle(1000);
});
// 修改透明度 fadeTo([[speed],opacity,[easing],[fn]])
// speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
// opacity:一个0至1之间表示透明度的数字。
// easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
// fn:在动画完成时执行的函数，每个元素执行一次。
$("button").eq(3).click(function () {
//修改透明度 fadeTo() 这个速度和透明度必须写
$(".box").fadeTo(1000, 0.5);
});
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>突出高亮显示案例</title>
<style type="text/css">
body{
background-color: #000000;
}
.wrap{
margin: 100px auto;
padding: 0;
width: 705px;
height: 455px;
background-color: #000;
border: 1px solid white;
}
.wrap li {
margin: 0;
list-style: none;
float: left;
margin: 5px 5px 5px 5px;
padding: 0;
}
.wrap img{
margin: 0;
display: block;
width: 210px;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="#"><img src="../js2-DOM/images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="../js2-DOM/images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="../js2-DOM/images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="../js2-DOM/images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="../js2-DOM/images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="../js2-DOM/images/1.jpg" alt=""></a></li>
</ul>
</div>
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function () {
$(".wrap li").hover(function (){
// 鼠标进入的时候，其他的li标签透明度: 0.5
$(this).siblings().stop().fadeTo(400, 0.5);
}, function (){
//鼠标离开， 其他li 透明度改为 1
$(this).siblings().stop().fadeTo(400, 1);
});
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
border: none;
display: block;
}
.acc {
width: 640px;
height: 140px;
margin: 0 auto;
}
.acc ul {
border-left: 1px solid #ddd;
height: 140px;
position: relative;
}
.acc ul li {
width: 50px;
height: 138px;
border: 1px solid #ddd;
float: left;
list-style: none;
border-left: 0;
position: relative;
overflow: hidden;
cursor: pointer;
}
.acc ul li.active {
width: 434px;
}
.acc ul li h3 {
font-size: 14px;
color: #000;
font-weight: 100;
width: 14px;
height: 98px;
padding: 40px 18px 0;
}
.acc ul li h3.active {
background: #f42760;
color: #fff;
}
.acc ul li div {
width: 383px;
height: 138px;
background: blue;
position: absolute;
top: 0;
left: 50px;
border-left: 1px solid #ddd;
z-index: 0;
}
.acc ul li img {
width: 383px;
height: 138px;
}
.acc ul li.last {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="acc">
<ul>
<li class="active">
<h3 class="active">动漫</h3>
<div><img src="../js2-DOM/images/1.jpg" /></div>
</li>
<li>
<h3>动漫</h3>
<div><img src="../js2-DOM/images/1.jpg" /></div>
</li>
<li>
<h3>动漫</h3>
<div><img src="../js2-DOM/images/1.jpg" /></div>
</li>
<li>
<h3>动漫</h3>
<div><img src="../js2-DOM/images/1.jpg" /></div>
</li>
<li class="last">
<h3>动漫</h3>
<div><img src="../js2-DOM/images/1.jpg" /></div>
</li>
</ul>
</div>
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
//鼠标移到当前li上，当前li的宽度变成434px,li里的h3要添加一个类名active让背景变红，文字变白
$(".acc")
.find("li").mouseover(function () {
$(this).stop().animate({ width: "434px" }, 500)
//end()是从h3回到li上去
.children("h3").addClass("active").end()
.siblings() //当前li的所有兄弟li
.stop().animate({ width: "50px" }, 500)
.children("h3").removeClass("active");
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com" title="挺好">都挺好</a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<span>123</span>
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function () {
// 1、返回元素固有属性就是元素本身的属性 element.prop("属性名") 获取属性值
// console.log($("a").prop("href"));
$("a").prop("title","我们都挺好");
$("input").change(function () {
console.log($(this).prop("checked"));
})
// console.log($("div").prop(("index"))); //undefined
//2、元素的自定义属性 我们通过 attr() 获取
console.log($("div").attr("index"));
//修改 index attr("属性", "属性值")
$("div").attr("index", 4)
console.log($("div").attr("data-index"));
// 3、数据缓存 data() 这个里面的数据是存放在元素的内存里面
$("span").data("uname", "andy")
console.log($("span").data("uname"))
console.log($("div").data("index")) // 数字型的 2
})
</script>
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
// 1、获得设置元素内容 html()
console.log($("div").html())
// $("div").html("123")
// 2、获得设置元素文本内容 text()
console.log($("div").text())
$("div").text("123")
// 3、获得设置表单值 val()
console.log($("input").val())
$("input").val("123")
</script>
</body>
</html>
返回列表
评论