![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端(慕课网教程操作+笔记)
文章平均质量分 66
都说没想好
这个作者很懒,什么都没留下…
展开
-
jQuery动画特效
1.调用show()和hide()方法显示和隐藏元素,toggle切换,之前已经有博文细讲了。 $(selector).hide(speed,[callback]); $(selector).show(speed,[callback]); //参数speed设置隐藏或显示时的速度值,可为“slow”、“fast”或毫秒数值,可选项参数callback为隐藏或显示动作执行完成后调用的函数名。原创 2016-05-10 21:34:45 · 3437 阅读 · 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 · 2170 阅读 · 0 评论 -
通过css样式实现精灵动画
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 这里用到animation来切换css的背景图片 .slowWalk { /* 填入动画样式规则 */ -webkit-animation-name:person-slow; -webkit-anim...原创 2018-08-22 21:55:45 · 191 阅读 · 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 · 417 阅读 · 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 · 865 阅读 · 0 评论 -
Deferred异步操作
首先再确定一下同步和异步的概念: 同步:同步不是指一起做!而是A完成后才能完成B!按部就班,顺序操作~ 异步:异步是可以同时执行~ 了解Deferred的3个步骤 var dtd = $.Deferred(); //创建 dtd.resolve(); //成功 dtd.then() //执行回调 实际例子: boy.walkTo(...原创 2018-08-23 15:56:39 · 625 阅读 · 0 评论 -
animation+transform实现轨迹平移
之前通过animation+transtion实现平移,transtion通过定义left和top值来移动; 其中 animation是定义一个动画,可以通过百分数来定义每个时刻的状态 基本的需要: -webkit-animation-name: Aname; -webkit-animation-duration: 30s; 本次操作实现,太阳落山的轨迹,用了transform属性,可...原创 2018-08-24 09:59:47 · 5567 阅读 · 0 评论 -
var 对象封装使用
不太懂下面这个叫什么名字,对象封装模式里面没有找到这类表示方法。知道的朋友麻烦告知一下,谢谢~ var lamp = { elem: $('.b_background'), bright: function() { this.elem.addClass('lamp-bright') }, ...原创 2018-08-24 15:26:51 · 404 阅读 · 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 · 4727 阅读 · 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 · 380 阅读 · 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 · 295 阅读 · 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 · 168 阅读 · 0 评论 -
vue笔记 day1
===九月复习了一下html5+css3的新属性,复习了js原生和jQuery,看了视频后没怎么做笔记orz。。。=== ===十月开始了,这次准备认真,超认真看10days的vue视频,不是说一共看10days,而是10个部分,无论大大小小都记录下来=== 今天day1. 以下代码都是copy自黑马程序员的教程code,如有侵犯请联系作者删除。 <!DOCTYPE html...原创 2018-10-10 10:04:25 · 383 阅读 · 0 评论 -
vue笔记 day3
之前去实习都没有接触js,所以都没跟后台真正合作过,接口都不会使用,真是弱鸡。。。 今天终于学了怎么用vue访问接口拿到数据走向人生巅峰。。。 day2讲到有3种方式post,get,jsonp请求接口API 其中jsonp常用于跨域,所以在访问数据库时候常用的是get和post 后台会提供一个接口地址,告诉你访问这个接口你就可以做删除或者添加或者访问的操作。 这里,教程里提供了一...原创 2018-10-16 20:36:20 · 273 阅读 · 0 评论 -
Vue笔记 day4
day4主要接触了路由的基本使用 前端路由就是做一个页面切换,根地址不变,url通过#后面的hash来定位到不同的前端页面。 这里做的一个登陆-注册页面的切换,步骤如下: (1)定义组件的模版对象,注意是模版对象,不是定义到模版中去 这里定一个login的对象,还有一个register的对象,等待使用。 var login = { template: '<h1>...原创 2018-10-24 09:42:18 · 116 阅读 · 0 评论 -
vue笔记day5 (2)webpack
教程里用的webpack3,但是现在出到4了,安装4之后遇到不少问题,又给卸载后安装了webpack3 1.卸载原来webpack sudo npm uninstall webpack -g 2.安装第三版的weback sudo npm install webpack@3.4.1 -g 3.查看webpack版本 webpack -v 4.我之前装好了webpack-cli,如果不...原创 2018-11-07 13:52:35 · 125 阅读 · 0 评论 -
Vue笔记 day6
太久没更新了,准备好久测试大赛,去了南京4天 回来恶补~ 路途中遇到一个也是想做前端的师弟,探讨了一下 他表示js基础还是要打牢固 对此我甚是震撼 好像为了学框架,忘了最初的东西 接下来把vue结束后,应该攻克一下基础,还有性能 ----------------------------------------------------------------- 一,图片url s...原创 2018-11-21 11:40:48 · 131 阅读 · 0 评论 -
弹出层的静态界面和动态效果(弹出关闭)
今天真是觉得自己弱爆了,弹出层的动态效果(点击按钮出现,点击右上角X关闭或者遮罩层关闭)竟然弄了那么久才知道出了什么问题,老司机请让路,新手可以看一下。。超级简单的事情,唉=-= 首先是静态界面一般有三个主体: 1.按钮,点击触发弹出时间; 2.弹出层,右上角一般有个X可以点击关闭,或者底下有个确定按钮; 3.遮罩层,在弹出的时候避免和网页页面内容混淆。 按钮部分就不说了,任何元原创 2016-08-13 12:06:41 · 3249 阅读 · 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 · 449 阅读 · 0 评论 -
jQuery实现Ajax应用
首先理解一下什么是Ajax,全称是Asynchronous Javascript And XML(异步JavaScript和XML)是一种交互式网页应用的网页开发技术。 用通俗的话说,就是当需要数据处理或更新的时候,不采用整个网页页面重载的方法,而是采用网页某部分更新,也就是让后台和服务器做少量的数据交换。 我对异步的理解是,原来页面不受影响,需要更新的数据做小部分的请求交换,这两个部分是异步原创 2016-05-11 09:53:27 · 2124 阅读 · 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 · 406 阅读 · 0 评论 -
jQuery插件之表单插件form
先要引用form插件的js库,这里是慕课网所提供的: 表单插件是调用ajaxForm()方法,实现ajax方式提交表单数据,并把结果返回 $(form). ajaxForm({ options }) $(function () { var options = { url: "http://w原创 2016-05-13 08:29:38 · 589 阅读 · 0 评论 -
jQuery插件之lightBox图片灯箱
引用不同的js库,其效果是不一样的,下面这个是慕课网的lightBox的js库 这个插件是通过点击后图片加载弹出来用圆角展示,有上下按钮,加载时有进度条,背景可调颜色 lightBox原创 2016-05-13 08:53:35 · 538 阅读 · 0 评论 -
jQuery插件之jqzoom放大镜插件
这个在淘宝上处处可见了,需要两张图片,一张大的一张小的,在标签显示小图片,链接大图片,再给其添加一个jqzoom调用,设置其选中区域的长和宽。 还可以引用其css库,设置其选中或非选中部分变灰。 这里也是慕课网提供的一个css和一个js库 jqzoom原创 2016-05-13 09:19:21 · 4679 阅读 · 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 · 466 阅读 · 0 评论 -
垂直-水平导航菜单的制作
导航菜单,前端web开发,慕课网教程原创 2016-05-05 09:30:29 · 3486 阅读 · 0 评论 -
圆角导航栏的制作
圆角导航栏,通过圆角背景图片实现原创 2016-05-05 11:59:14 · 1355 阅读 · 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 · 928 阅读 · 0 评论 -
原生js和jquery分别实现伸缩菜单的制作-水平方向导航栏
原生javascript实现: 这一次要实现的是鼠标放上去以后,菜单栏被选中的那一栏水平拉伸,鼠标离开后水平收缩。并带有一定的时间性,使肉眼能够看出其拉伸收缩的动画效果。 开始用javascript进行编写: 首先在之前水平方向的导航栏上进行操作,将第一栏和选中栏的样式只改变为背景变黑色,文字变白色 .on,a:hover{background:#000000;color:#FFFFFF;原创 2016-05-05 14:04:07 · 4073 阅读 · 0 评论 -
跨浏览器事件处理
在慕课网里,DOM事件一节中提到了怎么在Chrome,IE,和更低版本的浏览器中实现事件处理,这里做一个小结: 1.非IE浏览器支持addEventListener和removeEventListener。 2.IE浏览器(低版本)支持attachEvent和detachEvent,但其他浏览器不支持。 3.各个浏览器(无论低版本)都支持dom0级事件,但是有一个弊端就是无法重复处理。 这原创 2016-05-07 13:10:52 · 995 阅读 · 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 · 979 阅读 · 1 评论 -
Jquery基础选择器
慕课网这一节的内容讲得挺基础但是很详细, 下面有人对选择器评论了这么一句总结: 星号全部 逗号不相干 空格子孙孙辈 大于子辈 加号弟弟 波浪所有弟弟 这个也适用于CSS中。原创 2016-05-08 10:58:24 · 396 阅读 · 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 · 1292 阅读 · 0 评论 -
jQuery表单选择器
...... 所有表单选择器:前都要加空格(直接标签的不用) 1 :input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有标记的表单元素,而且还包括、 和 标记的表单元素 $("#frmTest:input") 2 :text表单文本选择器可以获取表单中全部单行的文本输入框元素 $("#frmTest:text") 3 :password选择器,它的功能原创 2016-05-08 15:09:47 · 1436 阅读 · 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 · 930 阅读 · 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 · 800 阅读 · 0 评论