文章分类 - 6、web前端开发基础
摘要：一、前言 我们之前只是对某个样式做整体的操作，比如说添加某个样式类名，删除某个样式类名，等等。 二、样式类 2.1、className 说明：获取和设置样式的类名 >>>obj = document.getElementById("i1"); <input id="i1" onfocus="Fo
阅读全文
摘要：一、前言 之前我们学习了dom的选择器，学习了直接查找和间接查找，我们把每一个标签当作一个对象，然后对这个对象的属性进行处理。下面我们就来研究一下，dom选择器以及内容文本的操作。 二、Dom选择器 2.1、根据id直接查找 >>>obj = document.getElementById('i1'
阅读全文
摘要：一、前言 今天来说JavaScript的面向对象以及原型，看看它和python有什么不同，这个Javascript的面向对象是怎么实现的。 二、JavaScript的面向对象 2.1、类的定义 说明：用this关键字，来定义一个Javascript的类，同时也是一个构造方法。 1 2 3 4 5 6
阅读全文
摘要：一、前言 我们今天来聊聊JavaScript的作用域，聊这个之前先卡看看其他语言包括python在内的，作用域的范围是多少，规则是怎么样的。然后再看看JavaScript的作用域。这样就有对比性。 二、其他语言的作用域 2.1、其他语言 说明：以代码块作为作用域 1 2 3 4 5 6 7 publ
阅读全文
摘要：一、前言 JavaScript中的eval是python中的eval和exec的合集，既可以编译代码也可以获取返回值。还有就是一个时间设置，它是通过Date类来设置的。 二、eval 2.1、python中的eval和exec 1 2 eval(表达式) 例:eval("1+1")，有返回值 exe
阅读全文
摘要：一、前言 我们在python里面也学过序列化，是用json模块，今天我们就来看看js的序列化和转义是怎么做的。 二、序列化 2.1、序列化 说明：将对象转换为字符串，用法：JSON.stringify() 1 2 3 4 >>>li = [11,22,33,44] [11, 22, 33, 44]
阅读全文
摘要：一、前言 之前我们只是简单说了一下js的函数，但是我们没有细细的去了解js的函数，今天我们就来全面的了解一下Javascript的函数。 二、普通函数 2.1、普通函数定义 1 2 3 4 function func(args){ //js代码 } func(123); 1 2 3 4 functi
阅读全文
摘要：一、前言 之前我们练习的都是主页面，用的套路都差不多，今天我们来学习一下 后台管理页面布局。 二、position: fixed的布局 2.1、布局图 说明：这种是左侧菜单跟随滚动条 2.2、代码实现 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2
阅读全文
摘要：一、导语 接下来我们来做一个左侧菜单，因为我们这个经常用到，接下来我们来看看这个这个咋做的，废话不多说了，进入实战状态吧。 二、效果图
阅读全文
摘要：一、导语 当我们点击添加按钮的时候，我们想弹出一个对话框，这个对话框，有我们想要界面，这个叫模态对话框，那这个是怎么实现的呐，能达到什么效果呢？ 二、达到的效果
阅读全文
摘要：一、导语 之前我们学习过直接选择器，今天我们研究一下间接选择器，通过间接的方法来获取某个标签 二、间接选择器 2.1、间接查找 1 2 3 4 5 6 7 8 9 10 11 12 13 parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子
阅读全文
摘要：一、导语 文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规
阅读全文
摘要：一、导语 跟大多数语言一样，js也有条件语句和函数，那我们今天就来看看，js的if条件判断语句和python的有啥不一样。 二、条件判断语句 2.1、语法 1、单独的if条件 1 2 3 if(条件){ //js代码 } 1 2 3 if(条件){ //js代码 } 1 2 3 if(条件){ //
阅读全文
摘要：一、布尔类型 布尔类型仅包含真假，与Python不同的是其首字母小写。 == 比较值相等 != 不等于 比较值和类型相等 ! 不等于 || 或 && 且 1 2 3 4 >>a = true //小写的true true >>a = false //小写的false false 1 2 3 4 >>
阅读全文
摘要：一、引子 今天我们就来说说Javascript的字符串操作，以及跑马灯的示例，这个场景我们经常用到，所以好好研究一下。 二、定义变量 1、定义局部变量 说明：99%的情况下，都是定义的局部变量。定义局部变量：var 变量名="值" 1 >>var name = "zhangqigao" //定义局部
阅读全文
摘要：一、引子 之前我们讲了css（穿衣服）和html（躶体人），下面我们来学习学习javascript（动作），JavaScript代码存在以怎样的形式展现给我们的，今天我们就来研究一下。 二、在head 中展示 二、在head中展现 2.1、直接在js代码 1 2 3 4 5 <head> <scri
阅读全文
摘要：一、引子 在网页中登陆框一般旁边有一个图像，如下图， 二、搞一搞 我们就来搞这么一个例子，通过background-image PS: possition relative absolute 两个需要配合使用， absolute 是相对外面的 relative 调整位置。配合top,botton,r
阅读全文
摘要：一、引子 之前我们一直用的是background-color，但是一直没有研究过backgroup的其他的属性，今天我们来研究一下背景图片，已经固定一个大图标下的某个小图标，在这个经常在我们的网站中使用，下面我们就来搞一下吧 二、背景图片 2.1、默认背景图片 说明：用backgroud-image
阅读全文
摘要：一、引子 我们之前一些网站，就是点击菜单栏的时候，会出现一些我们想要的效果，鼠标放上去的时候，颜色和其他的菜单栏不一样，这个是为啥呢？我们也想做这个东西，看起来好炫酷的感觉。 二、hover 实现这个酷炫的功能 下面先搞一个普通的网页头部 效果如下 ，鼠标移动到标题，没有任何效果， 下面我们通过ho
阅读全文
摘要：一、概述 我们在设置图片的时候，如果只设置外面div的，高度和宽度，但是里面的img的图片的高度和宽度没有变化，那我们想如何在外层div这边去控制它的高度和宽度呐，今天我们就来学习一下overflow。 二、overflow 2.1、不设置overfl的情况 说明：显示了图片的本身的大小，不受外层d
阅读全文
浙公网安备 33010602011771号