前端
关注
分享
扫一扫
文章平均质量分 57
ShengXIABai
努力学习
展开
-
Python学习 Day41 传统轮播11
传统轮播业务分析：（1）左右按钮需要绑定单击事件（2）传统轮播图俗称三位轮播一、css部分<title></title> <!--引入外部样式css文件--> <link rel="stylesheet" href="css/default.css" /> <!--引包--> <script type="text/javascript" src="js/jQuery.min.js"></script&g原创 2021-04-10 17:18:54 · 141 阅读 · 0 评论 -
Python学习 Day40 animate动画函数10
animate动画函数概述：在前端DOM中，动画实现的原理：定时器+信号量在jQuery函数库直接提供了一个封装函数可供使用语法格式：$(selector).animate(json,time,callback);第一个参数【必有】：JSON数据格式用来设置动画最终完成的样式属性值第二个参数【可选】：动画时间的设置【毫秒】第三个参数【可选】：当动画执行完毕的时候立即执行一次注意：JQ函数库中的animate动画：很多样式都可以参与动画，但涉及到颜色的部分不能参与动画一a原创 2021-04-09 18:03:59 · 851 阅读 · 0 评论 -
Python学习 Day40 折叠卡片09
折叠卡片业务分析：1.页面布局：无序列表ul。首先第一项军事内容部分显示，其余军事内容隐藏2.需要给每一个标题绑定单击事件3.slideDown||slideUp一、样式部分<style type="text/css"> *{ margin: 0; padding: 0; } body{ background: #eee; } .container{ width: 600px; margin: 30px au原创 2021-04-09 17:14:36 · 151 阅读 · 0 评论 -
Python学习 Day39 JQ节点关系方法08
JQ节点关系方法一、parent概述；它是jQuery函数库中提供的一个方法，它主要的作用是可以获取到某一个匹配节点【父节点】样式部分<style type="text/css"> *{ margin: 0; padding: 0; } ul{ width: 100%; height: 60px; list-style: none; border: 1px solid black; } ul li{ f原创 2021-04-08 21:22:23 · 156 阅读 · 0 评论 -
Python学习 Day39 jQuery框架常用方法07
jQuery框架常用方法一、addclass||removeclass概述：它们两者是JQ函数库提供的，两者主要作用是可以给匹配节点添加或移除类名样式部分<style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: orangered; } .cur{ background:原创 2021-04-08 20:30:47 · 148 阅读 · 0 评论 -
Python学习 Day39 淡入淡出轮播图06
淡入淡出轮播图业务分析：（1）左侧或右侧按钮需要绑定单击事件（2）利用特效函数淡入与淡出【当前显示这张图淡出之后，下一张图渐渐淡入】一、样式部分<style type="text/css"> *{ margin: 0; padding: 0; } body{ background: #eee; } .container{ position: relative; width: 600px; height: 40原创 2021-04-08 19:54:20 · 301 阅读 · 0 评论 -
Python学习 Day39 事件绑定05
事件绑定概述：在我们学习DOM的时候，经常通过DOM方法获取节点，然后给节点绑定事件当时的常用语法：div.onclick = function(){}注意：JQ函数库也给我们提供了匹配节点绑定事件的方法。在DOM中学过的那些事件，在JQ中也有但是需要注意的是：JQ把它们都封装成了函数，给匹配节点绑定事件$(selector).eventType(callback)注意1：JQ里面绑定的绑定事件函数都没有on关键字注意2：回调函数【就是以前学过的所谓事件处理函数】原创 2021-04-08 19:19:15 · 136 阅读 · 0 评论 -
Python学习 Day38 jQuery特效函数04
jQuery特效函数概述:jQuery函数库给我们提供了很多特效函数，特效函数只能在JQ中使用一、slideDown||slideUp这两个方法是由JQ提供的，它们两者主要的作用是可以匹配元素进行向下滑动、向上卷起操作语法格式：$('selector').slideDown(time,callback)第一个参数：代表动画每一次动画时间（可有可无）第二个参数：回调函数，当动画结束后立即执行一次（可有可无）样式部分<style type="text/css"> *{原创 2021-04-07 18:10:57 · 172 阅读 · 0 评论 -
Python学习 Day38 jQuery常用方法03
jQuery常用方法一、css方法概述：CSS这个方法是JQ框架给我们提供的，它主要的作用是可以设置匹配节点行内样式CSS方法是JQ框架提供的，给匹配节点添加行内样式JQ支持链式语法：从左到右样式部分<head> <meta charset="UTF-8"> <title></title> <!--引包--> <script type="text/javascript" src="js/jQuery.min.j原创 2021-04-07 17:34:08 · 153 阅读 · 0 评论 -
Python学习 Day37 jQuery框架独有选择器02
jQuery框架独有选择器概述：jQuery函数库支持我们曾经学过的全部选择器【*、标签、类、id选择器】但是，jQuery框架给我们提供了一些扩展的CSS选择器【JQ框架独有的：只能在JQ中使用】一、：first与：last这两个选择器是JQ框架中独有的，它们两个选择器主要的作用是可以获取匹配节点的第一个或是最后一个元素语法格式：$(selsector:first)<style type="text/css"> *{ margin: 0; paddin原创 2021-04-06 17:37:41 · 140 阅读 · 0 评论 -
Python学习 Day37 jQuery框架01
jQuery框架一、jQuery基本概述jQuery是一个快速简洁的JavaScript框架，属于JavaScript代码jQuery的设计宗旨是：write Less，Do More，写更少的代码，做更多的事它封装了JS常用的功能代码，提供一种简便的JS设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互jQuery的核心特性可以总结为：【1】具有独特的链式语法（连续打点）和短小清晰的多功能接口（封装的函数）【2】具有高效灵活的css选择器，并且可对CSS选择器进行扩展【原创 2021-04-06 16:26:02 · 341 阅读 · 0 评论 -
Python学习 Day36 BOM运动效果
BOM原创 2021-04-05 20:22:06 · 209 阅读 · 0 评论 -
Python学习 Day35 事件对象
事件对象一、初识事件对象概述：任意节点树上的节点（标签），都可以绑定一个或多个事件。当用户触发事件的时候，系统会自动给事件处理函数传递实参，而这个参数即为事件对象（事件对象给我们传递了很多的信息）当事件处理函数执行的时候，系统会自动注入实参，我们用形参接收【事件对象】在不同的浏览器中事件对象的兼容问题：使用短路语法进行兼容【var e = event || window.event】<head> <meta charset="UTF-8"> <title原创 2021-04-03 21:08:36 · 213 阅读 · 0 评论 -
Python学习 Day34 DOM批量添加事件
DOM批量添加事件批量添加事件概述：在一些特定场景下，有很多相同节点（标签），需要添加相同的事件，就可以批量添加事件一、获取全部节点遍历步骤：1.获取全部节点2.循环语句遍历数组，给数组里面每一个元素绑定事件<style type="text/css"> *{ margin: 0; padding: 0; } ul{ width: 100%; list-style: none; height: 60px; b原创 2021-04-02 21:16:44 · 222 阅读 · 0 评论 -
Python学习 Day33 获取节点其他方法
获取节点其他方法原创 2021-04-02 20:18:15 · 662 阅读 · 0 评论 -
Python学习 Day33 节点绑定事件（二）
节点绑定事件一、 鼠标移上与移出事件（1）概述概述：任意节点（标签），都可以给它们添加鼠标移上与鼠标移下事件【onmouseenter与onmouseleave】任意一个结点可以同时绑定多个事件鼠标进入：onmouseenter 或 onmouseover鼠标移出：onmouseleave 或 onmouseout样式部分<head> <meta charset="UTF-8"> <title></title> <styl原创 2021-04-01 17:18:28 · 233 阅读 · 0 评论 -
Python学习 Day32 DOM事件绑定
事件绑定一、onclick与ondblclick概述：在网站当中，用户经常进行鼠标移上某一个元素、单击某一个元素，这个元素可以对用户的此行为进行响应。这种现象称之为“事件绑定”。即人机交互注意：在JS当中，只有标签才可以绑定事件。【数组、JSON、函数、变量、循环语句这些是不能绑定事件的】语法格式： 语法格式： element.onxxxx = functiong(){ block; }onxxxx：这些事件名字都是小写右侧部分是一个函数（事件处理函数），当用户触发事件的原创 2021-03-29 21:16:21 · 141 阅读 · 0 评论 -
Python学习 Day31 DOM
DOM一、节点树概述：节点即为标签。节点之间的这种关系，我们称之为“节点树”DOM【document object model】文档对象模型，可以理解为是整个节点树最外层的“根元素”DOM其实就是JS语言中内置引用类型document对象，DOM对象经常用来操作节点（标签）比如操作节点样式、属性二、DOM属性DOM官方给我们提供很多属性、方法。用来操作节点树上面的节点四个属性：documentElement、head、title、body//DOM：其实就是内置document原创 2021-03-28 21:20:53 · 498 阅读 · 0 评论 -
Python学习 Day31 JS闭包
JS闭包一、初识JS闭包概述：闭包即为一个可以访问其他作用域中的变量，这样的一个函数即为闭包//全局变量num = 100 var num = 100; //声明一个函数 function fun(){ num++; console.log(num); } //调用函数 fun();//100 fun();//101 fun();//102当函数fun第一次调用的时候，在函数作用域中没有变量num，因此会沿着作用域链向上（全局）查询当函数fun第一次执行的时候，将全局原创 2021-03-28 18:10:50 · 186 阅读 · 0 评论 -
Python学习 Day31 JS类数组对象
JS类数组对象一、三元运算符概述：三元运算符由三部分组成，使用语法如下： A ？ B ： C三元运算符A：它需要的是一个布尔值（其他类型数值也可以，但是需要隐式转换为布尔值）如果A部分为布尔值真，返回结果即为B，否则返回结果为CB与C：可以是任意类型数值，或者是一些表达式<script type="text/javascript"> console.log(true?"水面清圆":"一一风荷举");//水面清圆 console.log(false?1:2);//2 co原创 2021-03-28 17:16:57 · 157 阅读 · 0 评论 -
Python学习 Day30 正则表达式（二）
正则表达式（二）（一）预定义类预定义类：这个术语，这些特定符号只能在正则表达式中使用预定义类作用\d[0-9] \d可以匹配任意【一个】数字字符\D非[0-9] \D匹配任意【一个】不是数字的字符\s可以匹配任意的空白\S可以匹配任意不是空白的字符\w可以匹配任意的字母、数字或下划线\W可以匹配任意的字母、数字、下划线以外的内容\d [0-9] \d可以匹配任意【一个】数字字符var str = '水面清圆333，原创 2021-02-28 00:01:50 · 162 阅读 · 0 评论 -
Python学习 Day29 正则表达式（一）
正则表达式（一）（一）正则的基本使用方法正则表达式是用于匹配字符串的一种模式、方法正则表达式：regular expression，简称RegExp正则表达式定义最常用的方法是字面量，写法//【定界符】正则表达式在JS当中属于引用类型数据 console.log(/abc/); console.log(typeof /你好/); //正则表达式最常用书写方式 var reg = /\d+/g; console.log(reg);（二）字符串方法结合正则字符串方法作用原创 2021-02-27 00:52:34 · 358 阅读 · 0 评论 -
Python学习 Day29 JSON数据格式
JSON数据格式JSON【JavaScript Object Nonation】JS对象的一种标记法在JS当中也有JSON数据格式，JSON数据格式由一个大花括号表示{}，JSON数据格式在JS当中是引用类型JSON的作用：前端工程师可以和后台工程师进行数据交换JSON数据格式可以通过KV（键值）对存储、读取、修改、添加数据语法1.JSON数据格式的K务必要加上“ ”2.JSON数据格式常用功能即为存储数据3.JSON存储数据的V可以是任意类型数据 { "n原创 2021-02-26 22:30:35 · 213 阅读 · 0 评论 -
Python学习 Day29 JS字符串
JS字符串官方也给字符串提供了很多的属性和方法，用来进行字符串的操作（一）length属性length属性：字符串的length属性，主要作用是获得字符串中字符的个数如果字符串中没有该字符，返回【-1】var str = '水面清圆，一一风荷举'; console.log(str.length);字符串的length属性：经常结合循环语句一起使用，用来遍历字符var str = '野渡无人舟自横'; for(var i = 0;i < str.length;i++){ co原创 2021-02-26 18:23:52 · 203 阅读 · 0 评论 -
Python学习 Day28 JS数组
JS数组（一）概述：在很多编程语言中都有数组存在。可以将数组理解为一个可以存储无数个有序的任意类型数据的容器。在JS这门语言中，数组使用[]中括号进行表示数组在JS当中属于引用类型数据数组中存储的数据称为元素，用逗号隔开//在JS当中使用[]代表数组 console.log([]); //数组在JS当中属于引用类型数据 console.log(typeof []); //数组可以存储任意类型数据 console.log([1,true,NaN,'喝水',null,function()原创 2021-02-25 16:52:37 · 446 阅读 · 0 评论 -
Python学习 Day28 JS函数（二）
JS函数（二）（一）return关键字关键字return一般结合函数一起使用。而且需要注意，这个关键字一般只能在函数体中使用作用：1.函数体中如果遇见关键字return，函数体后面语句不再执行2.函数体中关键字可以将计算完结果返回【函数体外部可以获取函数返回结果】 //第一个作用 function fun(){ console.log('水面清圆'); console.log('一一风荷举'); return; console.log('疏影横斜'); } fun();原创 2021-02-24 23:30:53 · 170 阅读 · 0 评论 -
Python学习 Day27 JS函数（一）
JS函数函数：可以理解为某一个常用功能的封装。当你想使用这个功能的时候，可以选择调用，执行这个功能即可注意：在JS脚本语言中，函数分为两种：关键字function定义函数、表达式形式函数函数使用分为两部分：声明和调用（一）关键字形式函数关键字形式参数，需要通过关键字function进行声明、定义注意：几乎任何语言中，函数使用都是分为两种：声明、调用 基本语法： //声明部分 function fun(){ 函数体; } //调用部分 fun();...原创 2021-02-24 00:08:04 · 387 阅读 · 0 评论 -
Python学习 Day26 JS循环语句（二）
JS循环语句（二）（一）寻找质数输出1-100之间的质数for(var num = 1;num <= 100;num++){ //累加器，只要遇到是数字num的约数，这个变量就进行+1 var count = 0; for(i = 1;i <= 7;i++){ if (num % i == 0){ count++; } } if (count == 2){ console.log(num+'是质数'); }}（二）break和continue关键字原创 2021-02-21 23:15:57 · 155 阅读 · 0 评论 -
Python学习 Day25 JS循环语句（一）
JS循环语句（一）（一）for循环基本使用在JS语言中是有所谓流程控制语句：条件语句+循环语句条件语句：在一种或多种条件下，选择一个分支执行循环语句：在程序当中，若是出现大量重复性的语句时，使用循环语句解决 for (var i = 0;i < 10;i++) { console.log("疏影横斜水清浅"); }var i = 0:【循环语句第一步】经常用来声明一个或多个变量，一般情况下都是有初始值的i < 10：【循环语句第二步】经常用来进行条件判断（需要的是布原创 2021-02-21 00:13:12 · 215 阅读 · 0 评论 -
Python学习 Day25 JS switch条件语句
JS中switch语句的基本使用原创 2021-02-20 22:43:43 · 140 阅读 · 0 评论 -
Python学习 Day24 JS赋值运算符
JS赋值运算符赋值运算符：经常给变量进行赋值变量：声明一次之后可以多次赋值<script type="text/javascript"> /* 赋值运算符：经常给变量进行赋值 变量：声明一次之后可以多次赋值 */ var num = 23; num += 6;//第二次赋值 num=num+6 num -= 100;//第三次赋值 num=num-100 num *= 2;//第四次赋值 num=num*2 num /= 3; //第五次赋值 nu原创 2021-02-19 22:02:02 · 156 阅读 · 0 评论 -
Python学习 Day24 JS if条件语句
JS if条件语句在JS语言中，有所谓流程控制语句；条件语句、循环控制语句条件语句：程序当中如果出现一种或多种情况进行选择的时候，只能选择某一个条件的分支去执行这样的语句，称为条件语句（一）if条件语句基本使用一般情况下条件语句需要布尔值其他类型数据，隐式转换为布尔值参与运算符返回的结果作为条件（二）if条件语句结合else使用（三）多分支if条件语句优化...原创 2021-02-19 21:24:39 · 143 阅读 · 0 评论 -
Python学习 Day23 JS逻辑运算符
逻辑运算符三个逻辑运算符：逻辑与&& 逻辑或| 逻辑非！在JS当中，一般情况下是布尔类型参与逻辑运算，但是其他类型的数据也可以参与逻辑运算，只不过浏览器中的解析器会将其他的数据类型隐式转换为布尔类型参与逻辑运算...原创 2021-02-18 22:24:56 · 212 阅读 · 0 评论 -
Python学习 Day22 JS比较运算符
比较运算符比较运算符（8种）：比较运算符名称>大于>=大于等于<小于<=小于等于==等于（数值）！=不等于===全等判断（数值和类型）！==不全等判断返回结果为布尔值其他类型（字符串、布尔值、未定义、空对象）数据也可以参与比较运算，因为浏览器中的解析器，将其他类型的数据隐式转换为数字进行比较（一）Number类型的数据参与比较运算Number类型的特殊值Infinity参与比较运原创 2021-02-16 19:46:10 · 185 阅读 · 0 评论 -
Python学习 Day22 JS数学运算符
数学运算符（一）Number类型参与的数学运算Number类型的特殊值InfinityNumber类型的特殊值NaN（二）其他类型的数据隐式转换为数字（三）其他类型的数据参与数学运算（四）String类型的数据参与数学运算String数据类型隐式转换为数字空字符串0纯数字字符串对应的数字非纯数字字符串NaN隐式转换字符串参与数学运算...原创 2021-02-16 17:09:16 · 116 阅读 · 0 评论 -
Python学习 Day21 JS变量
JS变量（一）变量的基本使用变量：存储数据值的容器使用步骤：声明，赋值，使用（二）标识符命名规范标识符命名规范；1.可以是字母，数字，下划线，美元符号2.不能以数字开头3.不能是关键字，保留字4.严格区分大小写（三）数据类型的判断关键字typeof（四）数据类型的转换使用连字符（+），将数字类型的数据转换为字符串内置函数parseInt和parseFloat将字符串转换为数字...原创 2021-02-15 22:37:58 · 131 阅读 · 0 评论 -
Python学习 Day20 JS数据类型
JS（一）JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。js用途：（1）创建浏览器的动态效果（2）开发服务器js组成：ECMScript：欧洲计算机协会制定的语法规范DOM：Document Obiect Model，文档对象模型BOM：Bro原创 2021-02-14 22:59:25 · 142 阅读 · 0 评论 -
Python学习 Day20 盒子模型
盒子模型（一）验证盒子模型（二）盒子模型代码原页面代码原页面效果所有元素边距设为0*{ /*将所有元素的样式：外边距，边框，内边距全部设置为0*/ margin: 0px; border: 0px; padding: 0px; }父节点outer设置左右为100像素的边距#outer{ width: 500px; height: 500px; background-color: darkcyan; margin-left原创 2021-02-14 00:22:31 · 399 阅读 · 2 评论 -
Python学习 Day19 CSS定位
CSS定位（一）静态定位<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 静态定位： 如果我们不写position属性，相当于默认效果就是静态定位 静态效果：元素出现在本该出现的位置。一般使用静态定位可以省略不写。 --> &l原创 2021-02-13 23:07:08 · 368 阅读 · 0 评论 -
Python学习 Day19 CSS浮动
CSS浮动（一）浮动设计初衷：文字环绕图片CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> img{ float: left;原创 2021-02-13 21:58:21 · 790 阅读 · 0 评论