js

最新推荐文章于 2023-02-01 00:00:12 发布
最新推荐文章于 2023-02-01 00:00:12 发布
阅读量217 收藏 2
点赞数 1
文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45150979/article/details/114576247
版权

js的引入

在head或者body中引入(但通常放在head中,这样不会显得杂乱),如图:
在这里插入图片描述
或建立js文件用

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

引入

js的使用

1. 注释

单行注释://
多行注释/**/

2. var

变量声明:var(但现在let基本代替了var,想知道let,const,var区别的请自行查阅)
代码:
在这里插入图片描述
效果:
在这里插入图片描述

3. 运算符

算数运算符

在这里插入图片描述

赋值运算符

在这里插入图片描述

比较运算符

==值相等即可
===值与类型都要等
!=与!==亦是

在这里插入图片描述

比较运算符

在这里插入图片描述

条件运算符

在这里插入图片描述

位运算符

在这里插入图片描述

4. 条件语句

if(){
}else if(){
}else{
}

switch(){
case 1:
	break;
case 2:
	break;
...
default://条件不满足任何case时
	break;
}

5. 循环语句

for循环

        let i=[0,1,2,3,4,5,6,7,8,9]
        for(let j = 0; j<10; j++){
            document.write(i[j]);
        }

for/in循环

 		let i=[0,1,2,3,4,5,6,7,8,9]
        for(let j in i){
            document.write(i[j]);
        }

while循环和do/while循环

while(true){
...//执行
}

do{
...
}while(true){
...
}

区别:while先判断再执行
do/while先执行一次再判断

6. 跳转语句

break和continue语句
break是跳出循环,continue是跳出此次循环进行下次循环

7. 函数

函数定义与调用

函数定义

function必须小写,函数名称和调用函数时大小写敏感

function 函数名(){
代码块
}
函数调用

1.在script中调用:

    <script>
    function demo(a,b){
        let sum = a+b;
        alert(sum);
    }
    demo(1,2);
    </script>
  1. 在html中调用
    <script>
    function demo(a,b){
        let sum = a+b;
        alert(sum);
    }
    </script>
<button onclick="demo(10,20)">显示</button>

8. 异常和捕获

try/catch:

        try {
            alert(str);//异常代码块
        }catch (err){
            alert(err);//错误信息处理
        }

throw创建一个自定义错误:

<input type="text" id="test">
<input value="显示" type="button" onclick="demo()">
    <script>
    function demo(){
        try {
            let e = document.getElementById("test").value;
            if(e==""){
                throw "未进行输入";
            }
        }catch (err){
            alert(err);
        }
    }
    </script>

9. 事件

常见事件:
在这里插入图片描述
DOM0级事件会被覆盖掉
DOM2级事件不会被覆盖
在这里插入图片描述
在这里插入图片描述

事件对象

在这里插入图片描述

<div id="div">
    <button id="but">现</button>
    <a id="a_id" href="www.baidu.com">跳转</a>
</div>
<script>
let a = document.getElementById("but");
let b = document.getElementById("div")
let c = document.getElementById("a_id")
a.addEventListener("click",showType);
b.addEventListener("click",showDiv);
c.addEventListener("click",stopA)
function showType(e){
    alert(e.type);
    e.stopPropagation();//阻止事件冒泡
}
function showDiv(){
    alert("div");
}
function stopA(e){
    e.preventDefault();
    // e.stopPropagation();//阻止事件冒泡
}
</script>

10. DOM操作html

document.write

用于输出
document.write里可以放置类似于

等标签,如图:
在这里插入图片描述
效果图:
在这里插入图片描述

依照各属性查找

getElementById和getElementsByClassName可以由标签的id和class名获取内容
getElementsByTagName可以利用标签名查找元素（相同元素中的第一个）
在这里插入图片描述

<p name="p_name" class="p_class">hello</p>
<p name="p_name" class="p_class">hello</p>
<p name="p_name" class="p_class">hello</p>
<p name="p_name" class="p_class">hello</p>
<p name="p_name" class="p_class">hello</p>
<p name="p_name" class="p_class">hello</p>
 <script>
    let a =document.getElementsByName("p_name");
    alert("name有"+a.length);
    a[0].innerHTML ="my name is zfh";
    let b = document.getElementsByTagName("p");
    alert("标签有"+b.length);
    b[2].innerHTML = "my name is zfh";
    let c = document.getElementsByClassName("p_class");
    alert("class有"+c.length)
    c[4].innerHTML = "my name is zfh";
 </script>

innerHTML

innerHTML可以改变获取id标签中的内容,如图:
在这里插入图片描述
在这里插入图片描述

attribute

getAttribute和setAttribute
获取属性和设置属性

<a id="a_id" href="www.baidu.com" title="去百度">百度</a>
<input value="跳" type="button" onclick="demo()">
<script>
    function demo(){
        let a = document.getElementById("a_id");
        a.setAttribute("title", "设置的属性");
        let b = a.getAttribute("title");
        alert(b)
    }
</script>

访问子节点

格式问题，显示为7

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    let a = document.getElementsByTagName("ul");
    let b = a[0].childNodes;
    alert(b.length)
</script>

访问父节点

<div>
    <p id="p_id">
        test
    </p>
</div>
<script>
    let a = document.getElementById("p_id");
    let b = a.parentNode.nodeName;
    alert(b);
</script>

创造节点

<script>
let a = document.body;
let input = document.createElement("input");
input.type = "button";
input.value = "按钮";
a.appendChild(input);//添加子节点
</script>

插入节点

<div id="div">
    <p id="p_id">
        这是原先的
    </p>
</div>
<script>
let a = document.getElementById("div");
let b = document.getElementById("p_id");
let c = document.createElement("p");
c.innerHTML = "插入的";
a.insertBefore(c,b);
</script>

删除节点

<div id="div">这是div
    <p id="p_id">
        这是p
    </p>
</div>
<script>
let a = document.getElementById("div");
// let b = document.getElementById("p_id");
a.removeChild(a.childNodes[1]);
</script>

网页尺寸

<script>
function getSize(){
    let width = document.documentElement.offsetWidth||document.body.offsetWidth;//  ||是为了兼容
    let height = document.documentElement.offsetHeight||document.body.offsetHeight;//  ||是为了兼容
    alert(width+"*"+height);
    let w = document.documentElement.scrollWidth;
    let h = document.documentElement.scrollHeight;
    alert(w+"*"+h);
    let wi = document.documentElement.clientWidth;
    let he = document.documentElement.clientHeight;
    alert(wi+"*"+he);
}
getSize();
</script>

11. DOM操作css

<div id="div_id" class="div_class">
    这是一个test
</div>
<input value="跳" type="button" onclick="demo()">
    <script>
        function demo(){
            document.getElementById("div_id").style.background = "pink"
        }
    </script>

background可以替换成其他属性

.div_class{
    height: 100px;
    width: 100px;
    background-color: aqua;
}

DOM EventListener

添加：addEventListener（）
移除：removeEventListener（）

<button id="but">现</button>
<script>
let a = document.getElementById("but");
a.addEventListener("click", hello);
a.addEventListener("click", world);
a.removeEventListener("click", hello);
function hello(){
    alert("hello");
}
function world(){
    alert("world");
}
</script>

12.内置对象

创建

直接创建：

<script>
    people = new Object();
    people.name = "zfh";
    people.age = 21;
    document.write("姓名："+people.name+"<br/>"+"年龄"+people.age +"<br/>");
</script>
<script>
    person = {name:"ZFH",age:21};
    document.write("姓名："+people.name+"<br/>"+"年龄"+people.age);
</script>

函数定义对象，创建新的对象实例：

<script>
    function people (name,age){
        this.name = name;
        this.age = age;
    }
    p = new people("zfh",21);
    document.write("name:"+p.name+",age:"+p.age);
</script>

String字符串对象：

length属性：字符串长度
indexOf：查询当前字符串是否存在，存在即返回所在位置，不存在返回-1；
match：匹配，匹配成功即打印出内容，不成功就打印出null
replace：替换目标字符
toLowerCase/toUpperCase：替换为小/大写

<script>
    let str = "Hello,my name is zfh";
    document.write("字符长度为"+str.length+'<br/>');
    document.write(str.indexOf("my")+"<br/>");
    document.write(str.match("name")+"<br/>");
    document.write(str.replace("zfh","ZFH")+"<br/>");
    document.write(str.toLowerCase()+"<br/>");
    document.write(str.toUpperCase()+"<br/>");
</script>

data日期对象

<script>
    let date =new Date();
    document.write(date+"<br/>");//获取date
    document.write(date.getFullYear()+"<br/>");//获取年份
    document.write(date.getTime()+"<br/>");//获取毫秒数
    date.setFullYear(2021,1.5);//设置时间
    document.write(date)
</script>

显示时钟

<body onload="time()">
<div id="div"></div>
<!--时钟-->
<script>
    function time(){
        let today = new Date();
        let h = today.getHours();
        let m = today.getMinutes();
        let s = today.getSeconds();
        m = fixTime(m);
        s = fixTime(s)
        document.getElementById("div").innerHTML = h+":"+m+":"+s;
        t = setTimeout(function (){
            time();
        },1000);
    }
    function fixTime(i){//整理时间为00:00:00格式
        if(i<10){
            i = "0" + i;
        }
        return i;
    }
</script>
</body>

Array数组对象

数组常用方法：
合并concat：

<script>
    let a = ["hello","world"];
    let b = ["my","name","is","zfh"];
    let c = a.concat(b);
    document.write(c);
</script>

排序sort：

<script>
    let a = ["a","c","b","x","t","f"];
    let b = ["2","5","1","4","3","6"];
    document.write(a.sort()+"<br/>");//升序
    document.write(b.sort(function (b, c){//降序
       return  c-b;
    }));
</script>

末尾追加push：

<script>
    let a = ["a","c","b","x","t","f"];
    let b = ["2","5","1","4","3","6"];
    b.push("999");
    document.write(b);
</script>

翻转reverse：

<script>
    let b = ["2","5","1","4","3","6"];
    document.write(b.reverse());
</script>

math对象

常用方法：

 <script>
     document.write(Math.round(99.99)+"<br/>");//四舍五入
     document.write(Math.random()*100+"<br/>");//0到1随机数
     document.write(parseInt(Math.random()*100)+"<br/>");//0到100随机整数
     document.write(Math.max(37,58,62,77,20,52)+"<br/>");//最大值
     document.write(Math.min(37,58,62,77,20,52,1.2351)+"<br/>");//最小值
     document.write(Math.abs(-37)+"<br/>");//绝对值
 </script>

13. 浏览器对象

window对象

浏览器宽高

<script>
document.write("宽度:"+window.innerWidth+"高度:"+window.innerHeight);
</script>

页面打开与关闭

<button onclick="but()">按钮</button>

<script>
    function but(){
        // window.open("index.html","test","height=200,weight=200,top = 100 left=100,toolbar = no,menubar=no");
        window.close();
    }
</script>

计时器

在这里插入图片描述
一直调用一个方法

<p id="p_id"></p>
<button onclick="stopTime()">停止</button>
<script>
    let a = setInterval(function (){
        getTime();
    },1000);//延时1000毫秒执行
    function getTime(){
        let b = new Date();
        let t = b.toLocaleTimeString();
        document.getElementById("p_id").innerHTML = t;
    }
    function stopTime(){
        clearInterval(a);
    }
</script>

延时调用自己

<body onload="tan()">
<button onclick="stop()">停止</button>
<script>
    let a
    function tan(){
        alert("hello")
        a = setTimeout(function (){
            tan();
        },3000);//延时1000毫秒执行
    }
    function stop(){
        clearTimeout(a)
    }
</script>
</body>

history对象

在这里插入图片描述

location对象

在这里插入图片描述

<button id="p_id" onclick="a()">qqqqqqqq</button>
<br/>
<script>
document.write(location.pathname+"<br/>");
document.write(location.hostname+"<br/>");
document.write(location.port+"<br/>");
document.write(location.protocol+"<br/>");
document.write(location.href+"<br/>");
function a(){
    location.assign("http://www.baidu.com");
}
</script>

Screen对象

在这里插入图片描述
在这里插入图片描述

默笙殇
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
mavlink.js:mavlink javascript 库
06-05
mavlink.js MAVLink 协议的 JavaScript 库集合如何生成从克隆 mavlink 存储库执行生成器工具（它是一个 python 脚本..）：python \ -m pymavlink.tools.mavgen \ --lang=JavaScript \ message_definitions/v1.0/{...
webpjs:JavaScript Webp解码器
05-16
webpjs JavaScript Webp解码器 在Chrome，Firefox和WebView中解码“ webp”图像。 Emscripten将创建一个全局模块对象，或者在提供时使用您的全局对象。 我们想知道什么时候已加载完所有内容，因此我们需要提供自己...
js中的等号
Y1063656825的博客
05-28 791
#在js中我们会常常用到 “=” ，我们会见到“=”、“”、“=”、“!=”、“!==”这些情况 = 一个等号实质上他是没有相等的含义，他的作用是赋值。 == 两个等号就是我们意义上的相等了，但是他也只是值相等 === 三个等号是严格意义上的等，只有在数值和类型都相等的情况下才会返回true != 这个就和两个等号一样只要值相等，就会返回false !== 这个就和三个等号相同，需要值和类型都相同，才会返回false ...
JavaScript等于运算符
最新发布
qq_35580927的博客
02-01 1124
不同于其他变成语言，JavaScript中相等的比较分为双等于“==”比较和三等于“===”比较。这是因为在Java、C等强类型语言中，一个变量在使用前必须声明变量类型，所以在比较的时候就无须判断变量类型，只需要有双等于即可。对于不同类型的数据，在比较时需要遵循不同的规则。
js中./和../的区别
蜗牛驿站
03-13 5541
./代表的是同级目录 ../代表的是上级目录 例如： 在editSaleOppFollow页面中，想要引入同目录下的oppSaleAgency.js，那么可以使用 &lt;script src="./oppSaleAgency.js"&gt;&lt;/script&gt; 也可以使用 &lt;script src="../preSaleAdd/oppSaleAgency.js...
js中 ：是什么意思（三元运算符进阶版本）
qq_62336448的博客
12-18 1036
三元运算，多个条件判断，请看下面
JavaScript 基本运算符
m0_53561448的博客
03-30 3229
JavaScript的一些基本运算符
js2py:将 JavaScript 转换为 Python
06-18
标题"js2py:将 JavaScript 转换为 Python"所涉及的核心技术是 js2py，这是一个Python库，它的主要功能是提供JavaScript到Python的互操作性，允许开发者在Python环境中执行JavaScript代码或者将JavaScript代码转换为...
clientjs:用纯JavaScript编写的设备信息和数字指纹
04-28
ClientJS是一个JavaScript库，可轻松实现数字指纹识别，同时还公开了用于生成指纹的所有浏览器数据点。 如果要对浏览器进行指纹识别，您可能还对其他基于客户端的信息感兴趣，例如屏幕分辨率，操作系统，浏览器...
image-hash-js:用javascript实现图像哈希实现
03-21
: { " get-pixels " : " ^3.3.2 " , " sharp " : " ^0.25.3 "}用法克隆此存储库git clone https://github.com/AbyssLink/image-hash-js.gitcd image-hash-jsnpm install然后制作一个新的javascript文件并将其编写以...
js中...的用法
alwyn0721的博客
10-11 4437
js ... 的用法
js中.?、??、??=的用法和含义
yun_master的博客
03-19 7万+
前言 在项目中我们往往要做很多很多的空值判断进行容错处理,往往伴随着三目运算、与或、if else来使用,不仅要写很多冗余的代码,后期维护起来也是满屏的if else可以说是非常的痛苦了.今天分享几个处理空值简单的方法,希望可以解决大家的一些问题. 可选链(.?) 如果一个值为null、或者是undefined.那么我们再去用点操作符去调用一个方法或者访问一个属性会发生什么? let a; let b = a.name; 如果是上面的这样的代码,那么我们能得到一个报错 其实这种情况就相当于直接在unde
JS基本语法
02-11 155
目录： 语句 变量声明及提升 标识符 注释 区块 一：语句 js程序的执行顺序是从上到下执行。 js程序执行单位为行，一般情况下，一行就是一个语句，但语句可以以分号结尾，一个分号标识一个语句结束，故可以多个语句写在一行内。 var a = 1 + 3; //这是一个标准的JS赋值语句，先声明变量，再赋值。 var a = 1 + 3; var b = 'abc';//因为分号的存在，多个语句可...
js中=>的作用
ppwwp的专栏
09-10 5万+
(x) =&gt; x + 6 相当于 function(x){ return x + 6; }
js中... 的用法
qq_40039615的博客
06-11 2万+
在uniapp中初始化的项目碰到了这么一个用法。 import Vue from 'vue' import App from './App' Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() 在之前的项目中也有用到这样的用法，但是没有理解透这个...的实际作用是什么。 三点是es6中出现的扩展运算符。作用是遍历当前使用的对象能够访问到的所有属性...
JS
玉米的博客
01-27 5981
本文章是本人在学习JS时所作记录，记录大部分来源于该书： 第3章 基本概念 3.4 数据类型 typeof 鉴于ECMAScript是松散类型的，因此需要有一种手段来检测给定变量的数据类型——typeof就是负责提供者方面信息的操作符。对一个值使用typeof操作符可能返回下列某个字符串： - “undefined”——如果这个值未定义； - “boolean”——如果这...
JS: || 和 ??
大空翼 つばさ
12-22 1万+
JavaScript 里 var a =a ||{} 啥意思？var a; if(a === 0 || a === "" || a === false || a === null || a === undefined) a = {}那句话的定义。还有你这种情况 a 是函数的入口参数吧，代码是这样的对吧function(a){ var a = a || {} }它等价于function(a){
js =+ 和 += 的区别
jack_lua的博客
11-14 3万+
let x = 2, y, z = 'a'; y =+ x; z += x; console.log(y) ⇒ 2; console.log(z) ⇒ 'a2' let x = '2', y, z = 'a'; y =+ x; z += x; console.log(y) ⇒ 2 console.log(z) ⇒ 'a2' let x = true, y, z='a'; y =+ x; ...
js 中 ... 的用法
热门推荐
hyl999的专栏
07-23 9万+
展开语法(Spread syntax),可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。(译者注: 字面量一般指[1, 2, 3]或者{name: "mdn"}这种简洁的构造方式) function sum(x, y, z) { return x + y + z; } const ...
Node.js入门：JavaScript基础与桌面应用开发
Node.js程式設計是一本由陈维志编著的教程，主要介绍了如何在Node.js平台上运用JavaScript语言进行基础和进阶开发，特别关注于利用这个平台构建桌面图形用户界面（Desktop Graphical User Interface，简称GUI）的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值