当前位置: 首页 > news >正文

jquery操作字符串常用方法总结及工作代码

为什么80%的码农都做不了架构师?>>>   hot3.png

1.javascript数组用法

方法描述FFIE
concat()连接两个或更多的数组,并返回结果。14
join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。14
pop()删除并返回数组的最后一个元素15.5
push()向数组的末尾添加一个或更多元素,并返回新的长度。15.5
reverse()颠倒数组中元素的顺序。14
shift()删除并返回数组的第一个元素15.5
slice()从某个已有的数组返回选定的元素14
sort()对数组的元素进行排序14
splice()删除元素,并向数组添加新元素。15.5
toSource()返回该对象的源代码。1-
toString()把数组转换为字符串,并返回结果。14
toLocaleString()把数组转换为本地数组,并返回结果。14
unshift()向数组的开头添加一个或更多元素,并返回新的长度。16
valueOf()返回数组对象的原始值14

上边列出来的就是JavaScript对数组对象的封装,通过以上方法,可以轻松便捷的操作数组对象,引用网址:http://www.cnblogs.com/zyh-nhy/archive/2007/08/08/847876.html

2.checkbox
对于复选框来说,一般有一个固定的流程,许多的复选框都归结于一个属性,所以通常使用textbox或者label对象来存储一族复选框的值,只需要把textbox或者label的属性设置成hidden即可。在页面传参或者获取参数时,只需要操作响应的textbox或者label即可。
例如:
<div id="crowd" class="checkbox_bgfl">
 

<input name="crowd" type="hidden"/>
  <p><inputtype="checkbox" value="137"/><span>老人</span></p>
  <p><inputtype="checkbox" value="138"/><span>青年</span></p>
  <p><inputtype="checkbox" value="139"/><span>儿童</span></p>
 </div>
该复选框族是选出适宜人群,在js中对其操作如下:
var crowd=[],//声明存取复选框值的数组
$("#crowd input:checkbox:checked").each(function(){
   crowd.push(this.value);
 });//遍历复选框,将选中的值存入crowd 数组
   $("#crowdinput:hidden").val(crowd.join(","));//从crowd数组中取出值,并且将这些值串成一个字符串,值与值之间用逗号分隔。
例如选中老人和儿童,则参数格式如下:...?crowd=137,139

3.select
jquery中select的操作相对简单,但是,可以通过append()函数动态的添加option项即可。
例如页面中有一个select控件如下:
<select id="crowd" name="crowd">
     <optionvalue="-1">请选择</option>
</select>
js代码如下所示:
var crowd="老人 137,青年 138,儿童 139";  //选项字符串数组
   crowd=crowd.split(",");//字符串分割
    vartemp=$("#crowd");//获取页面中的对象
   $each(crowd,function(){ //遍历选项串
     var value=this.split(" "); //将选项串继续分隔
     temp.append($("<option/>").html(value[0]).attr("value",value[1]));//添加option
 });
至此,select选项的初始化已经完成,由于该控件大多数情况下是使用的单值,所以表单值的获取不需要再写
此外select最重要的一个事件就要数onChange了,只需要在页面上加上onchange事件声明,然后再在jQuery中处理即可。

4.字符串函数
字符串的包装是许多语言中很重要的应用,因为非常实用,使用概率也很高,js也不例外,对字符串进行了一系列的封装,具体方法如下:

方法描述FFIE
anchor()创建 HTML 锚。13
big()用大号字体显示字符串。13
blink()显示闪动字符串。1 
bold()使用粗体显示字符串。13
charAt()返回在指定位置的字符。13
charCodeAt()返回在指定的位置的字符的 Unicode 编码。14
concat()连接字符串。14
fixed()以打字机文本显示字符串。13
fontcolor()使用指定的颜色来显示字符串。13
fontsize()使用指定的尺寸来显示字符串。13
fromCharCode()从字符编码创建一个字符串。14
indexOf()检索字符串。13
italics()使用斜体显示字符串。13
lastIndexOf()从后向前搜索字符串。13
link()将字符串显示为链接。13
localeCompare()用本地特定的顺序来比较两个字符串。14
match()找到一个或多个正在表达式的匹配。14
replace()替换与正则表达式匹配的子串。14
search()检索与正则表达式相匹配的值。14
slice()提取字符串的片断,并在新的字符串中返回被提取的部分。14
small()使用小字号来显示字符串。13
split()把字符串分割为字符串数组。14
strike()使用删除线来显示字符串。13
sub()把字符串显示为下标。13
substr()从起始索引号提取字符串中指定数目的字符。14
substring()提取字符串中两个指定的索引号之间的字符。13
sup()把字符串显示为上标。13
toLocaleLowerCase()把字符串转换为小写。--
toLocaleUpperCase()把字符串转换为大写。--
toLowerCase()把字符串转换为小写。13
toUpperCase()把字符串转换为大写。13
toSource()代表对象的源代码。1-
toString()返回字符串。--
valueOf()返回某个字符串对象的原始值。14

引用网址:http://www.w3school.com.cn/js/jsref_obj_string.asp

5.至于其他控件的使用在此先不赘述,后边用到在写,表单元素添加完成之后就是表单的提交了,以前也许是使用html的页面通用对象,比如request等设置参数,或者直接跟在地址后边,不论怎么处理,都要写一大堆的代码,然而使用jQuery之后,这一工作变的异常的简单。原因就是serialize()方法的使用。
例子如下:
html:
<form name="form1" id="form1"method="post">

<input type='text' name='name' value='John'/>
 

<input type='text' name='location' value='Boston'/>

<button name="bt" click="btClick">

</form>

jquery代码:

<script type="text/javasctipt">

  function btClick()

  {

     window.location.href=url+"?"+$("#form1").serialize();

  }

</script>

Result:

url?name=John&location=Boston  


// 订单金额信息
    var $orderMoneyInfo = $('#track'+orderId).children('td').eq(3).text();
    
    // 分割金额和支付方式文案
    var moneyIndex = $orderMoneyInfo.indexOf(".");
    
    var $moneyInfo = $orderMoneyInfo.substr(0, moneyIndex+3);
    var $paymentWayInfo = $orderMoneyInfo.substr(moneyIndex+3, $orderMoneyInfo.length);
    
    
    var $contend =
        "<div id=\"mbz\">" +
        "    <div class=\"m-text\"><i class=\"bg-joy\"></i>" +
        "        <p class=\"ftx-04\">replaceValue</p>" +
        "    </div>" +
            
        "<div class=\"m minfo\">" +
        "    <div class=\"mt\"><h3>订单信息</h3></div>" +
        "<div class=\"mc\">" +
        "    <ul class=\"list-oinfo\">" +
        "        <li>订单号:"+orderId+"</li>" +
        "        <li>订单金额:<strong class=\"ftx-01\">"+$moneyInfo+"</strong>&nbsp;&nbsp;&nbsp;"+$paymentWayInfo+"</li>" +
        "    </ul>" +
        "    <h5>订单商品:</h5>" +
        "    <div class=\"scrollimg\">" +
        "        <div id=\"scrollimg\" style=\"position: relative; width: 392px; height: 56px; overflow: hidden;\">" +
        "          <ul style=\"position: absolute; left: 0px; top: 0px; width: 784px;\">" +
                        $wareImagList +
        "          </ul>" +
        "        </div>" +
        "          <span id=\"prev\" class=\"disabled\">&lt;</span>" +
        "          <span id=\"next\" class=\"\">&gt;</span>" +
        "    </div>" +
        "</div>" +
        "</div>" +
        "<div class=\"btns\">" +
            "<a class=\"btn btn-6\" href=\"#none\" οnclick=\"finishConfirm("+orderId + "," + orderType + "," + venderId + ")\"><s></s>确定</a><a id='cancelBtn"+ orderId +"' class=\"btn btn-10\" href=\"#none\" οnclick=\"jdThickBoxclose()\"><s></s>取消</a>"+
        "</div>"+
        "</div>";
    
    if(orderType >=21 && orderType <=25){
        $contend = $contend.replace("replaceValue", "value1");
    } else {
        $contend = $contend.replace("replaceValue", "value2");
    }

转载于:https://my.oschina.net/lslDn/blog/1544045

相关文章:

  • retrofit post请求多文件,partMap用法
  • 【转载】Etcd+Confd实现Nginx配置文件自动管理
  • C#编程(五十五)----------HashSet和SortedSet
  • 云非万能!云计算不能解决的三大问题
  • maven打包加速(转) (开启多线程,之前发现只占用一核CPU100%,其他CPU闲置的情况)...
  • Android Studio 入门级教程
  • lua中实现倒计时
  • 条款7:为多态基类声明virtual析构函数
  • Linux下rootkit后门检测工具chkrootkit
  • 人们应将公共云与私有云的辩论抛之脑后
  • 毕业两年的程序猿经验小结
  • 数据库 之 SQL语句构成和分类
  • ImageSharp .NET Core跨平台图形处理库
  • 触摸屏手指滑动方向检测
  • jQuery EasyUI快速入门实战教程(一)-入门
  • 2017-08-04 前端日报
  • 4. 路由到控制器 - Laravel从零开始教程
  • Babel配置的不完全指南
  • dva中组件的懒加载
  • ES6核心特性
  • in typeof instanceof ===这些运算符有什么作用
  • Java的Interrupt与线程中断
  • leetcode378. Kth Smallest Element in a Sorted Matrix
  • node和express搭建代理服务器(源码)
  • Python_OOP
  • Swoft 源码剖析 - 代码自动更新机制
  • Vue--数据传输
  • 初识 webpack
  • - 概述 - 《设计模式(极简c++版)》
  • 基于Vue2全家桶的移动端AppDEMO实现
  • 开发了一款写作软件(OSX,Windows),附带Electron开发指南
  • 前端面试总结(at, md)
  • 深入浏览器事件循环的本质
  • 使用 Node.js 的 nodemailer 模块发送邮件(支持 QQ、163 等、支持附件)
  • 算法系列——算法入门之递归分而治之思想的实现
  • 学习笔记TF060:图像语音结合,看图说话
  • 一、python与pycharm的安装
  • 做一名精致的JavaScripter 01:JavaScript简介
  • Spark2.4.0源码分析之WorldCount 默认shuffling并行度为200(九) ...
  • 扩展资源服务器解决oauth2 性能瓶颈
  • 直播平台建设千万不要忘记流媒体服务器的存在 ...
  • #NOIP 2014# day.1 T2 联合权值
  • #Z0458. 树的中心2
  • #图像处理
  • (C语言)二分查找 超详细
  • (Forward) Music Player: From UI Proposal to Code
  • (初研) Sentence-embedding fine-tune notebook
  • (二)Eureka服务搭建,服务注册,服务发现
  • (附源码)ssm基于微信小程序的疫苗管理系统 毕业设计 092354
  • (六)什么是Vite——热更新时vite、webpack做了什么
  • (四)模仿学习-完成后台管理页面查询
  • (一)基于IDEA的JAVA基础10
  • (转)h264中avc和flv数据的解析
  • (转)visual stdio 书签功能介绍
  • .net core 实现redis分片_基于 Redis 的分布式任务调度框架 earth-frost