使用JQ实现统计剩余字数

前端外刊评论 2018-05-14

JQ实现统计文本框剩余字数

效果图：

使用JQ实现统计剩余字数

代码如下，复制即可使用：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用JQ实现统计剩余字数</title>
   <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<textarea name="" id="" cols="100" rows="30"></textarea>
<span>你还可以输入<strong style="color:red;">140</strong>个字
<script>
    var maxLength = 140;
    $('textarea').keyup(function(){
        var L = $(this).val().length;
        $('strong').text(maxLength-L);//总字数减去输入的字数

        if(parseInt($('strong').text())<0){
            $('strong').text('0'); //如果输入文字小于0 则文本显示为0
            //alert($(this).val()）;
            var val1 = $(this).val().substr(1,140);//截取输入长度
            //substr（不推荐使用，ECMAScript没有标准化substr()方法）
            $(this).val(val1);
        }
    })
</script>
</body>
</html>

如果有更好的方法，可以和我们大家一起分享哦，如有错误，欢迎联系我改正，非常感谢！！！

前端外刊评论

前端外刊评论

相关推荐

jQ选择器

// console.log; //获取到.father下的所有子代div标签和页面上所有的p标签。// console.log; //报错 jQuery里面压根没这种写法。-- 过滤选择器前面都会加一个冒号 :odd 找到索引号为奇

e度空间 / 0评论 2020-05-16

jquery

jq能实现的都可以用js实现，　　$(function(){ //如果引入成功，函数能够执行成功 //如果前端报错 $ is not defined 那么一般都是jquery没有引入，或者引入没有生效。jq里面可以传字符串，选择器。尖括号标签的形式，函数

82550495 / 0评论 2020-05-12

JQ——设置值、DOM对象和JQ对象的转换

<p id="test">我是一个文本！<input type="button" value="JQ对象转换为DOM对象" id="button"/>

liaoxuewu / 0评论 2020-01-25

JQ——DOM操作（获取值）

<p id="test">海军军医大学第二附属医院举行了<b>“赴湖北抗击疫情誓师大会”</b>。该院首批医疗队60人已集结完毕，除夕之夜奔赴武汉。<input type="text&

liaoxuewu / 0评论 2020-01-25

JQ——初识JQ、JQ入口函数与JS入口函数的区别

write less,do more：写更少的代码，做更多的事情。jQuery本质上是一个快速、简洁的JavaScript框架。

89463661 / 0评论 2020-01-25

Html css jq 组合制作全选与全不选

要求:点击选择,选择1 选择2全部选中,只点击选择1或选择2 全选不选中,选择1,选择2同时选中时,全选选中;添加 删除一行标签;<scriptsrc="js/comm.js"></script>

福叔 / 0评论 2019-12-20

jquery

<script src="path/jquery-v.js"></script> // 引入本地路径的jq文件。var $box = $; $img = $;?$box.attr

donghongbz / 0评论 2019-12-22

dom与jq基础使用

在css的dom树里讲过，浏览器把标签解析成一个巨大的对象renderTree，然后js出现了能操作renderTree的功能，每一个标签都是一个独立的可以被js单独操作的对象。//怎么改颜色呢？控制这个dom对象的style属性，这个属性也是一个对象，这

SIMONDOMAIN / 0评论 2019-12-13

jQuery中eq和get的区别【转】

相信大部份人都会把这2个的用法搞错。eq返回的是一个jquery对象，get返回的是一个html 对象数组。当然，你也可以get后把对象转为jq的对象再进行操作：$.css 至此，eq和get的区别阐述完毕，有不对的请指出

宇智波鼬 / 0评论 2015-04-14

jQ对象与JS对象的相互转换

jQuery对象转成DOM对象： 两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get; jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。如：var $v =$ ; //jQuery对象 var

Luu / 0评论 2016-11-19

JQ 内容的显示与隐藏

<title>简单的jQuery hide()方法演示。<p>点我，我就会消失。<title>另一个hide()实例。演示如何隐藏文本。<p>阅谁问君诵，水落清香浮。<title>通过 jQuer

SinhaengHhjian / 0评论 2016-11-19

JQ Callback 回调函数

Callback 函数在当前动画 100% 完成之后执行。jQuery 动画的问题许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。

XTUxiaoxin / 0评论 2016-11-14

JQ 遍历祖先

祖先是父、祖父或曾祖父等等。通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。向上遍历 DOM 树这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：parent()，parents()，parentsUntil(). * par

aaaaaaaa00 / 0评论 2016-11-14

vue可完全替代jq吗

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，

miyacnn / 0评论 2019-07-12

如何使用 jq 接收 blob 数据

如何使用 jq 接收 blob 数据 更多前端技术和知识点，搜索订阅号 JS 菌 订阅目前 jq 用的人还是挺多的，在一些简单的促销 h5 页面，用 jq 去实现一些简单的功能还是比较方便的。本文展示如何用 JQ 去请求一个 blob 对象的 img 图片

roodyszz0 / 0评论 2019-07-01

一个JSON字符串和文件处理的命令行神器jq，windows和linux都可用

Windows和Linux版本均只有两个可执行文件，大小不过2MB多。以Windows版本为例，介绍其用法。假设我有一个复杂的json文件，用Sublime Text等文本编辑器打开，格式很乱。jq会自动美化这个json文件，将美化后的内容打印到控制台上。

luoshuitianyi / 0评论 2019-06-28

JQ focus选择器的使用

<div style="width: 200px; margin: 20px auto 0 auto;">. <div id="message" style=" width: 200px;

82473264 / 0评论 2017-02-23

JQ 最少代码实现带数字和箭头的焦点图

<!DOCTYPE html>. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />. <scri

WCschool官方 / 0评论 2017-02-17

jQ对象与JS对象的相互转换

jQuery对象转成DOM对象： 两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get; jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。如：var $v =$ ; //jQuery对象 var

flywaterfree / 0评论 2016-11-19

JQ Callback 回调函数

Callback 函数在当前动画 100% 完成之后执行。jQuery 动画的问题许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。

gamecalo / 0评论 2016-11-14

JQ 遍历祖先

祖先是父、祖父或曾祖父等等。通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。向上遍历 DOM 树这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：parent()，parents()，parentsUntil(). * par

yaocong / 0评论 2016-11-14

JQ 常用的jQuery方法

<p class="aaa">阅谁问君诵，水落清香浮。$.attr;//设置图片src属性为test.jpg. ");//设置所有 p 元素的文本内容。//用post提交到demo.php ,post参数为name

CaoMary / 0评论 2016-11-09

JQ 插件的理解

jQuery为开发插件提拱了两个方法，分别是：jQuery.fn.extend();jQuery.extend();PS：jQuery.fn 等价 jQuery.prototype。$为一个jQuery实例，当它调用成员方法 showBtnVal 后，便实

pplxh / 0评论 2016-10-26

jq ajax请求状态值返回12152错误linux weblogic

今天晚上之前运行一直良好的项目，突然出现ajax无法请求问题。然后一路跟踪此错误找相关资料，但均为解决此问题。

aspshipin / 0评论 2016-10-17

JQ 子元素过滤选择器

<input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>. <div class="

dangzhangjing / 0评论 2016-04-12

JQ 属性选择器

<input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7

myloveqiqi / 0评论 2016-04-12

JQ 可见性过滤选择器

//给id为mover的元素添加动画.//选取所有不可见的元素.包括<input type="hidden"/>.alert( "不可见的元素有："+$('body :hidden').length +&

Ydgent / 0评论 2016-04-12

JQ 基本过滤选择器

//选择 所有的标题元素.比如h1, h2, h3等等...//选择 当前正在执行动画的所有元素.<input type="button" value="选择class不为one的 所有div元素." id=&

覆雪蓝枫 / 0评论 2016-04-11

JQ 层次选择器

//在body内的选择 元素名是div 的子元素.//选择 id为two的元素后面的所有div兄弟元素.<input type="button" value="选择 所有class为one 的下一个div元素."

Simagle / 0评论 2016-04-11

JQ validation表单验证

-- 经过测试 jquery-1.10.1.min.js 是无法进行验证，而 js/jquery-1.3.1.min.js 则可以，required: '请输入姓名',

XiaoSpring / 0评论 2016-04-07

JQ 树形菜单[含完整代码]

<!<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />. <script type="text

贱贱的梦想 / 0评论 2015-12-16

基于html5开发中点击事件在移动端的问题总结

还有一种方式也可以使用zepto.js中的tap事件来解决。

zjnig的信息仓库 / 0评论 2015-05-21

jQuery中eq和get的区别【转】

相信大部份人都会把这2个的用法搞错。eq返回的是一个jquery对象，get返回的是一个html 对象数组。当然，你也可以get后把对象转为jq的对象再进行操作：$.css 至此，eq和get的区别阐述完毕，有不对的请指出

愚盦 / 0评论 2015-04-14

从零开始教你用vue-cli一招引入jq和boostrap

jq和boostrap占了在以前的前端半壁江山如今是vue react augular 三分天下jq和boostrap有着成熟体系和架构 那我们用vue-cli如何引用jq和boostrap呢？1 安装vue-cli脚手架vue-cli脚手架工具快速构建项

kiramario / 0评论 2019-06-27

面试题：没有es6老项目，如何用jq解决异步的问题？

我们都知道es6提供了promise异步写法，但是大部分的公司都是jq写的，那我们如何用Jq来写和promise异步一样的写法呢？这个知道的人不多下面我们就来写写把注意： 1 JQ 1.5以上2 关键api: $.Deferred(). </html

86264153 / 0评论 2019-06-27

jQuery .attr() .prop() .data() 区别

.attr()，此方法从jq1.0开始一直存在，官方文档写的作用是读/写DOM的attribute值，其实1.6之前有时候是attribute，有时候又是property。.data()，此方法在jq1.2.3引入，作用是把任意的值读取/存储到DOM元素对

DreamLee / 0评论 2013-12-21

jQuery资料库

$.noConflict();//var jq=jQuery.noConflict()，帮助您使用自己的名称来代替 $ 符号。//某些其他 JavaScript 库中的函数同样使用 $ 符号。//jQuery 使用名为 noConflict() 的方法来解

聆听蘭 / 0评论 2013-11-06

jQuery从1.9开始，这些方法已经被删除了，用最新版JQ的同学注意啦。

jQuery1.9删除了一些在1.8中已经过时的api,想要把那些不够安全的、缺乏效率的、用处不大的，以及带有误导的特性统统去掉。)toggle()方法可实现点击一个元素来执行指定函数。此方法被删除以减少混乱和提高潜在的模块化程度。jQuery.brows

83510191 / 0评论 2013-06-27

jquery mobile touch

刚才看到项目中bind的tap事件，查一下js里面并无此事件，后来一想应该是JQ里面的，果然。

89387341 / 0评论 2013-06-25

jQ进阶篇--jQuery 对AMD的支持（Require.js中如何使用jQuery）

AMD 模块AMD格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案。AMD 模块格式本身是一个关于如何定义模块的提案，在这种定义下模块和依赖项都能够异步地进行加载。它有很多独特的优势，包括天生的异步及高度灵活等特性，这些

人心 / 0评论 2019-06-21

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数同样使用 $ 符号。jQuery 使用名为 noConflict() 的方法来解决该问题。var jq=jQuery.noConflict()，帮助您使用

Haoroid / 0评论 2012-09-17

dom对象与jq对象的区别

作为一名刚出来的前端菜鸟，有时候jq对象和dom对象概念理解的不是很深入。空闲时间写点东西来理解一下。$.eq和$[0]获取的是同一个对象，为什么$[0].attr会报错jQuery方式获取的对象使不能直接使用JavaScript的一些方法的，原来jQue

shilei0 / 0评论 2019-06-20

《JQuery 能干点啥~》第二讲——input取值，赋值篇

今天 就在讲的 浅显一点，力求 长个脑袋，带个眼睛 的人都能看懂~~来学JQ的一定都会HTML，那么也应该知道id的重要性~如果不会HTML，可以去坛子里看另一篇帖子，是美女写的~~也在持续更新中~所以这里我就不细讲啥是id了~1<input id=

83570690 / 0评论 2012-07-04

EXTJS添加JQ支持

<!-- 添加jQuery支持 -->. <script type="text/javascript" src="../../ext/ext-all.js"></script>.

vincent / 0评论 2012-03-05

替换jquery的$

jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数同样使用 $ 符号。jQuery 使用名为 noConflict() 的方法来解决该问题。var jq=jQuery.noConflict()，帮助您使用

82483564 / 0评论 2011-09-23

JQuery遮罩层

<!padding : 0px ;margin : 0px ;background : #555 ;position : absolute ;Mask.load() ;}) ;var jq = _render() ;unload(jq) ;}) ;}

scjcjlu / 0评论 2011-07-26

jq 3种初始化执行方式

});ps;不用jquery，在页面初始化的方法，

刁连通 / 0评论 2011-05-03

jquery注入页面

varseqIdsValue=JQ("#attach_seqIds_"+divId).value==null?"":JQ("#attach_seqIds_"+divId).value;vardel

msyndra / 0评论 2011-01-22

Jquery对象与JavaScript DOM之间的相互转化教程

jquery使得JavaScript开发变得简单，但是存在的问题是Jquery对象不能调用原生JavaScript的内置方法，js DOM又不能使用Jquery的库函数，有时候我们不得已使这两种对象相互转化。以下分别作说明：

品寂寞悟人生 / 0评论 2018-04-04

js,jq,css多方面实现简易下拉菜单功能

<link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" r

purecss / 0评论 2017-05-13