当前位置: 首页 > news >正文

JavaWeb开发4

JS对象 Array

Array对象用于定义数组

  • var 变量名=new Array(元素列表);

  • var 变量名=[元素列表]

访问

  • arr[索引]=值;

注意:JS中数组相对于Java中集合,数组的长度是可变的,JS是弱类型,所以可以存储任意类型的数据

属性

length 设置或返回数组中元素的数量

方法

forEach() 遍历数组中每个有值的元素,并调用一次传入的函数

push() 将新元素添加到数组的末尾,并返回新的长度

splice() 从数组中删除元素

<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>焦点访谈</title>
​
</head>
<body>
​
</body>
​
<script>// var arr=new Array(1,2,3,4);// var arr =[1,2,3,4];// console.log(arr[0]);
​// // 长度可变,类型可变// var arr=new Array(1,2,3,4);// arr[10]=10;// arr[9]='a';// arr[8]=true;// console.log(arr);
​// var arr=[1,2,3,4];// for (let index=0;index<arr.length;index++){//     console.log(arr[index]);// }
​var arr=[1,2,3,4];// arr.forEach(function (e) {//     console.log(e);//// })
​// // 箭头函数// arr.forEach((e)=>{//     console.log(e);// })// arr.push(1);// console.log(arr);arr.splice(2,2);console.log(arr);
​
</script>
​
​
</html>

JS对象 String

创建方式

  • var 变量名=new String("XX");

  • var 变量名="XX";

属性

length 字符串长度

方法

charAt() 返回在指定位置的字符

indexOf() 检索字符串

trim() 去除字符串两边的空格

substring() 提取字符串中两个指定的索引号之间的字符

<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>焦点访谈</title>
​
</head>
<body>
​
</body>
​
<script>// var str=new String("SS");var str="  aa hjjg";console.log(str);
​console.log(str.length);
​console.log(str.charAt(1));
​console.log(str.indexOf("j"));
​var str1=str.trim();console.log(str1);
​// 含头不含尾console.log(str.substring(0,5));
​
</script>
​
​
</html>

JS对象 JSON

var 对象名={

属性名1:属性值1,

属性名2:属性值2,

函数名称:function(形参列表){}

};

调用格式

对象名.属性名;

对象名.函数名;

概念:通过JavaScript对象标记法书写的文本

由于其语法简单,层次结构鲜明,现多用于作为数据载体,在网络中进行数据传输

定义

var 变量名={"key":value1,"key":"value2"};

value数据类型为:

  • 数字,整型或浮点数

  • 字符串,在双引号中

  • 逻辑值,true/false

  • 数组,方括号中

  • 对象,花括号中

  • null

JSON字符串转为JS对象

var jsObject=JSON.parse(userStr);

JS对象转为JSON字符串

var jsonStr=JSON.stringify(jsObject);

<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>焦点访谈</title>
​
</head>
<body>
​
</body>
​
<script>// // 自定义对象// var user={//     name:"asd",//     age:10,//     sex:"male",//     // eat:function () {//     //     alert("eat");//     // }//     eat(){//         alert("eat");//     }// }// alert(user.name);// user.eat();
​// 定义JSONvar jsonstr='{"name":"jerry","age":18}';var obj=JSON.parse(jsonstr);alert(obj.name);alert(JSON.stringify(obj));
</script>
​
​
</html>

BOM

浏览器对象模型,允许JavaScript与浏览器对话,JavaScript将浏览器的各个组成部分封装为对象

组成

  • Window:浏览器窗口对象

  • Navigator:浏览器对象

  • Screen:屏幕对象

  • History:历史记录对象

  • Location:地址栏对象

Window

浏览器窗口对象

直接使用window,其中window可以省略

属性

  • history:对History对象的只读引用

  • location:用于窗口或框架的Location对象

  • navigator:对Navigator对象的只读引用

方法

  • alert():显示带有一段消息和一个确认按钮的警告框

  • confirm():显示带有一段消息以及确认按钮和取消按钮的对话框

  • setInterval():按照指定的周期(毫秒计)来调用函数或计算表达式

  • setTimeout():在指定的毫秒数后调用函数或计算表达式

Location

地址栏对象

获取

location.属性;

属性

href:设置或返回完整的url

<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>焦点访谈</title>
​
</head>
<body>
​
</body>
​
<script>// window.alert("hello");// alert("123");
​// var flag=confirm("are you ok?");// alert(flag);
​// var i=0;// setInterval(//     function () {//         i++;//         console.log(i);//     },2000// );
​// setTimeout(function () {//     alert("js");// },3000);
​alert(location.href);location.href="https://www.itcast.cn";
</script>
​
​
</html>

DOM

文档对象模型

将标记语言的各个组成部分封装为对应的对象

  • Document:整个文档对象

  • Element:元素对象

  • Attribute:属性对象

  • Text:文本对象

  • Comment:注释对象

JavaScript通过DOM,就能对HTML进行操作

  • 改变HTML元素的内容

  • 改变HTML元素的样式CSS

  • 对HTML DOM事件作出反应

  • 添加和删除HTML元素

HTML中的Element对象可以通过Document对象获取,而Document对象是通过window对象获取的

  • 根据id属性值获取,返回单个对象

    var h1=document.getElementById('h1');

  • 根据标签名称获取,返回对象数组

    var divs=document.getElementByTagName('div');

  • 根据name属性值获取,返回对象数组

    var divs=document.getElementByName('hobby');

  • 根据class属性值获取,返回对象数组

    var divs=document.getElementByClassName('cls');

    <!--文件类型为HTML-->
    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><title>焦点访谈</title>
    ​
    </head>
    <body><div class="cls">船只教育</div><div class="cls">黑马程序员</div>
    ​<input type="checkbox" name="hobby">电影<input type="checkbox" name="hobby">旅游<input type="checkbox" name="hobby">游戏
    </body>
    ​
    <script>// var divs=document.getElementsByTagName("div");// for(let i=0;i<divs.length;i++){//     alert(divs[i]);// }
    ​// var ins=document.getElementsByName("hobby");// for(let i=0;i<ins.length;i++){//     alert(ins[i]);// }
    ​// var ins=document.getElementsByClassName("cls");// for(let i=0;i<ins.length;i++){//     alert(ins[i]);// }
    ​var ins=document.getElementsByClassName("cls");var div1=ins[0];div1.innerHTML="666";
    </script>
    ​
    ​
    </html>

相关文章:

JavaWeb开发4

JS对象 Array Array对象用于定义数组 var 变量名new Array(元素列表)&#xff1b; var 变量名[元素列表] 访问 arr[索引]值&#xff1b; 注意&#xff1a;JS中数组相对于Java中集合&#xff0c;数组的长度是可变的&#xff0c;JS是弱类型&#xff0c;所以可以存储任意类型…...

Git中Update和Pull的区别

在本文中&#xff0c;我们将介绍Git中的两个操作——”Update”和”Pull”&#xff0c;并解释它们之间的区别。 1、“Update”的含义和用法 “Update”是Git中用于更新本地仓库和工作区的操作。它的作用是将远程仓库中的最新变更同步到本地。当我们执行”Update”操作时&…...

物理安全概述

目录 物理安全概念物理安全威胁物理安全威胁物理安全保护物理安全分析与防护 物理安全概念 我不需要通过高深的网络技术来攻击你&#xff0c;直接在物理层面把你干倒&#xff0c;不要小瞧&#xff0c;其实这种攻击是最致命的&#xff0c;你把我的电脑给入侵了&#xff0c;可能…...

引领智慧文旅新纪元,开启未来旅游新境界

融合创新科技&#xff0c;重塑旅游体验&#xff0c;智慧文旅项目定义旅游新未来 在全球化的浪潮中&#xff0c;旅游已成为连接世界的重要纽带。智慧文旅项目&#xff0c;不仅仅是一次技术的革新&#xff0c;更是对旅游行业未来发展的一次深刻思考。信鸥科技通过运用云计算、大数…...

Qt开发技巧(十七):新窗口控件用智能指针,将一些配置类变量封装起来,Qt窗体的Z序叠放,子窗体的释放,Qt中的事件发送,Qt的全局头文件

继续讲一些Qt开发中的技巧操作&#xff1a; 1.新窗口控件用智能指针 通过对Qt自带Examples的源码研究你会发现&#xff0c;越往后的版本&#xff0c;越喜欢用智能指针QScopedPointer来定义对象&#xff0c;这样有个好处就是用的地方只管new就行&#xff0c;一直new下去&#xf…...

5G 现网信令参数学习(1) - MIB

MIB消息中的参数 systemFrameNumber 000101B, subCarrierSpacingCommon scs30or120, ssb-SubcarrierOffset 6, dmrs-TypeA-Position pos2, pdcch-ConfigSIB1 { controlResourceSetZero 10, searchSpaceZero 4 }, cellBarred notBarred, intraFreqReselection allowed, sp…...

stm32单片机个人学习笔记9(TIM输入捕获)

前言 本篇文章属于stm32单片机&#xff08;以下简称单片机&#xff09;的学习笔记&#xff0c;来源于B站教学视频。下面是这位up主的视频链接。本文为个人学习笔记&#xff0c;只能做参考&#xff0c;细节方面建议观看视频&#xff0c;肯定受益匪浅。 STM32入门教程-2023版 细…...

ubuntu 安装haproxy

####安装##### sudo apt update sudo apt install haproxy sudo haproxy -v sudo systemctl status haproxy sudo cp /etc/haproxy/haproxy.cfg /etc/haproxy/haproxy.cfg-org####配置站点##### nano /etc/haproxy/haproxy.cfgfrontend www-httpbind *:5001mode httpdefault_ba…...

TF-A(Trusted Firmware-A)及其启动流程详解:以stm32MP1平台为例

0 参考资料 stm32官网 wiki https://www.trustedfirmware.org/ https://git.trustedfirmware.org/TF-A/trusted-firmware-a.git Trusted Firmware-A documentation ARM Power State Coordination Interface SMC Calling Convention (SMCCC) Arm System Control and Management…...

FL Studio 2024 发布,添加 FL Cloud 插件、AI 等功能

作为今年最受期待的音乐制作 DAW 更新之一&#xff0c;FL Studio 2024发布引入了新功能&#xff0c;同时采用了新的命名方式&#xff0c;从现在起将把发布年份纳入其名称中。DAW 的新增功能包括在 FL Cloud 中添加插件、AI 驱动的音乐创作工具和 FL Studio 的新效果。 FL Clou…...

webpack实战 | 医保服务平台信息查询 | 国密SM4 | SM2 | 逆向分析

请求头参数加密&#xff0c;请求参数encData用的是SM4加密&#xff0c;signData用的是SM2加密&#xff0c;响应数据用的是SM4解密 请求头不要也没关系&#xff0c;直接搜signData&#xff0c;都打上断点&#xff0c;点击分页 signData的核心代码 o.doSignature就是4d09模块…...

脉冲扩散模型

论文 Spiking Diffusion Models 主要内容是提出了“脉冲扩散模型&#xff08;Spiking Diffusion Models, SDMs&#xff09;”&#xff0c;一种基于脉冲神经网络&#xff08;SNN&#xff09;的生成模型&#xff0c;旨在解决传统人工神经网络&#xff08;ANN&#xff09;在图像生…...

blender分离含有多个动作的模型,并导出含有材质的fbx模型

问题背景 笔者是模型小白&#xff0c;需要将网络上下载的fbx模型中的动作&#xff0c;分离成单独的动作模型&#xff0c;经过3天摸爬滚打&#xff0c;先后使用了blender&#xff0c;3d max&#xff0c;unity&#xff0c;最终用blender完成&#xff0c;期间参考了众多网络上大佬…...

胤娲科技:AI大模型的隐秘战争——当“智能”成为双刃剑

当AI不再是单纯的助手 想象一下&#xff0c;你正在训练一个AI模型&#xff0c;希望它能成为你的得力助手&#xff0c;帮你解决各种复杂问题。然而&#xff0c;有一天&#xff0c;你突然发现&#xff0c;这个模型不仅没有如你所愿&#xff0c; 反而悄悄地在代码库中埋下了“炸弹…...

RK平台 GPIO序号转换软件

RK平台 GPIO序号转换软件 下载地址 https://download.csdn.net/download/ruidongren/89900151 链接: link...

UDP协议和TCP协议

UDP协议&#xff1a; 是一种无连接的、简单的传输层通信协议&#xff0c;它在IP协议&#xff08;网络层&#xff09;之上提供服务。 特点&#xff1a; 无连接&#xff1a;在数据传输前&#xff0c;发送方和接收方之间不需要建立连接&#xff0c;可以直接发送数据。 简单&…...

算法题总结(十三)—— 动态规划(上)

动态规划 动态规划理论基础 什么是动态规划 动态规划&#xff0c;英文&#xff1a;Dynamic Programming&#xff0c;简称DP&#xff0c;如果某一问题有很多重叠子问题&#xff0c;使用动态规划是最有效的。 所以动态规划中每一个状态一定是由上一个状态推导出来的&#xff…...

Leetcode - 周赛419

目录 一&#xff0c;3318. 计算子数组的 x-sum I 二&#xff0c;3319. 第 K 大的完美二叉子树的大小 三&#xff0c;3320. 统计能获胜的出招序列数 四&#xff0c;3321. 计算子数组的 x-sum II 一&#xff0c;3318. 计算子数组的 x-sum I 本题数据范围较小&#xff0c;可以…...

C# 的两个list怎么判断是否存在交集

要判断两个 List<string>&#xff08;dateList 和 LocalDate&#xff09;是否有交集&#xff0c;可以使用 LINQ&#xff08;Language Integrated Query&#xff09;来简化这个过程。以下三种方法来判断两个列表之间是否有交集。 方法 1: 使用 LINQ 的 Any 方法 using S…...

【Python】基础语法

1. 变量 1.1. 变量的创建 变量的定义规则&#xff1a; 变量只能由数字&#xff0c;字母&#xff0c;下划线构成&#xff0c;不能包含特殊符号数字不能作为变量开头变量名不能和 Python 的关键字重复Python 的变量是区分大小写的 除了上述的硬性规则外&#xff0c;还建议变量…...

scala 类的继承

继承的定义 idea实例 语法 重写 重写&#xff1a;在子类中重新定义父类的同名方法 idea实例 多态 多态&#xff1a;传入的对象不同&#xff0c;调用的方法的效果就不同&#xff01; 原理&#xff1a;参数是父类类型 idea实例 构造器...

穷举vs暴搜vs深搜vs回溯vs剪枝(一)

文章目录 全排列子集找出所有子集的异或总和再求和全排列 II电话号码的字母组合 全排列 题目&#xff1a;全排列 思路 通过深度优先搜索的方式&#xff0c;不断枚举每个数在当前位置的可能性&#xff0c;然后回溯到上一个状态&#xff0c;直到枚举完所有可能性得到正确的结果 r…...

枚举的应用

1.枚举的语法特点 枚举是jdk1.5提供的一个特性 枚举是一个特殊的类&#xff0c;这个类的对象的数量是有限的。在定义枚举类的同时就已经确定了类对象及类对象的数量。 枚举使用enum关键字定义 class A{} enum A{} 在枚举类中的第一行&#xff0c;就需要提供枚举类的对象&a…...

读数据工程之道:设计和构建健壮的数据系统14源系统

1. 源系统中的数据生成 1.1. 数据工程师的工作是从源系统获取数据&#xff0c;对其进行处理&#xff0c;使其有助于为下游用例提供服务 1.2. 数据工程师的角色将在很大程度上转向理解数据源和目的地之间的相互作用 1.3. 数据工程的最基本的数据管道任务——将数据从A移动到B…...

基于SpringBoot+Vue的厨艺交流系统的设计与实现(源码+定制开发)厨艺知识与美食交流系统开发、在线厨艺分享与交流平台开发、智能厨艺交流与分享系统开发

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…...

STMicroelectronics 意法半导体芯片选型表

意法半导体作为全球知名的半导体厂商&#xff0c;其产品广泛应用于各个领域&#xff0c;从消费电子到工业控制&#xff0c;从汽车电子到通信设备&#xff0c;都能看到意法半导体芯片的身影。在电子硬件设计领域&#xff0c;芯片的选型至关重要。亿配芯城&#xff08;ICgoodFind…...

TCP/IP 寻址

TCP/IP 寻址 概述 TCP/IP&#xff08;传输控制协议/互联网协议&#xff09;是一组用于数据网络的通信协议。它们定义了数据如何在网络上从一个设备传输到另一个设备。在TCP/IP网络中&#xff0c;每个设备都有一个唯一的地址&#xff0c;称为IP地址&#xff0c;用于标识网络上…...

深入探索 APKTool:Android 应用的反编译与重打包工具

文章目录 一、反编译 APK1.1 解压 APK1.2 DEX 文件转换1.3 资源解码 二、重新打包 APK2.1 资源重新编译2.2 smali 转换为 DEX2.3 打包 APK2.4 签名 APK 三、技术原理3.1 Smali/Baksmali3.1.1 DEX 文件格式3.1.2 Smali 语法3.1.2.1 指令3.1.2.2 寄存器3.1.2.3 操作码3.1.2.4 注释…...

软件测试与软件缺陷的基础知识

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…...

【JPCS独立出版,EI检索稳定】第三届能源互联网及电力系统国际学术会议(ICEIPS 2024)

第三届能源互联网及电力系统国际学术会议&#xff08;ICEIPS 2024&#xff09; 2024 3rd International Conference on Energy Internet and Power Systems ICEIPS 2024已成功申请JPCS - Journal of Physics: Conference Series (ISSN:1742-6596) ICEIPS 2024独立出版&…...