<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery使用</title>
<script src="jquery-3.4.1.min.js"></script>
<script>
$(function () {
$('#one').children("p:first-child").html('我是子元素');
$('#one').css('background','blue');
$('#one').children("p:nth-child(2)").css('background-color','orange')
$('#one').children("li:last-child").remove();
$("#one").on("click","p",function(){
// 切换p列表样式
$(this).addClass("active");
$(this).siblings().removeClass("active");
// 获取当前点击p 的下标
let index = $(this).index() + 1;
alert(index);
});
$('#btn').click(function() {
$('.box').animate({
left: '500px'
})
})
});
</script>
</head>
<body>
<div id="one" onclick="" >我是第一个div
<p id="pTag1"></p>
<p id="pTag2">我是第二个子元素</p>
<li>我是li元素<li>
</div>
<div class="box" style="display: inline; width: 300px;height: 300px;background-color: orangered;position: relative">我是第二个div框</div>
<button id="btn" >点我移动Box<button>
</body>
<html>
js
最新推荐文章于 2024-06-03 18:16:04 发布