标签：function length jquer 获取 元素 div append src 截取
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>前端增删上下移文字计数</title> 6 </head> 7 <body> 8 <textarea id="textarea"></textarea> 9 10 <div id="ine">0/20</div> 11 12 <button id="ok">添加</button> 13 14 <ol id="box"> 15 <li>前端增删上下移文字计数<button class="setup">上移</button><button class="setdown">下移</button><button class="setdel">删除</button></li> 16 </ol> 17 18 </body> 19 <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script> 20 <script type="text/javascript" charset="utf-8"> 21 /* 设置字数计量 */ 22 var bind_name = ‘input‘; 23 if (navigator.userAgent.indexOf("MSIE") != -1) { //（此处是为了兼容IE） 24 bind_name = ‘propertychange‘; 25 } 26 if (navigator.userAgent.match(/android/i) == "android") { 27 bind_name = "keyup"; 28 } 29 30 /* 字数判定函数 */ 31 $("#textarea").bind(bind_name, function() { 32 var limitSub = $(this).val().substr(0, 20); 33 $(this).val(limitSub); //截取字符长度 34 $(this).next(‘#ine‘).html(limitSub.length + ‘/20‘); //获取实时输入字符长度并显示 35 if (limitSub.length == 20) { 36 $(‘#ine‘).css(‘color‘, ‘red‘); //超出指定字符长度标红提示 37 alert(‘你已超出20个字！‘); 38 } else { 39 $(‘#ine‘).css(‘color‘, ‘#666‘); 40 } 41 }); 42 43 /* 点击添加函数 */ 44 $(document).on("click", "#ok", function() { 45 var val = $("#textarea").val() 46 //alert(val); 47 var tem = ""; 48 49 tem += ‘<li>‘; 50 tem += ‘<span>‘; 51 tem += val; 52 tem += ‘</span>‘; 53 tem += ‘<button class="setup">‘; 54 tem += ‘上移‘; 55 tem += ‘</button>‘; 56 tem += ‘<button class="setdown">‘; 57 tem += ‘下移‘; 58 tem += ‘</button>‘; 59 tem += ‘<button class="setdel">‘; 60 tem += ‘删除‘; 61 tem += ‘</button>‘; 62 tem += ‘</li>‘; 63 64 if (val = null || val == "") { 65 alert("输入为空!!!"); 66 } else { 67 $("#box").append(tem); 68 alert("添加成功!!!"); 69 } 70 $("#textarea").val(""); 71 $("#ine").html(‘0/200‘).css(‘color‘, ‘#666‘); 72 }); 73 74 /* 上移 */ 75 $(‘#box‘).on(‘click‘, ‘.setup‘, function() { 76 var $oP = $(this).parents("li"); 77 $oP.fadeOut().fadeIn(); 78 // $oP.addClass("active").siblings().removeClass("active"); 79 $oP.prev().before($oP); //prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。 80 }); //before() 方法在被选元素前插入指定的内容。 语法：$(selector).before(content) 81 82 /* 下移 */ 83 $(‘#box‘).on(‘click‘, ‘.setdown‘, function() { 84 var $oP = $(this).parents("li"); 85 $oP.fadeOut().fadeIn(); 86 // $oP.addClass("active").siblings().removeClass("active"); 87 $oP.next().after($oP); //after() 方法在被选元素后插入指定的内容。 88 }) 89 90 /* 删除 */ 91 $(‘#box‘).on(‘click‘, ‘.setdel‘, function() { 92 $(this).closest(‘li‘).remove(); 93 alert("删除成功!!!"); 94 }) 95 </script> 96 </html>
标签：function length jquer 获取 元素 div append src 截取
原文地址：https://www.cnblogs.com/antao/p/12516103.html
