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小时内与您取得联系。