前端爱好者的聚集地 为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例。 1. 导航高亮 导航高亮是一种很常见的问题,包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制,但是用一点CSS技巧就可以达到这个目的,不需要使用JS。 在正常态时,每个导航的默认样式为: nav li{ opacity: 0.5; } 当前页面的导航透明度为1. 为了实现这个目的: 首先通过bo
为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例。 1. 导航高亮 导航高亮是一种很常
请注意,本文编写于 2071 天前,最后修改于 173 天前,其中某些信息可能已经过时。
在给bootstrap页面form表单中的input搜索框绑定回车事件后,输入完成点击回车搜索,页面会向后台发起两次请求,且会自动取消第一次请求,自动刷新页面导致不是你输入搜索条件查询到的结果,效果图如下
因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等,其中最好用的是: on()
说明:使用v-model,v-on点击事件,v-on回车事件,v-for遍历数据,axios发送请求。
参考博客: --- Install Node.js --- Node.js 安装配置
大家好,又见面了,我是你们的朋友全栈君。 前言:在无聊的时候打打游戏、听听歌还不如来找个人来陪你聊天,今天来教大家制作一个聊天机器人,这样就不会无聊了,在线聊天机器人地址借愁哥哥机器人(可能有点丑,大家将就一下 (😃) ) ---- 这个接口就目前的一天100次聊天机会,大家要珍惜哦,源码在文章末尾哦! ---- 效果图: ---- 📷 ---- 目录: 一.准备工作 二.项目开始 1.页面布局: 2.样式层: 3.逻辑实现: 一.准备工作 ---- 通过分析我们需要以下的具体准备: 对于
可以实现点击一次按钮,执行两个函数里面的内容, 需要注意的是attachEvent方法和addEventListener的使用,这是一个兼容性的问题 兼容性:IE支持attachEvent而不支持addEventListener,否则会报错;而谷歌火狐则支持addEventlistener。所以存在兼容性的问题。
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> #app { margin: 0px auto; width: 500px; border: 1px solid blue; height: 500px; } .title { line-height: 50px; tex
MDN Web文档:https://developer.mozilla.org 查询insertAdjacentHTML用法
vue.js——开发版本:包含完整的警告和调试模式 vue.min.js——生产版本:删除了警告,进行了压缩
1.面向对象版tab 栏切换 1.1功能需求 点击 tab栏,可以切换效果. 点击 + 号, 可以添加 tab 项和内容项. 点击 x 号, 可以删除当前的tab项和内容项. 双击
自动补全插件是现代网页应用中不可或缺的一部分。了不起昨天刚完成了一项输入部分内容,立即自动补全内容的功能。
请注意,本文编写于 2067 天前,最后修改于 173 天前,其中某些信息可能已经过时。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
1.{{}}模板语法、插值、简单运算 2.指令系统 v-if 真正销毁重建 v-show 更改css的display,用于重复切换出现
快速的,轻量级的,功能丰富的 js 库。动画(animation),ajax,DOM,更简单,容易使用的api。
Vue.js是前端三大新框架:Angular.js、React.js、Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增。
我们知道, v-bind指令可以简写为:, 同样v-on也可以简写, 简写为@, 如上写法可以简写如下:
学习这套课程你需要的前置知识: HTML的基础知识,你需要达到中级水平,写前端页面的结构代码完全没有问题。 CSS的基础知识,最好做过半年以上的切图和布局,最好了解CSS3的知识。 Javascript的基础知识,对基本语法掌握,这个要求不高,因为遇到难的我会在视频中讲解。 node.js初级知识,只需要会npm的使用和项目初始化就可以了 如果你对上面三个知识还不了解,建议不要冒进学习,会影响你的学习热情。但你已经是科班出身或者在培训班毕业后想继续学习,是完全没有难度的。 学习方法:学完视频之后,一定
Vue-Test-Utils 是 Vue.js 官方的单元测试实用工具库,它提供了一系列的 API 来使得我们可以很便捷的去写 Vue 应用中的单元测试。
v-for遍历对象,在python中显示的是kv,但是在这里顺序相反,显示的是vk
<script type="text/javascript"> window.onload=function(e){ var box=document.getElementById('divselect'), title=box.getElementsByTagName('cite')[0], menu=box.getElementsByTagName('ul')[0], as=box.getElementsByTagName('a'),//as是一个
4.以前的做法:动态创建元素createElement , 但是元素里面内容较多,需要innerHTML赋值在appendChild 追加到父元素里面.
MVVM源自于经典的MVC(Model-View-Controller)模式。MVVM的核心是ViewModel层,负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下:
在h1中引入{ {msg}},在js文件中将msg赋值,从而在html中显示大标签的内容
先上图。 Paste_Image.png 动态效果: pea.gif 豌豆射手,草坪还有子弹都是现成的图片,本文主要讲解jQuery的animate函数的基本用法。 1. jQuery是库还是框架?
常见发生场景:假如我们需要通过 input,type="file"来上传文件,而这个 input 的默认样式,可以说是非常地丑。所以我们希望通过一张图片,与这个 input 大小一样,位置一致地盖在上面。这个时候,显然,这个时候点击图片,input 是不会起作用的。就是因为 img 隔绝了 click 的穿透,而我们希望的是,这个 img 只是视觉上遮挡了 input 的样式,但是点击的时候还是点击到 input。所以,只要让 img 可穿透即可。
前文介绍了: 1 DOM四个常用的方法 2 使用DOM核心方法完成属性填充 本篇主要介绍在JS中需要注意的几个地方,另外为了减小html与javascript的耦合使用java进行onclick方法编写。 其实javascript不是一门简单的语言,但是由于入门简单,很多人使用的时候,都是直接复制粘贴,导致网页中充斥着大量的冗余代码。 但是在编写合格的javascript代码时,需要注意: 1 平稳退化:保证在不支持js或者低版本的浏览器也能正常访问 2 分离javasc
那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素,<input> 不会被替换掉——仅仅是替换了它的 placeholder。
基本上就是将数据以字符串的方式拼接到HTML标 签中,前端代码风格大体上如图所示。
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码
setTimeout 按照顺序放到队列里面,然后等待函数调用栈清空之后才开始执行,而这些操作进入队列的顺序,则由设定的延迟时间来决定
分享一个由原生JS实现的注册或登录时,输入邮箱时下拉提示效果,效果如下: 实现代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Co
基本上就是将数据以字符串的方式拼接到HTML标 签中,前端代码风格大体上如下所示。
//当前点击的标签添加样式,同级别其他标签移除样式 $(this).addClass('hover').siblings().removeClass('hover'); //执行完改Ajax后执行下一步 同步 async:false //{%$argv(0)%}(公司写法)获取页面传入的id id="title_1" var type = "{%$argv(0)%}"; if (type != "") { $("#title_" + type + "").click(); } //默认点击第一个
内嵌式:把代码书写在一个script标签对内(这种不需要任何行为会自动执行JS代码)
本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本。兼容PC端和移动端。 在线预览地址:DEMO 功能说明 支持回车添加事件 支持事件状态切换
本项目是使用vue-cli脚手架生成的项目,项目代码可以到我的github上clone下来。clone下来之后可进入文件目录
原生JS有一个常见的小技巧那就是通过元素的previousSibling 属性,额外需要注意的是该属性会遍历text节点,即回车键。
下面的命令都是在 命令行中 执行(-g 参数代表全局(global),会自动配置环境变量)
注意:只在可信内容上使用 v-html,永不用在用户提交的内容上,否则会导致XSS攻击。
如何选择:目前那种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错
C1 能力认证——Web进阶 📷 DOM节点操作-上 名称 描述 getElementById() 获取带有指定id的节点 getElementsByTagName() 获取带有指定标签名的节点集合 querySelector() 获取指定选择器或选择器组匹配的第一个节点 querySelectorAll() 获取指定选择器或选择器组匹配的所有节点集合 除了函数方法,我们还可以使用属性来获取节点信息,下表介绍了一些获取元素节点信息常用的属性。 名称 描述 innerHTML 返回元素内包含的所有HTML
生命周期是React中非常重要的一个部分,可以说学了React但不会生命周期 = 白学
说明:本文主要来源于real-time-apps-laravel-5-1-event-broadcasting
常见内置过滤器 capitalize, uppercase, lowercase, json, limitBy, filterBy。所有见这里。
vue学习笔记 Vue实例: 1 var vm = new Vue({ 2 // 选项 3 }) 实例化Vue、Vue实例,构造函数Vue、创建一个Vue的根实例,Vue实例气筒Vue,js应用
领取专属 10元无门槛券
手把手带您无忧上云