包括单行注释和块级注释。
// alert(“HelloWorld!”)
/*
这是一个
多行的
块级注释
*/
“use strict”;。
ECMA-262描述了一组具有特定用途的关键字和一组不能用做标识符的保留字。
var message，当然了，也可以直接在定义的时候对变量做一个初始化，例如var message = ‘hi’ ;
var message = ‘hi’ ;
message = 100 ; //有效，但不推荐
//这个例子代表变量message一开始保存了一个字符串“hi”，然后该值又被一个数字值100取代了。
function test(){
var message = ‘hi’ ; //局部变量
} ;
test();
alert(message); //错误
//为什么是错误？
//这里，变量message是在函数里用var定义的，当函数被调用时，就会创建该变量并为其赋值。而在此之后，这个变量会立即被销毁。所以在执行alerat()那行代码的时候message已经被销毁了，因此报错。
那么，该怎么解决呢？
function test(){
message = ‘hi’ ; //局部变量
} ;
test();
alert(message); // hi
//在函数内部不用var会创建全局变量。
//但我们并不提倡这种做法，因为局部作用域中定义的全局变量很难去维护。
//所以我们应该选择在开始就定义好所有的变量。
为了降低开发的复杂度，以后端为出发点，比如:Struts、SpringMVC 等框架的使用，就是后端的 MVC 时代;
以 SpringMVC 流程为例:
优点:
前后端职责很清晰: 前端工作在浏览器端，后端工作在服务端。清晰的分工，可以让开发并行，测 试数据的模拟不难，前端可以本地开发。后端则可以专注于业务逻辑的处理，输出 RESTful等接 口。
前端开发的复杂度可控: 前端代码很重，但合理的分层，让前端代码能各司其职。这一块蛮有意思 的，简单如模板特性的选择，就有很多很多讲究。并非越强大越好，限制什么，留下哪些自由，代 码应该如何组织，所有这一切设计，得花一本书的厚度去说明。
-部署相对独立: 可以快速改进产品体验
缺点:
代码不能复用。比如后端依旧需要对数据做各种校验，校验逻辑无法复用浏览器端的代码。如果可 以复用，那么后端的数据校验可以相对简单化。
全异步，对 SEO 不利。往往还需要服务端做同步渲染的降级方案。 性能并非最佳，特别是移动互联网环境下。
SPA 不能满足所有需求，依旧存在大量多页面应用。URL Design 需要后端配合，前端无法完全掌控。
NodeJS 带来的全栈时代
前端为主的 MV* 模式解决了很多很多问题，但如上所述，依旧存在不少不足之处。随着 NodeJS 的兴 起，JavaScript 开始有能力运行在服务端。这意味着可以有一种新的研发模式:
————————————————
版权声明：本文为CSDN博主「叁有三分之一」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/iME_cho/article/details/105654633
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
文章目录
jQuery
jQuery的安装：
jQuery 语法
选择器
基本选择器：
层级选择器
基本筛选器
样式操作
表单筛选器
遍历方法
jQuery链式操作
jQuery 事件
$(document).ready()
click()
dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()
focus()
blur()
input()
取消标签默认的事件
事件冒泡
事件委托
jQuery自带的动画效果
jQuery
jQuery的字面意思其实就是JavaScript和查询（Query），即用于辅助开发JavaScript的库。jQuery 极大地简化了 JavaScript 编程，jQuery使用户可以更加方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，而且方便地为网站提供AJAX交互。
实例找到div标签并给div标签设置为红色
原生js操作
var d1Ele = document.getElementById('d1');
d1Ele.style.color = 'red';
jQuery操作
$('#d1').css('color','blue');
1
2
3
4
5
jQuery的安装：
您可以从网页中添加 jQuery
1、从官网http://jquery.com/download/下载 jQuery 库
里面分为：Production version（用于实际的网站中，已被精简和压缩）和Development version（用于测试和开发，未压缩，是可读的代码），一般使用Production version压缩版本的。
2、从 CDN 中载入 jQuery, 如从 Google 或 百度 中加载 jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
或者
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
或者
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.js"></script>
1
2
3
4
5
一定要先导入后使用
jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
$(selector).action()
1
美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
选择器
jQuery 选择器可以对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等查找HTML 元素。它基于已经存在的 CSS 选择器外，还有一些自定义的选择器。
基本选择器：
ID选择器、类名选择器、标签选择器、组合选择器
选择器 实例 选取
* $("*") 所有元素
#id $("#d1") id=“d1” 的元素
.class $(".name") class=“name” 的所有元素
.class , .class $(".name,.password") class 为 “name” 或 “password” 的所有元素
*element $(“span”) 所有 <span> 元素
el1,el2,el3 $(“h1,div,p”) 所有 <h1>、<div> 和 <p> 元素
提出注意点，原生DOM查找和jQuery查找出来的结果区别DOM对象与jQuery对象
DOM对象与jQuery对象互相转换
$('#d1')[0]
var d1Ele = document.getElementById('d1');
$(d1Ele)
1
2
3
4
层级选择器
选择器 实例 选取
parent > child $(“div > p”) <div> 元素的直接子元素的所有 <p> 元素
parent descendant $(“div p”) <div> 元素的后代的所有 <p> 元素
element + next $(“div + p”) 每个 <div> 元素相邻的下一个 <p> 元素
element ~ siblings $(“div ~ p”) <div> 元素同级的所有 <p> 元素
基本筛选器
选择器 实例 选取
:first $(“p:first”) 第一个 <p> 元素
:last $(“p:last”) 最后一个 <p> 元素
:even $(“tr:even”) 所有偶数 <tr> 元素
:odd $(“tr:odd”) 所有奇数 <tr> 元素
:gt(nu) $(“ul li:gt(3)”) 列举 index 大于 3 的元素
:lt(nu) $(“ul li:lt(3)”) 列举 index 小于 3 的元素
:eq(nu) $(“ul li:eq(3)”) 列举 index 等于 3 的元素
:not(selector) $(“input:not(:empty)”) 所有不为空的输入元素
:has(element) $(“div:has(a)”) 返回拥有一个或多个元素在其内的所有元素
/用ul标签举例
$('#ul>li:first')
$('#u1>li:last')
$('#ul>li:eq(3)')
$('#ul>li:even')
$('#ul>li:odd')
$('#ul>li:gt(3)')
$('#ul>li:lt(3)')
$('#u1>li:not(.c1)')
最后一个has的玩法需要写个三个div:一个空div、一个儿子有a标签、一个儿子没有a，孙子有a标签
$('div:has(a)')
输出：
k.fn.init(3) [div, div#d2, div#d3, prevObject: k.fn.init(1)]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
样式操作
方法 描述
addClass() 向被选元素添加一个或多个类名
after() 在被选元素后插入内容
append() 在被选元素的结尾插入内容
appendTo() 在被选元素的结尾插入 HTML 元素
attr() 设置或返回被选元素的属性/值
before() 在被选元素前插入内容
clone() 生成被选元素的副本
css() 为被选元素设置或返回一个或多个样式属性
detach() 移除被选元素（保留数据和事件）
empty() 从被选元素移除所有子节点和内容
hasClass() 检查被选元素是否包含指定的 class 名称
height() 设置或返回被选元素的高度
html() 设置或返回被选元素的内容
innerHeight() 返回元素的高度（包含 padding，不包含 border）
innerWidth() 返回元素的宽度（包含 padding，不包含 border）
insertAfter() 在被选元素后插入 HTML 元素
insertBefore() 在被选元素前插入 HTML 元素
offset() 设置或返回被选元素的偏移坐标（相对于文档）
offsetParent() 返回第一个定位的祖先元素
outerHeight() 返回元素的高度（包含 padding 和 border）
outerWidth() 返回元素的宽度（包含 padding 和 border）
position() 返回元素的位置（相对于父元素）
prepend() 在被选元素的开头插入内容
prependTo() 在被选元素的开头插入 HTML 元素
prop() 设置或返回被选元素的属性/值
remove() 移除被选元素（包含数据和事件）
removeAttr() 从被选元素移除一个或多个属性
removeClass() 从被选元素移除一个或多个类
removeProp() 移除通过 prop() 方法设置的属性
replaceAll() 把被选元素替换为新的 HTML 元素
replaceWith() 把被选元素替换为新的内容
scrollLeft() 设置或返回被选元素的水平滚动条位置
scrollTop() 设置或返回被选元素的垂直滚动条位置
text() 设置或返回被选元素的文本内容
toggleClass() 在被选元素中添加/移除一个或多个类之间切换
unwrap() 移除被选元素的父元素
val() 设置或返回被选元素的属性值（针对表单元素）
width() 设置或返回被选元素的宽度
常用实例：
三级菜单展示
$(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
1
直接操作css属性
// 两个参数设置属性
$('#p1').css('font-size','24px')
// 一个参数获取属性
$('#p1').css('font-size')
// 一次设置多个属性
$('#p1').css({"border":"1px solid black","color":"blue"})
1
2
3
4
5
6
7
位置操作
// 不加参数获取位置参数
$(".c3").offset()
// 加参数设置位置参数
$(".c3").offset({top:284,left:400})
// position只能获取值，不能设置值
// scrollTop获取当前滚动条偏移量
$('window').scrollTop();
$('window').scrollTop(0); // 设置滚动条偏移量
1
2
3
4
5
6
7
8
9
10
文本操作
text() html() 不加参数获取值，加参数设置值
val() 不加参数获取值，加参数设置值
1
2
属性操作
// 获取文本属性
$('#d1').attr('s1') // 获取属性值
$('#d1').attr('s1','haha') // 设置属性值
$('#d1').attr({'num':50,'taidi':'gay'}) // 设置多个属性
$('#d1').removeAttr('taidi') // 删除一个属性
// 获取check与radio标签的checked属性
$('#i1').prop('checked')
$('#i1').prop('checked',true)
1
2
3
4
5
6
7
8
9
文档处理
// 标签内部尾部追加元素
$('#d1').append(pEle)
$pEle.appendTo($('#d1'))
// 标签内部头部添加元素
$('#d1').prepend(pEle)
$pEle.prependTo($('#d1'))
// 标签外部下面添加元素
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
// 标签外部上面添加元素
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
// 替换标签
replaceWith() // 什么被什么替换
replaceAll() // 拿什么替换什么
// 克隆事例
<button id="b2">屠龙宝刀，点击就送</button>
// clone方法加参数true，克隆标签并且克隆标签带的事件
$("#b2").on("click", function () {
$(this).clone(true).insertAfter(this); // true参数
});
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
表单筛选器
选择器 实例 选取
:input $(":input") 所有 input 元素
:text $(":text") 所有带有 type=“text” 的 input 元素
:password $(":password") 所有带有 type=“password” 的 input 元素
:checkbox $(":checkbox") 所有带有 type=“checkbox” 的 input 元素
:submit $(":submit") 所有带有 type=“submit” 的 input 元素
:reset $(":reset") 所有带有 type=“reset” 的 input 元素
:button $(":button") 所有带有 type=“button” 的 input 元素
:image $(":image") 所有带有 type=“image” 的 input 元素
:file $(":file") 所有带有 type=“file” 的 input 元素
:enabled $(":enabled") 所有启用的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有选定的 input 元素
:checked $(":checked") 所有选中的 input 元素
// 针对表单内的标签
$('input[type="text"]')
// 简化写法
$(':text')
// 找到所有被选中的checkbox
$(':checkbox') // 注意select框中默认selected标签也会被找到
$('input:checkbox')
1
2
3
4
5
6
7
8
遍历方法
方法 描述
add() 把元素添加到匹配元素的集合中
children() 返回被选元素的所有直接子元素
closest() 返回被选元素的第一个祖先元素
contents() 返回被选元素的所有直接子元素（包含文本和注释节点）
each() 为每个匹配元素执行函数
filter() 把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素
find() 返回被选元素的后代元素
first() 返回被选元素的第一个元素
is() 根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true
last() 返回被选元素的最后一个元素
next() 返回被选元素的后一个同级元素
nextAll() 返回被选元素之后的所有同级元素
nextUntil() 返回介于两个给定参数之间的每个元素之后的所有同级元素
not() 从匹配元素集合中移除元素
offsetParent() 返回第一个定位的父元素
parent() 返回被选元素的直接父元素
parents() 返回被选元素的所有祖先元素
parentsUntil() 返回介于两个给定参数之间的所有祖先元素
prev() 返回被选元素的前一个同级元素
prevAll() 返回被选元素之前的所有同级元素
prevUntil() 返回介于两个给定参数之间的每个元素之前的所有同级元素
siblings() 返回被选元素的所有同级元素 Returns all sibling elements of the selected element
slice() 把匹配元素集合缩减为指定范围的子集
each() 方法为每个匹配元素规定要运行的函数。
$.each(array,function(index){
console.log(array[index])
})
$.each(array,function(){
console.log(this);
})
// 支持简写
$divEles.each(function(){
console.log(this) // 标签对象
})
1
2
3
4
5
6
7
8
9
10
11
jQuery链式操作
python代码诠释链式调用,其实就是在调用方法之后讲对象再次返回
<div>
<p>p1</p>
<p>p2</p>
</div>
$('div>p').first().addclass('c1').next().addclass('c2');
1
2
3
4
5
jQuery 事件
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。为了防止网页还没加载完，js代码就已经执行，通常利用下面两种方式来书写js代码。
$(document).ready(function(){
// 在这里写你的JS代码...
})
网页最后
$(function(){
// 在这里写你的代码
})
1
2
3
4
5
6
7
8
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
在下面的实例中，当点击事件在某个<p> 元素上触发时，隐藏当前的 <p> 元素：
$("p").click(function(){
$(this).hide();
});
1
2
3
dblclick()
当双击元素时，会发生 dblclick 事件。
$("p").dblclick(function(){
$(this).hide();
});
1
2
3
mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
$("#p1").mouseenter(function(){
alert("鼠标经过了!");
});
1
2
3
mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件。
$("#p1").mouseleave(function(){
alert("鼠标离开了!");
});
1
2
3
mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
$("#p1").mousedown(function(){
alert("鼠标按下!");
});
1
2
3
mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
ouseup(function(){
alert("鼠标松开!");
});
1
2
3
hover()
hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
$("#p1").hover(function(){
alert("你的光标悬停！");
},
function(){
alert("你的光标已经离开！");
});
1
2
3
4
5
6
focus()
当元素获得焦点时，发生 focus 事件。
$("input").focus(function(){
$(this).css("background-color","#eee");
});
1
2
3
blur()
当元素失去焦点时，发生 blur 事件。
$("input").blur(function(){
$(this).css("background-color","#eee");
});
1
2
3
input()
input实时监听，输入内容时发生 input 事件
$('#i1').on('input',function () {
console.log($(this).val())
});
1
2
3
取消标签默认的事件
利用preventDefault()
$('input').click(function (e) {
alert(123);
e.preventDefault();
});
直接返回false
$('input').click(function (e) {
alert(123);
return false；
});
1
2
3
4
5
6
7
8
9
10
11
事件冒泡
iv>p>span // 三者均绑定点击事件
$("span").click(function (e) {
alert("span");
e.stopPropagation(); // 阻止事件冒泡
});
1
2
3
4
5
事件委托
<button>按钮</button>
<script src="jQuery-3.3.1.js"></script>
<script>
$('body').on('click','button',function () {
alert(123)
})
</script>
1
2
3
4
5
6
7
jQuery自带的动画效果
下面的表格列出了用于创建动画效果的 jQuery 方法。
方法 描述
delay() 对被选元素的所有排队函数（仍未运行）设置延迟
dequeue() 移除下一个排队函数，然后执行函数
fadeIn() 逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut() 逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo() 把被选元素逐渐改变至给定的不透明度
fadeToggle() 在 fadeIn() 和 fadeOut() 方法之间进行切换
finish() 对被选元素停止、移除并完成所有排队动画
hide() 隐藏被选元素
queue() 显示被选元素的排队函数
show() 显示被选元素
slideDown() 通过调整高度来滑动显示被选元素
slideToggle() slideUp() 和 slideDown() 方法之间的切换
slideUp() 通过调整高度来滑动隐藏被选元素
stop() 停止被选元素上当前正在运行的动画
toggle() hide() 和 show() 方法之间的切换
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
编者按：今天的好文，总结了两位设计师的工作经验，内容干货不用多加描述，同为设计师，这个问题的答案，你一定想知道（附神器唷） >>>
酸梅干超人：首先，作为一个设计师，尤其是UI设计师，请跟我一起大声念：必须掌握前端切图流程！！
这可能意味着你得学会HTML+CSS，或者要长时间和IOS或者安卓开发人员交流他们是怎么把图片和文字排进屏幕内的。别老是抱怨你是设计怎么能去学码农的东西，设计人员对这些看似高深的源码有本能的畏惧和厌恶。无论你所在的公司在项目人员配置上如何贴心到位，但如果你自己没有掌握这些知识点，就不要妄想最后实现环节上能顺利收尾，因为你从出发点开始和程序员的认知就不对称，这些不对称是矛盾和偏差的根源。
让我们来举举例子：
很多公司是缺少前端人员，前端的工作都邮设计师来完成，但设计师们对前端的熟悉程度一般般，想做出一些好的，就必须去找源代码了，今天我们整理出30+有吸引力的jQuery插件，这些都是比较新鲜的代码，有的效果很不错，有的却很实用，喜欢的可以尝试应用到你的网站上，让你的WEB站点更生动一些吧！
魔法滚动，在演示页滑动鼠标中键试试，很有趣哦。
如果你从事Web前端方面的开发工作，那么对Firebug一定不会陌生，这是Firefox浏览器的一款插件，集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，给Web开发者带来了极大的便利，堪称Web前端开发神器。
版本Firebug 2.0即将发布，下面就来看看这个大版本中有哪些改进。
1. 基于新的Firefox调试引擎（JSD2）
2. 新的UI，以匹配Firefox 29版本中引入的Australis主题
3. Script面板支持语法高亮
4. 允许检查和修改JavaScript函数的返回值
5. Console面板和Script面板新增了Pretty Print（源码美化输出）功能
6. 新增了Export as JSON to Clipboard功能，允许导出当前页面中所有的cookies到剪贴板中。
瀑布流的布局方式展现的内容通常是扁平化、琐碎的东西。首先吸引人的应该是图片，并且图片是那种参差不齐的，如果瀑布流中文字过多，会给人很杂乱的感觉，所以瀑布流更适合单纯的图片浏览。
前不久360公司上线的项目–360图片搜索的美女秀场频道，就用到了瀑布流的布局方式，这种纯粹的看美女图片的页面用瀑布流还是挺合适的。
作为专业的页面构建工程师，除了在专业技能上有很高的要求以外，还需要具有一定的对设计图的审稿能力。审图，并非是意味着追求跟PSD一模一样，甚至耗费大量时间截屏跟PSD去“对像素”。在我的理解中，审图是通过对UI设计稿的分析，充分理解UI设计师的意图，再结合UE的交互状态，从中做到真正的“还原设计稿”。
比如，在这样一张设计稿中
蓝蓝设计的小编 http://www.lanlanwork.com