搜索到
116
篇与
的结果
-
js函数 一、JavaScript函数1.1 声明函数的方式function 关键字 匿名函数方式(表达式方式) Function 构造函数方式1.2 参数问题形参和实参数量问题 可选形参(参数默认值) 可变长的实参列表:实参对象 aruguments1.3 回调函数#一个函数就可以接收另一个函数作为参数，这种函数就称之为回调函数(高阶函数) function add(x, y, f) { return f(x) + f(y); } add(-5, 6, Math.abs)1.4 递归函数 函数内部调用自己就是递归函数//用递归 实现阶乘 function multiply(n) { if (n == 1) { return 1 } return n * multiply(n - 1) }1.5 自调函数 函数声明完 直接调用(function(){ console.log('ok') })()1.6 闭包函数 当一个函数返回了一个函数后，其内部的局部变量还被新函数引用，形成闭包function count() { var arr = []; for (var i=1; i<=3; i++) { arr.push((function (n) { return function () { return n * n; } })(i)); } return arr; } var results = count(); var f1 = results[0]; var f2 = results[1]; var f3 = results[2]; f1(); // 1 f2(); // 4 f3(); // 9二、JavaScript作用域2.1 局部作用域函数中使用定义的变量就是局部变量，只能在本函数中使用2.2 全局作用域var a = 100 function demo(){ console.log(a) var a = 200 }2.3 作用域链 函数嵌套函数会形成作用域链function demo(){ function fn(){ function fn1() { } } }2.4 块状作用域（ES6） 使用let关键字声明的变量会具有块状作用域for (let i = 0; i < 10; i ++) { } console.log(i) //变量不存在 Uncaught ReferenceError: i is not defined -
js基础语法 一、分支结构1.1 if基础语法if (条件表达式) { 代码块; } // 1. 当条件表达式结果为true，会执行代码块；反之不执行 // 2. 条件表达式可以为普通表达式 // 3. 0、undefined、null、""、NaN为假，其他均为真1.2 if复杂语法// 1.双分支 if (表达式1) { 代码块1; } else { 代码块2; } // 2.多分支 if (表达式1) { } else if (表达式2) { } ... else if (表达式2) { } else { }1.3 if嵌套if (表达式1) { if (表达式2) { } }1.4 案例var weather = prompt("天气(晴|雨)"); // 文本输入弹出框 if (weather == "晴") { alert("今天是晴天") } else if (weather == "雨") { alert("今天是雨天") } else { alert("输入信息有误") }二、循环结构2.1 or循环for (循环变量①; 条件表达式②; 循环变量增量③) { 代码块④; } // for循环执行的顺序：① ②④③ ... ②④③ ②，入口为①，出口为②，②④③就是循环过程 // 案例： for (var i = 0; i < 5; i++) { console.log(i); } // 结果： 0 1 2 3 42.2 while循环while (条件表达式) { 代码块; } // 条件满足执行代码块，条件不满足跳出循环 // 案例： var i = 0; while (i < 5) { console.log(i); i++; } // 结果： 0 1 2 3 42.3 for...in迭代器var arr = [1, 2, 3, 4, 5] for (num in arr) { console.log(num); } // 结果： 0 1 2 3 42.4 break,continue关键词// 1. break：结束本层循环 // 2. continue：结束本次循环进入下一次循环三、JavaScript对象3.1 Object类型3.1.1 创建# 直接量 var obj = {name:'xiaolili', age:100, getInfo:function( console.log(this.age) )}new 构造函数 var obj = new Object() obj.name = 'xiaolili' obj.age = 1003.1.2 属性操作#读取或修改属性 console.log(obj.name) obj.name = 'lili' console.log(obj['name']) obj['name'] = 'honghong'删除属性 delete obj['name'] delete obj.name监测属性是否存在 delete obj['name'] delete obj.name3.2 声明类（构造函数）function User(name, age){ this.name = name this.age = age this.getInfo = function(){ console.log(this.name, this.age) } } var u = new User('鲁迅', 45)每个对象都有一个属性.constructor 从而获取其构造函数使用运算符instanceof可以判断一个对象是否属于某个构造函数3.3 thisthis表示方法 所属的对象全局函数中的this 指向 window3.4 原型和原型链每一个JavaScript对象都和另一个对象相关联,并从另一个对象继承属性,另一个对象就是”原型” 用直接量创建的对象 都具有同一个原型对象 Object.prototype原型链：对象的原型也有原型构成了原型链获取原型： 构造函数.prototype 对象.__proto__给原型添加属性和方法，以该对象为原型的对象 都可以使用该方法 检测属性 是自有属性还是继承自原型的属性 obj.hasOwnProperty(proName) 创建对象时指定原型 Object.create(原型对象)
-
js基础数据类型 一、变量的定义JS中定义变量，不同于Pvthon，我们需要像Python定义函数那样，也需要用特定的关键词来定义变量: ES5语法，我们采用var关键词定义变量，并且没有常量的概念 ES6语法，我们采用let关键词定义变量，用const关键词定义常量 注:我们不需要像Python那样切换解释器版本来区别到底该书写什么版本语法的代码，在一个JS文件中我们可以同时书写两种语法的JS代码，浏览器都可以自动帮我们解析并运行。// ES5定义变量：var是关键词、num是变量名、=为赋值符、10为变量值、;为JS语言语句的结束标识符 var num = 10; // ES6定义变量 let count = 100; const PI = 3.14;二、变量的命名规范/* 1. 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符） 2. 区分大小写 3. 不能出现关键字及保留字 */三、基本数据类型（JS语言中基本数据类型分值类型与引用类型两部分）3.1 指类型// 数字类型：number var num = 10; const PI = 3.14; console.log(typeof(num), num); // 结果：number 10 // 字符串类型：string var s1 = "双引号可以表示字符串"; var s2 = '单引号可以表示字符串'; console.log(typeof(s1), s1); // 结果：string 双引号可以表示字符串 // 布尔类型：boolean var b1 = true; var b2 = false; console.log(typeof(b1), b1); // 结果：string 双引号可以表示字符串 // 未定义类型：undefined var u1; var u2 = undefined; console.log(typeof(u1), u1); // 结果：undefined undefined3.2 引用类型// 函数类型：function function fn1() {} var fn2 = function() {}; console.log(typeof(fn1), fn1); // 结果：function ƒ fn1() {} // 对象类型：object var obj1 = {} console.log(typeof(obj1), obj1); // 结果：function {} // Array对象类型： var arr1 = [1, 2, 3, 4, 5] console.log(typeof(arr1), arr1); // 结果：object (5) [1, 2, 3, 4, 5]四、运算符4.1 算数运算符（n=5）4.2 赋值运算符（x=5,y=5）4.3 比较运算符（x=5）4.4 逻辑运算符（n=5）4.5 三目运算符// 结果 = 条件表达式 ? 结果1 : 结果2; // 语法规则：条件表达式成立，将结果1赋值给结果，反正赋值结果2 // 案例： var weather = prompt("天气(晴|雨)"); // 文本输入弹出框 var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服"; console.log(res); // 今天天气挺好
-
jq基础 一、jQuery基础1.1 什么是jQueryjQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库jQuery极大的简化了JavaScript 编程1.2 什么是JS类库它就是一些函数的集合，就是把特定效果的代码写好，你只需要在用的时候要用很少的代码去调用。 起主导作用的是你的代码，由你来决定何时使用类库。1.3 常见JS类库jQuery ExtJS prototype.js zepto.js1.4 jQuery的优势开源 兔费 便捷的选择器 方便的DOM操作 方便的动画特效 易用的ajax操作 丰富的插件扩展 解决浏览器兼容性效果1.5 jQuery的版本1.x.x的版本是可以 支持 IE6~IE8的 2.x.x到3.x.x 的版本，不在兼容IE8以及以下浏览器1.6 jQuery相关网站官网 https://jquery.com/ 文档APl: http://jquery.cuishifeng.cn/index.htm二。jQuery基本使用2.1 安装 下载到本地再使用https://jquery.com/download/<script src="jquery-3.3.1.min.js"></script> <script> //注意，一定在引入jQuery之后，再使用jQuery提供的各种操作 </script>或者直接使用CDN<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>abc</title> <!-- 在这里添加 jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> </head> <body> zys <!-- 你可以在这里添加其他脚本 --> <script> $(document).ready(function() { // 这里可以写 jQuery 代码 console.log("jQuery is ready!"); }); </script> </body> </html>#官网 https://www.bootcdn.cn/jquery/2.2 jQuery对象$是jQuery的别名jQuery('.item').show() //等同于 $('.item').show()$对象可以用作选择器获取元素，还可以创建DOM对象2.3 文档就绪事件$(document).ready(function(){ // 开始写 jQuery 代码... });可以简写$(function(){ // 开始写 jQuery 代码... });2.4 连贯操作//对象可以连贯调用 $(dom).find('img').css('border','1px solid #ccc').css('color', 'red').prop('src', '1.jpg').toggle()2.5 jQueryDOM和jsDOM通过原生js获取的dom对象，我们称之为jsDOM或者原生DOM 通过jQuery选择器获取的dom对象，我们称之为jQuery DOM jQuery DOM本质上 是由JSDOM组成的集合，是个类数组对象。可以通过索引 获取其中的jsDOM $(jsDoM)可以转为jQuery DOM
-
响应式布局 一、什么是响应式设计1.1 定义真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局，而是要从整体上颠覆当前网页的设计方法，是针对任意设备的网页内容进行完美布局的一种显示机制。1.2 响应式设计的优势开发、维护、运营成本优势:页面只有一个，只是针对不同的分辨率、 不同的设备环境进行了一些不同的设计，所以在开发、维护和运营上，相对多个版本，能节约成本。 兼容性优势:移动设备新的尺寸层出不穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变化较大，则往往不能兼容，而开发新的版本需要时间，这段时间内的访问就是个问题，但是响应式Web设计可以提前预防这个问题。 操作灵活:响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。二、屏幕的相关概念2.1 分辨率 resolutio 是指显示器所能显示的像素的多少像素密度 单位: dpi(dots per inch) ppi 像素密度(pixels per inch)也称PPi，即每英寸屏幕所拥有的像素数，像素密度越大，显示画面细节就越丰富。 像素密度=√{ (长度像素数^2+宽度像素数^2) }/ 屏幕尺寸 iphone3G 165dpi 320px 480px iphone4 326 dpi 640px960px iphone6s 326dpi 1334px*750px每像素包含点的数量(dppx) 用 iPhone4 举个例子，它有 326 DPI 显示屏，根据上表，智能手机的典型观看距离大概16.8英寸，基准像素为 160 DPI。所以要显示一个 CSS 像素，苹果选择将像素比设置为2，所以看起来就和 163 DPI 手机中显示的一样了。 设备像素比(dip或dpr) 同 dppx视网膜(Retina)屏幕是苹果公司在部分移动产品使用的一种屏幕。第一次被人们熟知，是苹果将其用在iphone 4手机上，它将960x640的分辨率压缩到一个3.5英寸的显示屏内。也就是说，该屏幕的像素密度达到326像素/英寸(ppi)，称之为“视网膜屏幕”。通常电脑显示屏幕的分辨率为72ppi，iPhone 4的分辨率为电脑的4倍多。由于其具备超高像素密度的液晶屏，因此屏幕显示异常清晰、锐利。三、viewport视口3.1 什么是viewportviewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。 手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中，通常这个虚拟的"窗口"(viewport)比屏幕宽，这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局)，用户可以通过平移和缩放来看网页的不同部分。3.2 设置viewportwidth:控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素) height:和 width 相对应，指定高度。 initial-scale:初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale:允许用户缩放到的最大比例 minimum-scale:允许用户缩放到的最小比例 user-scalable:用户是否可以手动缩放。四、媒体查询 @media4.1 媒体类型4.2 媒体特性aspect-ratio 可视窗囗宽高比 min/max device-aspect-ratio 设备的宽高比 min/max orientation 设备的使用方向 landscape(水平方向) portrait(垂直方向) width 可视窗口的宽度 max/min device-width 设备的宽度 max/min height 可视窗口的高度 max/min device-height 设备的高度 max/min resolution 屏幕密度 单位dppx max/min webkit内核请使使用 -webkit-min-device-pixel-ratio4.3 媒体查询用法用法一：<link rel="stylesheet" media="mediatype" href="mystylesheet.css"> <link rel="stylesheet" media="mediatype and (media feature)" href="mystylesheet.css">用法二：@import url(css文件) mediaType 用法三：@media mediatype and (media feature) { CSS-Code; } @media (media feature) { CSS-Code; }4.4 媒体查询语法运算符and 并且 , 或者 not 否定 一定要指定媒体类型，因为媒体类型默认al，not后永远返回假 only only + 媒体类型五、断点设置5.1 常用设置一三个断点:768px 992px 1200px 手机 超小屏幕 <= 768px 平板 小屏幕 769px ~ 992px 中等屏幕 993px ~ 1200px 大屏幕 >1200px5.2 常用设置二四个断点:576px 768px 992px 1200px 超小屏幕 <= 576px 小屏幕 577px ~ 768px 中等屏幕 769px ~ 992px 大屏幕 993px ~ 1200px 超大屏幕 > 1200px5.3 推荐设置三两个断点: 640px 1024px 小屏幕 <= 640pX 中等屏幕 641px ~ 1024px 大屏幕 > 1024px六、响应式图片设置图片宽度百分比 使用背景图片 paddint-top background-size 使用H5 <picture>标签 使用picturefill插件
