JS、JQ中remove()、empty

在JQ中的,要用到移除指定元素的时候,发现empty()与remove([expr])都可以用来实现。可仔细观察效果的话就可以发现。

empty()是只移除了 指定元素中的所有子节点,拿$("p").empty()来说,他只是把<p>dsfsd</p>中的文本给移除了,而留下 了<p></p>,仍保留其在dom中所占的位置。

remove([expr])则是把其从dom中删除,而不会保留其所占的位置。
例:
<p>Hello</p>
World
<p class='wel'>welcome</p> 
执行$("p").empty()其结果是
<p></p>
World
<p></p> 

执行$("p").remove()其结果是
World
执行$("p").remove(".wel")其结果是
<p>Hello</p>
World

在JS中实现移除某一元素时
1、remove()方法是将某一元素在DOM中移除
<p>Hello</p>
Worl
d
var p = document.getElementsByTagName('p')[0];
执行p.remove()其结果是
World
2、还可以是删除下拉菜单中选择的某一项
<html>
<head>
<script type="text/javascript">
function removeOption(){
  var x=document.getElementById("mySelect");
//selectIndex:是select标签的一个属性,获取目前选取的那个option的下标(下标从0开始),所以remove()方法里面的参数也可以直接写需要删除的option的下标
  x.remove(x.selectedIndex);
}
</script>
</head>
<body>


<form>
<select id="mySelect">
  <option>苹果</option>
  <option>桃子</option>
  <option>香蕉</option>
  <option>桔子</option>
</select>
<input type="button" onclick="removeOption()" value="删除被选的选项">
</form>


</body>
</html>

好的,下面是一个简单的消消乐游戏的代码示例: HTML代码: ``` <div id="game-container"> <div class="score">得分: <span id="score">0</span></div> <div class="game-board"></div> <button id="new-game">新游戏</button> </div> ``` CSS代码: ``` #game-container { display: flex; flex-direction: column; align-items: center; } .score { margin-top: 20px; font-size: 24px; } .game-board { width: 300px; height: 300px; margin-top: 20px; display: flex; flex-wrap: wrap; } .game-board div { width: 30px; height: 30px; margin: 1px; background-color: #ccc; border-radius: 5px; cursor: pointer; } .game-board div.selected { background-color: #f00; } ``` JS/jQuery代码: ``` // 定义颜色数组 var colors = ['red', 'green', 'blue', 'yellow', 'purple']; // 生成随机颜色 function randomColor() { return colors[Math.floor(Math.random() * colors.length)]; } // 创建游戏面板 function createGameBoard() { var gameBoard = $('.game-board'); for (var i = 0; i < 100; i++) { // 生成 10 行 10 列的格子 var div = $('<div></div>'); div.data('color', randomColor()); // 为每个格子设置随机颜色 gameBoard.append(div); } } // 游戏初始化 function initGame() { $('#score').text(0); // 得分清零 $('.game-board').empty(); // 清空游戏面板 createGameBoard(); // 重新生成游戏面板 } // 计算得分 function calculateScore(selected) { return selected.length * selected.length; // 得分为选中格子数量的平方 } // 消除相邻同色格子 function removeSelected() { var selected = $('.game-board div.selected'); var color = selected.first().data('color'); var score = calculateScore(selected); selected.fadeOut(500, function() { // 渐隐消除选中格子 $(this).remove(); }); $('#score').text(function(index, text) { // 更新得分 return parseInt(text) + score; }); } // 选中相邻同色格子 function selectSameColor() { var selected = $(this).addClass('selected'); var color = selected.data('color'); // 递归查找相邻同色格子 var left = selected.prev(); if (left.length && left.data('color') === color && !left.hasClass('selected')) { selectSameColor.call(left); } var right = selected.next(); if (right.length && right.data('color') === color && !right.hasClass('selected')) { selectSameColor.call(right); } var top = selected.parent().prev().children().eq(selected.index()); if (top.length && top.data('color') === color && !top.hasClass('selected')) { selectSameColor.call(top); } var bottom = selected.parent().next().children().eq(selected.index()); if (bottom.length && bottom.data('color') === color && !bottom.hasClass('selected')) { selectSameColor.call(bottom); } } $(function() { initGame(); $('#new-game').on('click', function() { // 点击新游戏按钮重新开始游戏 initGame(); }); $('.game-board').on('click', 'div', function() { // 点击格子选中相邻同色格子 if ($(this).hasClass('selected')) { removeSelected(); } else { $('.game-board div').removeClass('selected'); selectSameColor.call(this); if ($('.game-board div.selected').length > 1) { removeSelected(); } } }); }); ``` 这个代码示例只是一个简单的实现,还有很多细节可以优化和改进。如果你想要更加完整和复杂的消消乐游戏,建议使用专业的游戏引擎和框架进行开发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值