格格不入 - JavaScript
type: channel
link: https://jbea.cn/category/js/
items: JavaScript+jQuery+ES6入门到放弃之表单验证
items: JavaScript+jQuery+ES6入门到放弃之jQuery事件与动画
items: JavaScript+Jquery+ES6入门到放弃之jQuery操作DOM
items: JavaScript+jQuery+ES6入门到放弃之jQuery基础
items: JavaScript+jQuery+ES6入门到放弃之ECMAScript 6 进阶
items: JavaScript+jQuery+ES6入门到放弃之ECMAScript 6 基础
items: JavaScript+jQuery+ES6入门到放弃之面向对象
items: JavaScript+jQuery+ES6入门到放弃之DOM应用
items: JavaScript+jQuery+ES6入门到放弃之DOM操作
items: JavaScript+jQuery+ES6入门到放弃之BOM操作

JavaScript+jQuery+ES6入门到放弃之表单验证
type: item
date: 2022-09-07T10:50:00+08:00
description: JavaScript验证表单内容概述： JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。表单数据经常需要使用 JavaScript 来验证其正确性：验证表单数据是否为空？验证输入是否是一个正确的email地址？验证日期是否输入正确？验证表单输入内容是否为数字型？作用： 保证输入的数据符合要求、减轻服务器的压力实现思路：获得表单元素值使用JavaScript的一些方法对数据进行判断当表单提交时，触发事件，对获取的数据进行验证，并对不合法数据进行提示案例演示基础（后续案例均在此案例基础之上完成，已省略样式及部分页面）： 青鸟技术栈-注册页面 青鸟技术栈-注册账号 已有账号？立即登录 昵称 邮箱 没有邮箱？立即申请 密码 再次密码 性别 男 女 生日 2022年 1月 22日 爱好 读书 编程 运动 头像 所在地 河北省 秦皇岛市 北戴河区 手机号 可通过该手机号码快速找回密码 中国大陆地区以外手机号码 点击这里 获取短信验证码 我已阅读并同意相关服务条款和隐私政策 《服务协议》 《隐私政策》 参与满意度问卷调查 案例下载：青鸟技术栈-登录页面-表单验证基础页面.zip案例显示效果：表单选择器jQuery表单选择器语法描述:input匹配所有input、textarea、select和button元素:text匹配所有单行文本框:password匹配所有密码框:radio匹配所有单项按钮:checkbox匹配所有复选框:image匹配所有图像域:file匹配所有文件域:reset匹配所有重置按钮:button匹配所有按钮:submit匹配所有提交按钮jQuery表单属性过滤选择器语法描述:enabled匹配所有可用元素:disabled匹配所有不可用元素:checked匹配所有被选中元素（复选框、单项按钮、select中的option）:selected匹配所有选中的option元素表单校验与提示特效使用jQuery脚本实现如下要求：当用户点击“登录”按钮后，在HTML表单提交到服务器端之前对内容格式进行如下验证：判断邮箱是否为空。如果为空，则弹出警告框，并给出提示判断邮箱是否为空、邮箱格式是否正确（需要包含‘@’、‘.’,且‘.’的位置在‘@’之后，‘@’不能作为第一个字符），如不满足条件，则弹出警告框，并给出提示判断密码是否为空，如果为空，则弹出警告框，并给出提示演示案例：$(function () { $("form").submit(function () { let email = $("#email").val(); //获取到邮箱的值 let password = $("#password").val(); //获取到密码的值 //1.判断邮箱是否为空 if (email == "") { alert("邮箱不能为空"); return false; } let emialIndex = email.indexOf('@'); let dotIndex = email.indexOf('.'); //2.使用indexOf()方法判断邮箱是否包含“@”和“.”字符 if (emialIndex == -1 || dotIndex.indexOf(".") == -1) { alert("邮箱格式不正确，必须包含@和."); return false; } //使用indexOf()方法判断邮箱的首字符是否为“@”字符 if (emialIndex == 0) { alert("邮箱格式不正确，不能以@开头"); return false; } if (emialIndex > dotIndex) { alert("邮箱格式不正确，@不能在.之后"); return false; } //3.判断密码是否为空 if (password == "") { alert("密码不能为空"); return false; } //4.判断密码长度大于或等于8个字符 if (password.length < 8) { alert("密码必须大于或等于8个字符"); return false; } return true; }) })[scode type="red" size="simple"]📢弊端： 每当用户点击登录按钮后，系统都将以警告框的形式弹出对应的信息。这种操作存在如下问题：用户填写完全部表单并提交时才进行校验，错误提示不及时使用警告框提示错误，用户体验不友好🤔如何修正?在文本框失去焦点时触发验证在文本框的后面添加页面元素，用于存放错误提示信息使用jQuery的html( )方法，动态设置提示信息[/scode]演示案例：在对应的文本框区域之后添加相应的错误提示标签 邮箱 …

JavaScript+jQuery+ES6入门到放弃之jQuery事件与动画
type: item
date: 2022-09-06T17:39:00+08:00
description: 概述页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。例如：在某个元素上移动鼠标。选择某个单选按钮点击某个元素在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。常见 DOM 事件：鼠标事件键盘事件表单事件文档/窗口事件click 单击事件keypress 键盘释放且产生可打印字符submit 表单提交load 加载dblclick 双击事件keydown 键盘按下change 内容改变resize 调整窗体大小mouseenter 鼠标进入时keyup 键盘释放focus 获得焦点scroll 窗体滚动mouseleave 鼠标离开时 blur 失去焦点unload 离开窗体、重新加载【已移除】hover 鼠标悬浮时 mouseover 鼠标指针移过时鼠标在其被选元素的子元素上来回进入时：触发 mouseover不触发 mouseenter mouseout 鼠标指针移出时鼠标在其被选元素的子元素上来回离开时：触发 mouseout不触发 mouseleave 事件绑定与解绑绑定事件概述：on() 方法在被选元素及子元素上添加一个或多个事件处理程序。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。[scode type="yellow" size="simple"]注意： 使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。提示： 如需移除事件处理程序，请使用 off() 方法。提示： 如需添加只运行一次的事件然后移除，请使用 one() 方法。[/scode]演示案例： 青鸟技术栈 该实例演示了如何使用 on() 来达到与 one() 相同的效果。 这些一些文本。 点我使用 on() 方法设置背景颜色。 这些一些文本。 点我使用 bind() 方法设置背景颜色。 扩展：// 为多个事件绑定相同的事件处理函数 $(selector).on("event2 event3 …", function () { …… }) // 同时绑定多个事件 $(selector).on({ "event1": function () { …… }, "event2 event3 …": function () { …… }, …… })解绑事件概述：off() 方法通常用于移除通过 on() 方法添加的事件处理程序。自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。[scode type="yellow" size="simple"]注意： 如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。[/scode]演示案例： 青鸟技术栈 该事件演示了如何使用 off() 和 unbind() 方法来达到相同的效果。 点击段落修改背景颜色。 点击以下按钮再点击这个段落 ( click 事件被移除)。 使用 off() 方法移除 click 事件 hover()概述：hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。方法触发 mouseenter 和 mouseleave 事件。[scode type="yellow" size="simple"]注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。[/scode]演示案例： 青鸟技术栈 鼠标移动到该段落。 jQuery动画效果show() 与 hide()概述：show()方法控制元素的显示，hide()方法控制元素的隐藏语法：$(selector).show([duration][, easing][, complete]); $(selector).hide([duration][, easing][, complete]);参数说明：duration规定显示效果的速度，可选值毫秒值（如：1000）"slow"（600毫秒）"normal"（400毫秒，默认值）"fast"（200毫秒）easing规定在动画的不同点上元素的速度，可选值"swing"：默认值，在开头/结尾移动慢，中间移动快"linear"：匀速移动complete规定动画结束后要执行的方法，每个匹配元素的动画完成后都会调用一次fadeIn() 和 fadeOut()概述：fade…

JavaScript+Jquery+ES6入门到放弃之jQuery操作DOM
type: item
date: 2022-09-06T16:01:00+08:00
description: DOM概述DOM操作分为三类DOM Core： 任何一种支持DOM的编程语言都可以使用它getElementById()getElementsByTagName()HTML-DOM：用于处理HTML文档document.formsdocument.getElementById("title").innerHTMLCSS-DOM： 用于操作CSSelement.style.color="green"节点操作创建节点工厂函数 $() 可用于获取或创建节点：$(selector)：通过选择器获取节点$(element)：把DOM节点转化成jQuery节点$(html)：使用HTML字符串创建jQuery节点演示案例：$(function () { // 创建节点 var li1 = $(" 大头儿子 "); var li2 = $(" 小魔仙 "); })插入节点常见方法：语法（内部插入，子节点）功能$(parentNode).append(content)表示将content(jQuery节点对象)添加到 parentNode之中，末尾content.appendTo($(target))表示把content(jQuery节点对象)添加到 target中，末尾$(parentNode).prepend(content)表示将content(jQuery节点对象)添加到 parentNode之中，开头content.preappendTo($(target))表示把content(jQuery节点对象)添加到 target中，开头案例演示： 关于我们 联系我们 我的邮箱：arvin@git-x.cn 演示效果：语法（外部插入，同辈节点）功能$(parentNode).after(content)表示将content(jQuery节点对象)添加到 parentNode之后content.insertAfter($(target))表示把content(jQuery节点对象)追加到 target之后$(parentNode).before(content)表示将content(jQuery节点对象)添加到 parentNode之前content.insertBefore($(target))表示把content(jQuery节点对象)追加到 target之前演示案例： 关于我们 联系我们 我的邮箱：arvin@git-x.cn 演示效果：删除节点删除被选元素（及其子元素）：$(selector).remove([selector]);[scode type="blue" size="small"]删除 class="italic" 的所有 元素可以写成：$("p").remove(".italic");[/scode]删除被选元素（及其子元素）[保留元素的事件、数据]：$(selector).detach([selector]);从被选元素中删除子元素：$(selector).empty();复制节点clone()方法生成被选元素的副本，包含子节点、文本和属性。语法：$(selector).clone(true|false)参数说明：是否复制元素的事件和数据，默认为 false 青鸟技术栈 单击段落增加文本的大小。 这是另一个段落。 复制第一个p元素(包括事件处理程序),并附加到body元素中 替换节点replaceWith()replaceWith() 方法把被选元素替换为新的内容。语法结构：$(selector).replaceWith(content[,function(index)])参数解释：content 必需。规定要插入的内容（可包含 HTML 标签）。function(index) 可选。规定返回替换内容的函数。replaceAll()replaceAll() 方法把被选元素替换为新的 HTML 元素。 【与 replaceWith()作用一致，参数不一致】语法结构：$(content).replaceAll(selector)参数解释：content 必需。规定要插入的内容（可包含 HTML 标签）。演示案例： 青鸟技术栈 这是一个标题 这是一个段落。 这是另一个段落。 这是另一个段落。 替换每个P元素 节点属性操作获取和设置元素属性attr() 方法设置或返回被选元素的属性和值。当该方法用于返回属性值，则返回第一个匹配元素的值。当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。语法结构：返回属性的值：$(selector).attr(attribute)设置属性和值：$(selector).attr(attribute,value)设置多个属性和值：$(selector).attr({attribute:…

JavaScript+jQuery+ES6入门到放弃之jQuery基础
type: item
date: 2022-09-06T14:53:00+08:00
description: 什么是jQuery？概述：jQuery 是一个 JavaScript 函数库，jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。jQuery 库包含以下功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities提示： 除此之外，jQuery 还提供了大量的插件。jQuery 安装可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：从 jquery.com 下载 jQuery 库Production version - 用于实际的网站中，已被精简和压缩。jquery-版本号.min.jsDevelopment version - 用于测试和开发（未压缩，是可读的代码）jquery-版本号.js从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。本地文件导入： jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 CND在线导入：// CDNJS // Staticfile CDN // BootCDN // Microsoft CDN // Google CDN 基础语法jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。基础语法：$(selector).action() 或 jQuery(selector).action()美元符号定义 jQuery选择符（selector）"查询"和"查找" HTML 元素jQuery 的 action() 执行对元素的操作事件处理方法动画方法HTML/CSS方法遍历方法Ajax方法杂项方法文档就绪事件基础语法：$(document).ready(function(){ // 开始写 jQuery 代码... });实际开发中，通常使用 ready()方法实现在页面加载后执行操作$(document).ready()与 window.onload类似，但也有区别比较项window.onload$(document).ready()执行时机必须等待网页中所有的内容加载完毕后（包括图片、视频、flash等）才能执行网页中所有DOM文档结构绘制完毕后即刻执行，与DOM元素关联的内容（图片、视频、flash等）可能并没有加载完编写次数同一页面不能同时编写多个同一页面能同时编写多个简化写法无$( function() { //执行代码 } ) ;dom对象和jQuery对象DOM对象：直接使用JavaScript获取的节点对象var objDOM = document.getElementById("title"); var objHTML = objDOM.innerHTML;jQuery对象：使用jQuery包装DOM对象后产生的对象，能够使用jQuery中的方法var $objJQuery = $("#title"); var objHTML = $objJQuery.html();[scode type="red" size="simple"]注意： DOM对象和jQuery对象的方法不能混用[/scode]jQuery选择器概述： jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等"选择"（或查找）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头：$()。基础选择器基础选择器包括ID选择器、类选择器、标签选择器、全局选择器和并集选择器名称语法构成描述示例ID选择器#id根据给定的id匹配元素$("#title")选取id为title的元素类选择器.class根据给定的class匹配元素$(".title")选取所有class为title的元素标签选择器element根据给定的标签名匹配元素$("h2" )选取所有h2元素全局选择器*匹配所有元素$("*")选取所有元素并集选择器selector1, selector2, ..., selectorN将每一个选择器匹配的元素合并后一起返回$("div,p,.title" )选取所有div、p和拥有class为title的元素层次选择…

JavaScript+jQuery+ES6入门到放弃之ECMAScript 6 进阶
type: item
date: 2022-09-05T11:04:00+08:00
description: 内置对象的扩展字符串的扩展模板字符串概述： 模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。演示案例：// 普通字符串 let text = `定义一个普通字符串变量` // 多行字符串 let texts = `这是第一行数据 这是第二行数据 这是第三行数据`; // 字符串中嵌入变量 let userName = "Bob", age = 18; console.log(`你好，我叫：${userName}，今年${age}岁！`); // 如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。 console.log(`在JavaScript中使用反引号（\`）定义模板字符串`);[scode type="yellow" size="simple"]⚠️注意：模板字符串中嵌入变量，需要将变量名写在 ${}之中，大括号内部可以放入任意的 JavaScript 表达式，可以进行运算、引用对象属性和调用函数。模板字符串中的空格和换行，都将被保留。如果模板字符串中的变量没有声明，将报错而不是输出undefined。[/scode]字符串新增的方法新增方法列表：方法局部变量includes(searchString:string)：boolean返回布尔值，表示是否找到了参数字符串startsWith(searchString:string)：boolean返回布尔值，表示参数字符串是否在原字符串头部endsWith(searchString:string)：boolean返回布尔值，表示参数字符串是否在原字符串尾部repeat(count:number):string返回一个新字符串，表示将原字符串重复n次padStart(length:number,string:string):string用于头部补全padEnd(length:number,string:string):string用于尾部补全trimStart():string消除字符串头部的空格trimEnd():string消除尾部的空格replaceAll(searchValue, replacement):string替换所有匹配字符串at(index)返回参数指定位置的字符演示案例：/** * includes()：返回布尔值，表示是否找到了参数字符串。 * startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。 * endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。 */ let s = 'Hello world!'; s.startsWith('Hello') // 是否以'Hello'开头： true s.endsWith('!') // 是否以'!'结尾：true s.includes('o') // 是否包含'o': true // 上面三个方法都支持第二个参数 // 参数2表示开始搜索的位置 s.startsWith('wo', 6) // 从下标6开始计算，是否以'wo'开头：true s.includes('He', 6) // 从下标6开始计算，是否包含'He'：false // 参数2表示结束位置 s.endsWith('Hello', 5) // 从第一个字符开始到下标为5的字符中，是否以'Hello'结尾：true /** * repeat(n)：返回一个新字符串，表示将原字符串重复n次。 */ 'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) // "" // 参数如果是小数，会被取整。 'na'.repeat(2.9) // "nana" // 如果repeat的参数是负数或者Infinity(无穷大)，会报错。 'na'.repeat(Infinity) // RangeError 'na'.repeat(-1) // RangeError /** * 如果某个字符串不够指定长度，会在头部或尾部补全。 * padStart()用于头部补全 * padEnd()用于尾部补全。 * 第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。 */ 'x'.padStart(5, 'ab') // 'ababx' 'x'.padStart(4, 'ab') // 'abax' 'x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba' // 如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串。 'xxx'…

JavaScript+jQuery+ES6入门到放弃之ECMAScript 6 基础
type: item
date: 2022-09-04T17:05:00+08:00
description: ECMAScript 6简介概述ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ECMAScript 和 JavaScript 的关系要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的。ES6 与 ECMAScript 2015 的关系2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。但是，因为这个版本引入的语法功能太多，而且制定过程当中，还有很多组织和个人不断提交新功能。事情很快就变得清楚了，不可能在一个版本里面包括所有将要引入的功能。常规的做法是先发布 6.0 版，过一段时间再发 6.1 版，然后是 6.2 版、6.3 版等等。但是，标准的制定者不想这样做。他们想让标准的升级成为常规流程：任何人在任何时候，都可以向标准委员会提交新语法的提案，然后标准委员会每个月开一次会，评估这些提案是否可以接受，需要哪些改进。如果经过多次会议以后，一个提案足够成熟了，就可以正式进入标准了。这就是说，标准的版本升级成为了一个不断滚动的流程，每个月都会有变动。标准委员会最终决定，标准在每年的 6 月份正式发布一次，作为当年的正式版本。接下来的时间，就在这个版本的基础上做改动，直到下一年的 6 月份，草案就自然变成了新一年的版本。这样一来，就不需要以前的版本号了，只要用年份标记就可以了。ES6 的第一个版本，就这样在 2015 年 6 月发布了，正式名称就是《ECMAScript 2015 标准》（简称 ES2015）。2016 年 6 月，小幅修订的《ECMAScript 2016 标准》（简称 ES2016）如期发布，这个版本可以看作是 ES6.1 版，因为两者的差异非常小（只新增了数组实例的 includes方法和指数运算符），基本上是同一个标准。根据计划，2017 年 6 月发布 ES2017 标准。因此，ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。let和const命令let命令概述： ES6 新增了 let命令，用来声明变量。它的用法类似于 var，但是所声明的变量，只在 let命令所在的代码块内有效。语法：let 变量名 = 值;[scode type="red" size="simple"]⚠️注意：在使用let命令声明变量时包含如下特性：let命令作用域只局限于当前代码块// 创建一个作用域 { var a = 10; let b = 1; } console.log(a); //输出：10 console.log(b); //Uncaught ReferenceError: b is not definedlet命令声明的变量作用域不会被提前（不会被预解析），暂时性死区console.log(a); //undefined var a = 10; console.log(b); //Uncaught ReferenceError: Cannot access 'b' before initialization (初始化前…

JavaScript+jQuery+ES6入门到放弃之面向对象
type: item
date: 2022-09-03T22:04:00+08:00
description: 对象概述： 在JavaScript中的定义是：几乎“所有事物”都是对象，对象是相关属性和方法的集合体。创建对象创建内置对象在JavaScript中我们可以使用 new关键字创建对象，例如创建一个Date对象：var date = new Date();、创建一个数组：var arr = new Array();，当然对于 Math对象所有属性和方法都是静态的，我们不需要使用 new关键字创建它，而是直接通过 Math关键字使用。创建自定义对象语法：var 对象名 = new Object();演示案例：/** * 在下方案例中，我们将创建对象并为其添加属性和方法 * 创建person对象 */ var person = new Object(); //给person对象添加属性 person.name = '张三'; person.age = 18; person.sex = '男生'; person.birthday = '2004-10-1'; //给person对象添加方法 person.sayHi = function () { console.log(`大家好,我是:${this.name},今年:${this.age}岁,我是${this.sex}生,我的出生日期是:${this.birthday}`) } //调用方法 person.sayHi(); //输出: 大家好,我是:张三,今年:18岁,我是男生,我的出生日期是:2004-10-1[scode type="yellow" size="simple"]在 sayHi方法中，我们使用 this.属性名用于获取person对应的属性，this是指当前person对象。[/scode]通过字面量创建对象【推荐】：/** * 在下方案例中，我们将创建对象并为其添加属性和方法 * 通过字面量赋值创建person对象 */ var person = { name: '张三', age: 18, sex: '男生', birthday: '2004-10-1', sayHi: function () { console.log(`大家好,我是:${this.name},今年:${this.age}岁,我是${this.sex}生,我的出生日期是:${this.birthday}`) } } //调用方法 person.sayHi(); //输出: 大家好,我是:张三,今年:18岁,我是男生生,我的出生日期是:2004-10-1简单工厂模式在上述案例中，无论是基于Object对象的方式还是使用字面量的方式创建对象，他们都有一个明显的缺陷：如果我们需要创建多个对象时，就需要产生大量的重复代码。🤔如何解决这个问题呢？很多开发者在软件开发过程中通常会将设计模式运用到项目中来。[font color="#1E90FF"]所谓的模式是指在某一个环境下对于某个问题的一种解决方案，在软件开发中，有许多优秀的模式被保留下来供后续人员学习使用，我们就称其为：设计模式。[/font]常见的设计模式有：工厂模式、单例模式、观察者模式、抽象工厂模式等等…工厂模式是最常用的一种用来创建对象的设计模式。通过封装不会暴露创建对象的具体逻辑，而是将逻辑封装在一个函数中，那么这个函数我们就可以称之为：工厂函数。工厂模式更具抽象程度可以分为以下三种：简单工厂模式工厂方法模式抽象工厂模式我们也将使用简单工厂模式来解决上面的问题。演示案例：/** * 创建一个工厂函数,用于创建person对象 * @param {*} name 姓名 * @param {number} age 年龄 * @param {*} sex 性别 * @param {*} birthday 出生日期 * @returns person对象 */ function createPerson(name, age, sex, birthday) { var person = { name: name, age: age, sex: sex, birthday: birthday, sayHi: function () { console.log(`大家好,我是:${this.name},今年:${this.age}岁,我是${this.sex}生,我的出生日期是:${this.birthday}`) } } return person; } //调用工厂函数获取不同的对象 var lisi = createPerson("李四", 16, "男", "2006-1-18"); var wangwu = createPerson("王五", 20, "男", "2002-2-10"); //调用person对象中的sayHi方法 lisi.s…

JavaScript+jQuery+ES6入门到放弃之DOM应用
type: item
date: 2022-09-02T12:08:00+08:00
description: 前言在上篇文章中我们讲解了节点与节点之间的关系，如何访问节点以及修改节点样式等操作，但是在实际开发中，这些操作远远不够，我们将会在这一篇文章中继续讲解DOM节点的操作：操作节点的属性、创建和插入节点、删除和替换节点。操作节点属性获取节点属性语法：节点元素.getAttribute("属性名")[scode type="yellow" size="simple"]🎈经验分享： 使用 getAttribute()方法获取属性值时，如果属性不存在，则返回null[/scode]设置节点属性语法：节点元素.setAttribute("属性名","属性值")演示案例： 案例执行效果:创建和插入节点创建节点:方法名称描述document.createElement(tagName)创建一个标签名为tagName的新元素节点element.cloneNode( deep )复制某个指定节点。参数deep为布尔类型。若为true，则同时复制当前节点的所有子节点。若为false，则仅复制当前节点。插入节点：方法方法描述A.appendChild(B)把B节点追加至A的子节点列表的末尾parentNode.insertBefore(A, B)把A节点插入到B节点之前演示案例： 案例演示效果：删除和替换节点方法名称描述 (node为父级节点)node.removeChild( child )删除指定的子节点node.replaceChild(newChild,oldChild)用其他节点替换指定的子节点演示案例： 案例演示效果：获取元素位置offset属性和client属性offset概述： offset指偏移，即这个元素在文档中占用的所有显示宽度常见属性：属性描述offsetLeft返回当前元素左边界到它上级元素的左边界的距离，只读属性offsetTop返回当前元素上边界到它上级元素的上边界的距离，只读属性offsetParent返回元素的偏移容器，即对最近的动态定位的包含元素的引用offsetHeight返回元素的高度offsetWidth返回元素的宽度演示案例（此案例在：BOM操作-小球滚动案例基础之上完成）： 青鸟技术栈 开始 案例展示效果：client概述： 用于获取指定元素的宽度与高度，与offsetHeight、offsetWidth功能一致，但是获取元素宽度与高度时，不会考虑元素的边框大小。常见属性：属性描述clientWidth返回元素的可见宽度clientHeight返回元素的可见高度scroll属性概述： scroll指滚动，用来描述网页整体与浏览器之间的关系。应用场景： 在浏览网页时，浏览器的高度与宽度是固定的，但是在我们日常浏览的网页中，页面的高度往往大于浏览器的高度。如果我们需要获取用户在这个页面滚动的距离，则我们可以使用：scrollTop属性以及scrollLeft属性在获取。属性解释：属性描述scrollTop返回匹配元素的滚动条的垂直位置scrollLeft返回匹配元素的滚动条的水平位置scrollHeight在没有滚动条的情况下，返回元素内容的总高度scrollWidth在没有滚动条的情况下，返回元素内容的总宽度语法：/*标准写法*/ document.documentElement.scrollTop document.documentElement.scrollLeft /*chrome浏览器*/ document.body.scrollTop document.body.scrollLeft /*兼容写法*/ var sTop = document.documentElement.scrollTop || document.body.scrollTop;案例演示： 青鸟技术栈 返回顶部 [scode type="blue" size="simple"]▶️ 开始学习下一章: JavaScript+Jquery+ES6入门到放弃之面向对象[/scode]

JavaScript+jQuery+ES6入门到放弃之DOM操作
type: item
date: 2022-09-01T20:16:00+08:00
description: DOM对象的定义DOM（Document Object Model）是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套属性、方法和事件。使用JavaScript操作DOM时分为三个方面：DOM Core（DOM核心操作）、HTML-DOM、CSS-DOM，我们通过Web标准可以动态的增加、删除、修改页面中的节点数据，使交互更加方便。节点与节点间的关系节点可以理解为HTML文档中每个标签或者元素。在HTML中节点是这样规定的：整个文档是一个文档节点。每个html标签是一个元素节点。包含在html元素中的文本时文本节点。每个html属性是一个属性节点。注释属于注释节点。节点与节点之间的关系大致能够分为以下5中：父节点（parent）：元素的上一层的那个节点就是该元素的父节点，每个元素都有一个父节点。子节点（children）：元素下面第一层的所有节点都是该元素的子节点，一个元素可以有 >=0个节点。同辈节点（sibling）：同辈节点也叫兄弟节点，拥有相同的父节点的节点互为同辈节点。祖辈节点（ancestor）：祖辈节点也叫祖先节点，元素的父节点以及父节点的父节点、一次类推都是该节点的先辈节点。后代节点（descendant）：同理，一个节点的子节点、子节点的子节点、以此类推，都是该节点的后代节点。文档节点DOM树展示：节点信息所有的节点都会包含节点的某些信息的属性，常见属性有：nodeName（节点名称）元素节点的标签名称属性节点的属性名称文本节点的nodeName永远是 #text文档节点的nodeName永远是 #documentnodeValue（节点值）文本节点包含的文本属性节点的属性值对文档节点和元素节点不可用nodeType（节点类型）节点类型nodeType值Element (元素)ELEMENT_NODE(1)Attr(属性)ATTRIBUTE_NODE(2)Text (文本)TEXT_NODE (3)Comment (注释)COMMENT_NODE (8)Document (文档)DOCUMENT_NODE(9)演示案例： 青鸟技术栈-博客 口袋刷题小程序 在线考试 联系我们 访问节点使用document.getElement系列方法访问指定节点:getElementById()：根据ID属性获取指定元素getElementsByName()：根据Name属性值获取一组元素getElementsByTagName()：根据标签名称获取一组元素getElementsByClassName()：根据类样式名称获取一组数据根据层次关系访问节点：🟧 节点属性属性名称描述parentNode返回节点的父节点childNodes返回子节点集合，childNodes[i]firstChild返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点lastChild返回节点的最后一个子节点nextSibling返回下一个节点previousSibling返回上一个节点案例演示： 关于我们 青鸟技术栈-博客 口袋刷题小程序 在线考试 联系我们 [scode type="red" size="simple"]⚠️注意： 在格式化文档所添加的换行、回车、缩进等字符构成文本节点，干扰节点访问，不推荐直接使用节点属性获取对应的节点信息。👍👍👍推荐使用element属性获取节点数据。[/scode]🟩 element属性属性名称描述parentElement获取当前元素的父级元素children获取当前元素的子元素，它返回一个 HTMLCollection 的集合firstElementChild返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点lastElementChild返回节点的最后一个子节点nextElementSibling下一个节点previousElementSibling上一个节点案例演示： 关于我们 青鸟技术栈-博客 口袋刷题小程序 在线考试 联系我们 [scode type="blue" size="simple"]🙌经验分享： 在实际开发中，为了保证浏览器的最佳兼容性，我们推荐使用如下书写形式var oNext = oParent.nextElementSibling || oParent.nextSibling; //获取下一个同辈节点 var oPre = oParent.previousElementSibling || oParent.previousSibling; //获取上一个同辈节点 var oFirst = oParent. firstElementChild || oParent.firstChild; //获取第一个子节点 var oLast = oParent.l…

JavaScript+jQuery+ES6入门到放弃之BOM操作
type: item
date: 2022-08-31T23:15:00+08:00
description: BOM对象的定义当我们在 Web 中使用 JavaScript 的时候，BOM对象(浏览器对象模型)起着至关重要的作用。BOM 提供了很多对象，用于访问浏览器的功能。熟悉了解 BOM 对象对我们 WEB 开发有着重要的帮助，下面是我的一些理解和总结。BOM是指浏览器对象模型，它是对一系列在浏览器环境中使用对象的统称，这些对象提供了访问浏览器的功能。在BOM对象中，window对象是最顶层对象，在浏览器环境中它是一个Global全局对象，其它对象（如：DOM对象）对是这个对象的属性（子对象）。BOM对象是与内容无关，主要用于管理浏览器窗口及窗口之间的通讯。下面是BOM对象的组成结构：BOM对象可以实现： 弹出新的浏览器窗口，移动、关闭浏览器窗口以及调整窗口的大小，页面的前进、后退等相关操作。Window对象的常用属性window对象： 表示浏览器中打开的窗口属性名称作用说明history有关客户访问过的URL的信息location有关当前 URL 的信息localStorage在浏览器中存储 key/value 对。没有过期时间。【了解更多：localStorage】sessionStorage在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。【了解更多：sessionStorage】screen只读属性，包含客户端显示屏幕的信息语法：设定值：window.属性名 = "属性值";获取值：var info = window.属性名;Window对象的常用方法方法名称作用说明 【💡：已学习】prompt()显示可提示用户输入的对话框 💡alert( )显示带有一个提示信息和一个确定按钮的警示框 💡confirm( )显示一个带有提示信息、确定和取消按钮的对话框 💡close( )关闭浏览器窗口open( )打开一个新的浏览器窗口，加载给定URL所指定的文档setTimeout( )在指定的毫秒数后调用函数或计算表达式setInterval( )按照指定的周期（以毫秒计）来调用函数或表达式clearTimeout( )用于停止执行setTimeout( )方法的函数代码clearInterval( )用于停止setInterval( )方法执行的函数代码演示案例：//关闭当前浏览窗体 window.close(); //打开一个新窗口 window.open("url地址","可选。指定target属性或窗口的名称","可选。参数字符串,一个逗号分隔的项目列表",replace) /** * 指定target属性或窗口的名称: * _blank → URL加载到一个新的窗口。默认 * _parent → URL加载到父框架 * _self → URL替换当前页面 * _top → URL替换任何可加载的框架集 * name → 窗口名称 * ------------------------------------- * 参数字符串支持以下值（在主流浏览器中，很多属性现已不再被支持）： * channelmode=yes|no|1|0 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器 * directories=yes|no|1|0 是否添加目录按钮。默认是肯定的。仅限IE浏览器 * fullscreen=yes|no|1|0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器 * height=pixels 窗口的高度。最小值为100 * width=pixels 窗口的宽度。最小值为100 * left=pixels 该窗口的左侧位置 * top=pixels 窗口顶部的位置。 * location=yes|no|1|0 是否显示地址字段。默认值是yes * menubar=yes|no|1|0 是否显示菜单栏。默认值是yes * resizable=yes|no|1|0 是否可调整窗口大小。默认值是yes * scrollbars=yes|no|1|0 是否显示滚动条。默认值是yes * status=yes|no|1|0 是否要添加一个状态栏。默认值是yes * titlebar=yes|no|1|0 是否显示标题栏，默认值是yes * toolbar=yes|no|1|0 是否显示浏览器工具栏。默认值是yes * ------------------------------------- * replace: boolean类型，可选。 * true：URL 替换浏览历史中的当前条目。 * false： URL 在浏览历史中创建新的条目 */ //其他方法的使用方式将会在后续的演示代码中体现如需了解更多window属性和方法，请…