前端
文章平均质量分 86
Geek Li
不想掉头发的程序员
展开
-
Web学习——vue的基本使用(3)
1.过滤搜索案例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="box">原创 2022-02-14 21:55:52 · 542 阅读 · 0 评论 -
Web学习——vue的基本使用之事件对象
目录1.事件对象2.使用事件对象阻止冒泡3.使用vue的方式来阻止事件冒泡4.阻止元素的默认行为5.使用vue的方式阻止元素的默认行为6.让事件执行一次7.键盘事件8.用vue的方式来监听键盘事件某个键9.鼠标事件的按键修饰符1.事件对象<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.原创 2022-02-10 18:57:14 · 1217 阅读 · 0 评论 -
Web学习——Vue的基本使用(2)
目录1.属性监听的第一种写法2.属性监听的第二种写法3.class属性的绑定4.样式的切换5.style属性的绑定6.切换样式7.v-show指令8.v-if指令9.v-else指令10.v-else-if指令11.v-for循环指令12.遍历json13.遍历对象数组14.v-if和v-for不建议在同一元素上同时使用15.案例演示16.json对象增加属性或删除属性怎么触发视图的更新17.案例练习1.属性监听的第一种写法<!DOCTYPE html><html> <原创 2022-02-10 18:49:54 · 571 阅读 · 0 评论 -
Web学习——Vue的基本使用(1)
1.Vue介绍Vue 官网:https://cn.vuejs.org/渐进式JavaScript框架Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。2.Vue入门案例<!DOCTYPE html><原创 2022-01-25 21:57:53 · 1448 阅读 · 0 评论 -
JavaWeb——Java中JSON字符串与Java对象的互转
JSON数据和Java对象的相互转换JSON解析器: 常见的解析器:Jsonlib,Gson,fastjson,jackson 1. Java对象转换JSON 1. 使用步骤: 1. 导入jackson的相关jar包 2. 创建Jackson核心对象 ObjectMapper 3. 调用ObjectMapper的相关方法进行转换 1. 转换方法: writeValue(参数1,obj): 参数1:原创 2022-01-23 22:47:18 · 1147 阅读 · 0 评论 -
Web前端——跨域问题
1.跨域问题什么是跨域?首先,现代浏览器为了安全,做了一个同源限制.也就是所谓的同源安全策略.本质上,其实是不存在所谓的跨不跨域的.把浏览器想象成一个发送网络请求的软件.按照道理来说,请求都是可以发送出去的.但是在 web 端,浏览器里,这么做的就不合适.如果网络上的接口可以不受限制的被任意人调用.那将是一个非常混乱的场景。所以,为了防止这种情况,浏览器做了这个同源策略来防止这种情况发生.对,一般服务器不管这个事情.跨域指的是,A网站内部向B网站发送一个AJAX请求.由于浏览器有原创 2022-01-23 19:36:13 · 6827 阅读 · 8 评论 -
Web基础——原生Ajax和jQuery分别发送Ajax请求
1.原生Ajax之get请求<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button" onclick="sendAjax()">发送Get请求</button> <h1>每日一笑</h1>原创 2022-01-22 16:23:24 · 441 阅读 · 0 评论 -
Web基础——jQuery的基本使用
1.什么是jQueryjQuery是一个JavaScript库(框架),它通过封装原生的JavaScript函数得到一整套定义好的方法。它的作者是John Resig,于2006年创建的一个开源项目,随着越来越多开发者的加入,jQuery已经集成了JavaScript、 CSS、 DOM和Ajax于一体的强大功能。它可以用最少的代码,完成更多复杂而困难的功能,从而得到了开发者的青睐。jQuery的功能和优势jQuery 作为 JavaScript 封装的库,他的目的就是为了简化开发者使用 Ja原创 2022-01-22 15:10:28 · 1523 阅读 · 0 评论 -
Web基础——JSON的使用和Ajax的介绍
1.JSON的简介JSON 是用于存储和传输数据的格式。JSON 通常用于服务端向网页传递数据 。JSON 英文全称 JavaScript Object NotationJSON 是一种轻量级的数据交换格式。JSON是独立的语言JSON 易于理解。JSON 使用 JavaScript 语法,但是 JSON 格式仅仅是一个文本。 文本可以被任何编程语言读取及作为数据格式传递。2.使用自定义对象封装数据<!DOCTYPE html><html> <head&g原创 2022-01-15 21:46:51 · 630 阅读 · 0 评论 -
Web基础——JavaScript之获取节点和元素对象
目录通过节点关系查找节点通过节点关系查找节点示例获取节点对象的信息获取元素对象的属性通过节点关系查找节点 document.all 获取文档中所有的标签节点 从一个节点出发开始查找: parentNode 获取当前元素的父节点。 childNodes 获取当前元素的所有下一级子元素。 firstChild 获取当前节点的第一个子节点。 lastChild 获取当前节点的最后一个子节点。 nextSibling 获取当前节点的下一个节点。(兄节点) previousSibling 获取当前原创 2022-01-12 23:40:34 · 2539 阅读 · 0 评论 -
Web基础——JavaScript之事件绑定与事件对象
目录1.事件的绑定2.事件的绑定(注意事项)3.失去焦点和获得焦点4.键盘事件5.鼠标事件6.表单事件7.页面加载事件8.下拉框事件9.事件对象10.currentTarget和target的区别11.事件的冒泡现象12.阻止事件冒泡的行为13.元素的默认行为14.事件捕获15.事件委托16.设置元素的自带属性以及设置元素的css样式17.开关案例18.排他思想19.图片跟随鼠标20.定位到搜索框1.事件的绑定<!DOCTYPE html><html> <head>原创 2022-01-12 23:32:21 · 17522 阅读 · 0 评论 -
Web基础——JavaScript之DOM
1.DOM:Document Object Model 文档对象模型概念:将标记语言文档的各个组成部分 封装为对象组成: Document:文档对象 Element:元素对象 Attribute:属性对象 Text:文本对象 Comment:注释对象 Node:节点对象...原创 2022-01-10 23:36:17 · 2983 阅读 · 0 评论 -
Web基础——JavaScript之BOM
BOM:Browser Object Model 浏览器对象模型原创 2022-01-10 00:11:52 · 2738 阅读 · 0 评论 -
Web基础——JavaScript的内置对象
1.String 对象 1. 定义方式1: String str=new String("abckdddd"); 定义方式2:var str="我爱你爱你"; 2. 属性:length: 字符串的长度 3. 方法: charAt() 返回在指定位置的字符。 例子:var v="abcd"; var a=v.charAt(2); concat() 连接字符串。 例子:var v="ab"原创 2022-01-05 22:16:00 · 2875 阅读 · 0 评论 -
Web基础——初识JavaScript
JavaScript:客户端脚本语言1.JavaScript发展史1992年,nombas公司 C- -,最早的客户端脚本语言。专门用于表单验证。 后更名为 scriptEarth;网景 scriptlive,后来找到sun公司合作,共同开发出 JavaScript,微软抄袭JavaScript 定义了 JScript;ECMA(欧洲计算机制造商协会)定义了一套客户端脚本语言的规范 ECMAScript规范;JavaScript = ECMAScript规范 + js自己特有的东西(BOM.原创 2022-01-04 18:37:02 · 4585 阅读 · 0 评论 -
Web基础——CSS基础概念(2)
子选择器<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #fu>h1 { color: red; } #fu2>h1 { color: yellow; } div h1 { background-color:原创 2022-01-03 23:38:51 · 4228 阅读 · 0 评论 -
Web基础——CSS基础概念(1)
目录1.纯净的行标签和块标签2.CSS的概念3.CSS和Html的结合方式4.id选择器5.class选择器6.标签名选择器7.包含选择器8.通配符选择器9.伪类选择器10.伪类选择器的鼠标悬浮和按下状态对其他标签也起作用11.选择器优先级1.纯净的行标签和块标签<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head&g原创 2022-01-03 23:28:36 · 325 阅读 · 0 评论 -
Web基础——CSS常用标签(3)
这里写目录标题子层在外层中移动自定义动画(1)自定义动画(2)自定义动画详细写法流式布局Emmet语法弹性盒子布局(1)弹性盒子布局(2)弹性盒子布局(3)弹性盒子布局页面子层在外层中移动<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #wai { heig原创 2022-01-03 23:10:41 · 3946 阅读 · 0 评论 -
Web基础——CSS常用标签(2)
目录1.边框圆角2.内间距3.字符间距4.线条设置5.段落的缩进6.列表属性7.彩色图片变黑白8.Transform动画9.过渡动画1.边框圆角<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #btn { height: 40px; width: 1原创 2022-01-03 22:54:19 · 4045 阅读 · 0 评论 -
Web基础——CSS常用标签(1)
1.层溢出层溢出的处理 auto 会自动判断是否加上滚动条 hidden 隐藏溢出的内容 visible 显示溢出的内容 默认值 scroll 始终加上滚动条<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #d1{ w原创 2022-01-03 22:42:45 · 5041 阅读 · 0 评论 -
web基础——CSS层叠样式表
目录CSS的作用:基本语法选择器1.类选择器2.id选择器3.标签选择器4.包含选择器5.伪类选择器的优先级子选择器相邻选择器 div +p相邻所有选择器 div ~p属性选择器 input[type=“password”]过滤选择器CSS的作用:实现了样式和html的代码分离弥补html对属性的控制不足精确的控制页面的布局可以提高页面的执行效率css有特殊的功能特性:继承性,层叠性基本语法<style type="text/css">选择器{ 属性1原创 2021-12-28 20:21:17 · 4040 阅读 · 0 评论