- 博客(24)
- 收藏
- 关注
RSS订阅原创 小白的vue学习之路06
添加购物车数量功能实现通过connect.jsimport Vue from 'vue';let connect = new Vue();//向外导出export default connect;app.vue <template> <div> <!-- 头部内容 --> <mt-header...
2018-07-03 11:09:01
327
原创 小白的vue学习之路05
图文分享思路：图片懒加载：而图片需要消耗较大的流量。正常情况下，浏览器会解析整个HTML代码，然后从上到下依次加载<img src="xxx">的图片标签。如果页面很长，隐藏在页面下方的图片其实已经被浏览器加载了。如果用户不向下滚动页面，就没有看到这些图片，相当于白白浪费了图片的流量。所以，淘宝、京东这些流量非常巨大的电商，商品介绍页又必须有大量的图片，因此，这些页面的图片都是“按需加...
2018-06-26 10:01:27
364
原创 小白的vue学习之路03
#### 复习* 路由操作的基本步骤```javascript引入对象import VueRouter from 'vue-router';安装插件Vue.use(VueRouter); 挂载属性的行为创建路由对象let router = new VueRouter({ routes:[ { name:'xxx',path:'/xxx',组件 } ]});将路由对象...
2018-06-23 20:32:22
367
原创 小白的vue学习之路04项目
项目技术框架：项目首页：```javascriptnpm i mint-ui vue-preview axios vue-router monent vue - S;npm i webpack html - webpack - plugin css - loader style - loader less less - loader autoprefixer - loader babel - lo...
2018-06-23 20:32:04
792
1
原创 小白的vue学习之路02
#### 复习* vue单文件方式 xxx.vue* 1:准备好配置文件 package.json(包描述文件&& 封装命令npm run dev) + webpack.config.js文件（打包的配置文件）* 2:创建index.html（单页应用的页）* 3:创建main.js(入口文件) * 4:引入vue和相关的文件xxx.vue* 5:new Vue(options)*...
2018-06-19 14:51:21
414
原创 小白的vue学习之路
指令v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-onv-bindv-modelv-prev-cloakv-once#### vue介绍* 2014年诞生,2013年react,09年angularjs* 作者 尤雨溪* 核心概念: 组件化 双向数据流 (基于ES5中的defineProperty来实现的),IE9才支持* angular核心： ...
2018-06-12 20:42:24
1511
原创 小白的jquery学习之路08事件操作
事件页面载入ready(fn)事件处理on(eve,[sel],[data],fn)1.7+off(eve,[sel],[fn])1.7+bind(type,[data],fn)3.0-one(type,[data],fn)trigger(type,[data])triggerHandler(type, [data])unbind(t,[d|f])3.0-事件委派live(type,[data],...
2018-06-09 21:47:20
149
原创 小白的jquery学习之路07css属性操作
CSSCSScss(name|pro|[,val|fn])1.9*jQuery.cssHooks位置offset([coordinates])position()scrollTop([val])scrollLeft([val])尺寸height([val|fn])width([val|fn])innerHeight()innerWidth()outerHeight([options])outerW...
2018-06-09 21:41:39
137
原创 小白的jquery学习之路06文档处理 应用用节点知识实现新闻无缝向上操作
25 $("ul li").first().css({'height':'0px'}); $("ul").append($("ul li").first()); $("ul li").last().animate({'height':'40px'},500)<html><head> <style type
2018-06-09 16:39:55
173
原创 小白的jquery学习之路06文档处理节点的插入、包裹、复制、替换、删除
插入 插入新的 创建一个h2标签，在jquery中创建新标签 只需将标签最终的代码写成字符串的形式 var newh='<h2 class="title">我是h2标签</h1>' 将新创建的标签加到box中 //$("#box").append(newh); 将原来的插入其他位置 （1）将标签#title换位...
2018-06-09 16:37:38
197
原创 小白的jquery学习之路05属性jquery元素内容
获得元素所有内容 html() var con1=$("#title").html(); alert(con1);获得元素所有纯文本内容 text() var con2=$("#title").text(); alert(con2);设置元素的内容html(a) $("#title").html('我是新设置的1');设置元素的纯文本内容text（a） $("#title").te...
2018-06-09 16:25:50
137
原创 小白的jquery学习之路05 属性 jquery对class的操作
增加class可以给h1加一个class$("#title").addClass('hd')删除class 可以给h1删除一个class$("#title").removeClass('zxy')增加或删除 //如果class中有zxy，就删除；如果class中没zxy，就添加 $("#title").toggleClass('zxy')通过增加删除class可以改变样式<html>...
2018-06-09 16:20:51
156
原创 小白的jquery学习之路05属性获得用法
可以用attr和prop属性获得（1）attr用来操作元素的特定元素，比如id class a标签。 （2）prop一般是用来操作元素的特定属性。$(function(){ $("#btn").click(function(){ var re=$("#title").attr('hd') alert(re) }) })属性设置 $(function(){ $("#btn"...
2018-06-08 23:55:00
149
原创 原 小白的jquery学习之路04效果 stop finish
<html><head> <style type="text/css"> #dan1{ height: 100px;width: 100px;position: relative;left: 0px;top:0px; } #qiang1{ height: 100px;width: 20px;position: relative;left: ...
2018-06-08 20:02:43
177
原创 小白的jquery学习之路04效果 easing运动
jquery运动默认只有linear和swing两种。jQuery UI 提供了一个js easing 插件，范围从摆动行为上的变化到定制特效，比如弹跳。Easing 函数指定动画在不同点上的行进速度。jQuery 核心带有两个 easings：一个是 linear，整个动画以一个不变的速度行进；另一个是 swing（jQuery 核心默认的 easing），行进速度在动画开始和结束时比在动画中...
2018-06-08 19:17:32
207
原创 小白的jquery学习之路04效果 天猫轮播图及解决bug问题
实现效果是：图片轮播，点击时下面对li显示对应图片，接着轮播为了让两个操作分隔开，第一种方法：当点击时clearInterval,在执行完操作时再setInterval $("#mbb ul li").click(function(){ window.clearInterval(timer); c=$(this).index(); var left=...
2018-06-07 22:58:49
196
原创 小白的jquery学习之路之04效果新闻向上无缝循环显示
15该节的原理是通过改变里面的ul的top值实现的第一种方法，当c=4时，让c=0，我们会发现新闻刷刷的向上走，因此是不行的，没做到无缝循环显示<html><head> <style type="text/css"> *{ margin: 0px auto; list-style-type: none; } #xw{ wi...
2018-06-07 22:32:49
134
原创 小白的jquery学习之路之天猫轮播04 效果 delay函数 stop 函数 animate函数
11animate（执行操作，多久执行完，执行完调用什么函数$("#dan").animate({'margin-top':'0px'},3000,function(){ $("#dan").delay(2000).animate({'margin-top':'-100px'},2000)} )delay 函数，在2000秒之后执行后面的操作。在js中可以用window.setTim...
2018-06-07 22:23:23
394
原创 小白的jquery学习之路之天猫04 效果 fadeTo animate方法 天猫图片滑动效果
效果淡入淡出fadeTo([[s],o,[e],[fn]]) // 图片的透明度 在2秒时间 到0.3 $("#dog").fadeTo(2000,0.3);fadeToggle([s,[e],[fn]])自定义animate(p,[s],[e],[fn])1.8*//在多久之内将图片的width left height属性设为相应的值.animate({'height':'100px',...
2018-06-06 15:23:09
220
原创 小白的jquery学习之路之04 效果 轮播图
<html><head> <style type="text/css"> *{ margin: 0px auto; list-style-type: none; } #fk{ position: relative;top: 0px;left:0px;width: 400px;height:400px; } #fk...
2018-06-06 13:49:18
137
原创 小白的jquery学习之路之04效果 显隐藏动画的学习
效果基本show([s,[e],[fn]])hide([s,[e],[fn]])toggle([s],[e],[fn]) <html><head> <!--引入jquery文件 --><script src="jquery.js"></script><script type="text/javascript"
2018-06-05 11:35:39
151
原创 小白的jquery学习之路03筛选
过滤eq(index|-index)first()last()hasClass(class)filter(expr|obj|ele|fn)is(expr|obj|ele|fn)map(callback)has(expr|ele)not(expr|ele|fn)slice(start,[end])(1)eq操作把其中第2个p标签找出来//$('#box p').eq(2).css({'color':...
2018-06-05 10:29:37
125
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人