web前端（慕课网教程操作+笔记）
关注
分享
扫一扫
文章平均质量分 67
都说没想好
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
jQuery动画特效
1.调用show()和hide()方法显示和隐藏元素,toggle切换，之前已经有博文细讲了。$(selector).hide(speed,[callback]);$(selector).show(speed,[callback]);//参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名。原创 2016-05-10 21:34:45 · 3480 阅读 · 0 评论 -
#javascript#属性 transition
#每天记录一点点# $('button').click(function() { //点击button改变css属性 element.css({ 'transition-timing-function': 'ease',//过度效果 'transition-duration': '5000ms', 'transform': 'trans...原创 2018-08-22 15:55:22 · 2278 阅读 · 0 评论 -
通过css样式实现精灵动画
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 这里用到animation来切换css的背景图片 .slowWalk { /* 填入动画样式规则 */ -webkit-animation-name:person-slow; -webkit-anim...原创 2018-08-22 21:55:45 · 241 阅读 · 0 评论 -
animition和transition的配合
$("button:first").click(function() { $boy.addClass('slowWalk').transition({ 'left': $("#content").width() + 'px', }, 10000); });添加一个class“slowWalk”，里面用到了animatio...原创 2018-08-23 10:19:04 · 477 阅读 · 0 评论 -
a= b||c, 赋值
看到一个：function walkRun(time, dist, disY) { time = time || 3000; // 脚动作 slowWalk(); // 开始走路 var d1 = stratRun({ 'left': dist + 'px', 'top': disY ? disY : undefined...原创 2018-08-23 14:09:33 · 932 阅读 · 0 评论 -
Deferred异步操作
首先再确定一下同步和异步的概念：同步：同步不是指一起做！而是A完成后才能完成B！按部就班，顺序操作～异步：异步是可以同时执行～ 了解Deferred的3个步骤var dtd = $.Deferred(); //创建dtd.resolve(); //成功dtd.then() //执行回调实际例子：boy.walkTo(...原创 2018-08-23 15:56:39 · 705 阅读 · 0 评论 -
animation+transform实现轨迹平移
之前通过animation+transtion实现平移，transtion通过定义left和top值来移动；其中 animation是定义一个动画，可以通过百分数来定义每个时刻的状态基本的需要： -webkit-animation-name: Aname;-webkit-animation-duration: 30s;本次操作实现，太阳落山的轨迹，用了transform属性，可...原创 2018-08-24 09:59:47 · 5639 阅读 · 0 评论 -
var 对象封装使用
不太懂下面这个叫什么名字，对象封装模式里面没有找到这类表示方法。知道的朋友麻烦告知一下，谢谢～ var lamp = { elem: $('.b_background'), bright: function() { this.elem.addClass('lamp-bright') },...原创 2018-08-24 15:26:51 · 444 阅读 · 0 评论 -
h5新特性总结&表单实现
今天开始学h5和css3的新特性，边学边持续更新。1.语义化标签：header，nav，main，article，aside，footer（1）IE9可能支持h5，但是行级元素在设置宽度的时候是失效的。并不是所有的浏览器都能够识别出 <main>，需要给它转换为块级元素：display:block;（2）IE8以及IE8以下不支持h5：不认识语义标签，完全无效；...原创 2018-09-06 20:50:27 · 4817 阅读 · 0 评论 -
css新增属性
1.边框图片切成9宫格，设置途径和宽度border-image-slice：27 fill //四个方向上的裁切距离border-image-width：27 fill //边框图片的宽度border-image-outset：0px //扩展边框border-image-repeat：round；//不设置：拉伸；repeat：直接重复平铺；round：内容缩放完整重复平铺...原创 2018-09-18 15:16:28 · 423 阅读 · 0 评论 -
jquery fullpage
全屏滚屏操作，用fullpage<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><script src="77/js/jquery-原创 2018-09-20 15:48:30 · 353 阅读 · 0 评论 -
vue笔记 day2
1.过滤器（1）dom操作：在双括号里面用过滤器，可以使用多个，用 | 分开：这里使用一个msgFormat带参数的过滤器，还有一个test不带参数的过滤器。<div id="app"> <p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p> </div>（2）在script部分...原创 2018-10-13 16:21:13 · 215 阅读 · 0 评论 -
vue笔记 day1
===九月复习了一下html5+css3的新属性，复习了js原生和jQuery，看了视频后没怎么做笔记orz。。。======十月开始了，这次准备认真，超认真看10days的vue视频，不是说一共看10days，而是10个部分，无论大大小小都记录下来=== 今天day1.以下代码都是copy自黑马程序员的教程code，如有侵犯请联系作者删除。<!DOCTYPE html...原创 2018-10-10 10:04:25 · 433 阅读 · 0 评论 -
vue笔记 day3
之前去实习都没有接触js，所以都没跟后台真正合作过，接口都不会使用，真是弱鸡。。。今天终于学了怎么用vue访问接口拿到数据走向人生巅峰。。。 day2讲到有3种方式post，get，jsonp请求接口API其中jsonp常用于跨域，所以在访问数据库时候常用的是get和post后台会提供一个接口地址，告诉你访问这个接口你就可以做删除或者添加或者访问的操作。这里，教程里提供了一...原创 2018-10-16 20:36:20 · 320 阅读 · 0 评论 -
Vue笔记 day4
day4主要接触了路由的基本使用前端路由就是做一个页面切换，根地址不变，url通过#后面的hash来定位到不同的前端页面。这里做的一个登陆-注册页面的切换，步骤如下：（1）定义组件的模版对象，注意是模版对象，不是定义到模版中去这里定一个login的对象，还有一个register的对象，等待使用。 var login = { template: '<h1>...原创 2018-10-24 09:42:18 · 146 阅读 · 0 评论 -
vue笔记day5 （2）webpack
教程里用的webpack3，但是现在出到4了，安装4之后遇到不少问题，又给卸载后安装了webpack31.卸载原来webpacksudo npm uninstall webpack -g2.安装第三版的webacksudo npm install webpack@3.4.1 -g3.查看webpack版本webpack -v4.我之前装好了webpack-cli，如果不...原创 2018-11-07 13:52:35 · 170 阅读 · 0 评论 -
Vue笔记 day6
太久没更新了，准备好久测试大赛，去了南京4天回来恶补～路途中遇到一个也是想做前端的师弟，探讨了一下他表示js基础还是要打牢固对此我甚是震撼好像为了学框架，忘了最初的东西接下来把vue结束后，应该攻克一下基础，还有性能 -----------------------------------------------------------------一,图片urls...原创 2018-11-21 11:40:48 · 168 阅读 · 0 评论 -
弹出层的静态界面和动态效果（弹出关闭）
今天真是觉得自己弱爆了，弹出层的动态效果（点击按钮出现，点击右上角X关闭或者遮罩层关闭）竟然弄了那么久才知道出了什么问题，老司机请让路，新手可以看一下。。超级简单的事情，唉=-=首先是静态界面一般有三个主体：1.按钮，点击触发弹出时间；2.弹出层，右上角一般有个X可以点击关闭，或者底下有个确定按钮；3.遮罩层，在弹出的时候避免和网页页面内容混淆。按钮部分就不说了，任何元原创 2016-08-13 12:06:41 · 3327 阅读 · 0 评论 -
jQuery事件与应用
1.页面加载触发ready事件，ready事件只需要DOM结构加载后即可触发，onload()要全部元素加载后才触发。$(document).ready(function(){})等价于$(function(){});2.使用bind方法绑定元素的事件 $("selector").bind("click mouseout",funtion(){} );3.使用hover切换事件$(sel原创 2016-05-10 00:14:52 · 494 阅读 · 0 评论 -
jQuery实现Ajax应用
首先理解一下什么是Ajax,全称是Asynchronous Javascript And XML（异步JavaScript和XML）是一种交互式网页应用的网页开发技术。用通俗的话说，就是当需要数据处理或更新的时候，不采用整个网页页面重载的方法，而是采用网页某部分更新，也就是让后台和服务器做少量的数据交换。我对异步的理解是，原来页面不受影响，需要更新的数据做小部分的请求交换，这两个部分是异步原创 2016-05-11 09:53:27 · 2202 阅读 · 1 评论 -
jQuery插件之validate表单验证
这里推荐一个网页http://www.runoob.com/jquery/jquery-plugin-validate.html，介绍validate写得很详细,无法转载，直接贴上地址。在执行validate插件之前，我们必须引入相关的插件js库，这里提供jQuery库和validate的js库 src="http://static.runoob.com/assets/jquery-v原创 2016-05-12 23:58:27 · 443 阅读 · 0 评论 -
jQuery插件之表单插件form
先要引用form插件的js库，这里是慕课网所提供的： 表单插件是调用ajaxForm（）方法，实现ajax方式提交表单数据，并把结果返回$(form). ajaxForm({ options }) $(function () { var options = { url: "http://w原创 2016-05-13 08:29:38 · 636 阅读 · 0 评论 -
jQuery插件之lightBox图片灯箱
引用不同的js库，其效果是不一样的，下面这个是慕课网的lightBox的js库 这个插件是通过点击后图片加载弹出来用圆角展示，有上下按钮，加载时有进度条，背景可调颜色lightBox原创 2016-05-13 08:53:35 · 600 阅读 · 0 评论 -
jQuery插件之jqzoom放大镜插件
这个在淘宝上处处可见了，需要两张图片，一张大的一张小的，在标签显示小图片，链接大图片，再给其添加一个jqzoom调用，设置其选中区域的长和宽。还可以引用其css库，设置其选中或非选中部分变灰。这里也是慕课网提供的一个css和一个js库 jqzoom原创 2016-05-13 09:19:21 · 4754 阅读 · 0 评论 -
jQurey插件cookie,autocomplete,contextmenu,lifocuscolorct,twoaddresult
1.cookie 对用户信息的保存：$.cookie(key，value)；读取：$.cookie(key)，删除：$.cookie(key，null)$.cookie('the_cookie'); // 读取 cookie $.cookie('the_cookie', 'the_value'); // 存储 cookie $.cookie('the_cookie', 't原创 2016-05-13 10:22:12 · 507 阅读 · 0 评论 -
垂直-水平导航菜单的制作
导航菜单，前端web开发，慕课网教程原创 2016-05-05 09:30:29 · 3603 阅读 · 0 评论 -
圆角导航栏的制作
圆角导航栏，通过圆角背景图片实现原创 2016-05-05 11:59:14 · 1441 阅读 · 0 评论 -
点击放大导航栏菜单
在上一个圆角导航栏的基础上，我们可以设置其他样式比如这个，hover之后放大，主要的改变就是背景高度提了20个px,再设置一下margin-top :-20px，这里用了负数，是向上移动20px,最后设置一下行高让文字居中。导航栏*{margin:0;padding:0;font-size:20px}ul{list-style:none;height:50px;border-原创 2016-05-05 12:55:52 · 991 阅读 · 0 评论 -
原生js和jquery分别实现伸缩菜单的制作-水平方向导航栏
原生javascript实现：这一次要实现的是鼠标放上去以后，菜单栏被选中的那一栏水平拉伸，鼠标离开后水平收缩。并带有一定的时间性，使肉眼能够看出其拉伸收缩的动画效果。开始用javascript进行编写：首先在之前水平方向的导航栏上进行操作，将第一栏和选中栏的样式只改变为背景变黑色，文字变白色.on,a:hover{background:#000000;color:#FFFFFF;原创 2016-05-05 14:04:07 · 4151 阅读 · 0 评论 -
跨浏览器事件处理
在慕课网里，DOM事件一节中提到了怎么在Chrome,IE,和更低版本的浏览器中实现事件处理，这里做一个小结：1.非IE浏览器支持addEventListener和removeEventListener。2.IE浏览器（低版本）支持attachEvent和detachEvent，但其他浏览器不支持。3.各个浏览器（无论低版本）都支持dom0级事件，但是有一个弊端就是无法重复处理。这原创 2016-05-07 13:10:52 · 1046 阅读 · 0 评论 -
Jquery基础之hide,show,toggle
1.认识JQurey,在上面的博文中有提到，实现同样的效果，引用jquery可以减少很多代码。jquery的宗旨就是write less,do more，这就好比我们能够借用jquey这个强大的javascript库来减少我们的代码量。搭建jquery环境也比较简单，一个是下载jquery文件库到本地引用，还有一个直接引用文件库的URL，这里提供一个1.9.0的地址：2.Jquer原创 2016-05-08 09:37:46 · 1040 阅读 · 1 评论 -
Jquery基础选择器
慕课网这一节的内容讲得挺基础但是很详细，下面有人对选择器评论了这么一句总结：星号全部 逗号不相干 空格子孙孙辈 大于子辈 加号弟弟 波浪所有弟弟这个也适用于CSS中。原创 2016-05-08 10:58:24 · 445 阅读 · 0 评论 -
Jquery过滤性选择器
这里以 为例1.第一个为li的子元素,最后一个为li的子元素 $("li:first") $("li:last") 2.第n个子元素（从0开始索引） $("li:eq(n-1)") 3.获取包含“text”字符串内容的全部元素对象 $( " li:contains ( ' text ' ) " )4.获取指定包含某个元素名的全部元素,比如含p元素原创 2016-05-08 12:20:24 · 1349 阅读 · 0 评论 -
jQuery表单选择器
......所有表单选择器：前都要加空格（直接标签的不用）1 :input表单选择器可以实现，它的功能是返回全部的表单元素，不仅包括所有标记的表单元素，而且还包括、 和 标记的表单元素 $("#frmTest:input")2 :text表单文本选择器可以获取表单中全部单行的文本输入框元素 $("#frmTest:text")3 :password选择器，它的功能原创 2016-05-08 15:09:47 · 1476 阅读 · 1 评论 -
jQuery操作DOM元素
1.attr() 控制元素属性2. html(),text()控制元素内容，其中text()只是文本内容3. addClass(),css()操作元素的样式4.使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能5.append()追加内容6.appendTo()反追加7.before（），after（）元素前原创 2016-05-08 16:42:21 · 981 阅读 · 0 评论 -
bootstrap几个布局组件
一，data-toggle和data-target的使用 data-toggle和data-target配合使用，表示，data-target指定部分以data-toggle的方式存在比如汉堡包模型点击出来后是几个li首先写nav栏，定义一个button和一个a标签，放在class为navbar-header的div里面。<div class="navbar-head...原创 2019-01-07 18:09:09 · 847 阅读 · 0 评论