JQuery實現追加新標簽效果

許多網站的添加個性標簽頁面的時候，都會要實現新標簽添加功能，下面本文來探討一下：

效果圖如下：

圖中默認有2個標簽，要添加新標簽的時候，就輸入新標簽的名稱，然后按Enter鍵確認，即可在原來的基礎上添加了新的標簽。標簽的右邊也有個關閉標簽的標識，點擊后可以刪除該標簽！

首先來構建HTML文件,因業務需求，每個網站的效果各有不同。下面的只是簡單的頁面布局，但實現的功能是一樣的。參考代碼如下:

html:

css:

javascript代碼:

輸入新標簽后，鍵盤的enter按下，把新輸入的值獲取到，然后在新插入值的那個li的前面添加一個新的li元素，用于展示新輸入的標簽內容。當輸入空格的時候。判斷不能為空！

web開發前端通常都會使用jQuery這個js庫的，通過jQuery來對html元素進行操作是一件很方便的事情，但是不可能將這些操作的方式都記住的包括鄙人，所以一直就想整理一下在日常開發中使用jQuery操作html的文章

jQuery對html元素屬性操作

jQuery對元素設置屬性主要有2個方法prop(),attr()

1.prop：這是高版本jQuery新增的方法，用于操作html元素固有的屬性；例如：name、id、value等

2.attr：既可以像prop那樣操作固有屬性，也能操作我們對html元素自定義的屬性；例如：select的option我們定義< option name=’name’>< /option >這里的name就是我們自定義的屬性，只能通過attr來進行操作。

jQuery控制元素的顯示和隱藏

從官網可以看到元素的顯示和隱藏通過show()、hide()這兩個方法完成

.hide()，官網解釋

The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( “display”, “none” )從這句可以看出來hide本質是上為元素添加了display:none這一css

.show()，官網解釋

The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css( “display”, “block” )可以看出show是將元素的display:none修改為display:block，因此該方法也僅適用與通過jQuery隱藏的元素或者該元素display:none屬性的元素。

jQuery獲取表單元素的值以及設置表單元素的值

jQuery獲取表單元素的值和設置表單元素的值很簡單

1.$(‘#element’).val();

2.$(‘#element).val(‘要設置的值’);

jQuery使用html()方法

$(selector).html()用于對元素的inner html進行操作，請記住是inner Html

如果html()不帶參數這返回該元素的inner html內容，如果帶有參數則將該元素的inner html內容替換為參數內容

當然還有更詳細的內容

使用函數來設置元素內容

使用函數來設置所有匹配元素的內容。

語法

$(selector).html(function(index,oldcontent))

index - 可選。接收選擇器的 index 位置。

oldcontent - 可選。接收選擇器的當前內容。

jquery重要的主干就是選擇器和事件，其他的所有操作都是基于這兩者來進行操作的。

jquery選擇器

選擇器就類似我們之前講的getElementById之類的，就是查找dom中的某個元素。在jquery中，我們可以很簡單的就能選擇到我們想操作的dom元素。

$(function(){
    var dom=$("#container_id").html();
    console.log(dom);
    dom=$("#container_id").text();
    console.log(dom);
    dom=$(".container_class:eq(0)");
    console.log(dom.text());
    console.log(dom.html());
});

注：

由以上可知，jquery的選擇器很簡單，只需要使用$("選擇元素")就能獲取到相關的dom，這里的“選擇元素” 如果是id，需要加上id的#號標識，如果是class，就需要加上.的標識，:后接的是偽類選擇器，就是滿足某個條件的相應的元素，這里的eq就是等于的意思。

jquery事件

html中可以對各種元素添加事件，在jquery中想要對元素添加事件，需要先選擇元素，然后使用事件。比如，我們點擊container_id的元素就輸出一段字符串：

$(function(){
    var dom=$("#container_id");
    dom.click(function(){
        console.log("我輸出了");
    });
});

注：

由以上可知dom元素添加事件，需要先選中，然后使用.事件名(function(){ 執行的函數 })；就可以簡單的進行添加。

在線咨詢

上一篇：臥室的飄窗簡約不簡單，無錫百樂和園大三居裝修實例效果
下一篇：CSS 實現單行、多行文字截斷，實現以...結尾的效

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。