01 2021 档案
摘要:按照之前的写法,定义mutation,使用mutation,当如果要修改mutation名字的时候,需要修改至少两处,当有多出引用此名字的时候,有多少处引用就要改多少个地方,不便于管理 解决方案,把所有mutation的名字抽离出来定义为常量,引用常量做名字,以后要改,则只需改一处即可,并且一眼就能
阅读全文
摘要:有些时候,我们并不想拿到原数据或者所有的原数据,想要拿到加工过后的数据,实现思路就和计算属性一样 getters可以理解为vuex中的计算属性 使用 由于只有一条数据,所以看不出效果 同样的,也支持mapGetters的写法
阅读全文
摘要:在组件中要使用vuex的状态,取值表达式会很长 处理方式1:使用计算属性 、 方式二:可以使用vuex-mapStore来处理,列表中可以是多个状态,只要是vuex管理的状态都可以在这里使用 以上方法,虽然可以很容易使用vuex里面的状态,但是当有自定义的计算属性的时候,无法融合 方法3:在计算属性
阅读全文
摘要:异步处理逻辑 应用场景: 当这样来回切换的时候,每一次切换都会请求对应的接口,会对后端接口造成不必要的压力,而且如果用户网络不好的话,请求接口会变慢,造成不好的用户体验 解决办法:当切换到对应页面的时候,判断是否有对应组件的数据,如果有,则直接从store中获取数据渲染渲染,如果没有,则通过acti
阅读全文
摘要:上一篇的操作,虽然可以达到效果,但是有很大风险,vuex中的状态是共享的,所有组件都可以使用和改变,但状态改变后,无法确定是哪个组件中的事件使vuex中的状态改变了,所以需要一个第三方的东西来统一处理,Mutations 同步处理逻辑 vue devtools安装和使用: 安装和说明:https:/
阅读全文
摘要:VuexVuex是在中大型项目中,用来管理一些变量的。因为如果项目比较大,一些数据在各个页面中可能需要进行交替使用,如果数据量比较大,通过params或者query的方式不太方便。这时候就可以使用Vuex来管理这些数据。 官方文档:https://vuex.vuejs.org/zh/guide/ 安
阅读全文
摘要:获取影院数据 渲染 要使用better-scroll实现的效果 下载Better-Scroll库:cnpm install --save better-scroll 使用better-scroll 动态设置div高度 cinema <template> <div class="cinema" :st
阅读全文
摘要:实现点击电影信息跳转到详情页面 获取传递给detail组件的参数,去请求接口获取数据 渲染数据 图片css和渲染图片 <template> <div v-if="filminfo"> <img :src="filminfo.poster" class="poster"> <h2>{{ filminf
阅读全文
摘要:先实现film-header导航 实现film-header组件 FilmHeader组件 <template> <div> <ul> <router-link to="/film/nowplaying" tag="li" active-class="isActive">正在热映</router-l
阅读全文
摘要:在预留的轮播位置,实现真正的轮播 安装swiper组件 swiper的css所在的位置 老版有dist文件夹,位置为:swiper/dist/css/swiper.css新版没有dist文件夹,位置为:swiper/swiper-bundle.css 实现swiper组件 <template> <d
阅读全文
摘要:nowplaying页面局部css <style lang="scss" scoped> ul { li { padding: 10px; overflow: hidden; img { float: left; width: 100px; } } }</style> 由效果看,导演是一个数组,数组
阅读全文
摘要:一:数据请求 nowplayingurl: 'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=8629683',headers: { 'X-Client-Info': '{"a":"3000","ch
阅读全文
摘要:store.js main.js SubmitOrder.vue组件 导入并创建路由 使用路由
阅读全文
摘要:VuexVuex是在中大型项目中,用来管理一些变量的。因为如果项目比较大,一些数据在各个页面中可能需要进行交替使用,如果数据量比较大,通过params或者query的方式不太方便。这时候就可以使用Vuex来管理这些数据。 官方文档:https://vuex.vuejs.org/zh/guide/ 安
阅读全文
摘要:实现效果 cart.vue <style scoped lang='scss'> .cart-container { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; .mask-bg { background-color: rgb
阅读全文
摘要:把计步器写成一个组件 导入并使用计步器组件 修改css 数量为0的时候,左边按钮和数量不显示 点击增加或减少事件 Stepper.vue <style scoped lang="scss"> .stepper-container { display: flex; align-items: cente
阅读全文
摘要:查看商品详情 获取商品数据 商品详情页面,写成自定义组件 控制点击商品再展示 详情页和布局 关闭按钮点击事件 <style scoped lang="scss"> .gd-container { position: absolute; left: 0; right: 0; top: 0; botto
阅读全文
摘要:左上角返回按钮 下方菜单栏只在首页展示 <template> <div id="app"><!-- <Home></Home>--> <router-view></router-view><!--路由出口--> <van-tabbar v-model="active" v-if="showTabba
阅读全文
摘要:<style scoped> .merchant-container >>> .van-nav-bar { background: none; } /*去掉横线*/ .merchant-container >>> .van-hairline--bottom::after { border: none
阅读全文
摘要:在左侧商品分类点击商品时,右侧自动跳转到对应的商品详情 定义一个点击事件 绑定点击事件 获取商品高度 触发点击事件时改为获取高度偏移量,并滚动 增加选中状态 效果 <style scoped> .merchant-container >>> .van-nav-bar { background: no
阅读全文
摘要:修改取数逻辑 渲染 效果 修改css 实现滚动 <style scoped> .merchant-container >>> .van-nav-bar { background: none; } /*去掉横线*/ .merchant-container >>> .van-hairline--bott
阅读全文
摘要:使用better-scroll组件实现上下拉动的功能,官网:https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%88 安装:npm install bett
阅读全文
摘要:定义商家详情页 <template> <div class=""> 商家详情 </div></template><script type="text/ecmascript-6">export default { name: "", data(){ return {} }, components: {
阅读全文
摘要:使用vant组件实现 在app中注册 使用 更换图标,使用vant组件 创建订单页面和我的页面 <template> <div class=""> 我的页面 </div></template><script type="text/ecmascript-6">export default { name
阅读全文
摘要:商家列表 评分图标用vant组件 标签,用vant组件 修改css <style scoped> .van-dropdown-menu >>> van-dropdown-menu__title{ color: #767676; } .van-dropdown-menu__item{ font-siz
阅读全文
摘要:样例 下拉选项框,用vant组件:https://youzan.github.io/vant/#/zh-CN/dropdown-menu 注册组件 使用并添加选项 加上另外的选项 统一修改文字样式和大小 <style scoped lang="scss"> .header-group { backg
阅读全文
摘要:头部地址 搜索框 使用vant的组件:https://youzan.github.io/vant/#/zh-CN/ 去除搜索框的边距 设置输入框与上一行的距离 <style scoped lang="scss"> .header-group { background-color: black; pa
阅读全文
摘要:使用iconfont解决小图标的问题 官网:https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a 搜索要使用的图标 选中图标并添加入库 将图标添加至项目 选则font class,图标下面的名字为图标名,在使用的时候会指定此名
阅读全文
摘要:项目初始化:1. vue create 项目名2. sass配置: * npm install node-sass@4.12.0 --save-dev * npm install sass-loader@8.0.0 --save-dev * style就可以通过lang='scss'来写sass语法
阅读全文
摘要:对于某些接口的前置校验,比如未登录状态下访问个人中心,明显是不应该访问到的,应该跳转到登录页面才对 官方说明:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 一、全局路由守卫:就是在整个网页中,只要发生了路由的变化,
阅读全文
摘要:官方说明:https://router.vuejs.org/zh/guide/essentials/history-mode.html 按目前的代码,在访问url的时候,总是有一个#号 要去掉这个#号,只需要在路由配置中加一个属性,mode='history'即可 但是这样过后,不知看起来像后端路由
阅读全文
摘要:动态路由:1. 在url中,通过定义一个参数,那么以后url中就可以动态的传递这个参数。语法是:`/profile/:参数名`2. 在组件中,可以通过`this.$route.params.参数名`拿到,或者是组件的模板中,可以通过`$route.params.参数名`拿到。3. `this.$ro
阅读全文
摘要:一:重定向: 按之前的代码,当输入的地址没有后缀的时候,是没有默认页面跳转的,即没有设置重定向页面 只需要在router的配置文件router.js中,配置重定向即可实现 二:二级路由,一级路由固定了,访问的子组件都是在一级路由对应组件下渲染的组件 创建两个组件,用作二级路由对应的组件 在route
阅读全文
摘要:上一篇实现的效果是在浏览器中输入路径,加载对应的组件,但是在实际使用上,不可能让用户去这么做,应该在某个页面上,给出对应组件的链接,用户点击,则加载该组件 写一个导航组件,列出三个组件的链接(暂时使用a链接,下面会使用路由组件) 在根组件中,注册tabbar组件 router组件提供了路由的组件,r
阅读全文
摘要:Vue-RouterVue-Router是用来将一个Vue程序的多个页面进行路由的。比如一个Vue程序(或者说一个网站)有登录、注册、首页等模块,那么我们就可以定义/login、/register、/来映射每个模块。 安装:通过script加载进来:<script src="https://unpk
阅读全文
摘要:由于前端包本身已经被映射为了域名的形式,所以直接请求后端接口,会报跨域的问题 猫眼接口:https://m.maoyan.com/ajax/movieOnInfoList?token=&optimus_uuid=B7C0C9B0DC9E11EABDF83B2B19B81E94EBA03A3B4D5A
阅读全文
摘要:在package.json中有三个命令,分别是serve、build、lint 先检查代码风格问题,并修复 npm run lint 打包上生产:npm run build 在目录下生成了dist文件夹,代码已经被自动压缩,只需要将此报配上代理(如Nginx)即可用于生产
阅读全文
摘要:准备好两个组件 在根组件中引入 注册方式1:全局注册 注册方式2:局部组件注册 实现在navbar组件中,控制sidebar组件的显示和隐藏 navbar组件中留一个插槽 sidebar组件添加一些内容 在根组件中写控制逻辑 以上案例有个问题,子组件的css被主组件的css覆盖了 解决方案:在子组件
阅读全文
摘要:一、安装node和vue脚手架 1.下载node:http://nodejs.cn/download/ 双击安装,一路下一步到安装成功,打开cmd,执行node -v,出现版本号,则说明安装成功 2.配置使用淘宝镜像: npm的服务器在国外。那么可以安装一下cnpm,并且指定镜像为淘宝的镜像:npm
阅读全文
摘要:过滤器:过滤器就是数据在真正渲染到页面中的时候,可以使用这个过滤器进行一些处理,把最终处理的结果渲染到网页中。1. 使用:`{{username|strip}}`、`<a :href="url|strip">百度</a>`。2. 定义:都是定义一个函数,这个函数的第一个参数永远都是被过滤的那个变量
阅读全文
摘要:生命周期函数:1. 创建阶段: * beforeCreate:Vue已经创建了,但是data和methods都还没有被创建好。 * created:data和methods已经被创建好了。 * beforeMount:模板经过编译,还没有挂载到网页中。 * mounted:模板已经经过编译,并且已经
阅读全文
摘要:基础的展示和隐藏,无过渡效果 vue提供了组件transition,用来控制元素过渡,css需自定义,但是css名字的后缀(绿色部分)是固定的 1.单个元素过渡 2.多个元素过渡 如果直接写多个元素,会报错 改为互斥,且不同标签,否则vue会认为标签没变,不会重新创建节点 或者相同标签,key值不同
阅读全文
摘要:定义组件 使用场景1:如果想要动态的给child组件的dom结构添加节点,则需使用插槽。直接添加是无效的 定义插槽 使用场景1:如定义一个轮播组件,不固定轮播的内容,轮播内容按使用的场景临时添加 使用 使用场景2:使用插槽实现在组件1上控制组件2是否展示 具名插槽,在预留了多个插槽时使用 <!DOC
阅读全文
摘要:component组件,动态的绑定多个组件到它的is属性上 在component组件的is属性上绑定组件 动态绑定 组件状态保留 在正常情况下,动态绑定的状态是不会保留的 输入内容 切换组件 切回输入内容的页面,内容没有了 vue提供了组件keep-alive,来保持动态组件的状态一直存活,不会因为
阅读全文
摘要:实现效果 <!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-eq
阅读全文
摘要:事件总线工作原理 在代码中实现 创建非父子关系的组件 创建中央事件总线(空的vue实例) mounted生命周期函数,在当前组件的dom创建完后就会调用 在mounted生命周期中绑定订阅事件总线 绑定发布事件总线 获取发布的状态 <!DOCTYPE html><html lang="en"><he
阅读全文
摘要:ref存在于vue实例中 ref放在标签上,拿到的是原生节点 获取vue实例下,ref中,inputText输入框的值 ref放在组件上,拿到的是组件对象 访问子组件的状态和方法(子传父) 父传子 <!DOCTYPE html><html lang="en"><head> <meta charset
阅读全文
摘要:子传父使用事件的方式 创建父子关系组件 实现子传父,用事件的方式 子组件定义事件 父组件定义事件 子传父使用案例,父组件根据子组件1传过来的状态,判断是否展示子组件2 定义父子组件 用事件的形式实现控制子组件展示或隐藏 <!DOCTYPE html><html lang="en"><head> <m
阅读全文
摘要:父传子使用属性的方式 先构建一个父子组件 父传子场景 子组件使用props来定义属性,接收对应父组件传过来的属性,起的变量名字需一致,需全部小写,不支持驼峰命名,对于布尔值需动态绑定 动态传值: 父传子可以传多个 属性验证 props用上面list的形式虽然可以接收并使用参数,但是做不了属性的验证,
阅读全文
摘要:组件,类似于封装的类和方法,可以给任意其他类调用,对于组件来说,就是封装好后可以在任意其他组件中使用 真实组件化开发的页面结构 一:全局组件,使用Vue.component来定义组件 示例 也可以绑定事件,在自己的组件中定义事件 css也是可以绑定的 多个全局组件定义和引用 二:局部组件(子组件)
阅读全文
摘要:前面有一篇是实现模糊查询,没有使用计算属性:https://www.cnblogs.com/zhongyehai/p/12337821.html 现在使用计算属性,会比不使用计算属性方便很多,也优雅很多 <!DOCTYPE html><html lang='en'><head> <meta char
阅读全文
摘要:计算属性定义在comput中,使用方式与方法一样,只不过不用加括号 如果有个需求,将数据的首字母转为大写 在不使用计算属性的情况下实现: 这样把大段js代码写在模板中,可读性差,维护性也差,且不可复用,所以有了计算属性 如果计算属性的依赖改变了,计算属性会重新计算,所以不用担心数据源改变了,计算属性
阅读全文
摘要:axios是一个第三方库 gitHub示例:https://github.com/axios/axios#example 引入或安装 使用方式 使用示例 引入axios 事件触发请求 可以看出,axios和fetch的响应结构不一样,在axios中,会自动给响应信息加一层data <!DOCTYPE
阅读全文
摘要:fetch是w3c的一种请求标准,不是第三方库,与vue、jquery无关,且多数浏览器已内置 使用: 本地准备一份json文件作为数据源 请求,拿到的不是我们想要的数据 想要获取响应数据,需在第一个then中将响应数据转为json再返回给第二个then,在第二个then中去获取值 也可以简写ret
阅读全文
摘要:1.v-modle绑定后,不即时改变状态 双向绑定过后,默认是只要输入框内的value值有改变,data的状态就会改变的,即时改变,对资源消耗大 可以设置为光标失去焦点后再改变,这样就可可以减少资源的消耗 2.对输入数字的限制,使用.number 但是此方法有bug,对于一开始就不输数字的,无法限制
阅读全文
摘要:商品数据准备: datalist: [ {name: "商品1", price: 10, number: 1, id: "1"}, {name: "商品2", price: 20, number: 2, id: "2"}, {name: "商品3", price: 30, number: 3, id
阅读全文
摘要:输入框双向绑定: 文本域的绑定也一样 复选框 如果要默认选中状态,则只需要将初始值设为true即可 多选框操作,使用数组,并且给每个选项设置value值 单选按钮,给每个选项设置value值 <!DOCTYPE html><html lang='en'><head> <meta charset='U
阅读全文
摘要:一:事件修饰符 官网对事件修饰符说明:https://cn.vuejs.org/v2/guide/events.html 冒泡场景:当触发li上的点击事件的时候,会一直往上找,找到ul的事件 解决方法 第一种方法:js处理方式,把事件传给函数,在函数中阻止冒泡 第二种方法:vue提供的事件修饰符.s
阅读全文
摘要:一:直接函数名 二:函数后加括号,传参的场景 三:当时间触发的逻辑很简单的时候,可以直接写,不用通过函数 <!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width
阅读全文
摘要:实现模糊查询,查询出包含输入内容的元素 两种监听方式: 1.实时监听input输入框,只要发生改变,就触发查询 2.输入框失去焦点(光标离开输入框)时触发 这里采用input事件,实时查询 为了能实时拿到输入框的数据,使用v-mdel进行双向绑定 使用filter筛选数据 由于filter并不会对原
阅读全文
摘要:一:直接作用于原数组的 使用以下方法操作数组,可以检测变动push()/pop()/unshift()/splice()/sort()/reverse() 二:不直接作用原数组的 使用以下函数,需用新数组替换旧数组 filter()/concat()/slice()/map() 用新数组替换旧数组
阅读全文
摘要:渲染: 简单示例 操作数组即可改变数据 遍历的时候取索引值 遍历对象 由于对象没有索引,但是有key,所以遍历的时候可以取到key key值设置 使用不重复的数据做key值,避免for循环遍历的时候对相同key值跳过更新 <!DOCTYPE html><html lang='en'><head> <
阅读全文
摘要:v-for循环:语法就是`变量 in 需要循环的变量名`。1. 数组循环:`<tr v-for="book in books">`,如果在循环的时候想要把下标也循环出来,那么可以加一个圆括号,并且永远记住,第一个值是对象,第二个才是下标,不管这个名字叫做什么。 2. 对象循环:跟数组循环是一样的。默
阅读全文
摘要:一:class绑定 准备好class 一:三目运算的方式 把class动态绑定,定义一个变量isActive为true,为true时绑定class=red,定义点击事件handlClick,当点击时,isActive取反,即为false,绑定class=yellow 二:对象的形式 上面是对只有两个
阅读全文
摘要:v-show和v-if:1.v-show:这个是一次性会把所有的都渲染出来,然后通过简单的切换display值来修改是否需要被渲染。所以在需要频繁切换的情况下推荐使用。v-show不能在template标签上使用。2. v-if:真正的条件渲染。如果条件更改了,那么会适当的做标签销毁和重建以及事件的
阅读全文
摘要:一:插值:以“{{}}”为标记的内容,内容区间为js运算 1.插入文本 如果要渲染变量则需先在data中定义变量 2.插入html:要渲染html不能直接使用插值渲染,会被渲染成文本 在vue里面要渲染html,需要使用v-html指令 <!DOCTYPE html><html lang="en">
阅读全文
摘要:一、Vue介绍Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 ve
阅读全文
摘要:babel是一个JavaScript编译器,babel官网:https://www.babeljs.cn/ babel运行环境基于node,所以需要安装node:https://nodejs.org/zh-cn/download/ 1.初始化项目的package.json,存储当前项目的信息:npm
阅读全文
摘要:一:类的声明 1.声明类,关键字class,constructor为构造函数 2.简单的类封装 二:静态方法与静态属性 静态方法与静态属性不会被类的实例所拥有,只能类自身调用 1.静态方法,用关键字static声明 2.静态属性,类.属性=值,只能给静态方法使用 三:getter、setter:在获
阅读全文
摘要:1.回调与Promise 回调依赖处理,十分不易于维护 用Promise链式处理, 1..then()为成功后走的分支,resolve为具体要求做的事事 2..catch为失败的分支 3..finally,不管是否成功,都会走此分支 4..all,把多个Promise实例包装成一个新的Promise
阅读全文
摘要:1.参数的默认值 2.扩展运算符 3.箭头函数 1.基础的箭头函数 2.函数体有多行代码 3.在箭头函数中,没有arguments参数 4.箭头函数中没有this
阅读全文
摘要:一:字符串扩展 1.模板字符串:`` 2.补全字符串:padStart、padEnd 3.repeat:重复 4.startsWith、endsWith:判断字符串的开头和结尾 5.includes:判断字符串中是否包含另一个字符串 二:for of
阅读全文
摘要:一:数组 扩展运算符:...,合并多个数组 交换变量 接收函数返回的多个值 二:对象 配合扩展运算符使用 合并对象 使用对象传入乱序的函数参数 获取函数的多个返回值 三:字符串
阅读全文
摘要:一:let let与var的区别 1.let声明的变量只在当前(块级)作用域内有效, 2.用let声明的变量不能被重复声明 3.let不存在变量提升,不会将let声明的变量提升到最前面 二:const声明的都是常量 1.声明时必须赋值,否则会报错 2.一旦声明,不能改变
阅读全文
摘要:实现效果 HTML <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="Total"> <div id="title"> 账户信息 </div>
阅读全文
摘要:实现效果:通过正则表达式进行校验、匹配、替换,点击常用的正则表达式时,直接使用 HTML CSS JS <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> dl, dd{p
阅读全文
摘要:1.校验QQ号 console.log(/^[1-9]\d{4,10}$/); // 严格控制5~11位console.log(/^[1-9]\d{4}$/); // 不小于5位即可 2.用户名 console.log(/^[\u4e00-\u9fa5a-zA-Z0-9_]{2,18}$/);con
阅读全文
摘要:1.search:返回匹配到的索引,没有匹配到则返回-1 2.match:非全局的情况下参会返回分组中匹配到的内容,全局匹配只能匹配到所有匹配到的字符 3.split:根据关键字切割 4.replace:替换字符串
阅读全文
摘要:一:首尾匹配 1.首匹配:^ 2.尾匹配:$ 3.案例:验证字符串为全数字 二:单体边界匹配 1.单词边界:\b 2.前瞻性匹配:指定单词后面元素的匹配 3.负向前瞻性:与前瞻性相反
阅读全文
摘要:1.选择,或:| 2.分组 3.引用,在正则中直接使用匹配到的数据
阅读全文
摘要:1.指定要匹配的个数:{个数} 2.指定要匹配的个数范围:{范围起,范围止} 3.大于等于,匹配至少一个,大于等于1:{1,},或者+ 4.匹配0次或1次:可以用?表示 5.匹配允许0次:* 6.综合应用 7.非贪婪的重复:? 8.使用案例
阅读全文
摘要:一:转义字符 1.反斜杠:\,当要匹配在正则中有特殊含义的字符时,需要转义 2.匹配反斜杠 3.换行:\n 二:字符类 1.[字符字符字符字符]:从第一个开始拿出来匹配,匹配到一个就停止匹配 2.取反:^ 3.范围:-,只能从小到大 4.以unicode中的中文字符范围匹配中文字符 三:别名 1.条
阅读全文
摘要:一:创建正则表达式的两种方式 1.字面量 2.构造函数 二:模式修饰符 i:ignoreCase:忽略大小写 g:global:全局匹配 m:multiline:多行匹配 模式匹配可以混合使用,不区分顺序:
阅读全文
摘要:HTML和CSS实现 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{background: #eee} #calculator{margin: 100px
阅读全文
摘要:一:history对象:保存了用户在浏览器中访问页面的历史记录,从浏览器打开的时候算起 1.back和go back:回到历史记录的上一步,和浏览器的后退按钮一致 go:去到历史记录的指定条记录,负数为后退 back()和go(-1)效果一致 2.forward和go forward:回到历史记录的
阅读全文
摘要:location对象提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能,它既是window对象的属性,也是document对象的属性 1.href:返回当前加载页面的完整url,同时,也可以设置url,此时加载的url会在浏览器的历史中生成一条浏览记录,可以通过浏览器回退按钮退回 2.ha
阅读全文
摘要:BOM:browser object model,浏览器对象模型 window是浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象 1.所有的全局变量和全局方法都被归在window对象上 2
阅读全文
摘要:UI事件load:页面所有加载后触发resize:窗口大小发生变化时触发foucs:获得焦点时触发(不支持冒泡)foucsin:获得焦点时触发(支持冒泡)blur:失去焦点时触发foucsout:失去焦点时触发change:域的内容改变时发生,一般用于select、checkbox、radiosub
阅读全文
摘要:1.type:事件类型 根据事件类型,执行不同的js代码 <body> <button id="btn">点击按钮</button> <script> var btn = document.getElementById('btn'); var func = function (event){ con
阅读全文
摘要:一:事件周期 解释器创建一个event对象后,会按如需爱过程将其在HTML元素间进行传播 第一阶段:事件捕获,事件对象延DOM树向下传播 第二阶段:目标触发,运行事件监听函数 第三阶段:事件冒泡,事件延DOM树向上传播 二:事件冒泡:直系亲属树结构中,点击某个元素,亲属树上的长辈元素元素方式添加了事
阅读全文
摘要:事件:可以被JavaScript侦测到的行为,就是当用户与web页面进行某些交互时,解释器就会创建响应的event对象以描述事件信息 示例,监听点击事件 一:事件定义的三种方式 方式一:直接在HTML中定义元素的事件相关属性,此方式违反了 内容与行为分离 的原则,应该尽量少用 方式二:DOM0级事件
阅读全文
摘要:onkeydown:按下键盘任意按键时触发onkeypress:按下键盘任意按键时触发(只响应字母与数字符号)onkeyup:松开按键时触发keyCode:返回onkeydown、onkeypress、onkeyup事件触发的键值的字符代码,或键的代码
阅读全文
摘要:事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间 1.HTML事件:直接在HTML元素标签内添加事件,执行脚本 2.DOM0级事件:ele.事件 = 执行脚本,在DOM对象上绑定事件,执行脚本可以是一个匿名函数,也可以是一个函数的调用 3.鼠标事件类型: onload:页面加载时触发onclic
阅读全文
摘要:一:包含空白节点的属性 获取第一个子节点,head 获取第二个子节点,body 默认情况下,会将标签之间的空格或者换行也作为一个节点 递归获取节点结构 二:不包含空白节点的属性,类数组对象 nodeList是一种类数组对象,用于保存一组有序的节点,只是类数组不是真正的数组,不具备数组的内置方法
阅读全文
摘要:一:document: 1.write:写入节点内容 二:create系列创建节点 1.document.createElement():创建标签节点 2.document.createTextNode():创建文本节点 3.document.createDocumentFragment():创建文
阅读全文
摘要:一:获取时间 1.创建时间对象:new Date(); 不传参的情况下,返回当前日期的对象 2.getFullYear:返回4位数的年份 3.getMonth:返回日期中的月份,返回值为0-11 4.getDate:返回月份中的天数 5.getDay:返回星期,值为0-6 6.getHours:返回
阅读全文
摘要:1.min:一组数据中的最小值 2.max:一组数据中的最大值 3.ceil:返回大于给定数字的最小整数(向上取整) 4.floor:返回给定数字的整数部分 5.round:将给定数字四舍五入为整数 6.abs:取给定数字的绝对值 7.random:生成0~1之间的随机数
阅读全文
摘要:1. string[index]:取出索引位置的字符串 2.string.charAt(index):返回字符串中的index位置的字符本身 3.string.charCodeAt(index):返回字符串中的index位置的字符的编码 4.string.indexOf(字符串):从一个字符串搜索给
阅读全文
摘要:1.创建数组: 1.new Arra() 2.直接放中括号里面 2.从数组取值,索引,从0开始 3.给数组赋值 4.数组长度,array.lenth 通过设置长度,移除数组中长度之后的数据 5.数组遍历 数组的方法: 1.push,往数组的最后顺序的添加对象 2.unshift:往数组的最前面加数据
阅读全文
摘要:1.函数的定义:使用function声明,后面跟一组参数以及函数体: function funcName(){ // 函数逻辑} 2.调用:函数名() 3.带参数的函数 4.函数的返回值 5.arguments参数:所有参数接收都是使用arguments列表来管理 6.案例 求任意一组数的平均值
阅读全文
摘要:一:分支语句 1.if语句 1.1.if(){代码块}; 1.2.if(){代码块1}else{代码块2}; 1.3.if(){代码块1}else if{代码块2}···esle{代码块3}; if嵌套 2.switch 二:循环语句 1.for for嵌套 2.for in 3.while,先判断
阅读全文
摘要:一:算数操作符 加:+ 减:- 乘:* 除:/ 取余:% 递增:++ 递减:-- 二:赋值操作符 简单赋值:= 复合赋值: 加等:+= 减等:-= 乘等:*= 除等:/= 余等:%= 三:比较操作符,返回布尔值 >、 <、 >=、 <=、 ==(相等,只比较值是否相等)、 (全等,比较值的同时,比较
阅读全文
摘要:typeof:检测变量类型,返回值为string类型的数据类型 一:undefined:undefined类型只有一个值,即特殊的undefined,一般来说,不存在显式的把一个 变量设置为undefined的情况 二:null:表示一个空的指针对象,如果定义的变量准备在将来用于保存对象,那么最好将
阅读全文
摘要:1.变量的声明(使用var为局部变量,否则为全局变量): 声明局部变量需要使用var操作符:var 变量名 2.声明变量时赋值:var 变量名 = 值 3.声明后赋值 4.一次声明多个变量
阅读全文
摘要:一:@font-face的语法规则 @font-face { font-family: ''; /* 字体名称 */ src: <source>[format]; /* 字体存放路径,可多个 */} 二:@font-face的取值说明 1.font-family:自定义的字体名称,将被引用到web元
阅读全文
摘要:一:文本 1.文本阴影:test-shadow, h-shadow(水平偏移,负数为往左)、v-shadow(垂直偏移,负数为往右)、blur(模糊距离,值越大越模糊)、color(颜色) 2.文本轮廓(任何主流浏览器都不兼容此属性):text-outline 二:换行 1.文本自动换行:word-
阅读全文
摘要:渐变可以在两个或多个指定的颜色之间显示平稳的过渡 一:线性渐变:是沿着一根轴线改变颜色,从起点到终点颜色进行属性渐变(从一边拉向另一边) background: linear-gradient(direction, color-stop1, color-stop2, ...) 1.线性渐变-从上到下
阅读全文
摘要:一:背景图像区域: background-clip:指定背景绘制区域 border-box:背景被剪裁到边框盒 padding-box:背景被剪裁到内边距框 content-box:背景被剪裁到内容框 content-box padding-box border-box <!DOCTYPE html
阅读全文
摘要:一:圆角 border-radius属性:一个最多可指定四个border-*-radius属性的复合属性,这个属性允许为元素添加圆角边框,多个值的 时候,从左上角开始,顺时针 单个属性指定: border-top-left-radius:左上角的弧度 boder-top-right-radius:右
阅读全文
摘要:CSS伪元素用于向某些选择器设置特殊效果 语法格式:元素::伪元素(element::pseudo-element) 1.first-line:根据first-line伪元素的样式对element元素的第一行文本进行格式化,first-line伪元素只能用于块级元素 2.first-letter:用
阅读全文
摘要:权重:当很多的规则被应用到某一个元素上时,权重是一个决定哪种规则生效,或者是优先执行的过程 权重等级与权值: 行内样式(1000) > ID选择器(100) > 类、属性选择器和伪类选择器(10) > 元素和伪元素(1) > *(0) CSS权重规则 1.包含更高权重选择器的一条规则拥有更高的权重
阅读全文
摘要:nth选择器:也称CSS3结构类 选择器方法: first-child、last-child、nth-child()、nth-last-child()、nth-of-type()、nth-last-of-type()、first-of-type、last-of-type、only-child、onl
阅读全文
摘要:UI元素状态伪类有: enabled(默认):输入框可输入的时候 disabled:输入框不可输入的时候 checked:选项被选中的时候
阅读全文
摘要:动态伪类并不存在于html中,只有当用户和网站交互的时候才能体现出来 1.锚点伪类 :link:超链接的展示效果 :visited:访问过的链接 2.用户行为伪类 :hover:鼠标移动到此元素时的效果 :active:选中的时候 :focus:表单或输入框聚焦 focus
阅读全文
摘要:使用CSS3属性选择器,可以只指定元素的某个属性,或者还可以同时指定元素的某个属性和其对应的值 以a标签为例 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 选中
阅读全文
摘要:1.子选择器 概念:子选择器只能选择某元素的子元素 语法:父元素 > 子元素 2.兄弟选择器 概念:相邻兄弟选择器可以选择紧接在另一元素后的元素,而且阿门具有一个相同的父元素 语法格式:元素 + 兄弟相邻元素 3.通用兄弟选择器 概念:选择某元素后面的所有兄弟元素,而且他们具有一个相同的父元素 语法
阅读全文
摘要:HTML5新布局的意义: 1.语义化:HTML5可以让更多语义化的结构代码标签代替大量的无异议的div标签 1.这种语义化的特性提升了网页的质量和语义 2.减少了以前用于CSS调用class和id属性 2.对搜索引擎的友好:新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好 HTML5之前的布
阅读全文
摘要:一:链接属性 1.size:<link rel="stylesheet" href="" sizes="16x16"> 2.target:<base href="" target="_blank"> 3.超链接(a标签): 1.a.media:表示对设备进行优化, handheld对“手持”设备进行
阅读全文
摘要:1.autocomplete:作用于form或input域,点击时自动弹出历时输入过的数据,点击可快速输入 on:打开此功能 off:关闭此功能 在form上使用时,对整个form有效,但是form下的inout标签可以单独声明 2.autofocus:页面初始化时,自动聚焦到使用此属性的标签 3.
阅读全文
摘要:1.email:邮件类型 2.url:统一资源定位符 3.tel:电话号码 4.number:数字类型,只能输入数字相关:0123456789-+.e 5.date:日期,年月日 6.month,月份,年月 7.week:第多少周 8.time:时分 9.datetime-local,年月日时分 1
阅读全文
摘要:一:删除的标签: 1.纯表现的元素:Basefont、big、center、font、s、strike、tt、u 2.对可用性产生负面影响的元素:frame、frameset、noframes 3.产生混淆的元素:acronym、applet、isindex、dir 二:重定义标签(显示不变,只是表
阅读全文
摘要:一:注释标签 ruby:标记定义注释或音标 rt:标记定义对ruby的注释内容文本 rp:告诉不支持ruby元素的浏览器如何去显示,rp标签不要放在rt标签内 使用rp标签做兼容 <p>这个字念<ruby>夼<rt>Kuang</rt></ruby></p><br><br><br><br><!--对
阅读全文
摘要:一:状态标签 1.meter:状态标签(实时状态显示:气压、气温) value:当前值 min:最小值,当真实值小于此值时,用此值 max:最大值,当真实值大于此值时,用此值 low:最小安全值,小于此值时报警 high:最大安全值,大于此值时报警 optimum:最优值 当不指定属性值,只有val
阅读全文
摘要:多媒体标签的出现意味着富媒体的发展及支持不使用插件的情况下即可操作媒体文件,极大的提升了用户体验 三类多媒体资源: video:标记定义一个视频 audio:标记定义音频内容 source:标记定义媒体资源 1.audio标签 autopaly:自动播放 loop:循环次数:-1为无限循环 cont
阅读全文
摘要:一:HTML5新增的10个结构标签 article:标记定义一篇文章 header:标记定义一个页面或者区域的头部 nav:标记定义导航链接 section:标记定义一个区域 aside:标记定义页面内容部分的侧边栏,常与section配合使用、 hgroup:标记定义文件中一个区块的相关信息 fi
阅读全文
摘要:页面效果 页面结构 一:头部,一个logo,一个菜单 CSS写到外部文件 引用CSS文件 效果 /* 清除默认样式 */*{padding: 0;margin: 0;}/* 头部 */.header{width: 100%;height: 100px;}/* logo */.header img{
阅读全文
摘要:一:混合布局 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{margin: 0;padding: 0;color: #fff;text-align: cen
阅读全文
摘要:一:两列布局 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*初始化页面样式*/ body{margin: 0;padding: 0;color: #fff} /*
阅读全文
摘要:一:单行布局 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*清除和初始化body样式*/ body{ margin: 0; padding: 0; color:
阅读全文
摘要:一:static:静态定位常规定位/自然定位 二:relative:相对定位 三:absolute:绝对定位 四:fixed:固定定位 五:sticky:磁贴定位/粘性定位/吸附定位
阅读全文
摘要:用浮动实现网页的导航和布局 header部分 主体和footer部分: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 重置样式 */ *{margin: 0;p
阅读全文
摘要:CSS定位机制: 1.普通流(标准流) 2.浮动 3.绝对定位 一:普通流:默认状态,元素自动从左往右或者从上往下 块元素: 1.独占一行 2.可以设置宽、高 3.如果不设置宽,默认为容器的100% 4.常见的块级元素标签:div、p、h1~h6、ul、ol、li、dl、dt、dd 行内元素 1.与
阅读全文
摘要:一:设置列表的标记样式类型 无序列表 有序列表 二:使用图片设置列表项的标记:list-style-image 三:列表项标记的位置:list-style-position 四:列表样式缩写:list-style
阅读全文
摘要:一:背景样式 1.背景颜色:background-color 2.背景图片:background-image: 3.设置背景图片重复:background-repeat 4.背景图片显示方式:background-attachment 5.背景图片定位:background-position 6.背
阅读全文
摘要:实现一个列表标签 一:初始化内容和样式 二:大盒子,加样式,左右居中 三:标题块 四:内容块 五:去除最后一行内容下的横线,处理span标签的字体
阅读全文
摘要:一:HTML元素分类: 二:display属性 处理元素之间的缝隙 解决方法1:行内标签标签之间,去掉换行或空格 解决方法2::块级元素外部添加一个父元素,并把字体设置为0,然后把子元素的字体放大
阅读全文
摘要:外边距:margin 二:缩写 三:声明margin属性,覆盖原有默认的margin属性 四:margin合并 五:标准盒子模型计算 计算方式
阅读全文
摘要:padding内边距: 一:内边距属性 二:缩写:
阅读全文
摘要:盒子模型中的边框: 边框拥有的属性 边框样式border-style可用的值: 一:对边框四个方向都有效 加边框样式 二:设置边框的4个方向的属性(上下左右): 三:缩写:
阅读全文
摘要:一:盒子模型的概念 网页中的盒子模型 二:宽度属性width 固定px,不回根据浏览器的缩放而改变 百分比(所在容器的百分比),根据浏览器的缩放而变化,永远保持百分比 三:高度属性height 固定px,不回根据浏览器的缩放而改变,同样,height也支持百分比的模式 四:可用width和heigh
阅读全文
摘要:一:对齐方式:text-align(只对块级元素有效),设置元素内文本的水平对齐方式 二:行高 lime-height:设置元素中文本行高 三:垂直属性(对行内元素生效,对块级元素不生效):vertical-align,设置元素内容的垂直方式 sub和super 文字基线 vertical-alig
阅读全文
摘要:文字样式属性 一:font-family字体属性:定义元素内文字以什么字体来显示 二:font-size文字大小 1.绝对单位:绝对大小,不能随浏览器分辨率或父元素大小的改变为改变(不推荐使用) 2.相对单位(推荐使用) px: larger和smaller:相对父元素的文字大小而变大变小 em和%
阅读全文
摘要:CSS使用方法优先级:行内样式 > 内部样式 > 外部样式 说明 1.链入外部样式表与内部样式表之间的优先级取决于所处位置的先后 2.最后定义的优先级最高(就近原则) 一:id选择器、class选择器、标签选择器 之间的优先级 优先级结果:id选择器 > 标签选择器; class选择器 > 标签选择
阅读全文
摘要:一:继承: p标签下的span标签会继承p标签的CSS,同理,div下的所有标签,都会继承div标签的CSS,,按时并不会继承所有CSS属性,比如border属性就没有被p标签继承 二:CSS层叠: 当定义了两个同样的CSS的时候,会使用离元素最近的CSS(就近原则) 1.可以定义多个样式 2.不冲
阅读全文
摘要:后代选择器 二:伪类选择器 伪类选择器定义特殊状态下的样式,无法用标签、id、class及其他属性实现 链接伪类: 链接的4种状态:激活状态、已访问状态、未访问状态、鼠标悬停状态 伪类 :hover 和 :active 1.:hover用于访问的鼠标经过某个元素时 2.:active用于一个元素被激
阅读全文
摘要:一群组选择器:集体统一设置样式 这种同样属性的可以使用群组选择器 改为 二:全局选择器,所有标签设置样式
阅读全文
摘要:CSS选择器的种类 一:标签选择器:以html标签为选择器,作用到所有选择器对应的标签 二:类选择器 对于多个标签同一class时,可以用标签来区分 同一个标签可以使用多个类,类之间用空格隔开 三:ID选择器(同一个页面中,id唯一)
阅读全文
摘要:一:行内样式(内联样式):在开始标签内添加style样式属性 二:内部样式(嵌入样式):把css写到style标签内 三:外部样式(外联样式):把css代码写到独立的文件中,文件扩展名为.css 引入外部文件 四:CSS导入式: 1.@import "外部CSS样式" 2.@import url(外
阅读全文
摘要:一:CSS描述 CSS:层叠样式表,用于定义HTML内容在浏览器内的显示样式 用CSS的好处: 1.CSS简化HTML相关标签,使网页体积更小,下载更快 2.内容与表现分离 3.更好的维护网页,提高工作效率 二:CSS样式规则:CSS规则由两部分构成:选择器、声明 三:编写规则,写在<head></
阅读全文
摘要:网页大框架:头部、主体、页脚 一:头部,一般包含logo、导航、banner 二:主体内容,视实际情况而定 三:页脚,一般是版权和声明之类的 <body> <!-- 头部start --> <div> <!-- logo start --> <div></div> <!-- logo end -->
阅读全文
摘要:一:div标签和span标签 div标签:块级标签,是一个区块容器标记,<div></div>之间是一个容器,可以包含段落、表格、图片等各种html元素,每一个div标签都要换一行 span标签:行内标签,没有实际意义,在一行,不换行 二:标签分类: 块级标签:div、ul、ol、li、dl、dt、
阅读全文
摘要:一:表单结构 form标签中,以下标签实现表单元素添加 <input>:表单单行输入标签 <select>:菜单和列表标签 <option>:菜单和列表项目标签 <textarea>:文本域标签 <optgroup>:菜单和列表项目分组标签 二:form标签: 可用属性: action:提交表单发送
阅读全文
摘要:一:表格嵌套 嵌入表格说明 1.完整表格结构 2.放到td标签中 二:用表格实现网页布局,用表格做一个页面框架 页面结构 实现布局 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></h
阅读全文
摘要:一:colspan:跨列属性,同一行,跨多列 二:跨行属性,rowspan <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><table border="6"
阅读全文
摘要:一:table标签的属性 width:表格的的宽度,px、% align:表格相对周围元素的对齐方式:left、center、right border:表格边框的宽度,px bgcolor:表格的背景颜色,rgb、#xxx、colorname cellpadding:单元边沿与其他内容之间的空白,p
阅读全文
摘要:一:基本表格结构: <table> 表格 <td> 行 <tr> 单元格 <table> <tr> <td></td> </tr></table> 加个边距为1的边框:border="1" 二:带表头的表格:<th></th> 设置宽度:width 三:表格的标题:<caption></captio
阅读全文
摘要:一:图像标签 <img src="" alt="" /> 属性: src:显示图像的url,必传 alt:图像替代文本 height:图像的高度(数值和百分比) width:图像的宽(数值和百分比) 也可以指定为容器的比例 二:超链接:<a href="链接地址">内容</a> 属性: href:链
阅读全文
摘要:1.无序列表:用<ul><li></li><li></li></ul>实现 type属性值:disc:圆点、square:正方形、circle:空心圆 也可以直接在ul上添加type属性,对整个列表起作用 2.有序列表:用<ol><li></li><li></li></ol>实现, type属性值:
阅读全文
摘要:一:修饰标签 1.水平线:<hr/> 2.文字斜体:<i></i>、<em></em> 3.加粗:<b></b>、 <strong></strong> 4.下标:<sub></sub>、上标:<sup></sup> 二:特殊符号 小于号:<:< 大于号:> 已注册:® 版权:&c
阅读全文
摘要:1.文档类型声明: 2.meta标签:当没有使用meta声明文件编码时中文会乱码 声明utf8编码 3.文字 标题标签:<h1></h1>~~<h6></h6> 段落标签:<p></p> align对齐属性值: left:左对齐 right:右对齐 center:居中对齐 justify:对行进行伸
阅读全文