首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jquery如果输入文本有值,则将class添加到标签,如果没有值,则删除它

jQuery是一个快速、简洁的JavaScript库,提供了丰富的特性和易于使用的API,用于简化HTML文档遍历、事件处理、动画效果和AJAX等操作。对于给定的问答内容,可以使用以下代码来实现需求:

代码语言:txt
复制
$(document).ready(function() {
  var input = $("#inputId"); // 根据实际情况替换inputId为输入文本的元素ID
  var target = $("#targetId"); // 根据实际情况替换targetId为目标标签的元素ID
  input.on("input", function() {
    if (input.val()) {
      target.addClass("className"); // 根据实际情况替换className为要添加的class名称
    } else {
      target.removeClass("className"); // 根据实际情况替换className为要删除的class名称
    }
  });
});

上述代码使用了jQuery的选择器来获取输入文本的元素和目标标签的元素,并通过on方法监听输入事件。当输入文本有值时,使用addClass方法将指定的class添加到目标标签;当输入文本为空时,使用removeClass方法将指定的class从目标标签中删除。

这样,当输入文本有值时,目标标签就会添加指定的class,从而实现了将class添加到标签的效果;当输入文本为空时,目标标签就会删除指定的class,从而实现了删除class的效果。

这个方法适用于各种场景,例如表单验证、动态样式控制等。如果你使用腾讯云的云计算产品,可以参考腾讯云的云开发服务SCF(Serverless Cloud Function)来实现类似的功能。SCF是一种无服务器的云计算服务,可以帮助开发者快速构建和部署云端应用,具有高可靠性、弹性伸缩、按需付费等优势。你可以通过腾讯云的官方文档了解更多关于SCF的信息:腾讯云云开发(SCF)产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

好久不用 jQuery, 来复习一下

给程序员看的,良好的缩进和注释。体积大一些    ♞ jquery-xxx.min.js:生产版本。程序中使用,没有缩进。体积小一些。...1.2.1 基本选择器   基本选择器是 jQuery 中最常用的选择器,也是最简单的选择器,通过元素 id、class标签名等来查找 DOM 元素。...1.3 DOM 操作 1.3.1 内容操作 操作 说明 html() 获取/设置元素的标签体内容 text() 获取/设置元素的标签体纯文本内容 val() 获取/设置元素的 value 属性 1.3.2...prop 的区别  ① 如果操作的是元素的固有属性,建议使用prop  ② 如果操作的是元素自定义的属性,建议使用attr ☞ 对 class 属性操作 操作 说明 addClass() 添加class...属性 removeClass() 删除class属性 toggleClass() 切换class属性,删除,无添加 css() 修改 css 样式 1.3.3 CRUD 操作 说明 append

5.5K40

一文入门jQuery

(元素选择器) 语法: $(“html标签名”) 获得所有匹配标签名称的元素 id选择器 语法: $(“#id的属性”) 获得与指定id属性匹配的元素 类选择器 语法: $(“.class的属性”...内容 --> 内容 text(): 获取/设置元素的标签体纯文本内容 内容 --> 内容 val(): 获取/设置元素的value属性 属性操作 通用属性操作 attr(): 获取/设置元素的属性...如果操作的是元素的固有属性,建议使用prop 如果操作的是元素自定义的属性,建议使用attr 对class属性操作 addClass():添加class属性 removeClass():删除class...属性 toggleClass():切换class属性 toggleClass(“one”): 判断如果元素对象上存在class=“one”,则将属性one删除掉。...如果元素对象上不存在class=“one”,添加 css(): CRUD操作: append():父元素将子元素追加到末尾 对象1.append(对象2): 将对象2添加到对象1元素内部,并且在末尾

3.5K20

前端之jQuery

#id") 标签选择器: $("tagName") class选择器: $(".className") 配合使用: $("div.c1") // 找到c1 class类的div标签 所有元素选择器:...hasClass();// 判断样式存不存在返回的是布尔 toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。...--$(window).scrollTop();可在浏览器端输入这段代码获取获取匹配元素相对滚动条顶部的偏移量--> 3.4.3文本操作 文本操作遵循:就取,没有就添加的原则..." $('div').html() "人生苦短" 通过上例可以看出,text在添加文本的过程中可以将原标签内的文本标签全都覆盖掉。...当这种情况发生时,通常不需要显式地循环的 .each()方法: 也就是说,上面的例子没有必要使用each()方法,直接像下面这样写就可以了: $("li").addClass("c1"); // 对所有标签做统一操作

4.8K21

jQuery DOM操作

var $li = $("ul li:eq(1)").remove(); // 获取第2个元素节点后,将它删除 $li.appendTo("ul"); // 将刚才删除的节点重新添加到...需要注意的是,这个方法不会将匹配的元素从jQuery对象中删除,其所有绑定的事件和附加数据可以保留下来。 如果将来再使用这个元素,相关事件和数据依然存在。...// 如果使用remove()方法删除元素,那么之前绑定的事件将会失效。 (3)empty() 清空元素中的所有后代节点。...").replaceAll("p"); 包裹节点 有时候需要把某个节点用其他标签包裹起来,jQuery三种方法:wrap()、wrapAll()、wrapInner()。...//设置p元素的文本内容 val() 获取和设置某个元素中的 var txt_value = $(this).val();          //获取this元素的 $(this).

2K60

JavaWeb——JQuery之DOM操作应用及实践案例总结(DOM内容操作、DOM属性操作、CRUD操作)

():获取/设置元素的标签体纯文本内容,如上,获取a标签中的“内容”两个字; 3)val():获取/设置元素的value属性。...):获取/设置元素的属性 4)removeProp():删除属性 【注意】:prop和attr的区别,如果操作的是元素的固有属性(非自定义的),建议使用prop;若是自定义属性,建议用attr。...属性操作 1)addClass():添加class属性; 2)removeClass():删除class属性; 3)toggleClass():切换class属性,如toggleClass("one..."),若元素对象上存在class="one",则将属性one删除,否则添加; 【案例练习】:应用以上方法获取或设置属性 <!...(B),将对象B添加到A的前面,对象A和B是平级的; 9)remove():移除元素,如对象A.remove(),将对象删除掉; 10)empty():清空元素的所有后代元素,如对象A.empty(),

3K50

jquery jQuery快速入门

值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。...选择器: $(".className") 配合使用: $("div.c1") // 找到c1 class类的div标签 所有元素选择器: $("*") 组合选择器: $("#id, .className...hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。...,必须等待着图片资源加载完成之后才能调用 jQuery的这个入口函数没有函数覆盖现象,文档加载完成之后就可以调用(建议使用此函数) 事件委托 事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件。...当这种情况发生时,通常不需要显式地循环的 .each()方法: 也就是说,上面的例子没有必要使用each()方法,直接像下面这样写就可以了: $("li").addClass("c1"); // 对所有标签做统一操作

16.1K50

jQuery中常用的函数和属性详细解析

("属性名称") 给某元素删除指定的属性以及该属性的 $("元素名称").removeClass("class") 给某元素删除指定的样式 $("元素名称").text(); 获得该元素的文本 $("...元素名称").text(value); 设置该元素的文本为value $("元素名称").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式 $("input...().hide() 第一个hide()是对于p标签的 然后用end()结束对p标签的引用而返回到#div1标签 所以第二个hide()是对于#div1起作用的 如果不加end() 两个hide()都是对...map( callback ) 将jQuery对象中的一组元素利用callback方法转换其,然后添加到一个jQuery数组中。...( array, callback ) 使用某个方法修改一个数组中的项,然后返回一个新的数组 jQuery.inArray( value, array ) 返回value在数组中的位置,如果没有找到,返回

2.5K10
领券