JavaScript基础学习（一）

最新推荐文章于 2024-08-22 09:57:36 发布

Jenny_Ghost

最新推荐文章于 2024-08-22 09:57:36 发布

阅读量9.7k

点赞数

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/Jenny_Ghost/article/details/121319052

版权

一、API

ARI CApplication Programming lnterface,应用程序编程接口)是一生预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

API是给程序员提供的一种工具，以便能更加轻松的实现想要完成的功能。

二、WebAPI

Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API( BOM 和 DOM)。

三、DOM

文档对象模型( Document ObjectModel，简称 DOM)，是W3C组织推荐的处理可扩展标己语言（HTML或者XML）的标准编程接口。

用来改变网页内容结构和样式

四、获取元素

1.使用getElementByld()来获取带有id的元素对象

语法： var element = document.getElementById('id')

需要注意的是，文档页面从上往下加载，所以先要有标签，scrip写在标签后面。

通过getElementById()返回的值是一个对象

使用console.dir打印元素能更好的查看里面的属性和方法

2.使用getElementsByTagName()可以返回带有指定标签名的对象的集合

语法： var element = document.getElementsByTagName('tagname')

返回的是一个对象的集合，以伪数组的形式储存

2.1 父元素.getElementsByTagName(‘子元素’)

语法：var ol = document.getElementById(‘ol’);

console.log(ol.getElementsByTagName(‘li’))

父元素必须是单个对象（必须指明是哪个元素对象，如果使用tagname来获取会得到一个伪数组就不算是单个对象），获取的时候不包括父元素自己

一般来说，都会为父元素指定一个id，通过id获取父元素得到的是一个对象

3 通过类名来获取元素

document.getElementByClassName(‘类名’)

返回的是元素集合

4.document.querySelector选择器

返回指定选择器的第一个元素对象

var element = document.querySelector(‘.id’) || (‘#class’) || (‘标签’)

document.querySelectorAll (‘.id’) //返回指定选择器的所有元素

5.获取特殊元素

5.1 获取body元素

var bodyEle = document.body;

5.2 获取html元素

var htmlEle = document.documentElement;

四、事件基础

事件是可以被JavaScript检测到的行为

1.事件的组成

事件源：事件被触发的对象事件类型：如何触发事件处理程序：通过函数赋值的方式完成

1.1基本了解：

<script>
var btn = document.getElementById(‘btn’);

btn.onclick = function(){//鼠标点击时

       alert(‘点击’)；

}
</script>

2.执行事件的步骤

获取事件源，注册事件、添加事件处理程序（采用函数赋值的方法）

常见的鼠标事件：

3.操作元素

3.1改变元素内容

element.innerText

 <script>
         function getDate(){
            var date = new Date();
            var year =  date.getFullYear();
            var month =  date.getMonth()+1;
            var date =  date.getDate();                   
            return '今天是' + year + '年' + month + '月' + date + '日';
        }

        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function(){
            div.innerText = getDate();
        }

       
    </script>

点击前点击后

element.innerHTML

与innerText不同的是innerText不能识别文字中的HTML标签，并且会将空格和换行符都去除，会直接将HTML标签连同文字一起输出，而innerHTML是可以识别HTML标签并且保留空格和换行符的

<div></div>
    <script>
        var div = document.querySelector('div');
        div.innerHTML = '<strong>today is: </strong>2021.11.14';
       
    </script>

使用innerHTML的效果

3.2修改元素属性

可以直接在处理函数中修改元素的属性 eg：img.src 、img.href 、元素的id、alt、title……

3.3修改元素样式属性

element.stylebackgroundColor

注意：后面的样式类型要使用驼峰命名法，不能与css的样式混淆

3.4隐藏文本框内容

<input type="text" value="默认文本">
    <script>
        var text = document.querySelector('input');
        text.onfucus = function(){
            this.value = ""
    }

3.5使用className修改样式属性

 <style>
        div{
            background-color: pink;
            width: 100px;
            height:100px;

        }
        .change{
            background-color: blue;
            color: aliceblue;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="">文本</div>
    <script>
        var test = document.querySelector('div');
        test.onclick = function(){
            this.className = 'change';
            //当前元素类名改为change
        }
    </script>

class会覆盖掉原来的类名，如果要保留原来的类名，需要使用到多类名，即在修改类名时将原类名添加上，并于新类名之间使用空格隔开。