自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(65)
  • 收藏
  • 关注

原创 css字体

设置font-family字体用引号包裹,每个字体之间用逗号分割。但是字体族不可以用引号包裹。

2021-07-21 19:57:52 104

原创 多库共存和插件使用问题

多库共存 插件使用关于 $ 冲突的问题解决方案1:jQuery 中不使用 $,使用 jQuery解决方案2:jQuery 库释放 $ 符合的使用权,用其他简单的符号代替jQuery.noConflict(); 释放 $,把 $ 代表的函数返回给用户,用户可以用其他变量接收jQuery 插件使用如何获取插件百度搜索、github搜索看技术文章跟别人交流jQuery 插件库之家: http://www.htmleaf.com插件使用方法找到并且下载插件在项目外写

2021-07-21 14:23:10 154 2

原创 节点操作

jQuery 节点操作创建元素语法:$('<li></li>')追加元素向父元素最后追加语法:父元素jQuery对象.append(新创建的jQuery对象);语法:新创建jQuery对象.appendTo(‘父元素选择器’ 或 父元素jQuery对象);向父元素最前面追加语法:父元素jQuery对象.prepend(新创建的jQuery对象);语法:新创建jQuery对象.prependTo(‘父元素选择器’ 或 父元素jQuery对象);//

2021-07-21 14:22:09 115

原创 操作元素尺寸和入口函数

元素尺寸和入口函数入口函数原生的 window.onload,一个页面只能书写一次,后写的会覆盖先写的jQuery 中的入口函数,一个页面可以多次书写,执行顺序按照书写顺序执行语法1:$(document).ready(function(){// 获取元素});语法2:$(function(){// 获取元素});注意:onload 事件,等待所有的页面中的资源(DOM树、图片、视频、音频等外部资源)加载完毕之后,才会执行jq 的入口函数,仅仅需要等待 DOM 树加载完成就立即执行

2021-07-21 14:21:33 76

原创 JQuery获取元素

jQueryjQuery 是一个高效、精简并且功能丰 富的 JavaScript 工具库由John Resig 在 2006 年 1 月,jQuery 正式发布query 本身是选择的意思,主要对 JavaScript 中的选择元素的方法进行了大量的优化。版本发展1.X:兼容 IE6/7/8,是工作中最常使用的,学习 1.12 版本。2.X:不兼容 IE6/7/8,多用于 jQuery 官方调整 bug 使用。工作中不使用。3.X:不兼容 IE6/7/8,只能在高版本浏览器中使用,是现在

2021-07-21 14:20:53 2803 3

原创 jQuery 常用方法

jQuery 常用方法排序eq() 方法jQuery 中获得的对象,内部包含选择的一组原生 js 对象,在 jQuery 对象中会进行一个大的排序,这个排序与原来的 HTML 结构没有关系。eq() 方法在 jQuery 对象中通过下标获取某个对象,下标是 jQuery 对象中的大的排序的下标。let $ps = $('p'),$ps.eq(0).css('background-color', 'red')index() 方法jQuery 对象调用 index() 方法时,得到的是它自

2021-07-21 14:19:20 1220 2

原创 数据结构

数据结构set 数据类型内部成员不可以重复const a = new Set();//a是实例对象,可以调用对象的属性和方法// add() 方法 向集合中添加数据a.add(1);console.log(a);// add()的返回值就是集合对象本身,所以可以链式调用// 添加时如果有重复数据,会忽略重复的,只保存一个a.add(1).add(2).add(2);// 打印出 a 为{1, 2}console.log(a);和数组类似,所以可以使用相同方法forEa

2021-07-17 10:13:43 65

原创 模版字符串字面量

模版字符串模版字符串字面量 Template literals用反引号创建const str = `this is string`;插值表达式可以将变量插入到字符串内const name = "Tom";//$()内放变量或任何符合规则的语句,只要有返回值就会将内容嵌套在字符串中const str1 = `hi,${name},${1+1},${Math.random()}`;//打印出 hi,Tom,2,0.847285191160535模板字符串标签函数 Tagged templ

2021-07-17 10:13:10 70

原创 解构

解构数组的解构可以用这种方式将数组中的每一项赋值给变量。// 将三项都赋值给变量const arr = [100, 200, 300];const [foo, bar, baz] = arr;console.log(foo, bar, baz);// 只需要一项的值可以这样写const arr = [100, 200, 300];const [, , baz] = arr;console.log(baz);可以将某些项放到新数组中//all是包含foo以后所有项的数组c

2021-07-13 17:48:16 68

原创 箭头函数

箭头函数// plus 是函数调用时的函数名// a是参数,多个参数可以(a,b,c)// =>后是函数体,如果只有一条语句,这条语句会被当成返回值;如果有多条语句,可以写在{ }中,返回值需要用return设置。const plus = a => a + 1;//打印出为3console.log(plus(2));用箭头函数写回调函数const arr = [1, 2, 3, 4, 5, 6, 7];// 1. 普通写法// filter(),创建一个数组,包含通过所

2021-07-13 17:47:08 64

原创 对象扩展

对象扩展对象字面量增强属性值用变量表示,当属性名和属性值的变量名相同时相同时,可以只写一个方法中的函数可以简化书写可以用表达式当做属性名const bar = "bar";const obj = { name: "zs", bar: bar, sayHi: function () { console.log("hi"); }};// 也可以简化书写成const bar = "bar";const obj = { nam

2021-07-13 17:46:36 60

原创 参数默认值

参数参数默认值 Default parameters// 以前使用这种方法设置默认参数function foo(enable) { //如果没传参数则给enable赋值true,如果有参数则为参数 enable = enable === undefined ? true : enable; console.log(enable);}foo();// 现在可以使用默认参数方法function foo(enable = true) { //如果没传参数,则给ena

2021-07-13 17:46:17 225

原创 let,const与块级作用域

let 与块级作用域作用域 - 某个成员能够起作用的范围。在 ES2015 之前,ES 只有两种作用域作用域分类全局作用域函数作用域块级作用域:块,就是 {} 包裹起来的一个范围声明变量的关键字工作中声明变量不用var ,主用const (后期不需修改的变量),辅用let (后期需要修改的)。letlet 创建的变量是块级作用域内的变量,不是全局变量let 不会进行变量声明提升const特点:在 let 的基础上增加了一个【只读】效果const name = "z

2021-07-13 17:45:24 170

原创 for of循环

for…of遍历普通对象会报错,普通对象还是用for in 循环ES2015 引入了一种全新的遍历方式 for…of 循环for of 循环可以使用break打断循环数组或类数组(如arguments和dom获取的子元素节点列表)可以直接使用for ofconst arr = [1, 2, 3, 4, 5]for (const item of arr) { console.log(item); if (item >= 4) { break

2021-07-13 17:44:05 1029

原创 ES6简介

ES6目前我们掌握的是 ECMAScript 5 及之前的语法通常将 ECMAScript 看作是 JavaScript 的标准规范。实际上 JavaScript 是 ECMAScript 的扩展语言。ECMAScript 只是提供了最基本的语法。JavaScript 在语言基础上进行了扩展。JavaScript 语言本身指的就是 ECMAScript。2015 年开始 ES 保持每年一个版本的迭代。ES2015 开始按照年份开始命名,很多人习惯将 ES2015 称之为 ES6。ECMAScript

2021-07-13 17:43:22 58

原创 函数 深入

函数函数本身也是一种对象,可以调用属性和方法函数的定义方式函数声明//必须定义函数名function fun() { console.log(66666);}//调用时用函数名// 可以在函数前面进行调用,因为函数声明提升fun();函数表达式//将函数赋值给变量,可以是匿名函数var fn = function () { console.log(2);};// 调用时用变量名// 不可以在函数前面进行调用,因为是变量声明提升,没有函数声明提升,相当于

2021-07-13 17:39:05 61

原创 创建对象的方式

创建对象的几种方式new Object() 构造函数 // new Object()方法 var person = new Object(); person.name = "Bob"; person.age = 19; person.sayName = function () { console.log(this.name); };对象字面量 {}// 对象字面量方法 简化 new Object()方法var person =

2021-07-13 17:38:28 59

原创 location对象

window 对象下的对象location 对象location 对象是 window 对象下的一个属性,使用的时候可以省略 window 对象location 可以获取或者设置浏览器地址栏的 URLlocation 对象的成员使用 chrome 的控制台查看查 MDN:https://developer.mozilla.org/zh-CN/成员assign():委派,作用和href属性一样,可以设置页面地址,有历史记录,可以返回上一个页面replace():替换,参数内

2021-07-05 19:01:25 102

原创 BOM简介

BOM 浏览器对象模型BOM 的概念BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM 由多个对象组成,其中代表浏览器窗口的 Window 对象是 BOM 的顶层对象,其他对象都是该对象的子对象(document对象也是window的子对象)。我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理,比如:刷新浏览器、后退、前进、在浏览器中输入URL等。window 对象window 是浏览器

2021-07-05 19:01:02 122

原创 Web API简介

Web API简介API的概念API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。任何开发语言都有自己的 APIAPI 的特征输入和输出(I/O)(input/output) 例如:var max = Math.max(2,3,4);API 的使用方法(console.log(“abc”))Web API 的概念

2021-07-05 19:00:23 136

原创 DOM事件流

DOM 事件流祖先级和子元素都绑定同一事件时,执行的顺序事件流的三个阶段第一个阶段:事件捕获第二个阶段:事件执行过程(同一元素同时设置了捕获和冒泡时,按照书写顺序执行)第三个阶段:事件冒泡addEventListener() 第三个参数为 false 时,事件冒泡,第三个参数为 true 时,事件捕获onclick 类型:只能进行事件冒泡过程,没有捕获阶段attachEvent() 方法:只能进行事件冒泡过程,没有捕获阶段事件委托利用事件冒泡,将子级的事件委托给父级加载同时,需要

2021-07-05 18:59:19 51

原创 DOM 元素属性操作

元素属性操作非表单元素的属性例如:href、title、id、src 等。调用方式:元素对象打点调用属性名,例如 obj.href。//获取元素var link=document.getElementById("link");var pic=document.getElementById("pic");//调用并打印出元素对象的属性console.log(link.href);console.log(link.title);console.log(link.id);console.

2021-07-05 18:58:45 305 1

原创 DOM 元素自身有关的位置 和大小的属性

特效制作元素自身有关的位置 和大小的属性偏移量属性offsetParent 偏移参考父级,距离自己最近的有定位的父级,如果都没有定位参考body(html)offsetLeft/offsetTop 偏移位置:自身边框最外点距离参考父级边框内边的距离child.offsetLeft;offsetWidth/offsetHeight 偏移大小:边框+内边距+width客户端大小client 系列没有参考父级元素。clientLeft/clientTop 边框区域尺寸,不常用client

2021-07-05 18:58:13 84

原创 DOM 事件基本应用

事件事件:在什么时候做什么事执行机制:触发–响应机制绑定事件(注册事件)三要素:事件源:给谁绑定事件事件类型:绑定什么类型的事件,例如click 单击事件函数:事件发生后执行什么内容,写在函数内部事件监听JavaScript 解析器会给有绑定事件的元素添加一个监听,解析器会一直监测这个元素,只要触发对应的绑定事件,会立刻执行事件函数常用事件监听方法方法1:绑定 HTML 元素属性。<input type="button" value="点击有惊喜" id="btn

2021-07-05 18:57:20 56

原创 DOM 节点操作

DOM 节点操作节点属性nodeType 节点的类型,属性值为数字,表示不同的节点类型,共 12 种,只读属性值为1 是元素节点2 属性节点3 文本节点nodeName 节点的名称(标签名、属性名、#text),只读nodeValue 节点值,返回或设置当前节点的值元素节点的 nodeValue 始终是 null属性和文本节点可以设置 节点值属性和文本节点值更改后,会直接作用在html的标签之上。父子节点常用属性childNodes :只读属性,获取一个节

2021-07-05 18:56:50 85

原创 DOM 简介

DOM 简介DOM 的概念文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地 访问程序和脚本,更新其内容、结构和 www 文档的风格(目前,HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理,处理的结果可以加入到当前的页面。DOM 是一种基于树的 API 文档,它要求在处理过程中整个文档都表示在存储器中。DOM 树DOM 又称为文档树

2021-07-05 18:56:14 148

原创 函数案例.

案例利用函数翻转数组 reverse翻转function reverse(arr) { var newArr = []; for (var i = arr.length - 1; i >= 0; i--) { newArr[newArr.length] = arr[i]; } return newArr;}var arr1 = reverse([1, 2, 3, 4, 5, 6])console.log(arr1);利用函数封装

2021-06-26 20:28:53 59

原创 函数-2.

函数函数递归函数内部可以通过函数名调用函数自身的方式,就是函数递归现象。递归的次数太多容易出现错误:超出计算机的计算最大能力。更多时候,使用递归去解决一些数学中的现象。例如可以输出斐波那契数列的某一项的值案例输出斐波那契数列的某一项的值。斐波那契数列:后面的一项数据是前两项数据之和。1,1,2,3,5,8,13,21,34,55……function fibo(a) { if (a === 1 || a === 2) { return 1; } els

2021-06-26 20:28:30 97

原创 函数-1.

函数目标为什么需要函数根据语法书写出函数根据需求封装函数说出形参和实参的传递过程能够使用函数的返回值能够使用arguments获取函数的参数为什么要有函数为了让大量代码重复使用函数function 概念函数(function),也叫作功能、方法,函数可以将一段代码一起封装起来,被封装起来的函数具备某一项特殊的功能,内部封装的一段代码作为一个完整的结构体,要执行就都执行,要不执行就都不执行。函数就是封装了一段可以被重复执行调用的代码块。函数的作用就是封装一段代码,将来可以重

2021-06-26 19:52:23 126

原创 对象.......

对象为什么要有对象?如果有一组相关的数据,松散的存储不利于使用,存入数组中受下标限制又必须有固定的顺序,而对象可以自定义名称存储一系列无序的相关数据什么是对象?现实生活中的对象:万物皆对象,对象是一个具体的事物,一个具体的事物就会有行为和特征。举例: 一部车,一个手机车是一类事物,门口停的那辆车才是对象特征:红色、四个轮子行为:驾驶、刹车JavaScript 中的对象JavaScript 中的对象其实就是生活中对象的一个抽象。JavaScript 的对象是一组无序的相关属性和

2021-06-26 19:51:43 91 1

原创 数组基础.

数组 Array学习目标为什么要有数组如何创建数组如何获取数组中的元素如何对数组进行遍历如何给数组新增元素能够完成冒泡排序案例为什么学习数组?之前学习的数据类型,只能存储一个值(比如:Number/String)。如果我们想存储班级中所有学生的成绩,该如何存储?此时就需要用到数组。数组可以将一组相关数据一起存放,并提供方便的访问方式。数组的概念所谓数组(Array),就是一组数据的集合。将多个元素(通常是同一类型)按一定顺序排列放到一个集合中,那么这个集合我们就称之为数组。数

2021-06-26 19:51:07 115

原创 for循环

循环语句for循环for 循环是一种前测试循环语句,在反复执行段代码之前,都要先测试入口条件,如果条件真,可以继续循环,如果条件为假,必须跳出循不再执行。for 循环是一种反复执行一段代码直到测试条为假时停止。语法for (;;) {}呆板的语法: for(定义循环变量(计数器);变量的最大值或最小值;步长){ 循环体; }for (var i = 1; i <= 100; i++) { console.log("今年" + i + "")

2021-06-25 09:17:36 861

原创 循环语句应用

循环语句应用穷举思想穷:穷尽,举:列举实际案例中,可能需要找到一些有规律的数据,但是计算机没办法自动智能筛选所要的数据,只能程序员自己书写一段代码,让计算机根据代码去进行筛选。穷举思想:是一种解决问题的方法,将所有的需要数据所在的范围内所有的数据都一一列举出来,再根据规律的条件对所有这些数据进行筛选,这种方式就是穷举法。穷举思想制作方法for 循环:外层使用 for 循环进行一一列举。if 语句:内层用 if 语句进行判断,筛选需要的数据,如果满足条件就操作数据,如果不满足条件跳过,看下

2021-06-25 09:16:27 228

原创 switch语句

switch语句开关语句允许一个程序求一个表达式的值,并且尝试去匹配表达式的值到一个 case 标签。如果匹配成功,这个程序执行相关的语句。switch 语句语法 switch (表达式) { case 值1: 结构体1; break; case 值2: 结构体2; break; …… default: 结构体n; break; }switch 语句结构解析switch:关键字表示开始进入一个开关语句。表达式:会求出一个具体的值,将这个值去与 {}

2021-06-23 12:01:42 469

原创 js字面量

字面量字面量(literal)是用于表达一个固定值的表示法,又叫常量。通俗的理解,字面就是所见即所得,js 程序执行到代码中的字面量,会立即知道它是什么类型的数据,值是多少。可以用于表示固定值,比如:数字、字符串、undefined、布尔类型的字面值等例如:数值字面量:8, 9, 10字符串字面量: “大前端”布尔字面量:true,false数字字面量这里的数字就是数学意义上的数字。数字字面量区分:整数字面量、浮点数字面量(小数)、特殊值。书写时直接书写字面量,不需要添加任何

2021-06-23 12:01:11 357

原创 js数据类型

数据类型简单数据类型Number 数字类型不区分整数、浮点数、特殊值,都是 Number 类型String 字符串类型字符串类型,所有的字符串都是 String 类型undefined undefined类型undefined 本身是一个数据,表示未定义。变量只声明的时候值默认是 undefinedBoolean 布尔类型Boolean 只有 true 和 false 两个字面量的值,必须是小写字母。计算机内部存储:true为1,false为0null null类型null 本身是一

2021-06-23 12:00:40 68

原创 js变量.

变量变量(variables)是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据。变量相当于一个容器,内部可以存储任意类型的数据,使用变量时,用的是内部存储的数据使用变量可以方便的获取或者修改内存中的数据。变量声明变量声明又叫做定义变量、创建变量。变量在使用前,必须先有定义,如果没有定义,会出现引用错误。定义方法:使用一个 var 的关键字进行定义,后面必须加一个空格,空格后面自定义变量名。变量的命名规则和规范规则 - 必须遵守的,不遵守会报错由字母、数字

2021-06-23 11:58:15 56

原创 javascript书写语法

JavaScript 书写语法JavaScript 的书写位置写在行内<input type="button" value="按钮" onclick="alert('你好')">写在 html 中的 <script> 标签中(type内容可以省略)<script type="text/javascript"> alert("你好");</script>可以写在html任意位置写在外部 js 文件中,在页面引入<s

2021-06-23 11:57:50 519

原创 javascript简介

JavaScript前言计算机组成软件应用软件:浏览器(Chrome/IE/Firefox)、QQ、Sublime、Word系统软件:Windows、Linux、mac OS硬件三大件(加载在主板上):CPU:中央处理器,电脑用它进行数据计算内存:临时存储空间,空间越大,软件运行速度越快硬盘:永久存储文件的空间输入设备:鼠标、键盘、手写板、摄像头等输出设备:显示器、打印机、投影仪等网页、网站和应用程序网页:单独的一个页面。网站:一系列相关的页面组合到一起。应用

2021-06-23 11:56:39 101

原创 if语句and三元表达式

表达式和语句表达式一个表达式可以产生一个值,有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。特点:表达式会先执行出一个结果,然后再参与其他程序。语句语句可以理解为一个行为,循环语句和判断语句就是典型的语句。一个程序有很多个语句组成,一般情况下分号 ; 分割一个一个的语句。语句可以认为是给计算机的一个指令,执行这段代码。一般语句以分号结束,特殊的结构除外。流程控制语句流程控制语句:通过一些特殊结构可以让 js 代码加载时,要么可以跳过一部分不加载,或者可以循

2021-06-23 11:56:03 899

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除