JavaScript基础

最新推荐文章于 2024-08-30 20:29:15 发布
最新推荐文章于 2024-08-30 20:29:15 发布
阅读量74 收藏
点赞数 1
文章标签： javascript 前端 开发语言 python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qvqqv/article/details/130356843
版权

JavaScript基础

（一）JS介绍

（1）JS作用与书写要求

作用：
如果把HTML比做一个人，那么CSS就是衣服，那JS就是指人的动作和行为
书写：
JS代码可以直接写在script标签里面，或者写在其他的.js后缀文件中，并通过script标签引入。注意：在引入js文件的script里面，一定不能写js代码。当然也可以在标签内写js代码，但是这种方式并不推荐。
要求：

  • 一般把script标签写在 head 或者 body 里
  • 要注意的是是否需要加上window.onload（代码从上往下运行，写在head时，不会获取到body中的元素，需要加载整个文档）
  • 如果没有特殊要求，一般script标签放在body结束之前
    在这里插入图片描述
    比如这个弹窗代码（alert）：
<head>
    <meta charset="UTF-8">
    <title>js</title>

    <script>
        alert('头部的js代码')  // 弹窗
    </script>

</head>
<body>

</body>

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>js</title>

</head>
<body>
    <script>
        alert('body的js代码')  // 弹窗
    </script>
</body>

在这里插入图片描述

<body>
<!--     在引入js文件的script里面，一定不能写js代码-->
    <script src="../js/js1.js">
        alert('这是引用外部js文件当中的的js代码')  // 弹窗 js代码无效
    </script>
</body>

在这里插入图片描述

（二）JS获取元素

在js中想要操作元素，或者说执行一些行为，首先需要获取到对应的元素。才能进行下一步的操作，所以要首先学会如何获取元素。

（1）JS获取独有标签方法：

  • document . title 获取标题
  • document . head 获取头部信息
  • document . body 获取body内容
<head>
    <meta charset="UTF-8">
    <title>js</title>

</head>
<body>
<script>
    console.log(document)  //输出文档   console.log相当于python中的print
    console.log(document.title)  //文档 网页的标题
    document.title = '修改后的标题'   //‘js’改为‘修改后的标题’
</script>
</body>

在这里插入图片描述
获取body及head信息同理，另外还可以获取网页中body的文本及标签内容

  • document.body.innerText（网页的获取body的文本内容）
  • document.body.innerHTML（网页的获取body的标签内容）
<body>
这是body
<span>这是span标签</span>
<script>
    console.log(document.body.innerText)  //文档 网页的获取body的文本内容
</script>
</body>

在这里插入图片描述

<body>
这是body
<span>这是span标签</span>
<script>
    // console.log(document.body.innerText)  //文档 网页的获取body的文本内容
    console.log(document.body.innerHTML)  //文档 网页的获取body的标签内容
</script>
</body>

在这里插入图片描述
修改内容：
innerText

<body>
这是body
<span>这是span标签</span>
<script>
    console.log(document.body.innerText)  //文档 网页的获取body的文本内容
    document.body.innerText = '<h1>这是通过js修改后添加的h1标签</h1>'      //不会把h1解析成标签，依旧是内容
</script>
</body>

在这里插入图片描述
innerHTML

<body>
这是body
<span>这是span标签</span>
<script>
    console.log(document.body.innerHTML)  //文档 网页的获取body的标签内容
    document.body.innerHTML = '<h1>这是通过js修改后添加的h1标签</h1>'      //把h1解析为标签
</script>
</body>

在这里插入图片描述

（2）其他标签的获取

  • 通过id获取元素：document.getElementById(“idname”)
<body>
<p id="p1">关于中国</p>
<script>
    by_id = document.getElementById('p1')     //通过获取id获取元素并命名
    console.log(by_id.innerText)              //输出获取的元素
    by_id.innerText = '你好中国'               //将关于中国改为你好中国
</script>
</body>

在这里插入图片描述

  • 通过class获取元素：document.getElementsByClassName(“classname”)
<body>
<span class="sp1">张三</span>
<span class="sp1">李四</span>
<script>
    // 通过class获取元素
    by_class = document.getElementsByClassName('sp1')  // 获取后是数组对象object（列表） [span.sp1, span.sp1]
    console.log(by_class[0].innerText)                 // 是列表形式就可以按索引获取的单个元素
    by_class[0].innerText = '张三是男生'
    // by_class[1].innerText = '李四是女生'
</script>
</body>

在这里插入图片描述

  • 通过标签名获取元素：document.getElementsByTagName(“tagdem”)
<body>
<p id="p1">关于中国</p>
<span class="sp1">张三</span>
<span class="sp1">李四</span>
<script>

    // 通过标签名获取元素
    by_tag =  document.getElementsByTagName('p')  // 数组对象object（列表）
    console.log(by_tag[0].innerText)
    by_tag[0].innerText = '你好中国'
    
</script>
</body>

在这里插入图片描述

  • 表单中的元素：document.getElementsByName(“元素”)
<body>
<form action="#">
    性别：
    <input type="radio" name="sex" value="nan"> 男
    <input type="radio" name="sex" value="nv"> 女
    <input type="radio" name="sex" value="wu"> 无
</form>
<script>

    // 表单中的name
    by_name =  document.getElementsByName('sex')     //获取sex元素，数组形式
    console.log(by_name[0].value)                    //获取value值
    by_name[0].value = '男'                          //修改value值
    console.log(by_name[0].value)                    //修改之后获取值

</script>
</body>

在这里插入图片描述

  • selector选择器获取一个或所有
<body>

<p id="p1">关于中国</p>
<span class="sp1">张三</span>
<span class="sp1">李四</span>

<script>

    // selector选择器
    qs = document.querySelector('#p1')             //获取一个p标签
    console.log(qs)

    // qs_all = document.querySelectorAll('.sp1')     //获取所有span标签
    // console.log(qs_all)

</script>
</body>

在这里插入图片描述

（三）JS简单事件

所谓事件，是指JavaScript捕获到用户的操作，并做出正确的响应

<body>

<p id="p1">关于中国</p>
<span class="sp1">张三</span>
<span class="sp1">李四</span>

<script>
    /*
    左键单击 onclick
    左键双击 ondblclick
    鼠标移入 onmouseover/onmouseenter
    鼠标移出 onmouseout/onmouseleave
    */

    // 通过id获取元素
    p1 = document.getElementById('p1')

    // p1.onclick = function () {                //把需要做的事情写在函数当中
    //     p1.innerText = '你好中国'              //针对p1做文本修改的操作（单击后变为你好中国）
    // }

    // p1.ondblclick = function () {
    //     p1.innerText = '关于中国'              //双击后变为关于中国
    // }

    // p1.onmouseover = function () {
    //     // p1.style.cssText = 'color:red'      //鼠标移入后字体变为红色
    //     // 会保留之前的css样式
    //     p1.style['color'] = 'red'              //第二种格式
    // }
    //
    // p1.onmouseout = function () {
    //     // 不会保留样式，重置样式
    //     // p1.style.cssText = 'font-size:30px'    //鼠标移出后字体大小变为30px
    //     p1.style['font-size'] = '30px'            //第二种格式，加[]后移入移出会保留原来属性，即移出时字体也为红色
    //
    // }

</script>
</body>

（四）JS属性

<head>
    <meta charset="UTF-8">
    <title>js属性</title>
<!--    <style>-->
<!--        p{display: none;}-->         <!--消失-->
<!--    </style>-->
</head>
<body>

<p id="p1">关于中国</p>
<span class="sp1">张三</span>
<span class="sp1">李四</span>

<script>

        p1.onclick = function () {                //把需要做的事情写在函数当中
             p1.setAttribute('style','display: none')//针对p1做文本修改的操作（单击后消失）
    }
    // js属性
    // 获取元素属性
    // console.log(p1.getAttribute('id'));
    // 设置属性值
    // p1.setAttribute('id','pp')    //已有属性则修改
    // p1.setAttribute('style','display: none')        //没有属性则增加

    // 移除属性
    // p1.removeAttribute('id')

</script>
</body>

运行后对“关于中国”添加单击消失的样式。

（五）JS基本数据类型

在这里插入图片描述

<body>

<p id="p1">关于中国</p>
<span class="sp1">张三</span>
<span class="sp1">李四</span>

<script>

         p1 = document.getElementById('p1')

    // typeof
    // console.log(typeof zhangsan)  // undefined 未定义
    // console.log(typeof 123)  // number 数字
    // console.log(typeof '123')  // string 字符串
    // console.log(typeof true)  // boolean 布尔值
    // console.log(typeof false)  // boolean 布尔值
    // 对象 object
    // console.log(typeof p1)  // object 标签对象
    // console.log(typeof [1,2,3,4])  // object 数组对象
    // console.log(typeof null)  // object 空值对象
    // console.log(typeof {'a':1,'b':2})  // object 字典对象
         
</script>
</body>
等猫的鱼qv
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript基础语法总结.pdf
07-02
这个资源是javaScript基础语法的总结，适合学完javascript基础语法的进行巩固、复习！ 这...我是想免费给大家看的,这怎么还收费
jquery简单体验
像一颗晨土
11-13 170
[url=http://jquery.com/]Jquery[/url]是继prototype之后又一个优秀的Javascript框架。对prototype我使用不多，简单了解过。但使用上jquery之后，马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery就像ruby.实际上我比较喜欢java（少接触Ruby罢了）但是...
JavaScript的事件循环
qq_68155756的博客
02-14 487
事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。 再Chrome的源码中，它开启一个不会结束的for循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要再合适的时候将任务加入到队列末尾即可
JS优化技巧
QVVVVVVVVVVVVVVV的博客
03-26 191
JS优化技巧1.带有多个条件的if语句2.简化if true ... else3.声明变量4. null、undefined 和空值检查5. null 检查和默认赋值6. if 判断值是否存在7. 比较后返回8. 箭头函数9. switch 简化10. 隐式返回11. 默认参数值12.数组 find 简化 1.带有多个条件的if语句 把多个值放在一个数组中，然后调用数组的 includes 方法。 // Novice if(x === 'abc' || x === 'def' || x === 'x
利用JS实现简易ATM机
m0_62923580的博客
04-19 1667
1：里面现存有100块钱。 2：如果存钱，就用输入钱数加上先存的钱数,之后弹出显示余额提示框 3：如果取钱，就减去取的钱数，之后弹出显示余额提示框 4：如果显示余额，就输出余额 5：如果退出，弹出退出信息提示框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE...
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
热门推荐
java小白翻身
10-06 17万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
JavaScript基础（详细总结）
程序员阿龙的博客
08-18 1万+
JavaScript基础入门详细总结
JavaScript基础语法
m0_67683346的博客
11-02 5832
javascript中的一些基础语法
JavaScript 基础概念
weixin_52682120的博客
04-20 3110
1 JavaScript 概念 1.1 什么是JavaScript（简称“JS”）？ 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。 【脚本语言、基于对象、动态交互、跨平台性】 1.2 语言组成 ①ECMAScript，描述了该语言的语法和基本对象。 ②文档对象模型（DOM），描述处理网页内容的方法和接口。 ③浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。 1. 3 JavaScript的标准是? JavaScript已经被Netscape公司提交给ECMA制定为标准，称之为E
JavaScript基础入门
dangfulin的博客
08-21 5550
一，什么是JavaScript 1，与Java无关！与Java无关！与Java无关！ JavaScript是一种为网站添加互动以及自定义行为的客户端脚本语言， 通常只能通过Web浏览器去完成操作， 而无法像普通意义上的程序那样独立运行。 JavaScript是一种轻量级、解释型的 Web 开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都己嵌入了JavaScript引擎、JavaScript 源代码可以在浏览器中直接被解释执行，用户不用担心支持问题。 JavaScript的引入，符合”渐进增
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 9245
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
jQuery基础——DOM
m0_54066656的博客
08-27 1757
JQ基础——DOM操作
vue ref和reactive区别
灰海
08-25 4607
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 1107
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 633
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 136
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值