二手交易网站建设内容策划,wordpress恢复密码,做网站生意不赚钱6,网络建设规范和网络维护管理规范属于上篇我们学习了#xff0c;一些基础语法和函数#xff0c;现在我们学习下篇#xff0c;主要包括,对象和事件。而对象又包括#xff0c;数组Arrays#xff0c;String字符串#xff0c;BOM#xff0c;DOM等
JS对象
Arrays数组 数组是一种特殊的对象#xff0c;用于存储… 上篇我们学习了一些基础语法和函数现在我们学习下篇主要包括,对象和事件。而对象又包括数组ArraysString字符串BOMDOM等
JS对象
Arrays数组 数组是一种特殊的对象用于存储有序的值集合。了解数组的创建方式、遍历方式、属性和方法是掌握JavaScript的重要部分。以下是关于JavaScript数组的详细介绍。
数组的创建 JavaScript中可以使用多种方式创建数组最常见的方法有 数组字面量 这是创建数组的最简单和推荐的方式。通过中括号[]可以直接初始化数组。
const fruits [苹果, 香蕉, 橘子];
2. Array构造函数 可以使用new Array()构造函数来创建数组虽然不推荐这种方法但它仍然有效。
const fruits new Array(苹果, 香蕉, 橘子);注意如果只传入一个数字作为参数则会创建一个指定长度的空数组。
const arrayLength new Array(5); // 创建一个长度为5的空数组3. 使用Array.of() Array.of()方法可以创建一个新的数组实例其参数是数组的元素。
const numbers Array.of(1, 2, 3, 4, 5);数组的遍历方式
遍历有好几种方法我这里介绍常用的两种。 for循环 使用经典的for循环可以通过索引遍历数组。
const fruits [苹果, 香蕉, 橘子];
for (let i 0; i fruits.length; i) {console.log(fruits[i]);
}2.forEach()方法 forEach()是一个数组方法可以对数组中的每个元素执行提供的函数。
fruits.forEach(function(fruit) {console.log(fruit);
});数组的属性和方法 作为后端开发者我们不需要了解那么多方法和属性简单了解即可这里只介绍常用的属性和方法 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJS 对象-Arrays/title
/head
bodyscript//创建数组var arr new Array(1, 2, 3, 4, 5);for (let i 0; i array.length; i) {console.log(array[i]); }var arr [1, 2, 3, 4, 5];arr[10] 50; //即使没有10这个索引也不会报错因为长度可以动态变化//访问数组元素console.log(arr[0]); //1console.log(arr[1]); //2console.log(arr[10]);//50log(arr[9]); //没有定义的索引元素是undefined//数组可以存储不同类型的值arr[8] hello;//为8索引位置添加字符串元素/* JS 中的数组与Java中的集合类似可以存储不同类型的数据可以动态添加和删除元素可以对数组进行排序等操作。 *///数组的遍历for (let i 0; i arr.length; i) {console.log(arr[i]); //1 2 3 4 5 hello}//forEach方法 arr.forEach(function(e) {console.log(e); //1 2 3 4 5 hello});/* forEach方法可以对数组中的每一个元素进行操作, 如果是undefined,会跳过不会打印。for循环会遍历所有元素包括undefined。*///forEach方法,ES6引入了箭头函数和Java中lambda表达式类似可以简化代码。arr.forEach(e console.log(e)); //1 2 3 4 5 hello//数组的属性和方法arr.push(6,7,8); //在数组末尾添加元素arr.splice(2, 2); //在索引为2的位置开始删除2个元素arr.pop(); //删除数组末尾的元素arr.shift(); //删除数组第一个元素arr.unshift(0); //在数组开头添加元素arr.sort(); //对数组进行排序arr.reverse(); //对数组进行反转arr.join(-); //将数组元素用-连接成字符串arr.slice(1, 4); //从索引1到索引3的元素组成一个新数组arr.map(function(e) {return e * 2; //对数组元素进行映射}); //返回一个新数组元素是原数组元素的两倍arr.filter(function(e) {return e 3; //返回一个新数组元素是原数组元素大于3的元素}); //返回一个新数组元素是原数组元素大于3的元素arr.reduce(function(pre, cur) {return pre cur; //对数组元素进行求和}); //返回一个值是数组元素的求和arr.indexOf(3); //返回元素3的索引如果不存在返回-1arr.lastIndexOf(3); //返回元素3的最后一个索引如果不存在返回-1arr.includes(3); //判断元素3是否存在存在返回true不存在返回false/script/body
/html
String字符串
字符串创建
在JavaScript中可以通过多种方式创建字符串
1.使用字符串字面量 最常见的方式是使用单引号或双引号括起来的字符。
var str1 Hello, world!;
var str2 Hello, world!;2.使用String构造函数 使用new String()来创建字符串对象尽管这种方式不常用因为它会生成一个字符串对象而不是一个简单的字符串。
var str3 new String(Hello, world!);注意使用构造函数创建的字符串对象和字面量字符串在某些情况下表现会不同因此一般推荐使用字面量。
字符串的属性
length 字符串的length属性返回字符串中的字符数包括空格和标点符号。
console.log(str1.length); // 输出 13字符串的方法 JavaScript中的字符串对象提供了许多有用的方法有Java基础的同学会觉得非常简单因为大部分方法都是一摸一样。以下是一些常用的方法
1.indexOf() 返回指定字符或子字符串在字符串中第一次出现的位置未找到则返回-1。
console.log(str1.indexOf(o)); // 输出 42.charAt() 返回字符串中指定位置的字符。
console.log(str1.charAt(0)); // 输出 H3.substring() 返回字符串的一部分。第一个参数为开始索引第二个参数为结束索引。
console.log(str1.substring(0, 5)); // 输出 Hello4.replace() 替换字符串中匹配的部分返回替换后的新字符串。
console.log(str1.replace(world, JavaScript)); // 输出 Hello, JavaScript!5.trim() 去掉字符串两端的空格。
var str4 Hello, world! ;
console.log(str4.trim()); // 输出 Hello, world!!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJS对象-string/title
/head
bodyscript// 字符串创建var str1 hello string;var str2 new String(hello string);//属性console.log(str1.length); // 12console.log(str2.length); // 12//方法console.log(str1.toUpperCase()); // HELLO STRINGconsole.log(str2.toUpperCase()); // HELLO STRINGconsole.log(str1.toLowerCase()); // hello stringconsole.log(str2.toLowerCase()); // hello stringconsole.log(str1.indexOf(l)); // 2console.log(str2.indexOf(l)); // 2console.log(str1.lastIndexOf(l)); // 9console.log(str2.lastIndexOf(l)); // 9console.log(str1.charAt(2)); // lconsole.log(str2.charAt(2)); // lconsole.log(str1.substring(2, 5)); // lloconsole.log(str2.substring(2, 5)); // lloconsole.log(str1.slice(2, 5)); // lloconsole.log(str2.slice(2, 5)); // lloconsole.log(str1.replace(l, L)); // heLLo stringconsole.log(str2.replace(l, L)); // heLLo stringconsole.log(str1.trim()); // hello stringconsole.log(str2.trim()); // hello stringconsole.log(str1.split( )); // [hello, string]console.log(str2.split( )); // [hello, string]console.log(str1.concat( world)); // hello string worldconsole.log(str2.concat( world)); // hello string worldconsole.log(str1.localeCompare(hello)); // 1console.log(str2.localeCompare(hello)); // 1console.log(str1.match(/l/g)); // [l, l, l, l, l, l, l, l, l, l]console.log(str2.match(/l/g)); // [l, l, l]console.log(str1.search(l)); // 2console.log(str2.search(l)); // 2console.log(str1.replace(/l/g, L)); // heLLo stRingconsole.log(str2.replace(/l/g, L)); // heLLo stRingconsole.log(str1.localeCompare(hello)); // 1console.log(str2.localeCompare(hello)); // 1console.log(str1.localeCompare(hello, en, { sensitivity: base })); // 1console.log(str2.localeCompare(hello, en, { sensitivity: base })); // 1console.log(str1.localeCompare(hello, en, { sensitivity: accent })); // 1console.log(str2.localeCompare(hello, en, { sensitivity: accent })); // 1console.log(str1.localeCompare(hello, en, { sensitivity: case })); // 1console.log(str2.localeCompare(hello, en, { sensitivity: case })); // 1/script/body
/html
JSON对象
自定义对象的创建 在 JavaScript 中我们可以使用对象字面量的语法来创建自定义对象。以下是一个简单的示例
var person {name: John,age: 30,city: New York,eat: function() {alert(干饭);}
};在这个示例中我们创建了一个名为 person 的对象它有三个属性name、age 和 city以及一个方法eat。这个 eat 方法在被调用时会弹出一个消息框显示“干饭”。
调用自定义对象的方法
我们可以通过对象的名称加上点操作符来调用方法。例如调用 eat 方法和输出 name 属性的值。
person.eat(); // 调用 eat 方法
alert(person.name); // 输出 name 属性的值这段代码将弹出“干饭”的提示框并且接着显示当前对象的 name 属性。
JSON 对象定义 JSON 是一种轻量级的数据交换格式它是基于 JavaScript 对象表示法的。我们可以将 JSON 看作是字符串形式的 JavaScript 对象。以下是两种定义 JSON 对象的方式 字符串形式的 JSON 对象
首先我们可以使用字符串来定义 JSON 对象
var jsonObj {name: John, age: 30, city: New York}; // 字符串形式的 JSON 对象这种方式使用了 JSON 格式的字符串但这并不是一个真正的对象而只是一个字符串
JavaScript 对象的表示 我们也可以直接使用 JavaScript 对象的形式来定义一个 JSON 对象
var jsonObj {name: John,age: 30,city: New York
};在这里jsonObj 是一个有效的 JavaScript 对象。
JSON 对象与字符串JSON对象的转换
转换为字符串形式的JSON
var jsonStr JSON.stringify(jsonObj);转换为JSON对象
var newObj JSON.parse(jsonStr);两者区别 JSONJavaScript Object Notation是一种轻量级的数据交换格式常用于在不同的编程语言之间传输和存储数据。JSON有两种基本形式JSON对象和JSON字符串这两者之间存在显著的区别。 JSON对象JSON对象是一个数据结构可以通过“对象.属性”的方式来访问其值。在JavaScript中JSON对象是一个键值对集合。JSON对象直接可以被程序使用它是适合代码处理的原始数据类型。 JSON字符串JSON字符串在存储和传输数据时使用它提供了一种将对象序列化为文本的方式以便在网络上传输或者存储到文件中。 BOM BOM浏览器对象模型是JavaScript的一个重要组成部分使得开发者能够通过脚本控制浏览器窗口。与DOM文档对象模型不同BOM并不直接涉及HTML或CSS而是与浏览器本身的行为及功能相关。 作为一个Java程序员我们只需重点关注这两个Window和Location
Window /* 重点了解 window 对象 和 Location 对象 *///获取Window.alert(Hello BOM!);alert(Hello BOM!); //方法confirm(你确定要删除吗);//返回true或false//定时器var i 0;setInterval(function(){console.log(定时器执行i);i;},1000 //每隔1秒执行一次 ); //周期性的执行函数setTimeout(function(){alert(JS);},2000 //2秒后执行一次 ); //延迟执行函数
Location //Location对象//获取当前页面的URLvar url window.location.href;console.log(url);location.href https://www.baidu.com; //跳转到指定页面
DOM DOM是文档对象模型的缩写它将整个HTML或XML文档视为一个树形结构。每一个元素、属性和文本都成为这个结构中的一个节点。这样我们就能通过JavaScript来访问和修改这些节点从而更新网页的内容和样式而不需要重新加载整个页面。 获取DOM元素
在JavaScript中我们可以使用多种方法来获取DOM元素。以下是一些常用的方法 改变元素的内容和样式
例如我们可以通过DOM改变某个元素的颜色和背景
element.style.color red;
element.style.backgroundColor yellow;访问和修改元素的属性
我们可以访问元素的属性如复选框的状态
var checkboxes document.getElementsByName(my_hobby);
for (var i 0; i checkboxes.length; i) {if (checkboxes[i].checked) {alert(checkboxes[i].value); // 显示被选中的爱好}
}DOM不仅是网页的结构框架也是我们与网页交互的重要通道。学习如何有效使用DOM可以帮助我们开发出更动态、互动丰富的网页。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJS对象-DOM/title
/head
bodyimg src../web_html/images/20240604hlag8k.webp alt brdiv idbro_catBro_cat/divdiv class001 JS /divdiv class002 DOM /divinput typecheckbox namemy_hobby 电影input typecheckbox namemy_hobby 音乐input typecheckbox namemy_hobby 旅行script/* DOM 文档对象模型 */// 获取元素// 通过id获取元素var bro_cat document.getElementById(bro_cat);// 通过标签名获取元素var dvs document.getElementsByTagName(div);for (let i 0; i array.length; i) {alert(dvs[i]); }//通过name属性获取元素var hobby document.getElementsByName(my_hobby);for (let i 0; i hobby.length; i) {alert(hobby[i].value);}// 通过类名获取元素var js document.getElementsByClassName(001)[0];var dom document.getElementsByClassName(002)[0];// 改变元素的样式bro_cat.style.color red;js.style.backgroundColor yellow;dom.style.fontSize 20px;// 获取元素的属性var input_hobby document.getElementsByName(my_hobby);for (var i 0; i input_hobby.length; i) {if (input_hobby[i].checked) {alert(input_hobby[i].value);}}/script/body
/html
事件
事件监听 事件绑定 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJS事件/title
/head
bodyinput typebutton idbtn1 value按钮1 onclickon() input typebutton idbtn2 value按钮2script//事件绑定//通过标签属性绑定事件function on() {console.log(按钮1被点击了);}//通过DOM对象绑定事件var btn2 document.getElementById(btn2);btn2.onclick function() {console.log(按钮2被点击了);}/script/body
/html
常见事件 总结 在现代前端开发中JavaScriptJS已经成为了构建动态网页和应用的重要工具。掌握其基本语法和概念是第一步包括变量声明、数据类型、控制结构、函数和DOM操作等。随着深入学习理解其原型继承、闭包和异步编程的机制将有助于编写出高效、可维护的代码。 我写的有很多东西都没有涉及全面想深入了解的可以参考下面官方手册学习……
参考手册
