<style> /修改提示文字的颜色/ input::-webkit-input-placeholder { / WebKit browsers / color: red; } input:-moz-placeholder { / Mozilla Firefox 4 to 18 / color: red; } input::-moz-placeholder { / Mozilla Firefox 19+ / color: red; } input:-ms-input-placeholder { / Internet Explorer 10+ / color: red; } </style>
方法一：html5配合css3实现带提示文字的输入框(摆脱js)；
webkit特有的一个css，可以控制里面的文字样式，配合css3的动画效果和伪类，我们就可以很容易做出一个带动画的输入框，在系统登录、搜索等位置很适合，感兴趣的你可以参考下本文或许可以帮助到你，Webkit作为载体开发系统，当然需要大量使用Html5与CSS3，不仅减少大量的JS还可以保证更流畅。
当选中对话框后，提示文字变浅色,输入后消失.这个现在通行的做法是在Input标签后面增加一个Label。使用JS控制。
HTML5出现后，我们有一个更好的方法。
|
1
|
<input type="text" placeholder="用户名或邮件地址" name="username"/>
|
看到有placeholder标签，可以作为用户文字提示。这样子就非常方便了。但是为了最求完美，我们需要在选中后，将文字变浅，或者修改提示文件的样式，我们该怎么办？
|
1
2
3
4
5
6
7
8
|
input::-webkit-input-placeholder {
color: #999;
-webkit-transition: color.5s;
}
input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {
color: #c2c2c2;
-webkit-transition: color.5s;
}
|
-webkit-input-placeholder，webkit特有的一个css，可以控制里面的文字样式，配合css3的动画效果和伪类，我们就可以很容易做出一个带动画的输入框，在系统登录、搜索等位置很适合。当然你要为了兼容IE6，这个方法是行不通。不过Ie9也支持placeholder标签，就是无法修改它的颜色而已。
那么，如果不支持该怎么办？可以简单直接使用Jquery帮忙，那么在就不在本文讨论范围了。
给一个Demo，Demo地址 必须在Webkit浏览器下才看到完整效果。是不是很方便？
方法二：就是 js 控制；
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<script type="text/javascript">
$(document).ready(function(){
$("#focus .input_txt").each(function(){
var thisVal=$(this).val();
//判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
if(thisVal!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
//聚焦型输入框验证
$(this).focus(function(){
$(this).siblings("span").hide();
}).blur(function(){
var val=$(this).val();
if(val!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
});
})
$("#keydown .input_txt").each(function(){
var thisVal=$(this).val();
//判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
if(thisVal!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
$(this).keyup(function(){
var val=$(this).val();
$(this).siblings("span").hide();
}).blur(function(){
var val=$(this).val();
if(val!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
})
})
})
</script>
|
效果如图；
点击的时候，提示文字消失；失去焦点的时候提示文字出现，但是有内容输入后失去焦点也不显示提示文字；还有，密码框和文本框不一样啊，密码框的值不显现的。
方法三：直接写标签上；（这个比较实用）
代码如下：
|
1
2
|
<input type="text" value="提示内容。。。" onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style ="#999;"/>
</div>
|
总结
以上所述是小编给大家介绍的input 标签实现输入框带提示文字效果(两种方法)，希望对大家有所帮助
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。根据项目需求，抽象出一些组件，每个组件里包含了展现、功能和样式。每个页面，根据自己所需，使用不同的组件来拼接页面。这种开发模式使前端页面易于扩展，且灵活性高，而且组件之间也实现了解耦。本文将详细介绍Vue组件基础用法
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例
组件是一个自定义元素或称为一个模块，包括所需的模板、逻辑和样式。在HTML模板中，组件以一个自定义标签的形式存在，起到占位符的功能。通过Vue.js的声明式渲染后，占位符将会被替换为实际的内容
下面是一个最简单的模块示例
<div id="app"> <xiaohuochai></xiaohuochai> </div>
组件注册包括全局注册和局部注册两种
【全局注册】
要注册一个全局组件，可以使用 Vue.component(tagName, options)
Vue.component('my-component', { // 选项 })
组件在注册之后，便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用
[注意]要确保在初始化根实例之前注册了组件
<div id="example"> <my-component></my-component> </div>
<script> // 注册 Vue.component('my-component', { template: '<div>A custom component!</div>' }) // 创建根实例 new Vue({ el: '#example' }) </script>
【局部注册】
通过使用组件实例选项components注册，可以使组件仅在另一个实例/组件的作用域中可用
<div id="example"> <my-component></my-component> </div>
<script> // 注册 var Child = { template: '<div>A custom component!</div>' }; // 创建根实例 new Vue({ el: '#example', components: { // <my-component> 将只在父模板可用 'my-component': Child } }) </script>
组件树
使用组件实例选项components注册，可以实现组件树的效果
<div id="example"> <my-component></my-component> </div>
<script> // 注册 var headerTitle = { template: '<p>我是标题</p>', }; var headerContent = { template: '<p>我是内容</p>', }; var header = { template: ` <div class="hd"> <header-content></header-content> <header-title></header-title> </div> `, components: { 'header-content': headerContent, 'header-title': headerTitle } }; // 创建实例 new Vue({ el: '#example', components: { 'my-component': header } }) </script>
对于大型应用来说，有必要将整个应用程序划分为组件，以使开发可管理。一般地组件应用模板如下所示
<div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view> </div>
【v-once】
尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来
Vue.component('my-component', { template: '<div v-once>hello world!...</div>' })
在组件注册中，使用template选项中拼接HTML元素比较麻烦，这也导致了HTML和JS的高耦合性。庆幸的是，Vue.js提供了两种方式将定义在JS中的HTML模板分离出来
【script】
在script标签里使用 text/x-template 类型，并且指定一个 id
<script type="text/x-template" id="hello-world-template"> <p>Hello hello hello</p> </script>
Vue.component('hello-world', {
template: '#hello-world-template'
})
上面的代码等价于
Vue.component('hello-world', { template: '<p>Hello hello hello</p>' })
下面是一个简单示例
<div id="example"> <my-component></my-component> </div>
<script type="text/x-template" id="hello-world-template"> <div>hello world!</div> </script>
<script> Vue.component('my-component', { template: '#hello-world-template' }) new Vue({ el: '#example' }) </script>
【template】
如果使用<template>标签，则不需要指定type属性
<div id="example"> <my-component></my-component> </div>
<template id="hello-world-template"> <div>hello world!</div> </template>
<script> // 注册 Vue.component('my-component', { template: '#hello-world-template' }) // 创建根实例 new Vue({ el: '#example' }) </script>
对于组件的命名，W3C规范是字母小写且包含一个中划线(-)，虽然Vue没有强制要求，但最好遵循规范
<!-- 在HTML模版中始终使用 kebab-case --> <kebab-cased-component></kebab-cased-component> <camel-cased-component></camel-cased-component> <pascal-cased-component></pascal-cased-component>
当注册组件时，使用中划线、小驼峰、大驼峰这三种任意一种都可以
// 在组件定义中
components: {
// 使用 中划线 形式注册
'kebab-cased-component': { /* ... */ },
// 使用 小驼峰 形式注册
'camelCasedComponent': { /* ... */ },
// 使用 大驼峰 形式注册
'PascalCasedComponent': { /* ... */ }
}
并不是所有的元素都可以嵌套模板，因为要受到HTML元素嵌套规则的限制，尤其像<ul>，<ol>，<table>，<select> 限制了能被它包裹的元素，而一些像 <option> 这样的元素只能出现在某些其它元素内部
[注意]关于HTML标签的详细嵌套规则移步至此
在自定义组件中使用这些受限制的元素时会导致一些问题，例如
<table id="example"> <my-row>...</my-row> </table>
自定义组件 <my-row> 被认为是无效的内容，因此在渲染的时候会导致错误
<script> // 注册 var header = { template: '<div class="hd">我是标题</div>' }; // 创建实例 new Vue({ el: '#example', components: { 'my-row': header } }) </script>
【is属性】
变通的方案是使用特殊的 is 属性
<table id="example"> <tr is="my-row"></tr> </table>
<script> // 注册 var header = { template: '<div class="hd">我是标题</div>' }; // 创建实例 new Vue({ el: '#example', components: { 'my-row': header } }) </script>
Vue强制要求每一个Vue实例(组件本质上就是一个Vue实例)需要有一个根元素
如下所示，则会报错
<div id="example"> <my-component></my-component> </div>
<script>
// 注册 Vue.component('my-component', {
template: ` <p>第一段</p> <p>第二段</p> `,
})
// 创建根实例
new Vue({
el: '#example' })
</script>
需要改写成如下所示
<script>
// 注册 Vue.component('my-component', {
template: ` <div> <p>第一段</p> <p>第二段</p> </div> `,
})
// 创建根实例
new Vue({
el: '#example' })
</script>
一般地，我们在Vue实例对象或Vue组件对象中，我们通过data来传递数据
<div id="example"> <my-component></my-component> <my-component></my-component> <my-component></my-component> </div>
<script> // 注册 Vue.component('my-component', { template: '<div>{{message}}</div>', data:{ message: 'hello' } }) // 创建根实例 new Vue({ el: '#example' }) </script>
运行上面的代码，会使Vue停止执行，并在控制台发出错误提示，告诉你在组件中 data 必须是一个函数
可以用如下方式来绕开Vue的错误提示
<script> // 注册 var data = {counter: 0} Vue.component('my-component', { template: '<button v-on:click="counter += 1">{{ counter }}</button>', data:function(){ return data; } }) // 创建根实例 new Vue({ el: '#example' }) </script>
由于这三个组件共享了同一个 data，因此增加一个 counter 会影响所有组件
当一个组件被定义， data 需要声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象。通过提供 data 函数，每次创建一个新实例后，能够调用 data 函数，从而返回初始数据的一个全新副本数据对象
因此，可以通过为每个组件返回全新的 data 对象来解决这个问题：
<script> // 注册 Vue.component('my-component', { template: '<button v-on:click="counter += 1">{{ counter }}</button>', data:function(){ return {counter: 0}; } }) // 创建根实例 new Vue({ el: '#example' }) </script>
现在每个 counter 都有它自己内部的状态了
有时候，可能想在某个组件的根元素上监听一个原生事件。直接使用v-bind指令是不生效的
<div id="example"> <my-component @click="doTheThing"></my-component> <p>{{message}}</p> </div>
<script> Vue.component('my-component', { template: '<button>按钮</button>', }) new Vue({ el: '#example', data:{ message:0 }, methods:{ doTheThing(){ this.message++; } } }) </script>
可以使用 .native 修饰 v-on指令即可
<div id="example"> <my-component @click.native="doTheThing"></my-component> <p>{{message}}</p> </div>
<script> Vue.component('my-component', { template: '<button>按钮</button>', }) new Vue({ el: '#example', data:{ message:0 }, methods:{ doTheThing(){ this.message++; } } }) </script>
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1. 直接用
<template>
<img src="@/assets/images/img.png">
<img src="../../../assets/images//img.png">
<template/>
2. import引入
<template>
<img :src="imgUrl">
<template/>
<script>
import imgUrl from '@/assets/images/img.png'
export default {
data () {
return {
imgUrl: imgUrl
}
}
}
</script>
同上 一、2import引入
.test1 {
background-image: url(../../../../assets/images/img.png)
}
.test2 {
background-image: url(@/assets/images/img.png);
}
<style scoped lang="scss">
$img: "../../assets/images/img.png";
.test {
background-image: url('#{$img}');
}
文章来源：csdn
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
实现功能：dataTable某列内容过长的话，只显示部分内容，鼠标点击显示全部，再点击显示部分。可以切换。
效果图：
鼠标点击：
如果再次点击，备注内容又收缩了。
JS实现代码如下：
var remarkShowLength = 10;//默认现实的字符串长度datatable中的配置：
首先在 columnDefs 中显示文本的时候，如果超长，就只显示部分。
然后通过 createdRow ，如果备注信息超长的话，给该td元素添加上onclick时间，鼠标点击的时候，可以进行切换。并且将全部的字符信息 data.remarks 放置到属性中去，以便后面可以取出来。
-
"createdRow": function( row, data, dataIndex ) {
-
if(data.remarks.length > remarkShowLength){//只有超长，才有td点击事件
-
$(row).children('td').eq(7).attr('onclick','javascript:changeShowRemarks(this);');
-
}
-
$(row).children('td').eq(7).attr('content',data.remarks);
-
},
-
"ajax" : {
-
"url" : "/cluster/list?importantLevel=" + $('#searchImportantLevelSelect').val()
-
},
-
"columnDefs" : [
-
-
{
-
"type": "date",
-
"targets": 7,
-
"render": function (data, type, full, meta) {
-
if (full.remarks.length > remarkShowLength) {
return getPartialRemarksHtml(full.remarks);//显示部分信息 } else {return full.remarks;//显示原始全部信息 }
}}]下面从td的属性中取出全部的remark，然后根据当前是显示的全部还是显示的部分信息，进行切换。
-
//切换显示备注信息，显示部分或者全部
-
function changeShowRemarks(obj){//obj是td
-
var content = $(obj).attr("content");
-
if(content != null && content != ''){
-
if($(obj).attr("isDetail") == 'true'){//当前显示的是详细备注，切换到显示部分
-
//$(obj).removeAttr('isDetail');//remove也可以
-
$(obj).attr('isDetail',false);
-
$(obj).html(getPartialRemarksHtml(content));
-
}else{//当前显示的是部分备注信息，切换到显示全部
-
$(obj).attr('isDetail',true);
-
$(obj).html(getTotalRemarksHtml(content));
-
}
-
}
-
}
-
//部分备注信息
-
function getPartialRemarksHtml(remarks){
-
return remarks.substr(0,remarkShowLength) + ' <a href="javascript:void(0);" ><b>...</b></a>';
-
}
-
-
//全部备注信息
-
function getTotalRemarksHtml(remarks){
-
return remarks + ' <a href="javascript:void(0);" >收起</a>';
-
}
原文链接：https://blog.csdn.net/zz_chst/article/details/79587936?utm_source=blogxgwz5
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
table { width: 100%; float: left; table-layout:fixed; width:500px; border:1px solid #ccc; } table tr { line-height: 25px; border:1px solid #ccc; } table td { border:1px solid #ccc; text-align:center; } .MHover{ border:1px solid #ccc; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
<table> <tr> <th>姓名</th> <th>个性签名</th> <th>性别</th> </tr> <tr> <td>张国荣</td> <td> <div class="MHover">我就是我，是颜色不一样的烟火！</div> <div class="MALL">我就是我，是颜色不一样的烟火！</div> </td> <td>男</td> </tr> </table>
$(document).ready(function () { $(".MALL").hide(); $(".MHover").mouseover(function (e) { $(this).next(".MALL").css({"position":"absolute","top":e.pageY+5,"left":e.pageX+5}).show(); }); $(".MHover").mousemove(function (e) { $(this).next(".MALL").css({ "color": "fff", "position": "absolute", "opacity": "0.7", "background-color": "666", "top": e.pageY + 5, "left": e.pageX + 5 }); }); $(".MHover").mouseout(function () { $(this).next(".MALL").hide(); }); });
当表格的列比较多的时候，可能就需要固定表格的宽度了，默认的100%宽已经不适应了。默认的100%宽要实现改变窗口大小也100%的话，在table元素上添加width="100%",至于css的100%为什么不生效，原因未知。下面就说说设置如何给datatables设置固定的宽度。
1.html代码
<div id="tableArea"> <table id="userTable" class="display table table-bordered" cellspacing="0" > <thead> <tr> <th style="display: none">ck</th> <th>序号</th> <th>账号</th> <th>姓名</th> <th>CPID</th> <th>CP名称</th> <th>操作</th> </tr> </thead> </table> </div>
2.覆盖某些样式(我们的样式优先级高，所以会覆盖内置的样式)
#tableArea .dataTables_wrapper { position: relative; clear: both; zoom: 1; overflow-x: auto; } #tableArea table{ width: 800px; }
这里的overflow-x:auto是新增的，表示表格内容超出宽度后，出现横向滚动条；table的width必须写死宽度，直接写在table元素上不生效，原因未知。
3.设置列宽（可略）
"columns": [
{ "data": "number", "orderable": false ,"width":"100px","searchable": false}
]
4.运行浏览，发现此时，当浏览器窗口小于800像素的时候，表格出现了横向的滚动条，正是我们想要的结果。
5.为什么不用"scrollX":true的配置实现横向滚动条呢？查询它渲染后的网页发现，它把table拆分成了两个表格，一个表示表头，一个表示表体。这不是我想要的，而且它表头的内容若是超出的话是隐藏的。
6.还有两个样式，可以参考参考，可能对你有用。
table td{
word-break:break-all;
}
单词也可以允许换行，这对于单元格的宽度有很好的控制，而不会让单元格被内容撑开！
table
{
table-layout:fixed;
}
表格布局算法为固定（列宽由表格宽度和列宽度设定）。
文章来源：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
20
But this works $("#ID").getNiceScroll().remove();
但这有效$(“#ID”)。getNiceScroll()。remove();
Try to execute in console on nicescroll demo page: $("#boxscroll2").getNiceScroll().remove() and you'll see that first div This is a simple scrollable DIV will change from nicescroll scrollbars to native browser ones.
尝试在nicescroll演示页面的控制台中执行:$(“#boxscroll2”)。getNiceScroll()。remove(),你会看到第一个div这是一个简单的可滚动DIV,将从nicescroll滚动条更改为本机浏览器。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
$('table tr td').click(
function()
{
alert( $(this).parent().parent().find("tr").index($(this).parent()[0]));//第几行
alert($(this).index());//第几列
}
);
$('table tr td').click(
function()
{
var i = $(this).parent().parent().find("tr").index($(this).parent()[0]);//第几行
alert($("table:eq(0) tr:eq("+i+") td:eq(0)").text());//取点击行第一列的值
}
);
文章来源：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
首先，依赖jquery..
1 $('#btntb').click(function(){ 2 $('#tab tr').each(function(i){ // 遍历 tr 3 $(this).children('td').each(function(j){ // 遍历 tr 的各个 td 4 alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+$(this).text()+"。"); 5 }); 6 }); 7 });
js的方法
var tb = document.getElementById('tab'); // table 的 id var rows = tb.rows; // 获取表格所有行 for(var i = 0; i<rows.length; i++ ){ for(var j = 0; j<rows[i].cells.length; j++ ){ // 遍历该行的 td alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+rows[i].cells[j].innerHTML+"。"); // 输出每个td的内容 } }
Html代码
<div align="center"> <table id="tab" border="1" align="center"> <tr> <td>西瓜</td> <td>橙</td> </tr> <tr> <td>芒果</td> <td>桔子</td> </tr> <tr> <td>奇异果</td> <td>葡萄</td> <td>西柚</td> </tr> </table> <br> <button id="btntb">遍历table</button> </div>
文章来源：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1.value.toString()
2."" + value
3.String(value)
第一种方法存在的问题是,它不能把null和undefined转换为字符串.还有第二种和第三种方法,这两种方法的效果基本一样.
""+value: 使用加法运算符配合一个空字符串可以把任意值转换为字符串,我觉得这种方法代码的可读性很差,但相对String(value)来,还是有一些人更喜欢用这种转换方式.
String(value): 这种方法可读性更好,唯一的问题是,这种函数调用可能会迷惑一些人,尤其是那些熟悉Java的程序员,因为String同时也是一个构造函数.要注意的是它作为普通函数和作为构造函数时的表现完全不同
其他：
a. 要把一个数字转换为字符串，只要给它添加一个空的字符串即可：
var n = 100;
var n_as_string = n + "";
b. 要让数字更加显式地转换为字符串,可以使用String()函数:
var string_value = String(number);
c. 使用toString()方法:
string_value = number.toString();
Number对象的(基本的数字转换为Number对象，以便可以调用这个方法)toString()方法有一个可选的参数，该参数用来指定转换的基数。如果不指定这个参数，转换会以10为基数进行。然而，也可以按照其他的基数(2到36之间的数)来转换数字。
var n = 17;
binary_string = n.toString(2); // Evaluates to "10001"
octal_string = "0" + n.toString(8); // Evaluates to "021"
hex_string = "0x" + n.toString(16); // Evaluates to "0x11"
d. toFixed()方法把一个数字转换为字符串，并且显示小数点后的指定的位数。它不使用指数表示法。
var n = 123456.789;
n.toFixed(0); // "123457"
n.toFixed(1); // "123456.8"
e. toExponential()使用指数表示法把一个数字转换为字符串，小数点前面有1位数，而小数点后面有特定的位数。
var n = 123456.789;
n.toExponential(1); // "1.2e+5"
n.toExponential(3); // "1.235e+5"
f. toPrecision()使用指定的有意义的位数来显示一个数字，如果有意义的位数还不够显示数字的整个整数部分，它就使用指数表示法。
var n = 123456.789;
n.toPrecision(4); // "1.235e+5"
n.toPrecision(7); // "123456.8"
文章来源：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com