发表于： 2023-03-27 20:31:24
0 117
今天学习的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>jquery元素操作</title>
</head>
<body>
<!-- <div>1</div>-->
<!-- <div>2</div>-->
<!-- <div>3</div>-->
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
// $(function () {
// // $("div").css("color", "red")
// // 1、each() 方法遍历循环
// let sum = 0
// const arr = ['red', 'green', 'blue']
// $("div").each(function (index, domEle) {
// // 回调函数第一个参数一定是索引号 可以自己指定索引号名称
// console.log(index)
// // 回调函数第二个参数一定是 dom 元素对象
// console.log(domEle)
// $(domEle).css('color', arr[index])
// sum += +$(domEle).text()
// })
// console.log(sum)
// console.log('---------------------------')
//
// // 2、$.each() 方法遍历元素 主要用于遍历数据 处理数据
// // $.each($('div'), function (index, ele) {
// // console.log(index)
// // console.log(ele)
// // })
//
// $.each(arr, function (index, ele) {
// console.log(index)
// console.log(ele)
// })
// console.log('---------------------------')
// $.each({name: 'andy', age: 18}, function (index, ele) {
// console.log(index) // 输出的是 name age 属性名
// console.log(ele) // 输出的是 andy 18 属性值
// })
// })
$(function () {
// 1、创建元素
const li = $('<li>我是后来创建的li</li>')
// 2、添加元素
//(1) 内部添加 生成之后，它们是父子关系
// $('ul').append(li) // 内部添加 并且放到内容的最后面
$('ul').prepend(li) // 内部添加 并且放到内容的最前面
//(2) 外部添加 生成之后，它们是兄弟关系
const div = $('<div>我是后妈生的</div>')
// $('.test').after(div) // 放到内容的最后面
$('.test').before(div) // 放到内容的最前面
// 3、删除元素
// $('ul').remove('') //删除匹配的元素
// $('ul').empty('') //删除匹配元素集合中的所有子节点
$('ul').html('') //删除匹配元素内容
})
</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>
div {
width: 200px;
height: 200px;
background-color: red;
padding: 10px;
border: 15px solid blue;
margin: 20px;
}
</style>
</head>
<body>
<div></div>
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
// 1、width() / height() 获得设置元素 width和height大小
console.log($('div').width()) //200
console.log($('div').height()) //200
// 2、innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($('div').innerWidth()) //220
console.log($('div').innerHeight()) //220
// 3、outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
console.log(Math.ceil ($('div').outerWidth()))
console.log(Math.ceil ($('div').outerHeight()))
// 4、outerWidth(true) / outerHeight(true)
// 获取设置元素 width和height + padding + border + margin大小
console.log(Math.ceil ($('div').outerWidth(true)))
console.log(Math.ceil ($('div').outerHeight(true)))
</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>
.father {
width: 400px;
height: 400px;
background-color: pink;
margin: 100px;
overflow: hidden;
position: relative;
}
.son {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function () {
// 1、获得 元素 距离文档的位置 offset()
console.log($('.son').offset())
console.log($('.son').offset().top)
$('.son').offset({
top: 200,
left: 200
})
// 2、获得距离定位父级位置 position() 如果没有父级 则以文档为准
// 这个方法只能获取 不能设置
console.log($('.son').position())
})
</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>
.container {
margin: 200px auto;
width: 500px;
height: 2000px;
background-color: red;
overflow: hidden;
}
.back {
width: 50px;
height: 50px;
background-color: pink;
float: right;
margin-top: 400px;
display: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="back">返回顶部</div>
<div class="container"></div>
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function () {
// 刷新页面 直接跳转到 100
$(document).scrollTop(100)
const boxTop = $('.container').offset().top
$(window).scroll(function () {
console.log($(document).scrollTop())
// console.log($('div').scrollTop())
if ($(document).scrollTop() >= boxTop) {
$('.back').fadeIn()
}else {
$('.back').fadeOut()
}
})
// 返回顶部 带有动画效果
$('.back').click(function () {
// $(document).scrollTop(0)
// 只有 元素才能做动画 不能是文档 html和body 元素做动画
$('body, html').stop().animate({
scrollTop: 0
})
})
})
</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;
}
body {
}
.head {
margin: 200px auto 0;
width: 500px;
height: 300px;
background-color: red;
overflow: hidden;
}
.centre {
margin: 0 auto;
width: 500px;
height: 400px;
background-color: yellow;
overflow: hidden;
}
.bottom {
margin: 0 auto;
width: 500px;
height: 2000px;
background-color: green;
overflow: hidden;
}
.back {
position: fixed;
top: 300px;
right: 0;
float: right;
overflow: hidden;
/*display: none;*/
}
.back li {
text-align: center;
height: 50px;
width: 50px;
line-height: 50px;
background-color: pink;
border: 1px solid #333333;
cursor: pointer;
}
.current {
color: red;
}
</style>
</head>
<body>
<ul class="back">
<li class="current">红</li>
<li>黄</li>
<li>绿</li>
</ul>
<div class="floor">
<div class="head w"></div>
<div class="centre w"></div>
<div class="bottom w"></div>
</div>
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function () {
// 当我们点击了小li 此时 不需要执行 页面滚动事件里面的li 的背景选择 添加 current
//节流阀(互斥锁)
let flag = true
// $(document).scrollTop(100)
// const boxTop = $('.head').offset().top
// toggleTool()
// function toggleTool() {
// if ($(document).scrollTop >= boxTop) {
// $('.back').fadeIn()
// }else {
// $('.back').fadeOut()
// }
// }
$(window).scroll(function (){
// console.log($(document).scrollTop())
// toggleTool()
// 当我的内容滚动到某个模块 右侧的电梯导航相对应的小li 也会添加 current 类名 兄弟移除 current
if (flag) {
$('.floor .w').each(function (i, ele) {
if($(document).scrollTop() >= $(ele).offset().top) {
console.log(i)
$('.back li').eq(i).addClass('current').siblings().removeClass()
}
})
}
})
$('.back li').click(function () {
// 节流阀
flag = false
// $(document).scrollTop(0)
// $('body, html').stop().animate({
// scrollTop: 0
// })
console.log($(this).index())
// 选出对应 索引号的内容区的盒子 计算出页面要去往的位置 offset().top
let current = $('.floor .w').eq($(this).index()).offset().top
//页面动画滚动效果
$('body, html').stop().animate({
scrollTop: current
}, function () {
flag = true
})
// 点击之后 添加 current 类名 兄弟移除 current
$(this).addClass('current').siblings().removeClass()
})
})
</script>
</body>
</html>
返回列表
评论