当前位置：前端开发 >  前端笔记——javaScript(3)

前端笔记——javaScript(3)

♪飙♪ 2024-07-23 10:03:07 阅读 58

一、javaScript

他是运行在浏览器端的脚本语言，简称js。它能够让网页和用户实现交互功能。

1.使用方式

<code><input type="button" onclick="alert('ok!')">code>

<script type="text/javascript">code>

alert("ok!")

</script>

<script type="text/javascript" src="js/index.js"></script>code>

2.变量

 变量调用：

// 单行注释 windows: ctrl + /

/* 多行注释 windows: ctrl + shift + /

*/

var num = 1;

var count = 0;

var a = 1,b = 2,c = 3;

基本数据类型：

数据类型 说明
number 数字类型
string 字符串类型
boolean 布尔类型
undefined undefined类型，表示未定义；变量未初始化，值为undefined
null object类型，特殊null，表示空对象

<code>var a = 1;

var b = "bb";

var c = True;

var d;

var e = null;

复合数据类型：

数据类型 说明
object 如：JavaScript对象

<code>var a = {name:"张三",age:18}

// 获取变量类型

alert(typeof(a))

// 获取变量name属性

alert(a.name)

//输出在浏览器控制台

console.log(a)

//弹窗输出

alert(a)

规范：

1.区分大小写

2.第一个字符必须是“_”或“”$"或“字母”，其他字母还可以包括"数字"。

3.函数

函数调用： 

function function_name(argument) {

// body...

}

示例：

function fun(argument) {

var aaa = 1; // 局部变量,只能在函数内部使用

aaa++; // 等价于python中 aaa += 1

aaa += 1;

var abc = argument + aaa;

return abc

}

var ccc = "aaa:"; // 全局变量

var abc = fun(ccc);

alert(abc); // 结果：aaa:3 js里字符串可以与数字直接相加

4.条件语句

语法： 

if...else if...else

或

if...else

示例：

function fun(argument) {

var aaa = 1;

aaa++;

aaa += 1;

if (aaa < 2) {

var abc = argument + aaa;

}else if (aaa > 1){

var abc = argument +"1aaa"+ aaa;

}else{

var abc = argument +"2aaa"+ aaa;

}

return abc

}

var ccc = "aaa:";

var abc = fun(ccc);

alert(abc); // 结果：aaa:1aaa3

5.运算符

比较运算符：

比较运算符 说明 例，如n=1
== 等于 n=="1",True
=== 全等（值和类型） n==="1",flase
!= 不等于 n!=2,true
> 大于 n>-1,true
< 小于 n<2,true
>= 大于或等于 n>=1,true
<= 小于或等于 n<=1,true

逻辑运算符：

逻辑运算符 说明 例，如x=1,y=10
&& and (x<2 && y<11),True
|| or (x<1 || y<11),Ture
! not !(x<1 || y<10),Ture

6.内置对象

W3C官方说明文档快捷： 

Window对象：http://www.w3school.com.cn/htmldom/dom_obj_window.asp

Document对象：http://www.w3school.com.cn/htmldom/dom_obj_document.asp 

6.1 document

document节点详细：JavaScript核心之Document对象详解（document属性，方法）_javascript document-CSDN博客

document对象是window对象的一个属性，是显示于窗口内的一个文档。而window对象则是一个顶层对象，它不是另一个对象的属性。document可以理解为文档，就是你的网页，而window是你的窗口，就是你的浏览器包含的。

<code>document节点是文档的根节点，每张网页都有自己的document节点。window.document属性就指向这个节点。

6.1.2 document节点属性
节点属性 说明
doctype

对于HTML文档来说，document对象一般有两个子节点。第一个子节点是document.doctype，它是一个对象，包含了当前文档类型（Document Type Declaration，简写DTD）信息。对于HTML5文档，该节点就代表<!DOCTYPE html>。如果网页没有声明DTD，该属性返回null。
documentElement document.documentElement属性，表示当前文档的根节点（root）。它通常是document节点的第二个子节点，紧跟在<code>document.doctype节点后面。
defaultView defaultView属性，在浏览器中返回document对象所在的window对象，否则返回null。
body body属性返回当前文档的body或frameset节点，如果不存在这样的节点，就返回null。这个属性是可写的，如果对其写入一个新的节点，会导致原有的所有子节点被移除。
head head属性返回当前文档的head节点。如果当前文档有多个head，则返回第一个。
activeElement activeElement属性返回当前文档中获得焦点的那个元素。用户通常可以使用tab键移动焦点，使用空格键激活焦点，比如如果焦点在一个链接上，此时按一下空格键，就会跳转到该链接。
... ...
documentURI,URL documentURI属性和URL属性都返回当前文档的网址。不同之处是documentURI属性是所有文档都具备的，URL属性则是HTML文档独有的。
domain domain属性返回当前文档的域名。如果无法获取域名，该属性返回null。
lastModified lastModified属性返回当前文档最后修改的时间戳，格式为字符串。如果要比较日期，需要用Date.parse()方法转成时间戳格式进行比较。
location location属性返回一个只读对象，提供了当前文档的URL信息。与window.location属性等价。如果只是单纯地获取当前网址，建议使用document.URL。
referrer referrer属性返回一个字符串，表示前文档的访问来源，如果是无法获取来源或是用户直接键入网址，而不是从其他网页点击，则返回一个空字符串。
title title属性返回当前文档的标题，该属性是可写的。
characterSet characterSet属性返回渲染当前文档的字符集，比如UTF-8、ISO-8859-1。
... ...
readyState readyState属性返回当前文档的状态，共有三种可能的值，加载HTML代码阶段（尚未完成解析）是“loading”，加载外部资源阶段是“interactive”，全部加载完成是“complete”。
designModed designMode属性控制当前document是否可编辑。通常会打开iframe的designMode属性，将其变为一个所见即所得的编辑器。
... ...
implementation implementation属性返回一个对象，用来甄别当前环境部署了哪些DOM相关接口。implementation属性的hasFeature方法，可以判断当前环境是否部署了特定版本的特定接口。
compatMode compatMode属性返回浏览器处理文档的模式，可能的值为BackCompat（向后兼容模式）和 CSS1Compat（严格模式）。
... ...
anchors anchors属性返回网页中所有的a节点元素。注意，只有指定了name属性的a元素，才会包含在anchors属性之中。
embeds embeds属性返回网页中所有嵌入对象，即embed标签，返回的格式为类似数组的对象（nodeList）。
forms forms属性返回页面中所有表单
images images属性返回页面所有图片元素（即img标签）
links links属性返回当前文档所有的链接元素（即a标签，或者说具有href属性的元素）。
scripts scripts属性返回当前文档的所有脚本（即script标签）。
styleSheets styleSheets属性返回一个类似数组的对象，包含了当前网页的所有样式表。该属性提供了样式表操作的接口。然后，每张样式表对象的cssRules属性，返回该样式表的所有CSS规则。这又方便了操作具体的CSS规则。
... ...

示例详细请转移：JavaScript核心之Document对象详解（document属性，方法）_javascript document-CSDN博客

6.1.3 document对象方法
对象方法 说明
open() document.open()方法用于新建一个文档，供write方法写入内容。它实际上等于清除当前文档，重新写入内容。不要将此方法与window.open()混淆，后者用来打开一个新窗口，与当前文档无关。
close() document.close方法用于关闭open方法所新建的文档。一旦关闭，write方法就无法写入内容了。如果再调用write方法，就等同于又调用open方法，新建一个文档，再写入内容。
write() document.write方法用于向当前文档写入内容。只要当前文档还没有用close方法关闭，它所写入的内容就会追加在已有内容的后面。如果页面已经渲染完成（DOMContentLoaded事件发生之后），再调用write方法，它会先调用open方法，擦除当前文档所有内容，然后再写入。如果在页面渲染过程中调用write方法，并不会调用open方法。（可以理解成，open方法已调用，但close方法还未调用。）
writeln() document.writeln方法与write方法完全一致，除了会在输出内容的尾部添加换行符。

注意:writeln方法添加的是ASCII码的换行符，渲染成HTML网页时不起作用。
hasFocus() document.hasFocus方法返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。
... ...
querySelector() <code>querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
getElementById() getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。getElementById方法与querySelector方法都能获取元素节点，不同之处是querySelector方法的参数使用CSS选择器语法，getElementById方法的参数是HTML标签元素的id属性。
querySelectorAll() querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。该方法也支持复杂的CSS选择器。与querySelector方法一样，querySelectorAll方法无法选中CSS伪元素。
getElementByClassName()

getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
getElementByTagName()

getElementsByTagName方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
getElementsByName()

getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。

注意:在IE浏览器使用这个方法，会将没有name属性、但有同名id属性的元素也返回，所以name和id属性最好设为不一样的值。
elementFrompoint() elementFromPoint方法返回位于页面指定位置的元素。
... ...
createElement() createElement方法用来生成HTML元素节点。createElement方法的参数为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。
createTextNode() createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。
createAttribute() createAttribute方法生成一个新的属性对象节点，并返回它。
createDocumentFragment()

createDocumentFragment方法生成一个DocumentFragment对象
createEvent() createEvent方法生成一个事件对象，该对象可以被element.dispatchEvent方法使用，触发指定事件。
createNodeIterator() createNodeIterator方法返回一个DOM的子节点遍历器。
createTreeWalKer() createTreeWalker方法返回一个DOM的子树遍历器。它与createNodeIterator方法的区别在于，后者只遍历子节点，而它遍历整个子树。
... ...
adoptNode() adoptNode方法将某个节点，从其原来所在的文档移除，插入当前文档，并返回插入后的新节点。
importNode() importNode（）方法用于创造一个外部节点的拷贝，然后插入当前文档。它的第一个参数是外部节点，第二个参数是一个布尔值，表示对外部节点是深拷贝还是浅拷贝，默认是浅拷贝（false）。虽然第二个参数是可选的，但是建议总是保留这个参数，并设为true。
... ...

decument属性及方法参考于该文(有示例),详细请点击：JavaScript核心之Document对象详解（document属性，方法）_javascript document-CSDN博客

6.2 window

在JavaScript中，一个浏览器窗口就是一个window对象。一个窗口就是一个window对象，这个窗口里面的HTML文档就是一个document对象，document对象是window对象的子对象。

6.2.1 window节点属性
子对象 说明
document 文档对象用于操作页面元素
location 地址对象用于操作URL地址
navigator 浏览器对象用于获取浏览器版本信息
history 历史对象用于操作浏览器历史
screen 屏幕对象用于操作屏幕的高度和宽度
6.2.2 window对象方法
方法 说明
close() window.close()关闭当前窗口
open() window.open(url)打开url窗口
window.onload window.onload = fun 在页面加载完毕后，执行脚本代码fun
history.go() history.go(num) num值可以自定义 正值返回之后的页面 负值返回之前的页面
history.back() 返回之前的页面；等价于history.go(-1)
history.forward()  返回之后的页面；等价于history.go(1) 
location.reload() 刷新页面
location.herf 元素地址，可以修改
screen.width 显示屏宽
screen.height 显示屏高
screen.availWidth 可用宽
screen.availHeight 可用高
navigator.appName 检测并查看当前浏览器名字
navigator.appVersion 检测并查看当前版本
document.getElementById() 通过Id获取元素
... ...

javascript内部函数补充：

函数 说明
confirm() confirm(text)弹出框（text）
setTimeout()

setTimeout(code,time)  定时器

code：函数名 or 代码      time：单位（ms/次），
clearTimeout(s) s:定时器名字；销毁定时器
setInterval() setInterval(code,time)   重复执行code
clearInterval(s) s:对象名字；取消重复执行
replace() 替换页面
assign() 在历史页面新增一条记录
... ...

 window示例及来源点击链接：JavaScript中的window对象详解_javascript window-CSDN博客

6.3 global

Global Object （全局对象, global对象）

6.3.1 global属性
全局属性 说明
accesskey 为当前元素提供一个生成键盘快捷键的提示。该属性由一个空格分隔的字符列表组成。浏览器应该使用计算机键盘布局上存在的第一个字符。
autocapitalize 控制用户的文本输入是否和如何自动大写，它可以有的值:(off or none 不应用大写) (on or sentences 句子首大写其余小写)(words 单词首大写其余小写)(characters 应用大写)
autofocus 表示一个元素将在页面加载时自动聚焦，或者在其所属的 <dialog> 显示时被聚焦。该属性是一个布尔值，初始化为 false。
class 一个以空格分隔的元素的类名列表，它允许 CSS 和 Javascript 通过类选择器或 DOM 方法 Document.getElementsByClassName() 来选择和访问特定的元素。
contenteditable 一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会调整元素的部件以允许编辑。它可以有的值（True or "" 表明元素可被编辑）（Flase 表明元素不可被编辑）
data-* 形成一类属性，称为自定义数据属性，允许在 HTML 和其 DOM 表示之间交换专有信息，可由脚本使用。所有这些自定义数据属性都可以通过所属元素的 HTMLElement 接口来访问。通过 HTMLElement.dataset 属性可以访问它们。
dir 一个指示元素中文本方向的枚举属性。它的取值:(ltr 左到右)（rtr 右到左）（auto 由用户代理决定方向。它在解析元素中字符时会运用一个基本算法，直到发现一个具有强方向性的字符，然后将这一方向应用于整个元素。）
draggable 一种枚举属性，指示是否可以使用 Drag and Drop API 拖动元素。它的取值：（ture 元素可被拖动）（Flase 元素不可被拖动）
enterkeyhint 提示在虚拟键盘上为回车键呈现什么动作标签（或图标）。
exportparts 用于将隐藏部分从一个嵌套的影子树（shadow tree）中过渡性地导出到一个包含该树的常规树（light tree）中。
hidden 一个枚举的属性，表示该元素还没有，或者不再相关。例如，它可以用来隐藏页面中的元素，这些元素在登录过程完成之前不能使用。浏览器不会渲染这样的元素。这个属性不能用来隐藏可以合法显示的内容。
id 定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用 CSS）时标识元素。
inert 一个布尔值，使浏览器忽略该元素的用户输入事件。在有点击事件的情况下很有用。
inputmode 向浏览器提供有关在编辑此元素或其内容时要使用的虚拟键盘配置类型的提示。主要用于 <input> 元素，但在 contenteditable 模式下可用于任何元素。
is 允许指定标准 HTML 元素的行为如同已注册的自定义内置元素一样（有关更多详细信息，请参阅使用自定义元素）。
itemid 项的唯一全局标识符。
itemprop 用于向项添加属性。每个 HTML 元素都可以指定一个 <code>itemprop 属性，其中 itemprop 由一个名称和值对组成。
itemref 只有不是具有 itemscope 属性的元素的后代，它的属性才可以与使用 itemref 项目相关联。它提供了元素 ID 列表（而不是 itemid）以及文档中其他位置的其他属性。
itemscope itemscope（通常）与 itemtype 一起使用，以指定包含在关于特定项目代码块中的 HTML。itemscope 创建数据项并定义与之关联的 itemtype 的范围。itemtype 是描述项及其属性上下文的词汇表（例如 schema.org）的有效 URL。
itemtype 指定将用于在数据结构中定义 itemprops（项属性）的词汇表的 URL。itemscope 用于设置数据结构中按 itemtype 设置的词汇表的生效范围。
lang 帮助定义元素的语言：不可编辑元素所在的语言，或者应该由用户编写的可编辑元素的语言。该属性包含一个“语言标记”（由用连字符分隔的“语言子标记”组成），格式在 ​​​​​​​RFC 5646: Tags for Identifying Languages（也称为 BCP 47）中定义。xml:lang 优先于它。
nonce 一个加密的 nonce（“只使用一次的数字”），可以被内容安全策略使用，以确定是否允许进行给定的获取。
part 元素的部件名称的空格分隔列表。Part 名称允许 CSS 通过 ::part 伪元素选择和设置影子树中的特定元素。
popover 用于将某个元素指定为弹出式元素（详见 Popover API）。弹出式元素通过 display: none 隐藏，直到通过调用/控制元素（即 <button> 或 <input type="button">code> 带有 popovertarget 属性）或 HTMLElement.showPopover() 调用而打开。
role Role 定义了内容的语义，允许屏幕阅读器和其他工具以符合用户对该类型对象的期望的方式来展示和支持与该对象的互动。roles 以 role="role_type"code> 的形式添加到 HTML 元素中，其中 role_type 是 ARIA 规范中的一个角色名称。
slot 将影子 DOM 影子树中的一个空槽分配给一个元素：具有 slot 属性的元素被分配给由 <slot> 元素创建的空槽，其 name 属性的值与 slot 属性的值匹配。
spellcheck

枚举属性，定义是否可以检查元素是否存在拼写错误。它的值可以有：（true or ""）(Flase)
style 含有要应用于元素的 CSS 样式声明。请注意，建议在单独的文件中定义样式。该属性和 <style> 元素主要用于快速添加样式，例如用于测试目的。
tabindex 整数属性，指示元素是否可以获取输入焦点（可聚焦），是否应该参与顺序键盘导航，如果是，则表示哪个位置。它的值可以有：（负值）（0）（正值）
title 包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户，但不是必须的。
translate 枚举属性，用于指定在页面本地化时是否转换元素的属性值及其 Text 节点子节点的值，或者是否保持它们不变。它的值可以有：（"" or yes）(no)
virtualkeyboardpolicy 一个枚举属性，用于控制屏幕上的虚拟键盘行为，如平板电脑、手机或其他设备上的硬件键盘可能无法使用的元素，也使用 contenteditable 属性。它的值可以有：（auto or ""）(manual)
... ...

全局属性来源详细示例点击：全局属性 - HTML（超文本标记语言） | MDN (mozilla.org)

7.数组

7.1 创建数组

var a = new Array(1,1,1,2);

var b = [1,2,[1,1,3],4,"hello"];

7.2 数组操作

函数 说明 例，如alst=[1,2,3,[4,5],"hello"]
alst.length 获取数组长度 alst.length    //6
alst[  ] 根据下标取值 alst[0]  //1
alst.push() 从末尾添加数据 alst.push(5)  //alst=[1,2,3,[4,5],"hello",5]
alst.pop() 从末尾删除数据 alst.pop()  //alst=[1,2,3,[4,5],"hello"]
alst.splice(start,num,elementN)

根据下标添加和删除元素

start:开始删除的索引；num:删除数组元素的个数；element:在start位置要插入的新元素(1~N)

 alst.splice(0,2,"a") //alst=["a",3,[4,5],"hello"]
... ...

8.循环语句

8.1 for 循环

<code>var b = [1,2,[1,1,2],4,"hello"];

for (var i = b.length - 1; i >= 0; i--) {

console.log(b[i])

}

8.2 while 循环

var b = [1,2,[1,1,2],4,"hello"];

var index = 0;

while (index < b.length) {

console.log(b[index])

index++

}

8.3 do-whlie 循环

var b = [1,2,[1,1,2],4,"hello"];

var index = 10;

do {

// 不管条件成不成立，都会执行一次

console.log("b[10]:",b[index]);

index ++;

} while (index < b.length)

上一篇： 【学生毕业设计】基于web学生信息管理系统网站的设计与实现(13个页面)

下一篇： [保姆级教程]uniapp自定义导航栏

本文标签

前端笔记——javaScript(3)   

声明

本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。

相关文章

阅读排行

热门文章