从零开始学前端：初识函数，合法属性与自定义属性 --- 今天你学习了吗？（JS：Day2）

已于 2022-11-16 09:24:19 修改
阅读量1.3k 收藏
点赞数
分类专栏： 从零开始学前端 文章标签： 前端 javascript 学习
于 2022-03-28 08:59:42 首次发布
本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45266979/article/details/123766564
版权

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）

复习：从零开始学前端：初识JavaScript — 今天你学习了吗？（JS：Day1）

文章目录

前言

js前两节课比较基础，但是也有重点，还是要仔细过一下的。

第二节课：初识函数，合法属性与自定义属性

一、innerHTML与innerText

innerHTML:
获取标签节点的内容/获取标签节点内容的操作权限 --> 能解析标签；
innerText:
获取表掐节点的内容/获取标签节点内容的操作权限 --> 不能解析标签；

实例：
最初内容（不使用innerHTML）：

<!-- style-->
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
<!-- body-->
<body>
    <div class="box" id="mybox">123</div>
</body>

在这里插入图片描述

使用innerHTML获取内容

console.log(document.getElementById("mybox").innerHTML);

在这里插入图片描述

使用innerHTML替换内容之后：

document.getElementById("mybox").innerHTML = "<b>我是替换后的内容</b>"

在这里插入图片描述

使用innerText替换内容之后：

document.getElementById("mybox").innerText = "<b>我是替换后的内容</b>"

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="box" id="mybox">123</div>
    <script>
        // document.getElementById("mybox").innerHTML = "<b>我是替换后的内容</b>"
        document.getElementById("mybox").innerText = "<b>我是替换后的内容</b>"
    </script>
</body>

</html>

二、通过点击事件改变宽高

点击改变盒子的宽高和颜色

mybox.style.width = "200px";
mybox.style.height = "200px";
mybox.style.backgroundColor = "skyblue";

实例：
初始盒子：
在这里插入图片描述
点击后盒子：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="box" id="mybox"></div>
    <script>
        var mybox = document.getElementById("mybox")
        mybox.onclick = function () {
            mybox.style.width = "200px";
            mybox.style.height = "200px";
            mybox.style.backgroundColor = "skyblue";
        }
    </script>
</body>

</html>

注意事项：

  1. 背景颜色在CSS中是backgroubd-color，但是这种复合写法在script中并不适用，需要运用驼峰命名法，写为backgroundColor；
  2. 宽高改变的写法如下，注意等号后面双引号里不能加“;”，需要加到外面。
mybox.style.width = "200px";
mybox.style.height = "200px";
  1. 在script中CSS样式也可以合在一起写，鼠标事件中有运用；
mybox.style.cssText = "width:200px;height:200px;background-color:skyblue";

三、鼠标移入移出事件

鼠标移进移出，盒子样式发生变化

		//移入
        mybox.onmouseenter = function () {}
        //移出
        mybox.onmouseleave = function () {}

实例：
初始时：
在这里插入图片描述
移进时：
在这里插入图片描述
移出时：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="box" id="mybox"></div>
    <script>
        var mybox = document.getElementById("mybox")
        mybox.onmouseenter = function () {
            mybox.style.cssText = "width:200px;height:200px;background-color:skyblue";
        }
        mybox.onmouseleave = function () {
            mybox.style.cssText = "width:150px;height:150px;background-color:purple";
        }
    </script>
</body>

</html>

四、初识function函数

函数：

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码。

函数的语法：

  1. 当调用改函数时，会执行函数内的代码。
  2. 可以在某事件发生时直接调用函数（比如用户点击按钮时），并且可由JavaScript在任何位置进行调用。
  3. JavaScript对大小写敏感。关键词function必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

相当于模具，可以用function封装起来

        console.log(1)
        console.log(2)
        console.log(3)
        function fn() {
            console.log(1)
            console.log(2)
            console.log(3)
        }

运行：
在这里插入图片描述

可以看出，封装起来的打印命令并没有运行，
就相当于之前的烟花是点燃了的，但是现在没有点燃，需要点燃才可以爆炸。

如何调用函数：

调用函数 => 函数名+括号

        function fn() {
            console.log(1)
            console.log(2)
            console.log(3)
        }
        fn();

运行：
在这里插入图片描述

五、有名函数与匿名函数

有名函数：
或称为定义函数或则函数命名。

语法：function fn ( ) { } //函数名+括号

fn即为函数的名字。

例如：

        function fn() {
            console.log("我有名字啦~");
        }

匿名函数：
或称为函数表达式。

语法：var a = function ( ) { }

函数并没有名字，他是通过使用另外定义的一个变量等于匿名函数从而可以调用函数。

例如：

        var a = function () {
            console.log("我猜你不知道我的名字~");
        }

六、自执行与他执行

自执行：
通过函数名fn()，这种叫做函数的自执行（即有名函数）；

他执行：
被其它接收的变量来触发的函数（匿名函数），比如事件函数；

七、函数表达式和函数声明

函数表达式：
在表达式中可省略它，从而创建匿名函数

var fn = function ( ) { }

函数声明：
JavaScript使用关键字function定义函数。
例如：

		// 函数声明
        function fn() {
            console.log("123");
        }

特点：

  • 在代码中须出现在表达式的位置
  • 有可选的函数名称
  • 不会影响变量对象
  • 在代码执行阶段创建

函数表达式本身并不会执行，需要在其后面加()

7种函数表达式：

        // 函数表达式
        // 1
        var fun = function () {
            console.log(1);
        };
        // 函数表达式本身并不会执行，需要在其后面加()
        // 2
        + function () { console.log(4) }();
        // 3
        - function () { console.log(3) }();
        // 4
        ~function () { console.log(2) }()
        // 5
        !function () { console.log(5) }();
        // 6.使用下面这个写法的时候，会和上面的额写法连在一起，所以上面的写法后面必须有“;”
        (function () { console.log(6) })();
        // 7.（立即执行函数）
        (function () { console.log(7) }());

运行：
在这里插入图片描述

八、this（指针）

<!-- style-->
    <style>
        #mybox {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
    
<!-- body -->
<body>
    <div id="mybox"></div>
    <script>
        // this   指针
        // 1.直接打印就是指向windoow
        console.log(this);

        // 2. 函数里面的this指向window
        function fn() {
            console.log(this);
        }
        // 这里的fn() === window.fn()
        fn(); //this指向window

        // 3.事件触发的话，this指向事件源，这里是mybox对象
        var mybox = document.getElementById("mybox");
        mybox.onclick = function () {
            console.log(this);
        }
        mybox.onmouseenter = function () {
            console.log(this);
        }

        // 4.这是3的简写，this指向mybox
        mybox.onclick = fn;
        mybox.onmouseenter = fn;
        function fn() {
            console.log(this);
        }
    </script>
</body>

  1. 运行（直接打印就是指向windoow）
    在这里插入图片描述

  2. 运行（函数里面的this指向window）
    在这里插入图片描述

  3. 运行（事件触发的话，this指向事件源，这里是mybox对象）
    在这里插入图片描述

  4. 运行（事件触发的话，this指向事件源，这里是mybox对象）
    在这里插入图片描述

九、“=” 等号

一个等号是赋值
二个三个等号是判断

十、合法属性与自定义属性

合法属性：
类似系统自带的属性（innerHTML）、本身就有的属性，称之为合法属性！

<body>
    <div id="mybox">999</div>
    <script>
        console.log(mybox.id);
    </script>
</body>

例如：

console.log(mybox.id);
console.log(mybox.innerHTML)
console.log(mybox.innerText)

自定义属性：
不是系统制定好的，而是人为自己定义的属性！如果再来访问这个自定义属性，就能到这个值；

fight 为自定义属性

<body>
    <div id="mybox"></div>
    <script>
        mybox.fight = "加油"
        console.log(mybox.fight);
    </script>
</body>

自定义属性与自定义标签属性：

自定义属性：
mybox.fight

自定义标签属性：
melody即为自定义标签属性

    <div id="mybox" melody="melodyCandy"></div>

十一、自增和自减

自增++

mydiv.num++ 等于 mydiv.num += 1;

自减–

mydiv.num-- 等于 mydiv.num -= 1;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #mydiv {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>

<body>

    <div id="mydiv">0</div>
    <script>
        var mydiv = document.getElementById("mydiv");
        mydiv.num = 0;
        mydiv.onclick = function () {
            mydiv.num++;
            // mydiv.num += 1; 
            console.log(mydiv.num);
        }
    </script>
</body>

</html>

在这里插入图片描述

十二、点击增加或减少运用

  1. 点击网页按钮，网页标题增加减少
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0</title>
    <style>
        .mybox {
            width: 200px;
            height: 50px;
            margin: 0 auto;
        }

        input {
            width: 40px;
            text-align: center;
        }

        button {
            width: 24px;
        }
    </style>
</head>

<body>
    <div id="mybox" class="mybox">
        <button id="down">-</button>
        <!-- <input type="text" value="0" id="inp" /> -->
        <button id="up">+</button>
    </div>
    <script>
        var down = document.getElementById("down")
        var up = document.getElementById("up")
        // var inp = document.getElementById("inp")
        console.log(document.title)
        down.onclick = function () {
            // console.log(down)
            // inp.value--
            // console.log(inp.value)
            document.title--
        }
        up.onclick = function () {
            // console.log(up)
            // inp.value++
            document.title++
            // console.log(inp.value)
        }
    </script>
</body>

</html>
  1. 点击网页按钮增加减少，输入框数字增加减少

注意：

console.log(inp.innerHTML) //无法获取值
获取表单的值不能使用innnerHTML或innerText，必须要用value； 记死！！！

效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0</title>
    <style>
        .mybox {
            width: 200px;
            height: 50px;
            margin: 0 auto;
        }

        input {
            width: 40px;
            text-align: center;
        }

        button {
            width: 24px;
        }
    </style>
</head>

<body>
    <div id="mybox" class="mybox">
        <button id="down">-</button>
        <input type="text" value="0" id="inp" />
        <button id="up">+</button>
    </div>
    <script>
        var down = document.getElementById("down")
        var up = document.getElementById("up")
        var inp = document.getElementById("inp")
        // 获取表单的值不能使用innnerHTML或innerText，必须要用value；       记死！！！
        // 不能获取值
        // console.log(inp.innerHTML)
        // 可以获取值
        console.log(inp.value)
        down.onclick = function () {
            inp.value--
        }
        up.onclick = function () {
            inp.value++
        }
    </script>
</body>

</html>

预习：从零开始学前端：中括号代替点操作，获取对象，自定义标签属性 — 今天你学习了吗？（JS：Day3）

Coisini_甜柚か
关注
专栏目录
零基础入门 全角度解读企业主流数据库MySQL8.0 --- 复习笔记
争当做一个有趣的人
03-09 1290
〖课程介绍〗: 本课程遵循“用户体验至上”的原则，不敢说设计精良，尽善尽美，却也竭尽全力去锻造良好的学习体验。包含三方面，（1）设计之初：遵循“有教无类，教学相长”的原则；（2）学习路线：采用循序渐进的教学模式，带你从了解到熟悉，到掌握，到精通，最后到深谙；（3）学习内容：课程遵循前沿性，以当前最新企业主流的MySQL8.0版本为内容。以“实用”为课程最高宗旨，带你搞定工作中SQL优化 痛点问题，最终的目的是：助力个人能力的快速提升，最终服务工作所需，助你占据不可替代的一席之地 第1章 【蓦然回首】开篇..
JS --- 操作标签的合法属性
09-03 125
合法属性： id class titile href src 等.... 获取：获取元素后使用点语法 修改：等号赋值修改 添加：还是等号赋值，有则改无则覆盖； <div id="box" title="你好!">你好吗</div> <script type="text/javascript"> var oBox...
前端 - 自定义属性
kelly0721的博客
04-12 4188
通用属性 自定义属性 CSS 变量属性
前端页面自定义属性
sanluo11的博客
06-05 624
1、页面jsp: <li> <table class="signing_tb"> <tr> <td class="td_1"> <p class="td_name">签约银行</p>
Web前端 自定义属性与函数
m0_72686628的博客
08-30 516
1 定义属性属性的分类固有属性：系统给的 id class title自定义属性：程序员自己定义的 tag index添加自定义属性直接添加标签上(暂时获取不到)//2.自定义属性直接写行间，可以直观看见，暂时无法获取写在行间的自定义属性使用js添加：标签.属性名 = 属性值//3.通过js添加自定义属性,标签上看不见，但是可以直接使用//true2.什么是全局变量/全局函数在函数外侧声明的变量和函数 可以在任何地方访问和修改 会一直存储在内存中 直到页面关闭销毁。...
前端笔记88——自定义属性
裕博的博客
06-22 694
前言 在日常的开发当中，我们会发现系统定义的属性没有办法满足我们的开发，所以我们需要自己去定义属性。下面分享一个定义属性的实例 自定义属性实现的实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> ...
从零开始的C++学习（1）
weixin_48894764的博客
09-21 848
个人C++入门学习总结
TypeScript学习文档-基础篇（完结）
虚幻私塾
04-03 1283
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 目录* TypeScript学习第一章:TypeScript初识 + 1.1 TypeScript学习初见 + 1.2 TypeScript介绍 + 1.3 JS 、TS 和 ES之间的关系 + 1.4 TS的竞争者有哪些? - 1. ESLint - 2. TSlint -
学习网站推荐、ES6新增、初识node、npm
tian_98的博客
12-01 545
day 01 右键->在集成终端中打开，（node js文件名）安装完调试node -v返回版本号 ES5回顾 ECMAScript 和 JavaScript 的关系：前者是后者的规格，后者是前者的一种实现。 ES6与ES5的关系：ES6是ES5的语法糖，即ES6是在ES5的基础上进行封装，多数代码都可以用ES5实现的，方便使用。 ES6与ES7的关系：与ES6相比ES7增强了关键词async的功能，并且可以使用await,轻松直接调用函数来实现异步调用同步化。 ECMAScript 版本历史 •
C语言学习第三课
u012229318的博客
12-25 221
学习笔记3
前端基础(十)_Dom自定义属性(带案例)
见贤思齐焉，见不贤内自省
01-10 1263
Dom自定义属性(带案例)
JS基础四【JS】
最新发布
weixin_53943447的博客
03-01 1114
自定义属性的目的保存并保存数据，有些数据可以保存到页面中而不用保存到数据库中有些自定义属性很容易引起歧义，不容易判断到底是内置属性还是自定义的，所以H5有了规定设置H5自定义属性H5规定自定义属性data开头作为属性名并且赋值// 或者使用JavaScript设置获取H5自定义属性element.getAttribute('属性')element.dateset.index 或者 element.dateset['index']ie11才开始支持。
从零开始前端学习[54]:js中自定义标签属性和自定义属性
章飞 _906285288的博客
11-25 2934
js中自定义标签属性和自定义属性 自定义标签属性 自定义属性 提示 博主：章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041 自定义标签属性首先要知道什么是标签属性，标签属性也就是写在标签内部的属性，如class，id等 那什么是自定义的标签属性，也就是在标签内部的非系统定义的属性，如<div class = "box" name =
web前端自定义属性的方法
Revival_Liang的博客
03-16 1614
获取自定义属性的值 如下： html5 data-*自定义属性 age 多了一个”data-*” 属性, 如何获取呢? //js var content= document.getElementById('content'); alert(content.dataset.age) //jquery $('#content').data('ag
前端中this和自定义属性
weixin_39191274的博客
05-23 1902
      this是一个特殊的存在，this是就是调用当前的方法，（函数）的（元素）对象在全局下就是Window.在事件调用匿名函数里直接调用时，this又变回了Window.这时元素调用的函数实际上是匿名函数，而匿名函数内部直接调用的函数依然是Window在调用        自定义属性是给之前元素上定义一个本来不存在的属性。自定义属性语法：元素 . 自定义属性=a，js可以为任何HTML元素...
HTML5的自定义属性的使用总结
热门推荐
不怕麻烦的鹿丸的博客
11-09 3万+
以前我们需要自定义属性的时候一般是这样做的，在标签里面加上我们自己设置的一些属性： 在标签里设置自定义属性 然后获取里面的值是使用getAttribute来获取自定义属性里面的值： var myDiv = document.getElementById("myDiv"); var theValue = myDiv.getAttribute("user-defined-attribute")
前端基础 - WebApi （二） 自定义属性
真実はただ一つ。
12-16 419
自定义属性 可以在使用DOM操作元素的时候，可以给元素添加一些其原本没有的属性，来记录一些数据 获取属性值 元素对象.属性名 获取属性值 元素对象.getAttribute(属性名) 获取属性值 区别：通过对象名点属性名获取到的是元素的属性值，并且对css属性以css形式返回。不能获取到自定义属性的值 通过getAttribute获取属性值，返回的结果是以字符串体现，可以获取到自定义属性的值 设置属性值 元素对象.属性名=属性值 元素对象.setAttribute(属性名,属性值);//属性名完全
关于H5中自定义属性的设置和获取
IT_Surfer的专栏
05-19 1万+
自定义数据属性是在HTML5中新加入的一个特性。简单来说，自定义数据属性规范规定任何以data-开头属性名并且赋值。自定义数据属性是为了保存页面或者应用程序的私有自定义数据，这些自定义数据属性保存进DOM中，对于整个DOM的布局和表现无任何影响，但是却可以方便操控整个网页的交互以及想要表达的效果。        比如我们想要统计一个页面玩家的排行榜，但是DOM页面的原生标签并没有提供这样的一
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Coisini_甜柚か

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值