整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
許多網站的添加個性標簽頁面的時候，都會要實現新標簽添加功能，下面本文來探討一下：
效果圖如下：
圖中默認有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來進行操作。
從官網可以看到元素的顯示和隱藏通過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獲取表單元素的值和設置表單元素的值很簡單
1.$(‘#element’).val();
2.$(‘#element).val(‘要設置的值’);
$(selector).html()用于對元素的inner html進行操作，請記住是inner Html
如果html()不帶參數這返回該元素的inner html內容，如果帶有參數則將該元素的inner html內容替換為參數內容
當然還有更詳細的內容
使用函數來設置元素內容
使用函數來設置所有匹配元素的內容。
語法
$(selector).html(function(index,oldcontent))
index - 可選。接收選擇器的 index 位置。
oldcontent - 可選。接收選擇器的當前內容。
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就是等于的意思。
html中可以對各種元素添加事件，在jquery中想要對元素添加事件，需要先 選擇 元素，然后使用事件。比如，我們點擊container_id的元素就輸出一段字符串：
$(function(){
var dom=$("#container_id");
dom.click(function(){
console.log("我輸出了");
});
});注：
由以上可知dom元素添加事件，需要先選中，然后使用.事件名(function(){ 執行的函數 })；就可以簡單的進行添加。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
