前端学习之路
关注
分享
扫一扫
文章平均质量分 66
关于html、css、js、vue操作
敲代码敲到头发茂密
欲戴王冠，必承其重
展开
-
vue高级特性总结
比如：根据用户选择商品的数量来计算商品的总价格。这个时候我们就可以通过计算属性来实现。计算属性是 vue实例中,可以通过 computed这个配置项来定义计算属性。原创 2022-10-23 16:55:07 · 2429 阅读 · 66 评论 -
vue的指令和插值总结
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。原创 2022-10-21 09:10:24 · 2449 阅读 · 81 评论 -
javascript基本语法（持续补充）
function 函数名（参数 1 ，参数 2 ） {函数体 return 返回值 } work()console . log('---执行了work1方法---') console . log('参数a' , a) console . log('参数b' , b) } work1(1 , 2) function work2(a , b = 66) {原创 2022-10-20 08:27:45 · 5477 阅读 · 45 评论 -
jQuery对象和DOM对象转化
使用原生JS方式获得的页面结点对象我们可以简称为DOM对象,使用jQuery核心函数获得的对象我们可以简称为jQuery对象,DOM对象和jQuery对象之间的方法和属性是不通用DOM对象如何调用jQuery函数 ? DOM对象转换为jQuery $(DOM)jQuery对象如何调用DOM对象的属性和方法? jQuery转换为DOM对象 get(0) [0]代码展示<!DOCTYPE html><html> <head>原创 2022-01-28 07:00:00 · 532 阅读 · 0 评论 -
jQuery绑定和触发事件
jQuery操作事件无非就是绑定事件,触发事件,解绑定事件.原生js中的通过DOM编程和在标签上的事件属性绑定事件,jQuery中,我们可以使用事件的绑定:bind(),live()(1.8及之前可用),on()(1.9之后推荐使用),one()事件解绑定:unbind()事件的触发:行为触发, jQuery方法触发bind 方法绑定事件，在jQuery中,事件的名称 = 原始名称去掉 on例如onclick ——》 clickonmouseover ——》 mouseover原创 2022-01-28 07:00:00 · 790 阅读 · 0 评论 -
jQuery操作文本和增删元素
1原创 2022-01-27 07:00:00 · 461 阅读 · 0 评论 -
CSS之浮动
【1】什么是浮动浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。说到脱离文档流要说一下什么是文档流，文档流是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。【2】浮动初衷：文字环绕图片【3】浮动原理请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边原创 2022-01-27 07:00:00 · 414 阅读 · 0 评论 -
jQuery操作样式和属性
操作属性原生js 中通过元素.属性名或者元素.setAttribute()方式操作元素属性,jQuery给我们封装了attr() 和removeAttr(),更加便捷的操作属性获取属性值：$("#f1").attr("color")修改属性值：$('#f1').attr("color","green")删除属性值：$("#f1").removeAttr("color")增加属性值：$("#f1").attr("class","a")<!DOCTYPE html><html&g原创 2022-01-26 07:00:00 · 289 阅读 · 0 评论 -
JavaScript之DOM编程（获取节点、删除节点、操作标签文本、操作节点属性、操作节点样式）
一、获取节点element1=window.document.getElementById("d1")<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript">原创 2022-01-26 07:00:00 · 742 阅读 · 0 评论 -
jQuery之表单选择器
关于表单项状态的选择器:selected :checked :enabled :disabled :hidden :visible注意$("input")和$(":input")的区别$("input")：标签选择器，只匹配input标签,$(":input")： 匹配所有 input, textarea, select 和 button 元素<!DOCTYPE html><html> <head> <meta charset=原创 2022-01-25 07:00:00 · 1042 阅读 · 0 评论 -
jQuery之位置选择器
针对整个页面而言的位置选择器:first获取第一个元素:last获取最后一个元素:odd匹配所有索引值为奇数的元素，从0 开始计数:even匹配所有索引值为偶数的元素，从0 开始计数:eq(n)匹配一个给定索引值的元素:gt(n)匹配所有大于给定索引值的元素:lt(n)匹配所有小于给定索引值的元素针对上级标签而言的位置选择器:first-child匹配第一个子元素:last-child匹配最后一个子元素:only-child如果某个元素是父元素中唯一的子元素，将会被匹配:nth-ch原创 2022-01-25 07:00:00 · 874 阅读 · 0 评论 -
jQuery之属性选择器
属性选择器[attribute]匹配包含给定属性的元素$("a").addClass("myClass"); $("a[href]").addClass("myClass"); [attribute1][attribute2]复合属性选择器，需要同时满足多个属性$("a[href][title]").addClass("myClass");[attribute=value]匹配给定的属性是某个特定值的元素$("a[href='film-2.html']").addClass("myClas原创 2022-01-24 07:00:00 · 4130 阅读 · 0 评论 -
jQuery之基本选择器
基本选择器标签选择器：$('p')id选择器：$(’#id‘)、$('p#id')类选择器：$('.class')、$('h1.class')通配选择器：$('*')并集选择器：$('elem1,elem2,elem3')后代选择器：$(ul li)父子选择器：$(ul>li)后面第一个兄弟元素 prev + next后面所有的兄弟元素 prev ~ next如果作为一个后端开发人员，必须会使用的选择器id选择器 $("#id")类选择器 $('.class属性值')标签选原创 2022-01-24 07:00:00 · 408 阅读 · 0 评论 -
jQuery的引入与原生JavaScript实现对比
原生JavaScript实现动态隔行变色<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .a { background-color: greenyellow;原创 2022-01-23 07:00:00 · 2488 阅读 · 0 评论 -
jQuery之页面加载函数
body中的οnlοad="fun1()"表示页面加载事件，只有body中的元素加载完毕之后才会调用fun1()方法第一种方式<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function fun1(){ var element=windo原创 2022-01-22 07:00:00 · 2106 阅读 · 0 评论 -
用javascript和jQuery实现对标签设置属性
给标签设置属性第一种方式<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ border: 5px solid red; width: 100px; height: 100px; } </style>原创 2022-01-22 07:00:00 · 688 阅读 · 0 评论 -
JavaScript之DOM编程
什么是DOM编程简单来说:DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.什么是documentdocument对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。document对象如何获取document对象是window对象的一个成员属性，通过window.document来访问，当然也可以直接使用document,根据HTML代码结构特点,documen原创 2022-01-21 07:00:00 · 404 阅读 · 0 评论 -
JavaScript之BOM和DOM概念介绍
一、BOMBOM是Browser Object Model的简写，即浏览器对象模型。将浏览器抽象成一个对象——》window 同时封装了一些属性和方法有了BOM之后，就可以控制浏览器的行为。BOM的顶层是window对象二、DOMDOM是Document Object Model的简写，即文档对象模型。DOM用于XHTML、XML文档的应用程序接口(API)。将浏览器当前打开的文件抽象成对象——document将文档解析成一个document对象，属性结构的对象通过该对象可以达到修改页原创 2022-01-21 07:00:00 · 771 阅读 · 0 评论 -
JavaScript之事件
一、鼠标事件案例<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #d1{ width: 100px; height: 100px; background-color: red; } </style> <原创 2022-01-20 06:52:57 · 286 阅读 · 0 评论 -
JavaScript之自定义对象
JS除了一些常用方法和类以外,允许我们自己定义对象,在JS中自定义对象有三种可用的语法格式,分别为:使用 Object在 JavaScript 中，几乎所有的对象都是 Object 类型的实例，它们都会从 Object.prototype 继承属性和方法。Object 构造函数创建一个对象包装器。Object 构造函数，会根据给定的参数创建对象，具体有以下情况：如果给定值是 null 或 undefined，将会创建并返回一个空对象。如果传进去的是一个基本类型的值，则会构造其包装类型的对象。如原创 2022-01-20 06:52:30 · 1273 阅读 · 0 评论 -
JavaScript对象之String、Math对象
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…此外，JavaScript 允许自定义对象。所有事物都是对象JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。布尔型可以是一个对象。数字型可以是一个对象。字符串也可以是一个对象日期是一个对象数学和正则表达式也是对象数组是一个对象甚至函数也可以是对象访问对象的属性访问对象属性的语法是：objectName.propertyName这个原创 2022-01-19 07:00:00 · 429 阅读 · 0 评论 -
JavaScript之 Array（数组） 对象
一、 什么是数组?数组对象是使用单独的变量名来存储一系列的值。如果你有一组数据（例如：车名字），存在单独变量如下所示：var car1="Saab";var car2="Volvo";var car3="BMW";然而，如果你想从中找出某一辆车？并且不是3辆，而是300辆呢？这将不是一件容易的事！最好的方法就是用数组。数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。二、创建一个数组1: 常规方式:var原创 2022-01-18 07:00:00 · 470 阅读 · 0 评论 -
JavaScript之函数声明
一、函数定义的三种语法第一种语法格式（常见）function 函数名(函数列表){ js代码}第二种语法var 函数名=function(函数列表){ js代码}第三种语法（不常用）var 函数名=new Function('js代码')二、调用带参数的函数在调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。您可以发送任意多的参数，由逗号 (,) 分隔：当您声明函数时，请把参数作为变量来声明：function myFunction(var1,原创 2022-01-18 07:00:00 · 888 阅读 · 0 评论 -
JavaScript流程控制之分支结构
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码if…else if…else 语句- 使用该语句来选择多个代码块之一来执行switch 语句 - 使用该语句来选择多个代码块之一来执行一、if elseif else语法：if (condition1){ 当条件 1 为 true 时执行的代码}else if (condition2){ 当条件 2 为 true原创 2022-01-17 07:00:00 · 164 阅读 · 0 评论 -
javascript中的运算符号
JS中运算符号大部分和java中的运算符一样,我们在这里分析一下特殊的运算符号一、关于/%JS中,数字类型都是number,能除尽,则默认结果就是一个整数,不能除尽,结果默认就是浮点JS中如果出现除零,那么结果是 infinity,而不是报错除零不会出现异常,而是出现 Infinity和0取余数,出现NaN not a number 不是一个数字二、关于++同时也是连接运算符,看两端的变量类型；1、如果都是number，那么就是算数中的加法;2、如果有字符串，那么就是连接符号；3、原创 2022-01-17 07:00:00 · 932 阅读 · 0 评论 -
javascript中的数据类型
一、数值型number整数和浮点数统称为数值，例如88，88.88二、字符串型String由0个,1个或多个字符组成的序列。在JavaScript中，用双引号或单引号括起来表示，如"您好"、‘学习JavaScript’ 等。三、布尔型boolean用true或者false来表示四、空值表示没有值，用于定义空的或者不存在的引用。要注意，空值不等同于空字符串""或者0五、未定义值它也是一个保留字。表示变量虽然已经声明，但却没有赋值。六、复合数据类型复合数据类型包括对象和数组两种。举例1原创 2022-01-16 16:40:30 · 255 阅读 · 0 评论 -
CSS之固定定位、相对定位、绝对定位
相对定位相对元素自身所在的原来的位置进行定位。可以设置 left,right,top,bottom四个属性效果：在进行相对定位以后，元素原来所在的位置被保留了，被占用了–》保留站位其他元素的位置不会发生移动一般情况下，left和right不会同时使用 ,选择一个方向即可.top和bottom不会同时使用,选择一个方向即可优先级：左上>右下<!DOCTYPE html><html> <head> <meta charset="UTF-8"&原创 2022-01-16 16:39:42 · 5134 阅读 · 0 评论 -
CSS之关系选择器、属性选择器、伪类选择器
一、关系选择器后代选择器：只要是这个元素的后代，样式都会发生变化，div下面的所有h1标签样式都会改变关系选择器：子代选择器，只改变子标签的样式<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*后代选择器：只要是这个元素的后代，样式都会发生变化原创 2022-01-15 21:08:23 · 492 阅读 · 2 评论 -
CSS基本选择器（标签选择器、类选择器、id选择器、属性选择器、层级选择器、组选择器）
类选择器：通过元素的class属性选择（推荐使用的方式）.class属性值；（使用多种选择器）选择多个元素，设置相同的样式。通过标签+属性进行选择元素。先选中父元素，再选中子元素。一个元素可以设置多个属性。原创 2022-01-15 21:07:56 · 1554 阅读 · 0 评论 -
CSS的引入方式
【1】内联样式在标签中加入一个style属性，CSS的样式作为属性值多个属性值之间用;进行拼接<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1 style="color: red;font-family: castellar;">标题1</h1&g原创 2022-01-14 07:00:00 · 185 阅读 · 0 评论 -
html5之form表单
表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html 标志来设计表单。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,原创 2022-01-13 07:00:00 · 2135 阅读 · 0 评论 -
HTML5之内嵌框架
内嵌框架是用于在网页中嵌入一个网页并让它在网页中显示添加内嵌框架的语法:<iframe src=" URL "></iframe>URL 指定独立网页的路径.案例1<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>书籍展示页面</title> </head> <body> <h1>原创 2022-01-13 07:00:00 · 2367 阅读 · 0 评论 -
HTML5中各种标签总结（列表标签、表格标签）
无序列表<ul></ul>type:可以设置列表前图标的样式 type="square"有序列表<ol></ol>type:可以设置列表的标号：1,a,A,i,Istart:设置起始标号<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <bo原创 2022-01-12 10:26:33 · 538 阅读 · 0 评论 -
HTML5中各种标签总结（超链接标签、锚点设置）
一、超链接标签<a></a>作用：实现页面的跳转功能href：控制跳转的目标位置target：_self:再自身页面打开（默认效果也是在自身页面打开）_blank:在空白页打开<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>超链接标签</title> </head> <body> <!原创 2022-01-12 10:26:11 · 1125 阅读 · 0 评论 -
HTML5中各种标签总结（多媒体标签）
一、图片标签：<img />src属性：引入图片的位置本地图片网络图片width：设置宽度height：设置高度title：鼠标悬浮在图片上的时候的提示语，默认情况下（没有设置alt属性） 图片如果加载失败那么提示语也是title的内容alt：图片加载失败的提示语<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>多媒体标签</title原创 2022-01-11 07:00:00 · 556 阅读 · 0 评论 -
HTML5中各种标签总结（body标签）
body标签（里面放的就是页面上展示出来的内容）body 元素是定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）body是用在网页中的一种HTML标签，标签是用在网页中的一种HTML标签，表示网页的主体部分，也就是用户可以看到的内容，可以包含文本、图片、音频、视频等各种内容！一、标题标签<h1>-<h7>h1-h6 字号逐渐变小，每个标题独占一行，自带换行效果h7之后都属于无效标签，但是浏览器也不会报错，而是以普通文本的形式进行展原创 2022-01-11 07:00:00 · 3027 阅读 · 0 评论 -
HTML5各种标签总结（HTML、head）
一、HTML标签定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body></htm原创 2022-01-10 10:32:48 · 1935 阅读 · 0 评论