什么是JS

最新推荐文章于 2024-03-26 15:52:29 发布

CV_Ming

最新推荐文章于 2024-03-26 15:52:29 发布

阅读量4.6k

点赞数 6

分类专栏： Js 文章标签： html javascript 程序人生

本文链接：https://blog.csdn.net/CV_Ming/article/details/112912564

版权

Js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript

刚开始的时候学习js是不是一脸懵逼？？，在HTML页面里面有CSS样式也就算啦，咋还有代码？？代码里面咋还有函数各种事件？？
在这里插入图片描述
下面我就给大家说说吧！！
JS是嵌套到HTML中,是基于对象和事件的脚本语言.

HTML: 展现数据
CSS : 用来渲染页面
JS : 做动态页面

与html中引入css方式类似,引入JS也有3种方法
1 .在标签内直接使用js代码

在这里插入图片描述

2 在html页面内使用<script></script>引入js
<script>标签的位置,在html中比较随意.
建议是:越晚加载越好

3 新建js文件,在html页面中引入文件
在这里插入图片描述

Js获得元素对象的方法

首先介绍一下获得元素对象的四种方法
js获得元素对象
在这里插入图片描述

还不明白？那看看下面的使用方法

<body>
    
    <div id="d1">块1</div>
    <p class="c1"></p>
    <p></p>
    <input name="sex" class="c1">
    <input name="sex">
    <script type="text/javascript">
        // 1 通过id获得元素对象
        var div1 = document.getElementById("d1");
         console.log(div1)//打印在控制台查看是否获取

        // 2 通过name属性值获得元素对象集合
        var inputArr = document.getElementsByName("sex");
        for (let i = 0; i < inputArr.length; i++) {
            const element = inputArr[i];
             console.log(element)//打印在控制台
        }
        // 3 通过标签名获得元素对象集合
        var pArr = document.getElementsByTagName("p");
         console.log(pArr);//打印在控制台

        // 4. 通过class属性值,获得元素对象集合
        var classArr = document.getElementsByClassName("c1");
        console.log(classArr);//打印在控制台
    </script>
</body>

那么获得这些元素之后呢，啥时候用呀？？
当然是发生事件的时候呀，那啥是事件呀？听我来给你讲讲常用的一些事件
记着，这是重点，下面要用的，考试会考的，工作会用的

常用事件：

Column 1	Column 2
onfocus	元素获得焦点
onblur	元素失去焦点
:onchange:	域的内容被改变
onclick	当用户点击某个对象时调用的事件句柄
:ondblclick:	当用户双击某个对象时调用的事件句柄:
onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键被按下并松开:
onkeyup	某个键盘按键被松开
onload	一张页面或一幅图像完成加载
:onmousedown:	鼠标按钮被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标移到某元素之上
onselect	文本被选中
onsubmit	确认按钮被点击

在这里插入图片描述
别着急呀，我例子都给你写好了

事件的绑定：

1.事件和响应都内嵌在元素内：
在这里插入图片描述
2.事件嵌套在元素内，响应封装到函数中

3.将事件和响应与html元素，完全分离

在这里插入图片描述
修改CSS样式

<style type="text/css">
        .c1{
            border: blue 20px solid;
        }
        .c2{
            width: 500px;
            height: 500px;        
        }
    </style>
</head>
<body>
    <input id="i1" name="sex">
    <script type="text/javascript">
        var i1 = document.getElementById("i1");
        // 获得样式名
        console.log(i1.className);
        // 设置样式名
        i1.className = "c2";
        // 通过style属性修改样式
        i1.style = "width:300px;height:300px;background-color:red";
    </script>
</body>

函数-function

一: 普通函数,语法
function 函数名(参数列表) { 函数体 }
1 函数的参数列表中,直接写参数名,不需写类型,也不需写var
在传递参数时,不能不给或少给参数,但是可以多给,只不过只用符合个数的
2 函数如果有返回值,不需要定义返回值类型.只需要在方法体中写return即可将值返回
执行到return,即结束当前方法,return后的代码不再执行!

在这里插入图片描述
再给你安排个题，感受下Js的快乐

练习：手机号输入框,输入正确格式手机号,输入框变绿色,并在后面出现绿色提示”手机号格式正确”;手机号格式不正确,则输入框变红,并在后面提示”手机号格式不正确”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    手机号:<input id="i1"><span id="s1"></span><br>
</body>
<!-- 在Html页面使用js代码 -->
<script type="text/javascript">
	//通过id获得元素对象
    var i1 = document.getElementById("i1");
    //点击事件发生调用该方法
    i1.onblur = function() {
    	//获得input输入框的值
        var value = i1.value;
        //写正则，规定手机号1开头，第二位数字是3、5、6、7、8、9纯数字，共11位
        var reg = /^1[356789][0-9]{9}$/;  
        //判断手机号是否符合正则标准
        if(reg.test(value)) {
        	//符合的话，根据id获得手机号后隐藏的span
            var s1 = document.getElementById("s1");
            //改变文本
            s1.innerText = "手机号格式正确!";
            //颜色
            s1.style.color = "green";
            //手机输入框变绿
            i1.style.borderColor = "green";
        } else {
            //不符合的话，根据id获得手机号后隐藏的span
            var s1 = document.getElementById("s1");
            s1.innerText = "手机号格式不正确!";
            s1.style.color = "red";
            i1.style.borderColor = "red";
        }
    }
    </script>
</html>