<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.7.1.min.js"></script>
<!-- 引入外部css文件 -->
<link rel="stylesheet" type="text/css" href="../css/one.css">
</head>
<body>
<div id="box">
<p class="oneP">第1个p</p>
<p>第2个p</p>
<p>第3个p</p>
<p>第4个p</p>
<p>第5个p</p>
<p>第6个p</p>
<img src="../static/img/联想截图_20230728153914.png" class="img" />
<h3 class="h3">h3</h3>
<h4 class="h4">h4</h4>
<h5>h5</h5>
</div>
</body>
一、修改/获取css属性
$('.oneP').css('color', 'pink')
$('.img').css({
'width': '50px',
'height': '50px'
})
//获取css属性
const imgWidth = $('.img').css('width')
console.log(imgWidth, 'imgWidth'); //50px
二、改变/获取/删除标签属性
$('.img').attr('src', '../static/img/截图_20230811175141.png')
//获取标签属性
const imgSrc = $('.img').attr('src')
console.log(imgSrc, 'imgSrc'); //../static/img/截图_20230811175141.png
$('.img').removeAttr('src')
三、页面加载完成后执行代码(使用下方代码包裹)
$(function(){
.....
})
四、操作标签的class
// 添加一个class
$('#box h5').click(function () {
$(this).addClass('h5')
})
-
removeClass: 给标签删除一个class
// 删除一个class
$('#box h4').click(function(){
$(this).removeClass('h4')
})
-
toggleClass: 实现标签某个class切换，即有就去掉，无就新增
//切换class 有就去掉 没有就新增
$('.h3').click(function () {
$(this).toggleClass('activeP')
})
五、标签的添加和删除
$('#box').append('<h1>这是h1</h1>')
$('#box').append('<h2>这是h2</h2>')
$('#box h2').remove()
$('#box p:nth-child(4)').before('<a>这是a标签</a>')
$('#box p:nth-child(5)').after('<a>这是a5标签</a>')
本文详细介绍了如何使用jQuery进行CSS属性的修改、获取和删除，以及标签属性的改变、获取和删除，还包括页面加载后的代码执行、class的动态管理以及HTML标签的添加和删除操作。
扫一扫
745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
