JavaScript 設(shè)置列表選項(xiàng)(li)可刪除

下實(shí)例我們演示了如何使用 JavaScript 來(lái)關(guān)閉列表選項(xiàng)：

HTML 代碼

<ul>

<li>Adele</li>

<li>Agnesx</li>

<li>Billyx</li>

<li>Calvinx</li>

<li>Christinax</li>

<li>Cindy</li>

</ul>

CSS 代碼

* {

box-sizing: border-box;

}

TML ul li 橫排居中排列的方法，三步驟及實(shí)例

ul li 橫排居中排列的方法

無(wú)序列表的列表項(xiàng)默認(rèn)情況下是豎著排的，因?yàn)閘i元素是塊級(jí)元素，會(huì)自動(dòng)分行。那如果要將列表的列表項(xiàng)進(jìn)行橫排，比用無(wú)序列表ul元素定義一個(gè)導(dǎo)航條。那該怎么辦呢？這當(dāng)中有三個(gè)應(yīng)當(dāng)被解決的東西，一個(gè)是橫排本身，另一個(gè)就是應(yīng)當(dāng)把無(wú)序列表項(xiàng)的圓點(diǎn)去掉，第三則是讓ul定義的列表居中顯示，包括水平居中和垂直居中。方法如下：

HTML ul li 橫排居中排列的方法，三步驟及實(shí)例

ul li橫排的方法

將ul無(wú)序列表元素中的列表項(xiàng)li元素的display屬性設(shè)置成inline或inline-block，個(gè)人比較常用的是后者：

ul li{display:inline-block;}

ul水平居中和垂直居中的方法

水平居中方法：只要將ul元素包含于一個(gè)div元素，并將div元素的text-align屬性設(shè)置為center即可將ul水平居中。除此之外，因?yàn)閡l的列表默認(rèn)情況下是有左內(nèi)邊距的，所以，為了能夠讓列表能夠更好地水平居中，需要將ul的左內(nèi)邊距padding-left設(shè)置為0，具體可見(jiàn)下方的綜合實(shí)例。

垂直居中方法：為包含ul元素的div元素設(shè)置寬度width和高度height（實(shí)際上導(dǎo)航條一般也需要有寬度和高度的設(shè)置），然后將ul的line-height屬性設(shè)置為父元素的高度height即可。

去掉圓點(diǎn)的方法

將ul元素的list-style屬性設(shè)置為none即可。

HTML ul li 橫排居中排列的方法，三步驟及實(shí)例

ul li 橫排居中排列綜合實(shí)例代碼，及在線編輯器

<div class='e1'>
  <ul class='e2'>
    <li>HTML</li>
    <li>python</li>
    <li>golang</li>
  </ul>
</div>

<style>
  .e1{width:100%;height:50px;border:1px solid skyblue;text-align:center;}
  .e2{list-style:none;padding-left:0%;}
  .e2 li{line-height:50px;display:inline-block;}
</style>

HTML+CSS+JS實(shí)例在線編輯器：

HTML ul li 橫排居中排列的方法，綜合實(shí)例在線 - HTML教程

實(shí)例代碼解析

如上代碼，一定要將ul的左內(nèi)邊距padding-left設(shè)置為0，否則ul列表的“水平居中”將偏向右邊，大家可以將.e2中的padding-left刪除掉，然后再在線運(yùn)行看一看效果。

python全棧：

笨鳥(niǎo)工具-璞玉天成，大器晚成

節(jié)我們學(xué)習(xí)如何使用 jQuery 中的方法來(lái)添加和刪除 HTML 元素。

jQuery 中用于添加 HTML 元素的方法有如下幾種：

方法	描述
append()	在所選元素的末尾插入內(nèi)容
prepend()	在選定元素的開(kāi)頭插入內(nèi)容
after()	在選定元素后插入內(nèi)容
before()	在選定元素之前插入內(nèi)容

而用于刪除元素的方法有：

方法	描述
remove()	刪除被選元素容，包括子元素
empty()	刪除被選元素的所有子節(jié)點(diǎn)和內(nèi)容

append()方法

append() 方法可以在指定元素的末尾插入內(nèi)容。

語(yǔ)法如下：

$(selector).append(content,function(index,html))

content：規(guī)定要插入的內(nèi)容，可以包含 HTML 元素、jQuery 對(duì)象、DOM 元素。
function(index,html)：規(guī)定返回待插入內(nèi)容的函數(shù)，index 為集合中元素的索引位置，html 為被選元素的當(dāng)前 HTML。

示例：

我們來(lái)看下面這個(gè)例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").append("俠課島");
    });
  });
</script>
</head>
<body>
  <p>你好，我的名字叫做：</p>
  <button>點(diǎn)擊追加文本</button>
</body>
</html>

點(diǎn)擊按鈕，在指定的 標(biāo)簽?zāi)┪蔡砑游谋緝?nèi)容 “俠課島”，我們可以在瀏覽器中看一下演示結(jié)果：

除了文本內(nèi)容，我們還可以在元素中添加 HTML ：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("ul").append("<li>strawberry</li>");
    });
  });
</script>
</head>
<body>
  <ul>
    <li>apple</li>
    <li>pear</li>
    <li>peach</li>
    <li>watermelon</li>
  </ul>
  <button>點(diǎn)擊追加文本</button>
</body>
</html>

在瀏覽器中的演示結(jié)果：

prepend()方法

prepend() 方法其實(shí)和 append() 方法類(lèi)似，語(yǔ)法也差不多。但是 prepend() 方法主要用于在被選元素的開(kāi)頭插入指定內(nèi)容。

語(yǔ)法如下：

$(selector).prepend(content,function(index,html))

示例：

我們將上述示例中的 append() 方法改成 prepend() 方法：

$(function(){
    $("button").click(function(){
      $("ul").prepend("<li>strawberry</li>");
    });
});

然后看一下在瀏覽器中的演示結(jié)果：

after()方法

after() 方法用于在被選元素后插入指定的內(nèi)容。看起來(lái) after() 方法和 append() 方法的作用好像差不多，但是其實(shí)兩個(gè)方法還是有區(qū)別的。 append() 方法是在被選元素的結(jié)尾插入內(nèi)容，插入的內(nèi)容仍然在元素內(nèi)部。而 after() 插入的內(nèi)容會(huì)重新起一行，與被選擇的元素并沒(méi)有什么邏輯上的聯(lián)系。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").after("<p>俠課島</p>");
    });
  });
</script>
</head>
<body>
  <p>你好，我的名字叫做：</p>
  <button>點(diǎn)擊追加文本</button>
</body>
</html>

在瀏覽器中的演示效果：

before()方法

before() 方法用于在被選元素之前插入指定的內(nèi)容。它和 prepend() 方法的區(qū)別在于一個(gè)在被選元素內(nèi)插入內(nèi)容，一個(gè)在被選元素外。

注意 before() 方法和 after() 方法都是在被選元素外插入內(nèi)容。append() 和 prepend() 方法都是在被選元素內(nèi)插入內(nèi)容。

示例：

例如將上述示例中的方法改為 before：

$(function(){
    $("button").click(function(){
      $("p").before("<p>俠課島</p>");
    });
});

在瀏覽器中的演示效果：

remove()方法

remove() 方法用于刪除被選元素及其子元素。該方法也會(huì)刪除被選元素的數(shù)據(jù)和事件。

示例：

例如下面這個(gè)例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").remove();
    });
  });
</script>
</head>
<body>
  <p>你好，歡迎來(lái)到俠課島！</p>
  <button>點(diǎn)擊刪除</button>
</body>
</html>

在瀏覽器中的演示效果：

從上圖中可以看到，remove() 方法將指定的 p 元素連標(biāo)簽帶元素全部刪除。

empty()方法

empty() 方法用于刪除被選元素的所有子節(jié)點(diǎn)和內(nèi)容。該方法不會(huì)移除元素本身，或它的屬性。

示例：

我們講上述示例中的 remove() 方法改為empty() 方法，看看有什么不同：

$(function(){
    $("button").click(function(){
      $("p").empty();
    });
});

在瀏覽器中的演示效果：

可以看到 empty() 方法只會(huì)刪除指定元素中的內(nèi)容，不會(huì)刪除元素本身，當(dāng)然如果元素上有屬性，屬性也不會(huì)被刪除，大家可以自己試一下。

在線咨詢

上一篇：HTML DOM td/th 對(duì)象
下一篇：html前端開(kāi)發(fā)工程師求職簡(jiǎn)歷模板優(yōu)質(zhì)范文

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

JavaScript 設(shè)置列表選項(xiàng)(li)可刪除

ul li 橫排居中排列的方法

ul li橫排的方法

ul水平居中和垂直居中的方法

去掉圓點(diǎn)的方法

ul li 橫排居中排列綜合實(shí)例代碼，及在線編輯器

HTML+CSS+JS實(shí)例在線編輯器：

實(shí)例代碼解析

python全棧：

append()方法

示例：

prepend()方法

示例：

after()方法

示例：

before()方法

示例：

remove()方法

示例：

empty()方法

示例：

您的項(xiàng)目需求