如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
我们在设计中除了接触到图形，还需要了解文字的设计。特别的文字设计或者排版可以使整体的画面效果更加有氛围，甚至超过图形表达的感受，更加直观地表达出内容的主旨。文字的设计方式有很多种，例如通过字体变形，结构重组等方式来让文字变得更加特别，但往往会让我们耗费比较多的时间。
因此我一直在思考有没有一些既简单又的设计方式来提高文字的设计感。在浏览国外的一些设计网站的过程中，做了一下文字设计形式方面的收集，并整理出十种我认为具有代表性的文字设计形式。另外还参考这些设计方式，使用中文字体进行了一些尝试。
拉伸的处理手法，让文字更具有张力，整体氛围更具标题感和图形化，但依然保留着文字该有的识别度。常见于纯文字排版的海报，既满足阅读需要，同时具有设计感。
拉伸与文字本身的字形、字体有着很大程度的关联，并不是所有的文字都适合拉伸，例如下面的案例。
1. 不同字体对比
从方案尝试中看出，左边字体在进行拉伸之后，文字本身的结构会遭到破坏，而右边的效果可以较为接受。因此在设计的过程中尽量选择可适用于拉伸的字体，另外在拉伸的过程中需要对细节重新处理，使字体保留原有字体的细节美感。
2. 不同字形的对比
从下面案例中对比，O 在进行上下拉伸的时候效果比较好，而左右拉伸的时候会失去字体本身的美感，而 Y 在上下左右拉伸后整体视觉效果都相对平衡。
3. 细节处理对比
优化字体线条的细节可以使得整体文字更加规整、方正（右边）。而未进行细节的设计则会显得笔画参差不齐（左边）。
4. 传统与现代对比
传统的字体拉伸后（如下图中间的字体），字体本身的韵味就失去了，因此不建议对一些较为传统的字体进行拉伸设计。
5. 设计尝试
中文字的笔画比较多样性，因此在细节的设计上比英文来得更加复杂，在处理「撇、捺、点、折、弯、勾」时需要保持原本的笔画结构性。
6. 拓展案例
结合实际要表达的内容，使用拉伸的设计手法，例如结合物体，叠加颜色或者交错拉伸等。
虚实结合即为线面/阴阳的设计手法，通过虚实的处理，可以突出一组或一段文字中的重点信息。在一些强调主次的设计中，可以尝试这种方式来做区分，线面结合的处理手法让原有都是面的字体多了一些透气感和空间感。
虚实处理的方法需要考虑本身字体的粗细，过分纤细的字体效果可能并不明显。
1. 尝试对比
从对比中，发现粗体相比于细体来得更加直接更容易出效果，对比明确。
2. 中文字体的尝试
从尝试中来看，与上面中的结论较为一致，较细的字体使用虚实结合效果并不理想。对于书法体的应用，更多需要考虑字体的收边效果是否工整，收边过碎，会影响在描边之后的细节美感。
3. 设计尝试
通过递增或者递减的设计手法，让原本简单重复的文字元素，变得更加具有层次感和节奏感，让文字的生命力变得更加丰富多样。
在设计的过程中需要提前规范好各个字体之间的差异关系及变化的效果过程。按照一定的数值倍数差异比进行变化。
1. 不同方式的尝试对比
在尝试的时候发现，粗细变化的模式可能更多会依赖于字体本身的模式。
2. 中文字体的尝试
中文在使用递进渐变的方式中需要考虑整体文字的结构感和块状感，由于字形较为复杂，整体视觉效果会过于零碎。
与递进渐变接近但却又有差别的文字设计形式。扩展变化的文字具有张力的同时有一定的速度感和发射性，就像向四周展开的波纹效果，具有延续性。
按文字的行高或者字宽作为基础值，按一定的比例，对文字进行破形切割处理，上下左右进行扩展发散。
1. 比例值示意效果
2. 中文字体的尝试
外观的完整度还算可以，但由于中文本身自有的特性（笔画较为丰富多样），因此在扩展层次的数量上需要进行一定的控制，不宜过多，以短语或标题使用较好，避免过于形式而导致文字识别性降低。
3. 设计尝试
文字作为纹理出现在画面中，区别于图形化的纹理。既有图形感，同时可以辅助传达一定的信息和态度。
在字体的选择上尽量适用字形较为简洁的字体，避免影响前景内容的展示。设计上可以结合其他的设计形式，例如虚实结合/拉伸变形/扩展变化等方式，提升画面的丰富程度。
1. 中文字体的尝试
常规的中文字体，整体效果还算不错。但结合中国书法字作为底纹，可以让整体的设计更具有不同于英文的设计感，整体效果更具有力量感，因此建议在设计中文底纹的时候可以大胆尝试中文书法字。
通过叠加的方式，让原本简单的文字和背景产生了融合。既提升了背景的层次感，又让文字变得具有设计感。
粗细的字体会产生不一样的视觉感受，较细的字体会产生若隐若现的视觉效果，文字的识别性会稍弱，较粗的字体识别度基本上没有太大问题，因此在设计的过程中可以结合实际的情况选择不同粗细的文字。
1. 粗细对比尝试
穿透的文字设计，对于打造设计的大片感具有很突出的视觉效果。例如漫威的电影片头设计。
2. 中文字体的尝试
结合不同的语意使用不同的字体，再结合穿透的设计方式，使画面具有中文的文艺感。
3. 拓展案例
结合实际的内容设计，穿透文字的玩法还可以拓展出更多不一样的设计，例如下面这些例子。
扭动的设计，让文字具有曲线的动态感，提升了文字的装饰性。不同曲线的动态变化，赋予文字不同的律动感。变形的文字并未影响到文字该有的识别性和阅读感，却具有了设计感。
如下面的三个案例，曲率的差别，赋予文字不同的动态规则，有不同的视觉感知，有时柔美，有时却具有速度感。因此在设计的时候，可根据具体的内容设计不同的扭动趋势。
1. 中文字体的尝试
对比可见较细的字体使用扭动的设计，效果并不理想。由于中文笔画的差异点，经过扭动之后整体外形较为不规整，而粗体的效果则较为规整，动态曲线趋势也较为明显。
2. 设计尝试
扭动+虚实+底纹的效果。
3. 拓展案例
更高级的设计手法是利用自然环境的介质结合文字，起到扭曲的视觉效果。
与扩展变化有异曲同工之妙，文字通过一定的角度和位移间隔，由二维向三维的视觉效果进行变化，让文字更加多变化和有重量感、层次感。
立体层叠的设计对于字体本身具有一定的要求，较为纤细的字体出来的效果并不理想。
1. 不同的字体尝试
从对比中看出，细体或较细的衬线字体，层叠后会出现衔接不上或视觉黑点的情况（如下面左图和右图）。因此设计时建议使用粗体，并且整体笔画较为平均的字体（中间的图）。
2. 中文字体的尝试
虽然具有了层次感和空间感，但也会让整体变得更加复杂，因此需要根据文字的多少情况进行使用。
3. 拓展案例
立体层叠还不止单向的设计，例如可以进行轨迹变化，向外扩展层叠，或是增加一些颜色渐变来丰富整体的设计。
文字通过错位，叠加，颜色变化，透明度变化，切割等方式的设计之后，具有故障的视觉偏差感受。整体视觉感知类似双重曝光的照片，文字具有丰富的层次感。
颜色叠加的效果，对于颜色的选择极为重要，两个颜色交错之间的颜色可以为过渡色或者互补色。
细体的效果并不理想（如上图左边第一个），建议设计的过程中使用较粗的字体，另外在使用的过程中需要考虑文字的识别度（如右边的效果），重叠之后文字的识别度或多或是会受到影响。
1. 中文字体的尝试
由于中文字比英文复杂，因此使用中文字在设计的时候，可以寻找一些共笔的地方进行重叠（如下图左边的设计），利用字体笔画粗细一致的情况下，进行了边与边的重叠。另外在设计的过程中建议加大字间距，这样可以避免不同文字的重叠，产生过度复杂的效果，影响文字的识别性（如下图最右边的设计）。
2. 拓展案例
在简单的叠色之外，结合不同质感和肌理，可以让整个文字具有不一样的视觉感受。
文字按照立方几何结构进行排版，通过颜色差异，阴阳，线面等方式设计处理后形成空间感和立体感。相比于平面排列的文字更具有空间感和层次感，提升整体画面的设计感。
1. 设计尝试
使用空间错位结合虚实的设计，让简单重复的文字变得具有空间感和立体感。
2. 拓展案例
除了常规的空间打造，甚至可以融入到场景中或者结合物体本身的设计。
以上设计风格，常常会在一些运动品牌的设计中看到。例如，Nike 的设计中应到的文字，也会结合这些方式，来丰富和提高整体的设计感。
火箭队出场片头的字体应用，线形字体叠加渐变的效果，具有层次感又有未来感。
阿迪达斯的广告：
Converse 的广告：
Under Armour 的广告：
除了一些品牌的设计，音乐唱片的封面也有应用到这些类型的设计手法。
我们除了在一些常规的媒介上会看到相关的文字设计，在这两年的耐克或阿迪达斯的鞋子设计中，也会加入文字元素的设计，甚至球员会直接在鞋子上写上文字。
文字设计的拓展叠加
文字的设计已经成为一种新的设计趋势，结合实际需要表达的想法，对于设计手法进行活学活用是做出好设计的关键。当然只有掌握了基础手法才可能做到举一反三的设计思考。在实际设计的过程中，我们往往不会是单独使用某一种方式，而是对不同的设计手法进行重组再设计，或者使用 2~3 种方式叠加设计来打造整体的画面效果。如下：
在这十种基础的文字设计中，通过结合发散可以迸发出远远不止于十种的创意设计。本次收集总结除了自身学习提高之外，希望可以起到抛砖引玉的作用，激发设计师对于文字的设计思考。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
动效有助于让UI具有更好的表现力及更易于使用，尽管具有如此大的潜力，但可能由于它是UI设计家族中的新成员之一，所以它大概是所有设计学科中最不被大众所了解的。视觉设计和交互设计可追溯到早期的GUI，但由于动画必须由现代硬件来顺畅的渲染，而且UI动效和传统动画之间的重叠区间也使得两者之间的区分变得复杂。传统动画需要掌握迪斯尼的12个基本原则，那么这是否意味着UI动效也像传统动画一样复杂？我经常能听到人们说，动效设计很复杂，不知道如何选择相对应的动画模式，但是我认为至少在UI领域，动效设计是可以很简单的。
从哪里开始
动效主要是通过UI元素之间关系过渡来帮助用户浏览App。当然还可以通过使用图标、勋章以及插画动效来为App增色，但是建立产品可用性应该优先于增加动效表现力。在展示你的动效设计技巧之前，让我们先从设计一个基本的动效开始，即产品导航之间的过渡。
过渡模式
在设计导航之间进行动效过渡时，简单性和一致性是最关键的点。为了达到这个目的，我们将以下2种动画模式中进行选择：
1、基于容器的过渡。
2、没有容器的过渡。
基于容器的过渡
文本、图标和图片等元素在容器内进行分组
如果动画涉及像按钮，卡片或列表这样的内容，则使用基于容器的动画设计，容器通常有很明显的边界，这种模式分为三个步骤：
1.使用Material的标准缓动为容器设置动画（意味着它可以快速加速，然后逐渐的慢下来）。在下图的示例中，容器的尺寸和圆角半径从圆形按钮动画过渡到填充整个屏幕的矩形。
2.缩放容器中的元素进行宽度自适应，将元素固定在顶部但是仍然存在容器内，这样在容器和内部元素之间创建了清晰的关系链。
*放慢动画速度以说明元素在容器内如何缩放
3.随着容器加速，在过渡期间逐渐淡出消失。当容器减速时输入的元素逐渐淡入。当元素进行快速移动时，通过淡入淡出来实现元素的更替。
*放慢动画速度以说明元素如何使用淡出淡出
将此模式应用于所有涉及容器过渡的动效，这样会建立起来一致的动效规则。这样还使得开始和结束之间的关系更加清晰，因为它们是由两个动画容器互相衔接的。为了展示这种模式的灵活性，这里将它分为五种不同使用场景：
*放慢动画速度以说明容器如何连接开始和结束
有的容器只是使用Material的标准缓动从屏幕外滑入，它滑动的方向取决于与之关联的组件位置。例如点击左上角的抽屉导航，图标将从左侧滑动容器。
如果容器从屏幕边界进入，则它会淡入并放大。它并不是从0％的比例制作动画，而是从95％开始，以避免元素之间的过渡幅度太大。缩放动画使用Material的减速缓动，这意味着它以峰值速度开始并逐渐减速停止。在元素退出时，容器会在没有缩放动画的情况下淡出。为什么退出动画会有这样微妙的设计呢，这样做是便于将注意力集中在新内容上。
*放慢动画速度以说明容器如何通过淡入淡出进行缩放动画
没有容器的过渡
有些作品将使用没有容器的过渡来构建动效设计，例如点击底部导航中的图标，将用户带到新的页面，在这些情况下，将使用以下两个步骤：
1、起始元素通过淡出消失，然后最终元素通过淡入进入。
2、随着最终元素逐渐出现，使用Material的减速运动来巧妙的展现。但同时缩放仅适用于新旧内容的替换。
*放慢动画速度以说明没有容器的过渡如何使用淡入淡出和缩放
如果开始和结束的组合元素具有清晰的空间或顺序关系，则可以使用共享动画来强化它。例如当下图触发导航组件时，开始和结束的动画都在垂直维度进行滑动，这加强了他们的垂直布局。当点击下右图入门流程中的下一个按钮时，从左向右水平动画强化了序列进行的的概念。共享动画使用Material的标准缓动。
*减慢动画以说明垂直和水平共享动画
最佳方案
把事情变的更简单一些
鉴于其动画频率高低与产品可用性密切相关，导航过渡通常应该优先于功能展示。引人注目的动画通常最适用于小图标，勋章，加载或空状态等元素。下面这个简单的案例可能不会得到Dribbble的那么多关注，但是它更像一个真实的产品。
*放慢动画速度以显示不同的动画风格
选择合适的时间及缓动类型
导航过渡应该使用合适的时间，快速过渡优先考虑功能，但是速度也不要太快，防止动画路径迷失。根据动画占用的屏幕比例来选择动画持续时间。由于导航过渡通常占据屏幕的大部分，因此300ms是一个比较有经验的动画时长。相比之下，像开关按钮这种小组件动画持续时间很短，大概在100ms左右。如果过渡感觉太快或太慢，请以25ms的增量调整其持续时间，直到它达到合适的动画节奏。
Easing描述了动画加速和减速。大多数导航过渡使用Material的标准缓动，这是一种不对称的缓动类型。这意味着元素会快速加速运动，然后缓慢减速以将注意力集中在动画结束时。这种类型的缓动为动画提供了自然的感觉，因为现实世界中的物体不会立即开始或停止移动。如果动画看起来很僵硬或死板，那么可能是由于你选错了缓动类型。
*放慢动画速度以说明不同的缓动类型
本文所说的动效模式在建立一种实用而又微妙的动画风格。这适用于大多数产品，但某些品牌可能需要更激进的动效表达。要了解更多有关动效的内容，请阅读Material motion指南。
一旦处理好了导航之间的过渡动画，在你的产品中添加角色动画的挑战就开始了。这意味着简单动画模式是不够的，这时候动传统的动画工艺会真正闪耀起来。
角色动画可以增加趣味性
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
最近折腾自己的网站，在自适应方面发现有了很多新的方法，感叹前端的技术真是日新月异，从以前只能这样，到现在除了这样，还可以那样，甚至再那样......技术永无止境啊。
回到主题，自适应响应式布局这个话题古老而新颖，从最早的不同分辨率的屏幕，到现在遍布各个生活角落的移动设备，响应式布局已经成了几乎所有互联网公司必备的条件。在我的映像中，bootstrap一直是响应式的头号选择，的确，其中的各种xl，xs，栅格布局让响应式变得很容易。
话说，这Vue做响应式，其实一点都不复杂：一个生命周期钩子，一个条指令，一套js判断语句解决，说到这，高手们应该早已经明白如何操作了， 这篇文章就给广大刚入门的同学们拓宽一下吧（不熟悉Vue的同学，还是先恶补一下Vue基础吧）。
一个生命周期钩子——mounted：挂载时操作；一条指令——v-show（本例中采用，非绝对）：根据条件显示；一套js判断语句：if/else或者switch/case。具体操作起来很简单：（代码直接展示）
<!--这是一段导航html-->
<nav id="nav-part" class="easyUtil-backImgPostion easyUtil-flexContainerRow">
<ul class="easyUtil-flexContainerRow">
<li class="nav-list" :class="nav.className" v-for="(nav,i) in navs">
<a :href="nav.href">{{nav.name}}</a>
</li>
</ul>
<div id="serach-part" v-show="show"><input type="search" id="search" :placeholder="placeholder" class="easyUtil-input"><button id="searchBtn" class="easyUtil-btn">{{btn}}</button></div>
</nav>
var head = new Vue({
el : "#head",
data : {
//此处省略一千字
show : true
},
mounted : function(){
//可用于设置自适应屏幕，根据获得的可视宽度（兼容性）判断是否显示
let w = document.documentElement.offsetWidth || document.body.offsetWidth;
if(w < 1000){
this.show = false;
}
})
我的目的是在移动设备中不显示搜索栏（search-part）部分，那么利用v-show,和mounted配合，在挂载时检测一下屏幕可视宽度，如果小于1000，则认为是手机，v-show设为false,不显示即可。
看，很简单吧，简单到我觉得自己好像在忽悠。其实到这里，原理已经说完，具体的应用大家可以自行发挥，而且也不一定就用v-show，我这里是为了显示与否，如果大家想添加样式什么的，还可以写别的，甚至于计算属性，watch都可以。只要记住在挂载的时候完成即可，不然页面会有跳动，不利于体验。
可能有人会问，用css的@media就可以完成了，为啥用js，我这里想说的是，我并没有否认@media，这里只是写出更多一种方式，同时结合一下现在很火的前端框架。多一种方法，就多一种解决思路，不至于再回到以前"只能这样"的道路上。具体到实际应用中，当然是最适合的方法为主。前端水深，前端的路子也越来越多，越来也丰富，敞开思维，就会看见不同的天空。
ps一句，js确实需要刷新页面重新加载才会显示，也就是说如果用户将页面从大屏移动到小屏幕，就可能出现布局不响应问题，但是在实际使用中，这种情况几乎不会出现，因为用户不能可能将电脑打开的网页，直接移动到手机上，操作永远都是重新打开，所以js，css在显示效果上是没有区别的（当然如果js太过复杂，性能会有影响）。另外，文中方法的兼容性问题，只要支持Vue的浏览器，都没问题。
就说到这吧，欢迎大神指正，不胜感激！
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
1、用px2rem配合lib-flexible，让网页适配。
lib-flexible
作用：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备
安装：
npm install lib-flexible
1
引入：入口文件main.js中：
import "lib-flexible/flexible.js"
1
2、手写一个js小工具，省略rem的计算，加快开发速度。
在src目录下增加一个utils目录，在里面新建一个js文件，写入以下内容：
// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
在main.js中引入改js文件：
import "./utils/rem"
1
然后就可以直接用px写页面啦，而不用去计算rem的值，是不是很舒服呢。
3、使用VW。了解下vw 与 vh单位，以viewport为基准，1vw 与 1vh分别为window.innerWidth 与 window.innerHeight的百分之一
安装：
npm i postcss-px-to-viewport -save -dev
1
在package.json中配置如下：
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 32,
"propList": ["*"]
}
},
"plugins": {
"autoprefixer": {},
"postcss-px-to-viewport": {
"viewportWidth": 750,
"minPixelValue": 1
}
}
},
4、利用bootstrap实现响应式图片
在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。
对于图片的大小限制一定要在图片的父级元素进行限制。
5、利用bootstrap的栅格系统，下面列一下栅格系统的参数：
超小屏手机 (<768px) 小屏幕平板(>=768px) 中等屏桌面(>=992px) 大屏桌面(>=1200px)
类前缀 .col-xs .col-sm .col-md .col-lg
列数 12 12 12 12
.container最大宽度 None(自动) 750px 970px 1170px
举个移动设备和桌面的例子：
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
还有更多对响应式的支持，就不一一列举了。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
Bootstrap：
1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
* 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
* 好处：
1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
2. 响应式布局。
* 同一套页面可以兼容不同分辨率的设备。
2. 快速入门
1. 下载Bootstrap
2. 在项目中将这三个文件夹复制
3. 创建html页面，引入必要的资源文件
3.演示案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
响应式布局
同一套页面可以兼容不同分辨率的设备。
* 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
* 步骤：
1. 定义容器。相当于之前的table、
* 容器分类：
1. container：两边留白
2. container-fluid：每一种设备都是100%宽度
2. 定义行。相当于之前的tr 样式：row
3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
* 设备代号：
1. xs：超小屏幕 手机 (<768px)：col-xs-12
2. sm：小屏幕 平板 (≥768px)
3. md：中等屏幕 桌面显示器 (≥992px)
4. lg：大屏幕 大桌面显示器 (≥1200px)
* 注意：
1. 一行中如果格子数目超过12，则超出部分自动换行。
2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。
CSS样式和JS插件
1. 全局CSS样式：
* 按钮：class="btn btn-default"
* 图片：
* class="img-responsive"：图片在任意尺寸都占100%
* 图片形状
* <img src="..." alt="..." class="img-rounded">：方形
* <img src="..." alt="..." class="img-circle"> ： 圆形
* <img src="..." alt="..." class="img-thumbnail"> ：相框
* 表格
* table
* table-bordered
* table-hover
* 表单
* 给表单项添加：class="form-control"
2. 组件：
* 导航条
* 分页条
3. 插件：
* 轮播图
演示案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
<style>
.paddtop{
padding-top: 10px;
}
.search-btn{
float: left;
border:1px solid #ffc900;
width: 90px;
height: 35px;
background-color:#ffc900 ;
text-align: center;
line-height: 35px;
margin-top: 15px;
}
.search-input{
float: left;
border:2px solid #ffc900;
width: 400px;
height: 35px;
padding-left: 5px;
margin-top: 15px;
}
.jx{
border-bottom: 2px solid #ffc900;
padding: 5px;
}
.company{
height: 40px;
background-color: #ffc900;
text-align: center;
line-height:40px ;
font-size: 8px;
}
</style>
</head>
<body>
<!-- 1.页眉部分-->
<header class="container-fluid">
<div class="row">
<img src="img/top_banner.jpg" class="img-responsive">
</div>
<div class="row paddtop">
<div class="col-md-3">
<img src="img/logo.jpg" class="img-responsive">
</div>
<div class="col-md-5">
<input class="search-input" placeholder="请输入线路名称">
<a class="search-btn" href="#">搜索</a>
</div>
<div class="col-md-4">
<img src="img/hotel_tel.png" class="img-responsive">
</div>
</div>
<!--导航栏-->
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- 定义汉堡按钮 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!--轮播图-->
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/banner_1.jpg" alt="...">
</div>
<div class="item">
<img src="img/banner_2.jpg" alt="...">
</div>
<div class="item">
<img src="img/banner_3.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</header>
<!-- 2.主体部分-->
<div class="container">
<div class="row jx">
<img src="img/icon_5.jpg">
<span>黑马精选</span>
</div>
<div class="row paddtop">
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
</div>
<div class="row jx">
<img src="img/icon_6.jpg">
<span>国内游</span>
</div>
<div class="row paddtop">
<div class="col-md-4">
<img src="img/guonei_1.jpg">
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 3.页脚部分-->
<footer class="container-fluid">
<div class="row">
<img src="img/footer_service.png" class="img-responsive">
</div>
<div class="row company">
CSDN博客杨校老师 版权所有Copyright 2017-2019, All Rights Reserved 鲁ICP备19007759号-1
</div>
</footer>
</body>
</html>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
新人设计师可能都会遇到这样的问题：在设计一个复杂需求的时候，各种场景、可能性在脑中来回乱窜，常常觉得逻辑不够严密。设计完成后，又被各方质疑，提出各种异常场景，导致频繁修改，缝缝补补。本文将和大家分享下解决以上问题的小方法。本文就以「企业内部权限分配平台」的需求为案例，整理了之前处理复杂需求的一些思路。讲讲在交互设计的过程中，如何避免以上两种情况，让我们的工作更好地服务用户，体现价值。
首先，我想任何设计师在设计产品的时候第一步都是理解需求，这包括了需求的目标背景、角色场景、产品逻辑等，不同的需求侧重点会不同。以「企业内部权限分配平台」的需求为例，目标背景和角色都比较简单，但是一般涉及权限的产品，背后的逻辑就会很复杂，场景情况也很多。
和产品沟通，和用户沟通，甚至网上找资料，都是理解需求的一些好方法。比如本次设计的需求是关于权限分配，这一篇《网易高手：角色权限设计的100种解法》的文章，就很好地帮助我理解权限分配背后的设计逻辑。
包括理解需求内的专有名词，为其建立特殊的标识样式，也是帮助自己、团队、用户更好地理解产品需求的一种方式。
△ 名词解释
我们在最初思考需求的时候，肯定会从场景/问题出发，思考怎么去解决这个问题，是以「人」的思维来思考这个问题的，这是必然的，也是正确的。但此时我们的思维是散点式的，例如当我们想到权限分配的需求时，可能会说：这次我们要新增一个「岗位」的概念，让权限和岗位绑定，不要和人绑定。对了，还有人员离职这个问题困扰业务很久了，我们这次要在人员离职的时候进行……
所以，在最初的需求框架确定后，我得到的是这样两段文字：
看上去已经非常全面了，但由于我们是散点式地收集需求，很多时候可能还是会有遗漏，或者说错误关联了内在逻辑，导致一些逻辑冲突、漏洞。
此时，我们需要将我们的思维从「散点式收集」转为「结构化梳理」。从需求说明里抽丝剥茧，我们可以得到：
各个对象之间的关系又是怎样呢？我们把所有的对象两两组合，再把没有关系的删掉。
也就是：
这个具体的业务逻辑并不重要，不需要去费心理解，重要的是这样一种结构化思考的方法，可以应用在后续各种各样的设计中。
对象间的关联，再和我们刚才梳理的人物、操作相结合，就可以还原成一系列的需求描述：「角色」可以在「A对象」下「操作」「B对象」，例如：超级管理员可以在部门下新增岗位。
至此，我们已经可以建立「需求→功能对应表」：
其中，红色部分都是在之前散点式的需求罗列中没有考虑到的功能点，通过结构化的梳理，我们可以提前把它们都一一补齐。
这个过程可以减少我们最小颗粒功能点的遗漏，避免在做完大部分设计后，突然发现遗漏了某个功能，任务时间点又已经到了，慌慌忙忙地加功能，就可能会影响整体的设计思路和框架。
完成了功能点的整理归纳后，就可以开始我们的界面设计了。在最初的界面设计中，这三点需要做减法：
当然，可以先把可能存在的异常、细节都记录下来，以便后续补充。
比如，在人员权限分配的界面结构中，分为三个大模块：
在有了界面框架和功能对应表后，我们做设计会变得比较简单，按照之前整理的「需求→功能对应表」，把每个小颗粒的功能细节填充到界面框架内即可。
当主流程设计完毕之后，我们就要开始做加法了，在之前，我们一直是用一种纯理性的视角来完成我们的设计，保持纯理性的设计会有两个问题：
例如，纯从逻辑思维角度你能想到在一个企业里有人是没有任何部门归属的吗？然而现实中就存在这样的情况──外包人员。不结合实际场景，我们也不知道用户一天需要处理多少次重复操作，目前的设计对他是否足够便捷。
作为一个企业内部权限分配平台，我们可以把部⻔、岗位、人员等对象作为初始线索，站在不同的用户使用角度，沿着线索去全面地思考场景，修改功能。有一些实在难以理解的业务，找用户聊聊也是一个好方法。
很快，我们就找到了下面这些特殊场景。
1. 人员变动
处理方法：行政架构自动同步，红点待办。
我们与 OA 系统数据打通，自动形成四类待办红点：人员新增、人员离职、行政部门新增、行政部门删除。
这样 HR 就不需要重复做新人员的添加操作，只需要业务管理员把 OA 内无法覆盖的人员岗位设定好就可以，也不会出现遗漏的情况。
2. 高管兼职
例如某位高管：本身为 A 部门负责人，临时兼任 B 部门负责人，那么当他不再负责 B 部门时，该如何处理他的岗位？离职？转岗？似乎都不合适。
处理方法：新增岗位移除功能。
3. 外包人员
了解到现实情况中，外包人员是没有部门归属的，但是实际上他们肯定也有自己负责的业务范围和岗位，在初始化时如何安置没有部门的人？
处理方法：新增一个部门，叫做「无岗位人员」，并且标红作为待办，提醒操作者去处理这些「无岗位人员」。
4. 人员离职/转岗
在进行功能设计整合时，我考虑是否「人员离职」应该叫「人员删除」更系统化？是否可以直接整合为一个「人员编辑」的功能，将离职、转岗的操作合并？（实际上这2个功能操作起来确实比较相似）
处理方法：最终我依然保留了「人员离职」、「人员转岗」的功能，因为这样更场景化，用户清晰地知道自己当前该操作什么。
目前对一个人进行离职操作的路径是：找到原部门→找到岗位→找到人→处理离职，而我们的企业有 2500+ 员工，对于离职操作者 HR 来说，这个路径是否现实？是否快捷？
处理方法：新增搜索功能，直接搜索人名→处理离职，这个功能也方便了其他找人的场景。
5. 更多
诸如此类的考虑还有很多，例如新建部门的时候是否会有空部门，在企业进行组织架构重组时是否会有大批量的人员、组织变动，进而需要有批量操作等等。找到最初的线索，站在用户的角度沿着线索思考，进行全局扫描，就会发现很多需要做加法的地方，发现的方式可以是观察、访谈、思考等任何方式。
在已经保证了主流程的简洁、清晰后，再用全局扫描的方式去搜集特殊场景，给我们的设计做加法，可以保证我们整体的设计框架是清晰可用的，而特殊场景是散落在骨干上的各种小分支。
如果我们可以做到，对所有的主干场景、分支场景了然于心，并且有自己的优先级考虑，那么对于项目成员、用户提出的质疑，我们也有足够的理由来证明自己设计的合理性。
当然，场景基本考虑全面后，还有最后一步，就是统一交互，完善细节，这一步也是设计上的加法。
以上，就是一个针对复杂需求的加减设计法案例，总结来说有四个大步骤：
所以，交互设计师是需要理性和感性的结合，要有抽丝剥茧，提炼总结的能力，也要有贴近用户关注情感的细腻。把自己的工作规范化，减少无效付出，也是我们的一种能力。希望本篇文章对新人设计师有一些帮助，也欢迎大家一起探讨交流。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
有这样一种常见的需求：有一个搜索框，需要根据用户的输入进行实时的查询。也就是说用户每输入一个字符就要发送一次请求。
想到的做法是监听输入框的keyup时间然后在回调里发送异步请求。
这样做的不足也很明显：
其实我们并不需要用户每次输入时都发送请求，这样会给服务器造成不必要的压力。
因为发送的是异步请求，有可能查询的结果和最后输入的内容并不匹配。
如何解决以上两种问题呢？ 有两种解决方案
首先我们规定当用户停止输入1秒（具体时间根据自己需求而定）后再根据输入框的值发送请求。
其次我们利用定时器来解决以上问题。
第一种方案：直接看代码吧
vat timer
$('.input').on('keyup', function(e) {
clearTimeout(timer)
timer = setTimeout(function() {
// do something
}, 1000)
})
首先定义一个定时器timer
监听输入框的keyup事件，在回调函数里先清除timer，这一步总能保证在用户停止输入1秒后执行最后一个timer。如果用户输入的间隔小于1秒就不会执行timer
这么写似乎不太抽象，而且定义了一个全局变量timer，不友好！稍加改动一下：
function debounce(func,delay){
var timer
return function(){
clearTimeout(timer)
var event = arguments[0] // 获取原生event参数
timer = setTimeout(function(){
func(event)
},delay)
}
}
function handle(event){
// do something
}
$('.input').on('keyup', debounce(handle, 1000))
这样是不是复用性更高，我们只需要在handle函数中写我们的处理逻辑就可以了。而且没有了全局变量，避免了全局污染的可能！！
*第二种方案： *
var lastTime
$('.input').on('keyup', function(e) {
lastTime = e.timeStamp
setTimeout(function() {
console.log('timeout')
if (lastTime == e.timeStamp) {
// do something
}
}, 1000)
})
首先定义一个时间戳来保存最后一次输入的时间
然后1秒后在定时器里判断保存的时间戳和触发事件的时间戳e.timeStamp是否相同，只要1秒内又输入了内容，e.timeStamp就回变化。
但是这种写法有个弊端，用户键入几次就会执行几次setTimeout，也就是说当用户连续键入多个字符后，会有多个任务被推入待执行队列，然后每隔1秒执行，只是在执行的时候判断要不要发送异步请求，这种方式不会发送多余的异步请求，但是会执行多余的任务，这无疑浪费了性能。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
DOM树
在访问页面时，需要与页面中的元素进行交互式的操作。在操作中，元素的访问是最频繁、最常用的，主要包括对元素属性、内容、值CSS的操作。
一、操作元素的属性
attr() prop() 获取或设置元素的属性值
两者区别：简单来说，对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
针对属性对象不同
prop( )是针对Dom元素属性，attr( )针对HTML元素属性，和attribute与property区别一样。
用于设置的属性值类型不同
attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。
prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型。
应用版本不同
attr()是jQuery 1.0版本就有的函数，prop()是jQuery 1.6版本新增的函数。毫无疑问，在1.6之前，你只能使用attr()函数；1.6及以后版本，你可以根据实际需要选择对应的函数。
其他不同
对于表单元素的checked、selected、disabled等属性，Attr()方法拿不到值，请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作，也尽量使用prop()函数。如下图代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="button" id="btn1" value="按钮">
<input type="button" id="btn2" value="按钮">
<script>
//操作元素的属性
//attr() prop()获取或设置元素的属性值
$("#btn1").attr("value","按钮1");//将#btn1的value值改为按钮1
$("#btn1").prop("value","按钮2");//将#btn1的value值改为按钮2
console.log( $("input[type='button']").prop("value"));//获取#btn1的value值,输出为按钮2
console.log($("#btn2").attr("value"));//获取#btn1的value值,输出为按钮
//设置多个属性值
$("input[type='button']").prop({
width:"200px",
value:"hello"
});//同时设置宽度为100px,value值为hello
//根据输出结果，width值设置失败，value值设置成功
console.log($("input[type='button']").prop("width"));//0
console.log($("input[type='button']").attr("width"));//0
$("input[type='button']").attr({
width:"200px",
value:"HELLO"
})//同时设置宽度为200px,value值为HELLO
//根据输出结果可以看到，width和value均设置成功
console.log($("input[type='button']").prop("width"));//0
console.log($("input[type='button']").attr("width"));//200px
// var btn=$("input[type='button']");
// btn.attr("data-src","pink");
// console.log(btn.attr("data-src"));//pink
// console.log(btn.prop("data-src"));//undefined
var btn=$("input[type='button']");
btn.prop("data-src","pink");
console.log(btn.attr("data-src"));//undefined
console.log(btn.prop("data-src"));//pink
</script>
二、删除元素的属性
removeAttr( name ) ,其中name为元素属性的名称
removeProp( name ) ,其中name为元素属性的名称
三、元素内容的操作
在JQuery中，操作元素内容的方法包括html( )和text( )。前者与JavaScript中的innerHTML属性类似，即获取或设置元素的HTML内容；后者类似于JavaScript中的innerText属性，即获取或设置元素的文本内容。区别如下：
语法格式 参数说明 功能描述
html() 无参数 用于获取元素的HTML内容
html(val) val参数为元素的HTML内容 用于设置元素的HTML内容
text() 无参数 用于获取元素 的文本内容
text(val) val参数为元素的文本内容 用于设置元素的文本内容
<script>
//js中的写法 innerHTML innerText
var sd=document.getElementById("block");
sd.innerText="小猫吃鱼";
console.log(sd.innerHTML);//小猫吃鱼
console.log(sd.innerText);//小猫吃鱼
// //jquery html() text() 和js一致 获取或设置元素的html值或文本值
console.log($("#block").html());//小猫吃鱼
console.log($("#block").text());//小猫吃鱼
$("#block").text("小猫抓老鼠");//修改innerText内容
console.log($("#block").html());//小猫抓老鼠
console.log($("#block").text());//小猫抓老鼠
$("#block").html("小猫吃肉肉");//修改innerHTML内容
console.log($("#block").html());//小猫吃肉肉
console.log($("#block").text());//小猫吃肉肉
</script>
四、操作表单元素的值
val() 获取或设置表单元素的value值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="text" id="txt" value="请输入...">
<script>
console.log( $("#txt").val());// 获取#txt的value值 输出为：请输入...
$("#txt").val("12345");//修改#txt的value值为12345
console.log( $("#txt").val());//12345
</script>
</body>
</html>
五、元素样式的操作
1.直接设置元素样式值
在JQuery中，通过css()方法为某个指定的元素设置样式值，语法格式如下：
css(name,value) ,其中name为样式名称，value为样式的值
css()可以设置样式也可以获取样式
2.增加CSS类别
通过addClass()方法增加元素类别的名称，语法格式如下：
addClass(class) ,其中参数class为类名称，可以同时增加多个，用空格隔开即可，如addClass(class0 class1 class2 ...)
3.删除CSS类别
与addClass()方法相对应，removeClass()方法用于删除类别，语法格式与addClass()相同，如果不设定参数，则删除元素中的所有类名称
4.类别切换
通过toggleClass()方法切换不同的元素类别，语法格式如下:
toggleClass(class) ,其中参数class为类别名称，其功能是当元素中含有名称为class的CSS类别时，删除该类别，若没有，则增加该类别
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn" class="btndata">按钮</button>
<script>
$("#btn").addClass("btn1");//追加一个类名称
$("#btn").addClass("btn2 btn3");//追加多个类名称
$("#btn").removeClass("btn2 btn1");//移除类名称
$("#btn").removeClass();//移除所有类名称
$("#btn").toggleClass("btn1");//类的切换 toggleClass() 如果有类名称则替换 如果没有就添加
</script>
</body>
</html>
六、jquery操作子父节点
children() 找父元素里面的子节点
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<ul>
<li class="lilist">1</li>
<li class="lidata">2</li>
<span>6</span>
<li class="lilist">3</li>
<span>5</span>
<li class="lilist">4</li>
<span>7</span>
</ul>
<script>
console.log($("ul").children());//输出ul 下的所有子节点
console.log($("ul").children()[0]);//输出ul下索引为0的子节点
console.log($("ul>li").first());//输出ul里面第一个li
console.log($("ul>li").last());//输出ul里面最后一个li
console.log($("ul>li").eq(2));//eq() 根据索引找元素
console.log($("ul>li").first().siblings(".lilist"));//找同胞元素 输出和first()相同类名称的元素
console.log($("ul>li").eq(1).prev());//找当前元素的前一个元素
console.log($("ul>li").eq(2).prevAll("span"));//当前元素前面的所有指定元素
console.log($("ul>li").eq(2).prevAll());//当前元素前面的所有元素
console.log($("ul>li").eq(1).next());//找当前元素的下一个元素
console.log($("ul>li").eq(1).nextAll("li"));//当前元素后面的所有指定元素
console.log($("ul>li").eq(1).nextAll());//当前元素后面的所有元素
console.log($("ul>li").eq(0).is(".qq"));//is() 判断当前对象是谁 输出true or false 当前元素与类名称相符 输出true
</script>
</body>
</html>
七、JQuery中的尺寸问题
下面以高度为例进行说明
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
<style>
.ss{
width: 200px;
height: 200px;
margin: 10px 10px;
padding: 20px 20px;
}
</style>
</head>
<body>
<div class="ss"></div>
<script>
console.log($(".ss").height());//200 可视区域 不包括内外边距
console.log($(".ss").innerHeight());//240 包括内边距的距离
console.log($(".ss").outerHeight());//240 包括内边距的距离
</script>
</body>
</html>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
