目录
11.4 元素被卷去页面的左侧尺寸 scrollLeft()
1 设置或获取固有属性值 prop()
固有属性是元素自带的属性（不是你定义的属性），比如a的href,input中的type
1.1 获取
1.2 设置
2 设置或获取自定义属性值 attr()
像index这种你自己写的属性，就叫自定义属性
2.1 获取
自定义属性通过prop()是无法获取的
如果你要获取h5的自定义属性(data-属性名)获取的时候要连着data一起写，不然没用
2.2 设置
3 数据缓存 data()
data()可以将数据存储到缓存中，不影响网页结构
在elements中我们什么也看不到
但是使用data()是可以获取到的
除了可以获取到用data()设置的值，还可以获取加data的自定义属性，但是普通的自定义属性与固有属性无法获取
虽然我们设置的字符串，但获取的时候获取的是数字型
4 表单全选与取消全选案例
我们之前在这里做过 21.操作元素_Suyuoa的博客-CSDN博客 14
现在我们使用jQuery做一下
思路是 子按钮根据全选按钮的状态走，子按钮没全选的时候全选按钮不选，子按钮全选的时候全选按钮选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
text-align:center;
}
td {
float:left;
width:125px;
height:35px;
line-height:35px;
border:1px solid black;
margin-left:-1px;
margin-top:-1px;
}
table thead tr {
background-color:rgb(220,220,220);
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>全选 <input type="checkbox"></td>
<td>书名</td>
<td>出版社</td>
<td>价格</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>python</td>
<td>清华大学出版社</td>
<td>20.00</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Django</td>
<td>机械工业出版社</td>
<td>70.00</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>HTML5</td>
<td>清华大学出版社</td>
<td>90.00</td>
</tr>
</tbody>
</table>
</body>
<script src="../jquery-3.6.1.min.js"></script>
<script>
all_checkboxs = $("input[type='checkbox']")
all_select_btn = $("input[type='checkbox']:eq(0)")
other_btns = $("input[type='checkbox']:gt(0)")
all_select_btn.click(function() {
all_select_btn_status = $(this).prop('checked')
all_checkboxs.prop('checked',all_select_btn_status)
})
other_btns.click(function() {
checked_sub_btns = $("input[type='checkbox']:gt(0):checked")
if (checked_sub_btns.length < other_btns.length) {
all_select_btn.prop('checked',false)
}
else {
all_select_btn.prop('checked',true)
}
})
</script>
</html>用了三个jQuery独有的选择器,分别是
- eq() 选择第几个元素
- gt() 选择第几个元素之后的所有元素
- check() 选择被选中的所有元素
全选
全不选
不全选
全部选
5 元素内容 html()
在jQuery()中我们可以使用html()来获取与设置元素中的文本内容，相当于原生JS的innerHTML
5.1 获取
5.2 设置
6 元素文本内容 text()
相当于原生的innerText()
6.1 获取
6.2 设置
7 表单值 val()
相当于原生JS的value()
7.1 获取
7.2 设置
8 增减数量案例
我们在之前的表单全选与取消中加入一列数量
点击加号数量+1
点击减号数量-1，减到0就不再减了
CSS
html
js
9 小计案例
我们再加一列小计
数量改变的时候，小计的值是价格*数量
CSS没动
html
JS按钮部分
JS输入框部分
当按钮中间的表单被修改的时候，小计也应该随之进行改变
10 尺寸
- width()/height() 元素的宽度值与高度值，不包含padding,border,margin
- innnerWidth/innerHeight() 元素的宽度与高度值，包含padding,不包含border,margin
- outerWidth()/outerHeight() 元素的宽度与高度值，包含padding,border,不包含margin
- outerWidth(true)/outerHeight(true) 元素的宽度，包含padding,border,margin
如果设置了给了参数就是设置，没给参数都是获取
前面两个就不写例子了，写一下outerWidth()的例子
10.1 outerWidth()
10.1.1 获取
144 = 100 + 2*10 + 2*12
10.1.2 设置
10.2 outerWidth(true)
10.2.1 获取
170 = 100 + 2*10 + 2*12 +2*13
10.2.2 设置
先写要设置的值，再写true或false，不然设置会无效
11 位置
11.1 相对于页面的位置 offset()
offset()可以设置与获取相对于页面的偏移坐标，而不是关于父对象的相对位置
11.1.1 获取
返回的是一个对象，你可以对返回值进行索引获取left或top的值
并不是可视区域，而是真正的页面的左边与上边，我们现在把页面的高搞成3000px，把子盒子放在距离页面顶部2000px的位置
发现会返回2000
11.1.2 设置
也可以在参数对象中只给一个值
不能通过这种方式赋值
11.2 相对于有定位的父元素位置 position()
position()获取元素关于带有定位的父对象的相对位置，如果所有父元素都没有定位就以文档坐标为准
position()只能获取，不能设置
11.3 元素被卷去页面的头部尺寸 scrollTop()
紫色是元素，蓝框是可视区域，红线部分就是被卷去的头部尺寸
使用scrollTop()的元素需要有滚动条才会有效果
11.3.1 获取
打开页面后点一下按钮会返回0
滚动一下再点可以返回被卷去的距离
如果要获取页面被卷去的距离要使用$(document)
11.3.2 设置
打开后发现滚动到50的位置
11.4 元素被卷去页面的左侧尺寸 scrollLeft()
11.4.1 获取
打开之后点一下按钮是0
滚动一点后会返回滚动的位置
11.4.2 设置
打开后发现滚动到了指定位置
12 返回顶部案例
我们用这里的代码把JS部分改成jQuery 35.滚动 scroll_Suyuoa的博客-CSDN博客_scroll滚动
12.1 不带动画的
开始没有
滚到500有了
点击回顶部按钮就回到了顶部，回顶部按钮消失
代码
<!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>
<style>
body {
height:3000px;
background-color: rgb(232,226,224);
}
.alongside {
position: fixed;
top: 50%;
right:0px;
transform: translate(0,-50%);
width:80px;
background-color: white;
border-radius: 20px 0px 0px 20px;
}
div {
height:60px;
display:flex;
flex-direction: column;
align-items: center;
font-size: 12px;
padding:5px;
}
.return_top {
display:none;
}
</style>
</head>
<body>
<section class="alongside">
<div>
<img src="images/官方客服.png" alt="">
<span>官方客服</span>
</div>
<div>
<img src="images/反馈.png" alt="">
<span>反馈</span>
</div>
<div>
<img src="images/举报.png" alt="">
<span>举报</span>
</div>
<div class="return_top">
<img src="images/回顶部.png" alt="">
<span>回顶部</span>
</div>
</section>
</body>
<script src="../../jquery-3.6.1.min.js"></script>
<script>
// 向下滚动过500显示
$(window).scroll(function() {
if ($(document).scrollTop() >500) {
$('.return_top').css('display','flex')
}
else {
$('.return_top').css('display','none')
}
})
// 点击返回
$('.return_top').click(function() {
$(document).scrollTop(0)
})
</script>
</html>12.2 带动画的
需要把上面的点击事件改成这样
被指定动画的元素要为html，如果使用document会报错，仅仅使用body会无效
经测试可以缓慢滚到顶部
13 电梯导航案例
我们之前做过品优购主页 26.品优购首页_Suyuoa的博客-CSDN博客_品优购首页
我们现在做品优购主页的电梯导航
滚动到今日推荐后出现电梯导航
电梯导航会随着页面的滚动而变化
点击哪一个导航就会移动到页面的哪一个位置
html
CSS
.elevator_navigation {
position: fixed;
right:0px;
top:50%;
transform: translate(-50%);
display: none;
width:100px;
}
.elevator_navigation div {
text-align: center;
height:50px;
line-height: 50px;
border-bottom: 5px solid red;
font-size:20px;
}
.elevator_navigation .current {
background-color: red;
color:white;
}js
elevator_navigation_click_flag = true
// 判断是否该显示电梯导航,滚动到今日推荐显示电梯导航
today_recommand_top_position = $('.today_recommand').offset().top
function judge_elevator_navigation() {
if ($(document).scrollTop() >= today_recommand_top_position) {
$('.elevator_navigation').fadeIn()
$('article').each(function(index,content) {
if (elevator_navigation_click_flag) {
if ($(document).scrollTop() >= $(content).offset().top-10) {
$('.elevator_navigation div').removeClass('current')
$('.elevator_navigation div').eq(index).addClass('current')
}
}
})
}
else {
$('.elevator_navigation').fadeOut()
}
}
// 加载的时候判断
judge_elevator_navigation()
// 滚动的时候判断
$(window).scroll(function() {
judge_elevator_navigation()
})
// 电梯导航点击后移动到不同的地方
$('.elevator_navigation div').each(function(index,content) {
$(content).click(function() {
elevator_navigation_click_flag = false
$('html').stop().animate({'scrollTop':$('article').eq(index).offset().top},
500,
function() {elevator_navigation_click_flag = true})
})
})
// 点击哪个div就切换为当前样式
$('.elevator_navigation div').click(function() {
$('.elevator_navigation div').removeClass('current')
$(this).addClass('current')
})
374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
