JavaScript学习笔记

本篇文章是本人在学习JS时所记录的笔记,记录的知识点比较基础,但是较为详细。

使用

在html中有两种方式可以使用javascript

1.外引

<script src="...js"></script>

调用js文件时调用的是拷贝体

2.内嵌

<script>..........
</script>

外引和内嵌同时存在时内嵌的会失效

注意:标签内的元素

src:引入js

defer:延迟js文件加载

script中的属性中的 “ - ” 全部去掉,并且 “ - ” 后的首字母换成大写

例如:background-color变为backgroundColor margin-left变为marginLeft

定义数据

script属于弱类型语言,不区分数据类型,都用var定义,语法与PHP,python,shell相似

强类型语言:C, C++, java, C#,GO(速度极快)

弱类型语言:javascript, PHP, python, shell(速度极慢)

定义字符串用” “ 例:var a4 = "adaf";

js中的变量类型分为两大类,基本类型和复合类型

基本类型

可以使用typeof来检查变量类型,typeof(a)

1.数值类型

var a = 10.7
var b = 12

2.字符串类型

var a = "asd" var b = "a"

3.布尔类型

var a = true var b = false

4.undefined类型

只有一个值

当定义一个变量但未赋值时就叫undefined

var d = undefined

5.null类型

空对象

复合类型

1.数组:

定义数组用中括号 例:var a3 =[1,2,3,4];

将字符串转化为整数类型用parseInt 例:a6 = parseInt(a6)

定义数组中可以不区分类型存储,,甚至可以数组中存放数组

例:

var a7 = [2, 3, [3,5,6], [ 3,2,[2, 6,[ "faga"],6],9,"fjs"], "ijpj" ];

arr.push()向数组中添加数据

与java中数组的区别

1).数组长度可变2.没有越界3.不用同类型

2).数组长度可变2.没有越界3.不用同类型

2.对象类型:

格式:{ “ 名字 ”:对应的对象 ,“ 名字 ”:对应的对象 ,........“ 名字 ”:对应的对象 }

例:

var b1 = { "name" :"张三","id":12345,"年龄":16};

对象可以复杂一些,比如放数组或是另一组对象

例:
 

var b2 = { "name": " 王五","house" : ["北二环", "东三环","西六环"],"friend" : [ { "name":"小明", "age": 9}, { "name":"黎明", "age": 8}]};

使用方式:( b2.name b2.house[1] b2.friend[1].name )

对象还可以放方法,

例:

var b2 = { "name": " 王五","house" : ["北二环", "东三环","西六环"],method1 : function(a,b){return a + b;}} ;

调用方式: var x2 = b2.method1(4,7);

对象类数组的访问:如b2["name"]

对象类数组的访问方式的重要性和必要性:可以放置变量如b2[age]

3.函数类型

定义函数

(1).命名函数function test(a,b),可以被引用,var b =function test(a,b),引用后调用时用b(a,b)

(2).匿名函数function(a,b),也可以被引用,var b =function(a,b),调用时用b(a,b)

使用函数

1.函数名加括号 test(5,6)

2.函数整体作为值来使用

var b = test

3.函数作为返回值来使用

var b=test(5,6)

js中函数无法重载,与最下面的保持一致

方法中入参的不一定是变量,也可能是另一个方法 例 :

function m3(a,b,c){a(10,20);b(c,6);
}
m3(function(p1,p2){ console.info(p1+p2)},function(p1,p2){ console.info(p1-p2)},30
);
m3(function(p1,p2){ console.info(p1 * p2) },function(p1,p2){ p1 (p2 + 9) },//这里是方法中的方法继续带入方法,p1带入的是c,也就是function(k),p1(p2+9)相当于c(p2+9),也就是c(6+9),输出30function(k){ console.info(2 * k) }
);

script例子:控制台中输出了x1与x2

       <script>function f(x1,x2){return x1 + x2;}function f2(a,b,c){return a + b - c;}var x1 = f(23,99)var x2 = f2( x1, 44, 33 - x1 );console.info(x1);console.info(x2);</script>       

字符串拼接用加号连接即可,例:

var x1 = "www";
var x2 = "mmm";
var x3 = 67;
var x4 = x1 + x2 + x3; //  wwwmmm67

在for循环中根据i的不同生成不同的iid(字符串拼接)

生成div_1到div_81:''

注意:变量不能被双引号引住

function m1(){var x = document.getElementById("div1");var html ='';for(var i = 0;i < 81; i++){if(i%2 == 1){html +='<div id="div_' + i + '" class="sty2"></div>';}else{html +='<div id="div_' + i + '" class="sty3"></div>';}}x.innerHTML = html;}            

dom增删改查

1.以ID来查找元素:getElementById()

var x =document.getElementBtId("zjd")

当id重复时只会获取符合条件的第一个

2.以class来查找元素:getElementsByClassName()

获取到符合条件的所有元素,拿到的是一个数组

3.以元素名称来查找元素:getElementsByTagName()

var x =document.getElementsByTagName("div")

4.以选择器来查找元素:querySelector()

只会获取符合条件的第一个元素

var x =document.querySelector(".zjd")

5.以选择器来查找元素:querySelectorAll()

会获取符合条件的所有元素

根据关系查找

parentNode/parentElement:获取当前节点的父节点

例:

var x =document.querySelector(".zjd");console.log(x.parentNode)

childNodes:获取当前节点的所有孩子节点(元素节点和文本节点,可以通过nodeType来过滤)

children:获取当前节点的所有孩子节点(只获取元素节点)

previousSibling: 获取当前节点的上一个节点,注意文本节点的存在

previousElementSibling: 获取当前节点的上一个元素节点

nextSibling:获取当前节点的下一个节点,注意文本节点的存在

nextElementSibling:获取当前节点的下一个元素节点

firstChild:获取当前节点的第一个孩子节点,注意文本节点的存在

firstElemnetChild:获取当前节点的第一个元素孩子节点

lastChild:获取当前节点的最后一个孩子节点,注意文本节点的存在

lastElemnetChild:获取当前节点的最后一个元素孩子节点

console.log()打印元素

conslole.dir()打印对象元素

js有事件传播机制,点击内部元素后也会触发外部外部元素上带有的事件

想要点击子级元素时只触发子级元素的方法而不触发父级元素的方法可以在子级元素方法中加入一个参数,在函数内加上 参数名.stopPropagation()

op_list[i].onclick = function(e) {e.stopPropagation()
}

事件监听器addEventListener("事件“,方法,true/false)true为捕获(从外向里),默认为false为冒泡(从里向外)

修改|获取

修改内容:innerHTML(非表单控件,包含html元素) innerText(非表单控件,只包含纯文本) value(表单控件)

var x =document.querySelector(".container")
x.innerHTML = "zjd"//修改
alert(x.innerHTML)//获取

修改文本框中的内容必须用value

修改属性

获取的元素.元素的属性=" "或者 setAttribute("更改的属性”,“更改后的值”)

获取属性:getAttribute()

var input =document.querySelector(".container")
input.type="button"//将该元素的type属性改为button
input.setAttribute("class","6666") //将该元素的class属性改为6666
alert(input.getAttribute("zjd"))//获取该元素中zjd属性

修改样式:style className

style.background

style.color等等

input.className="zjd" 修改class属性

增加

步骤一:创建或者复制元素

创建:createElement()

var div = document.createElement("div")
div.class="zjd"

复制元素 cloneNode(boolean)true是深复制,false是浅4复制

步骤二:添加到已有元素中

添加:appendChild()

父节点.appendChild(新节点)

var x =document.querySelector(".container")
x.appendChild(div)

插入:insertBefore()

父节点.insertBefore(新节点,哪个节点之前)

替换元素:replaceChild()

父节点.replace(新节点,旧节点)

删除

removeChild()

可以这样写

要删除的元素.parentNode.removeChild(要删除的元素)

定时器

周期定时器

var timer = setInterval(函数|字符串[函数名()],间隔[毫秒】)

例:

setInterval(fun,1000)或setInterval("fun()",1000)或setInterval(function(){},1000)

每隔一段时间执行一次

清除定时器 clearInterval(timer)

延迟定时器

var timer = setTimeout(函数,间隔[毫秒】)

一段时间后执行一次,执行后不再执行,只执行一次

清除定时器 cleartimeout(timer)

动画效果

下面是初学时使用js实现的一些小的动画效果

document.getElementById("id" )在整个页面中通过id触发结点 例:var x = document.getElementById("dd1");

setTimeout 计时器 例:setTimeout("m1( )", 3000);3000ms后触发m1方法

方法中可以改变body中元素的属性从而形成动画效果

例:字符串拼接与计时器的结合的方法:利用递归使图形每过20ms变化一次,从而形成动画效果

//对id为dd1的块的动画效果
function m1(a){var  x = document.getElementById("dd1");x.style.width = (100 + a )%500 + "px";//拼接结果:"100px"  "101px" "102px" ....x.style.backgroundColor = "#a00";x.style.transform = "rotate( " + (30+a) + "deg)";//"rotate(30deg)" "rotate(31deg)"...setTimeout("m1(" + (a+1) +  ")",20); //setTimeout("m1(1)",20); setTimeout("m1(2)",20)...
} //利用递归使图形每过20ms变化一次,从而形成动画效果 

例:选择样式1选项时添加10个小方块在第一个方块元素中(利用了for循环)

<!DOCTYPE HTML>
<html><head><meta charset = "utf-8"><style>.sty1{  background-color:#aaa;height:200px;width:200px; margin-top:20px ; margin-left : 10px ;float:left}</style></head><body><div id="div1" class="sty1" ></div><div id="div2" class="sty1" ></div><div id="div3" class="sty1" ></div> <select id = "s1" onchange="m1()"><option value="flag0">请选择样式</option><option value="flag1">样式1</option><option value="flag2">样式2</option><option value="flag3">样式3</option><option value="flag4">样式4</option><option value="flag5">样式5</option></select>         </body><script >function m1(){var x = document.getElementById("s1");if(x.value == "flag1"){var y = document.getElementById("div1");var html = " ";for(var i=0; i<10; i++){html += '<div style="height:40px;width:40px;background-color:#2ac;float:left;margin-left:10px;margin-top:10px;"></div>';}y.innerHTML = html;}}            </script></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/781899.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【BlossomRPC】服务端与客户端请求Handler

文章目录 客户端Handler服务端Handler RPC项目 配置中心项目 网关项目 客户端Handler 承接上文&#xff0c;客户端的Handler其实就比较简单了&#xff0c;因为客户端作为接收数据的时候&#xff0c;我们只需要从上文提到的Cache中通过reqId的方式拿到Future/Promise对象&…

接口自动化框架搭建(一):框架介绍

1&#xff0c;背景目的 最近在搭建接口自动化框架&#xff0c;打算写个专栏&#xff0c;方便自己查找和他人学习。有不正确的地方&#xff0c;欢迎指正。 2&#xff0c;技术框架 pythonpytestalllurejenkins多进程钉钉消息通知 3&#xff0c;版本 推荐方法&#xff1a;创建…

【数据结构与算法】排序

概述 最容易想到的排序&#xff0c;从旧数组中找到一个最小的&#xff0c;不断放入新的数组中。&#xff08;不使用数组的slice等方法是因为会使效率变得更慢&#xff09; let arr [3, 5, 6, 7, 1, 2, 4, 9, 8]function getMin(arr) {if (arr null || arr.length 0) retur…

Oracle VM(虚拟机)性能监控工具

Oracle VM是一个独立的虚拟化环境&#xff0c;由 Oracle 提供支持和设计&#xff0c;旨在为运行虚拟机提供轻量级、安全的基于服务器的平台。Oracle VM 能够在受支持的虚拟化环境中部署操作系统和应用软件&#xff0c;Oracle VM 将用户和管理员与底层虚拟化技术隔离开来&#x…

cmake编译faiss源码记录

文章目录 简介下载源码安装环境编译 简介 Faiss&#xff08;Facebook AI Similarity Search&#xff09;是一个由Facebook AI研发并开源的&#xff0c;用于大规模向量检索的库。其核心算法采用了聚类、压缩和量化等技术&#xff0c;以优化最近邻搜索的效率和准确性。Faiss提供…

ctfshow xxe web373-378

web373 libxml_disable_entity_loader(false)&#xff1a;这行代码用于启用实体加载器&#xff0c;允许加载外部实体。 $xmlfile file_get_contents(php://input)&#xff1a;从输入流中读取XML数据并存储在 $xmlfile 变量中。 $dom->loadXML($xmlfile, LIBXML_NOENT |…

异常信息泄露 应用程序错误泄露 原理以及修复方法

漏洞名称&#xff1a;未自定义统一错误页面导致信息泄露&#xff0c;抛出异常信息泄露&#xff0c;错误详情信息泄漏&#xff0c;AWVS漏洞名称如下&#xff1a; Application error message Error message on page ASP.NET error message 漏洞描述&#xff1a;攻击者可通过构造…

FebHost:意大利.IT域名一张意大利网络名片

.IT域名是意大利的国家顶级域名&#xff0c;对于意大利企业和个人而言,拥有一个属于自己的”.IT”域名无疑是件令人自豪的事。这个被誉为意大利互联网标志性代表的域名,不仅隐含着浓厚的意大利文化特色,还为使用者在当地市场的推广铺平了道路。 对于那些希望在意大利市场建立强…

微信开发者工具接入短剧播放器插件

接入短剧播放插线 申请添加插件基础接入app.jsonapp.jsplayerManager.js数据加密跳转到播放器页面运行出错示例小程序页面页面使用的方法小程序输入框绑定申请添加插件 添加插件:登录微信开发者平台 ——> 设置 ——> 第三方设置 ——> 插件管理 ——> 搜索“短剧…

基于SpringBoot + Vue实现的养老院管理系统设计与实现+毕业论文(12000字)+搭建视频

介绍 养老院管理系统是一款运用软件开发技术设计实现的应用系统&#xff0c;在信息处理上可以达到快速的目的&#xff0c;不管是针对数据添加&#xff0c;数据维护和统计&#xff0c;以及数据查询等处理要求&#xff0c;养老院管理系统都可以轻松应对。 系统包含登录、注册、…

蓝桥杯每日不知道多少题之更小的数

题目链接&#xff1a;更小的数 - 洛谷 P9232 - Virtual Judge (vjudge.net) 解题思路&#xff1a;这个题看数据量是可以过n方的算法的&#xff0c;首先考虑dp&#xff0c;那么则是两层for循环&#xff0c;即枚举所有情况&#xff0c;那么怎么进行状态转移呢&#xff0c;当 s[i…

Linux 系统 docker搭建LNMP环境

1、安装nginx docker pull nginx (默认安装的是最新版本) 2、运行nginx docker run --name nginx -p 80:80 -d nginx:latest 备注&#xff1a;--name nginx 表示容器名为 nginx -d 表示后台运行 -p 80:80 表示把本地80端口绑定到Nginx服务端的 80端口 nginx:lates…

【YOLOv5改进系列(9)】高效涨点----使用CAM(上下文增强模块)替换掉yolov5中的SPPF模块

文章目录 &#x1f680;&#x1f680;&#x1f680;前言一、1️⃣ CAM模块详细介绍二、2️⃣CAM模块的三种融合模式三、3️⃣如何添加CAM模块3.1 &#x1f393; 添加CAM模块代码3.2 ✨添加yolov5s_CAM.yaml文件3.3 ⭐️修改yolo.py文相关文件 四、4️⃣实验结果4.1 &#x1f39…

【阅读笔记】《你的第一本博弈论》

博弈论入门书&#xff0c;很多例子方便理解 副标题: 用博弈论解决工作和生活的难题 作者&#xff1a;欧俊 笔记 CH1 博弈论&#xff1a;最高级的思维和生存策略 博弈的分类&#xff1a; • 负和博弈 • 零和博弈 • 正和博弈 博弈论带给我们的启示&#xff1a; • 要会选择 …

Leetcode 82. 删除排序链表中的重复元素 II

给定一个已排序的链表的头 head &#xff0c; 删除原始链表中所有重复数字的节点&#xff0c;只留下不同的数字 。返回 已排序的链表 。 输入&#xff1a;head [1,2,3,3,4,4,5] 输出&#xff1a;[1,2,5] 提示&#xff1a; 链表中节点数目在范围 [0, 300] 内 -100 < Node.…

一些实用的功能函数

1. 【算法】求两个数中&#xff0c;bit位不同的个数&#xff08;在计网那道题中用过&#xff09; 解法&#xff1a;首先把两位数异或&#xff0c;得到的结果&#xff0c;通过自身跟自身-1相与&#xff0c;直到等于0为止 代码如下&#xff1a; int calculateNotSam(int a,int …

uniapp怎么使用接口返回的iconfont图标

uniapp怎么使用接口返回的iconfont图标 首先在你的项目中添加该图标&#xff0c;名称要对应 实际应用 item.ICONFONT_NAME“tools”; item.ICONFONT_COLOR“FA5151”; <view class"iconfont" :class"icon-item.ICONFONT_NAME" :color"item.ICON…

ORACLE 存中文

笔记 oracle 存中文要用 nvarchar2 &#xff0c;涉及长度校验 NVARCHAR2和VARCHAR2的区别&#xff0c;从使用角度来看区别在于&#xff1a; NVARCHAR2在计算长度时和字符集相关&#xff0c; 例如数据库是中文字符集时&#xff0c;以长度10为例&#xff0c;则 NVARCHAR2(10)可…

Kubernetes Pod深度解析:构建可靠微服务的秘密武器(上)

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Kubernetes航线图&#xff1a;从船长到K8s掌舵者》 &#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、Kubernetes概述 2、Pod概述 二、Po…

输出单链表倒数第K个结点值

方法一&#xff1a; 两次遍历链表。第一次遍历&#xff0c;计算链表长度&#xff0c;然后计算链表倒数第m个结点的正数位置k&#xff0c;判断位置是否合法&#xff0c;如果不合法&#xff0c;输出NOT FOUND&#xff0c;否则&#xff0c;进行第二次遍历链表&#xff0c;查找链表…