js的基本使用

2023-11-05

1.使用方式

      引用位置,js的引用位置和css的一样要在HTML中进行,但又有些许不同,例如:

<!DOCTYPE html>
<html>
    <head>
     <link href="text.css"><!-- 这里是css引用的位置 -->
    </head>
    <body>
    <!--可以写在这里面,即写即用,比外联的执行要快 -->
        <script>
        function show(){
        }
        </script>
    </body>
    <script herf="text.js"></script><!--这里是js外部引用的位置 -->
    <!--在这里引用是为了在html页面加载后,js写的功能才能被调用,否则
    就先加载js,后加载html的话,js的函数会找不到目标,同时如果有多个
    js的话,要考虑它们的渲染顺序 -->
</html>

2.基本语法

      2.1 基本类型
常用基本类型
如果我们想看一个变量的数据类型,可以使用typeof 去查看。

      2.2 声明变量
     声明的关键字常用的有三个 let,var,const。

  • var相当于全局变量,存在变量提升,相当于在window上声明。
    何为提升变量,就是变量的声明(注意不包含变量初始化)会被提升(置顶)到声明所在的上下文,也就是说,在变量的作用域内,不管变量在何处声明,都会被提升到作用域的顶部,但是变量初始化的顺序不变。
var s='变量1';
(function show(){
var s='变量2';
/*就是s会先声明为undefined进行创建,再进行初始*/
     ......
})()

  • let声明的变量,不存在提升变量,在函数体内的改变不会影响全局的let,let会进行预处理,所以let声明变量要初始化,否则会报错。
let s='变量1';
function show(){
let s='变量2';
//此处的s变量的值改变不会影响上面的s,同时let支持变量名重复。
}

  • const声明的变量是常量,和java中的常量差不多,在同一作用域或块中,不允许将已有的 var 或 let 变量重新声明或重新赋值给 const,不允许将已有的 const 变量重新声明或赋值。

      2.3 函数

  • 函数在js中一般用function来声明,可以隐式也可以显式声明。
//这为显式的,有函数名的
function show(){
}
//这是隐式的,无函数名的。
window.onload=function(){
 }
  • 函数一般有两种使用形式。对于一个button来说,id=“btn”。
<button id="btn" onclick="show()"></button>
//第一种
btn.onclick=function(){
}
//第二种,对于先定义好一个函数
function show(){
}
  • 函数类一些常用的方法,获取dom节点,处理dom节点的
function show(){
//获取id="btn"的dom节点
//除了用id,还可以用name去获取一组name值相同的元素。
let btn=document.getElementById("btn");
//用来给id="btn"的dom点元素里面的进行操作,赋值
btn.innerHTML='';

}

3.前端交互

当我们想要实现动态的网页的话,就需要进行响应操作,这里ajax比较方便,ajax有两种,一种式jQuery的ajax,使用简单,但需要导入jQuery包,另一种就是原生的ajax。

function show(){
//$代表jQuery
 $.ajax({
        type: "post",//请求类型,有post和get两种
        url: "/add",//后端地址
        data:peo,//传输的数据
        dataType: "json",//从后端返回的数据类型
        success(data){//括号里的data是从后端返回来的数据,请求成功后的,在里面进行操作
        //jQuery的ajax会自动的将JSON转化成需要的
            document.getElementById('menuBody').innerHTML = '';
            people=data;
            setPeople(people, (p - 1) * 10, p - 1);
            selectAll();
        },
        error(){
           alert("添加失败");
        }
    })
}

function show2(){
//创建请求对象并判断是哪种浏览器的类型
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
        xhr.open("get",url,true);//请求类型,地址,和异步
        xhr.send();//发送请求,如果是post请求需要设置请求头
        xhr.onreadysattechange = () =>{//这里是检测响应状态的
            if(xhr.readystate == 4){
                if(xhr.status == 200){
                    var data = xhr.responseTEXT;//获取返回的数据,如果是JSON类型的
                    //就进行转换
                    data=JSON.parse(data);
                    return data;
                }
            }
        }    
}

以上就是关于js的一些基础用法。js还有很多的用法,js也可以用来做动画效果,还能实现很多的交互功能。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js的基本使用 的相关文章

  • Imgur API 版本 3 JavaScript 上传示例

    我在网上找到的所有示例都是早期版本的 Imgur API 或非 JS 代码 所有这些都使用新 API 中不存在的 API 密钥 相反 你会得到一个client id and secret 任何人都有示例代码 展示如何使用其 API 版本 3
  • onclick 函数上的 CSS 选择器

    有没有办法让CSS选择器onclick function 您可以在onclick https stackoverflow com questions 24365416 select element which have specific a
  • 如何在react-select v2中创建optgroup?

    我想在我的反应选择列表中包含 optgroups 但它似乎没有记录在任何地方 我有以下结构 是从评论中提取的https github com JedWatson react select issues 59 https github com
  • 在 Angular 单元测试中应该如何处理运行块?

    我的理解是 当您在 Angular 单元测试中加载模块时 run块被调用 我认为如果你正在测试一个组件 你不会想同时测试run块 因为unit测试应该只是测试一个unit 真的吗 如果是的话有什么办法可以防止run阻止运行 我的研究让我认为
  • AWS Lambda 提前结束(没有任何显式返回或回调)

    我在放入 AWS Lambda 中的一些 Node js 代码时遇到了一些问题 我需要进行几个异步调用 虽然第一个调用的行为符合我的预期 但 lambda 函数在第二个调用完成之前终止 返回值为 null 这让我认为 lambda 正在执行
  • Visual Studio IDE 中功能后的空间

    如何设置 Visual Studio 中的设计以在我的 javascript 函数后面放置一个空格 目前 当我按下返回键时 我得到了这个 var myfunc function 当我想要这个的时候 var myfunc function 知
  • Twitter Bootstrap 轮播在加载时自动播放

    使用twitter bootstrap框架 如何调用轮播来 自动滑动 这意味着当页面加载时 轮播会自动滚动 我尝试过 javascript onLoad click 函数 a 下一个链接的 但这不起作用 你应该这样做Twitter Boot
  • 变量前面加双下划线

    我的节点代码中有以下代码片段 var fs require fs fs readdir dirname function err files console log files 为什么变量 dirname 有双下划线 我知道一个下划线是私有
  • Vue Draggable - 如何仅替换所选项目以防止移动网格上的所有其他项目?

    这是一个要测试的示例 https codesandbox io s j4vn761455 file src App vue 112 116 https codesandbox io s j4vn761455 file src App vue
  • 如何删除从 javascript var 转义的反斜杠?

    我有这个变量 var x div class Which is div class 但是我需要 div class abcdef 我怎样才能 unes cape 这个变量来删除所有转义字符 您可以通过正则表达式将反斜杠后跟引号替换为仅引号
  • 如何在启用导航栏的情况下打开新的浏览器窗口?

    我有这个JS方法 function OpenLink strDestination var features left 10 top 10 location 0 menubar 0 resizable 0 scrollbars 1 stat
  • jspm / jQuery / TypeScript - 模块“jquery”没有默认导出

    我正在尝试使用 TypeScript 和 jspm system js 来引导 Web 应用程序进行模块加载 我还没有走多远 安装 jspm 后 并使用它来安装 jQuery jspm install jquery 以及基础知识 main
  • 如何正确删除动画集中引用的 Raphael SVG 元素?

    我有一组动画 Raphael SVG 元素 我正在通过用户发起的 ajax 调用添加新元素并删除旧元素 我 set push 新元素 但因为我需要删除的元素通常不是集合中的最后一个元素 所以我使用 element remove 而不是 se
  • 全局未在 ../node_modules/socket.io-parser/is-buffer.js 中定义

    预先感谢您帮助我 我正在尝试在我的一个角度组件中连接套接字 但在浏览器的控制台中它会抛出一个错误 指出 Global 未在 Object node modules socket io parser is buffer js 中定义 这是我的
  • 在多个数组中搜索字符串,然后设置 var - jQuery

    我正在寻找基于字符串存在于哪个数组中设置一个变量 例如 var primary red blue yellow var secondary orange purple green 然后检查 purple 并返回它在 secondary 数组
  • 简单的颜色变化

    我正在创建一个用户界面 用户可以在其中更改页面的颜色值 我想要的是获取分配给其背景颜色的值并将其变亮一定程度 我只是想获得一条亮点线 而不必每次都制作新图像 示例 用户将背景颜色设置为 ECECEC 现在我希望某个元素边框变成 F4F4F4
  • ES6 Reflect API 的好处

    我一直在努力升级一些代码以使用 ES6 语法 我有以下代码行 delete this foo 我的 linter 提出了使用建议 Reflect deleteProperty this foo 您可以找到该方法的文档here https d
  • 角度 ng-repeat 根据条件添加样式

    我在 div 列表上使用 ng repeat 并且在渲染此 div 的 json 中手动添加项目 我需要定位我在 json 中添加的最后一个 div 它会自动在屏幕上渲染 即 couse 光标所在的位置 其余部分保持在相同位置 但没有给出渲
  • 将 Angular Web 组件 EventEmitter 监听到 javascript

    我在以下工具的帮助下创建了一个小型网络组件本文 https medium com IMM9O web components with angular d0205c9db08f使用角度元素 其中包括 Input and Output 我能够将
  • R闪亮:使用闪亮的JS从数据表中获取信息

    我想读出所有列名称以及它们在数据表中显示的顺序 由于不同的原因 我无法使用 stateSave 等选项 我对 JS 没有什么把握 但我确信用它可以完成 所以我需要你帮助我 我尝试过类似的代码片段 datatable data callbac

随机推荐

  • ubuntu18.04安装mysql5.7

    ubuntu18 04安装mysql5 7 一 安装MySQL 1 安装mysql服务 2 检查状态 3 注意查看mysql版本使用 4 查看MySQL5 7默认账号和密码 二 配置MySQL 三 查mysql服务状态 四 修改root账户
  • uView在uniapp中样式完全失效问题

    最近开发微信小程序和钉钉小程序 使用uniapp UI库准备使用uView 但是按官网引入之后 在小程序模拟器上样式完全无效 而H5正常 解决方法 由于Hbuilderx版本问题 编译的代码中会多出一行样式 可以更换3 2 16版本 亲测有
  • SecureCRT创建串口连接

    鉴于没有在网上找到很好的图解SecureCRT创建串口连接方式 自己写一篇作为备忘录 同时 便于有同样需求的朋友可以快速方便的创建串口连接方式 一 工具 电脑 串口线和超级终端 本文选择SecureCRT 二 方法步骤 1 点击设备管理 查
  • Android EditText接收扫码枪输入,有时缺位,有时出现两次回车

    最近做Android项目时 需要使用外接扫码枪扫描条码 并且接收条码输入的EditText同时还要能接收商品名称的输入 在开发调试的过程中发现 使用扫码枪时会出现条码信息丢失 或者扫码输入过程中出现两次Enter的情况 问题1 扫码枪扫码后
  • JS逆向 - 破解oklink加密参数及加密数据

    版权声明 原创不易 本文禁止抄袭 转载 侵权必究 目录 一 JS逆向目标 会当临绝顶 二 JS逆向分析 不识庐山真面目 三 JS逆向测试 只缘身在此山中 四 JS反逆向 柳暗花明又一村 五 oklink逆向完整代码下载 六 作者Info 一
  • 微信小程序期末大作业-天使童装商城

    微信小程序期末大作业 天使童装商城 导入即可使用 有轮播图 底部导航 各种童装标签 有首页 分类 优惠券 购物车 个人中心五个导航 适合初学者学习使用 如下图所示 资源链接在末尾 资源下载链接 https download csdn net
  • 拉普拉斯噪声满足ε-差分隐私的定义

    差分隐私的定义如下 给定一个兄弟数据集D和D 他们两者之间至多相差一条数据 然后给定一个映射函数 f D R d f D rightarrow R d
  • 史上最全的WebSettings说明

    setAllowContentAccess boolean allow 是否允许在WebView中访问内容URL Content Url 默认允许 内容Url访问允许WebView从安装在系统中的内容提供者载入内容 setAllowFile
  • 前后端分离的vue项目如何合并?springboot 单体应用

    首先是有这么两个应用 前端是vue项目 后端是springboot 构建的服务端 现在是需求是 这个项目很轻量级 完全没必要部署为两个应用 因此需要重新合并 具体步骤如下 第一步 vue项目先打包 执行命令 npm run build 执行
  • PyQt QSpinBox 详细用法 Python

    PyQt QSpinBox 详细用法 Python PyQt 是一个流行的 Python GUI 编程工具包 它提供了丰富的界面元素和功能 使开发人员能够创建强大的图形用户界面 QSpinBox 是 PyQt 中的一个小部件 它允许用户通过
  • 《Qt 5.9 C++开发指南》第2.1节 UI文件设计与运行机制【完整版】

    2 1 UI文件设计与运行机制 2 1 1 项目文件组成 本节实例程序samp2 1完整源程序下载地址 https download csdn net download hongandyi 10413776 在Qt Creator中新建一个
  • 【读论文】多核学习算法及其在高光谱图像分类中的应用研究进展(2021)

    读论文 多核学习算法及其在高光谱图像分类中的应用研究进展 2021 李广洋 DOI 10 12082 dqxxkx 2021 200536 文章目录 摘要 关键词 结论 该论文研究了什么 摘要 多核学习算法在高光谱图像分类领域占据着十分重要
  • 常用工作方法总结(7S、SWOT分析、PDCA循环、SMART原则、6W2H、时间管理、WBS等)

    文章目录 一 7S规则 1 1 推行7S的目的 1 2 7S的概念 二 二八定律 三 SWOT分析法 四 PDCA循环 五 SMART原则 六 6W2H工作方法 七 时间管理 八 WBS工作分解 九 碎石问题分析法 一 7S规则 1 1 推
  • ER图(实体-联系图)

    概念 E R图也称实体 联系图 Entity Relationship Diagram 提供了表示实体类型 属性和联系的方法 用来描述现实世界的概念模型 构成 ER图有实体 entity 属性 attribute 关系 relationsh
  • 光 线 追 踪

    本文首先将会介绍光线追踪的类别族谱 介绍其公共部分 之后我们会分别对其中的每一个进行详细地剖析 光线追踪 Ray tracing 是一个拥有历史感的词汇 图形学从业者从neutron transport heat transfer和illu
  • 有不用出门就能做的副业吗?

    疫情期间一个00后的女孩在家隔离两周 做视频剪辑赚了4000多 是怎么做的呢 其实操作方法并不难 大周也用这个方法在头条上注册了一个新号 虽然时间不长但也赚了3000多 今天这期内容来给粉丝们分享一下操作流程 如果你也想做 可以给大周扣 8
  • com.alibaba.fastjson.JSONObject cannot be cast to com.alibaba.fastjson.JSONObject报错处理

    一 简介 项目A引用项目B的jar作为依赖 启动的时候也没问题 执行项目B中的一段代码的时候就报错了 代码如下 Map
  • scope=“scope“和作用域插槽

    试试目录 1 之前的使用 测试 1 之前的使用 父组件
  • 后台静默检测U盘并复制U盘内指定文件到电脑指定目录(U盘助手)

    马上期末考试了 老师复习课讲得PPT是精简版的 老师说了之前上课的PPT可以给但是这个不可以 如果得到期末必过了 本想着把我这个自己花了3个多小时做的U盘助手在教室的电脑上运行着 下课我就可以得到PPT了 但是无奈我如此正义凛然 以及信息安
  • js的基本使用

    1 使用方式 引用位置 js的引用位置和css的一样要在HTML中进行 但又有些许不同 例如