JavaScript--(1)基本内容

最新推荐文章于 2024-08-23 16:53:29 发布

Mikowoo007

最新推荐文章于 2024-08-23 16:53:29 发布

阅读量255

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Mikowoo007/article/details/103661090

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一个简单的JS脚本

一个效果：鼠标移入div背景颜色变成红色，鼠标移出，背景颜色变回白色
事件相应函数：
onmouseover 鼠标移入
onmouseout 鼠标移出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #tim{
            width:200px;
            height:200px;
            border: 1px solid black;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="tim" onmouseover="tim.style.background='red'" onmouseout="tim.style.background='white'"></div>
</body>
</html>

在这里插入图片描述

获取标签元素

函数	解释
`document.getElementById('ID名')`	返回这个id的元素
`document.getElementByTagName('标签名')`	返回所有这个标签名的元素的集合，0索引
`document.getElementByClassName('class名')`	返回所有这个class的元素的集合，0索引
`document.querySelector('css任意选择器')`	返回第一个
`document.querySelectorAll('css任意选择器')`	返回符合的所有
`document.documentElement`	获取HTML元素
`document.body`	获取body元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #tim{
            width:200px;
            height:200px;
            border: 1px solid black;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="tim" class="content"></div>
    <script type="text/javascript">
        //返回这个id的元素
        document.getElementById('tim').style.background = 'red'
        //返回所有这个标签名的元素的集合,0号索引
        document.getElementsByTagName('div')[0].style.background = 'black'
        //返回所有这个class的元素的集合,0索引
        document.getElementsByClassName('content')[0].style.background = 'yellow'
        // 返回第一个
        document.querySelector('#tim').style.background = 'black'
        document.querySelector('.content').style.background = 'black'
        document.querySelector('div').style.background = 'black'
        //返回符合的所有
        document.querySelectorAll('div')[0].style.background = 'red'
    </script>
</body>
</html>

JS编写的最佳位置

一般情况下，JS是些在页面的任何位置，需要script 标签包着，但是别写在html标签外
最常见的是写在 head 和 body 内部
写在 head 标签内需要写上 window.onload 包着，要不然会报错，因为执行 js 时页面标签还没加载

window.onload 的作用是当页面加载完成后自动触发该事件
一个页面应该只有一个window.onload 事件，因为若写多个的话会覆盖只执行最后一个

js 理应写在 body 结束标签之前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #tim{
            width:200px;
            height:200px;
            border: 1px solid black;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript" >
        window.onload = function(){
            document.getElementsByTagName('div')[0].style.background = 'green'
            alert(1)  //弹出一个弹窗
        }
    </script>
</head>
<body>
    <div id="tim" class="content"></div>
</body>
</html>

引入外部 js 文件

js_code_location.js

window.onload=function(){
document.getElementsByTagName('div')[0].style.background = 'green'
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #tim{
            width:200px;
            height:200px;
            border: 1px solid black;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript" src="js_code_location.js"></script>

</head>
<body>
    <div id="tim" class="content"></div>

</body>
</html>

或者

document.getElementsByTagName('div')[0].style.background = 'green'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #tim{
            width:200px;
            height:200px;
            border: 1px solid black;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="tim" class="content"></div>
    <script type="text/javascript" src="js_code_location.js"></script>
</body>
</html>

JS 输出及调试方法

函数	解释
`alert('输出内容')`	弹窗型输出
`console.log('输出内容')`	浏览器调试窗口输出
`innerHTML` 和 `innerText`	1. 给获取的元素一些内容 2. document.getElementById(‘id名’).innerHTML = ‘内容’ 3. 区别：InnerHTML 对标签进行转义，InnerText 不转义
`document.write('输出内容')`	输出内容会清空原有的html再生成一个新的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="tim1"></div>
    <div id="tim2"></div>
    <div id="rewrite">重写</div>
        <script type="text/javascript">
            //alert('我是弹窗内容')
            console.log('我是在浏览器调试窗口输出的内容')
            document.getElementById('tim1').innerHTML = '<p>我是tim1盒子的内容，我被注入进来了</p>'
            document.getElementById('tim2').innerText = '<p>我是tim2盒子的内容，我被注入进来了</p>'
            document.getElementById('rewrite').onclick=function(){
                document.write('我的新的html了，原来的已经被我替代了')
            }
        </script>
</body>
</html>

在这里插入图片描述

演示JS常见事件

函数	解释
`onclick`	鼠标点击事件
`onmouseover`	鼠标被移到某些元素之上
`onmouseout`	鼠标从某元素上面移开
`onchange`	元素值改变，一般用在表单元素上
`onkeydown`	用户按下键盘按键
`onfocus`	元素获取焦点
`onblur`	元素失去焦点
`window.onload`	元素加载完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #tim{
            width:300px;
            height:300px;
            background: green;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div id="tim"></div>
    <input type="" name="" id="test_input">
    <script type="text/javascript">
        document.getElementById('tim').onclick = function(){
             //函数里面写我们要做的事情
            alert("我是被点击了")
        }
        document.getElementById('tim').onmouseover = function () {
            console.log('鼠标移入我的范围内')
        }
        document.getElementById('tim').onmouseout = function(){
            console.log('鼠标移出了....')
        }
        document.getElementById('test_input').onchange = function(){
            console.log(document.getElementById('test_input').value)
        }
        document.getElementById('test_input').onkeydown = function(){
            console.log('按动键盘')
        }
        document.getElementById('test_input').onfocus = function(){
            console.log('我获取到焦点了')
        }
        document.getElementById('test_input').onblur = function(){
            console.log('我失去焦点了')
        }
    </script>
</body>
</html>

操作DIV的任意样式

通过三个按钮，改变 div 样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #tim{
            width:100px;
            height:100px;
            background: green;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <button id="taller">增高</button>
    <button id="longer">增长</button>
    <button id="changebackground">改变背景颜色</button>
    <div id="tim"></div>
    <script type="text/javascript">
        //文档加载完成之后对其操作
        window.onload = function(){
            //给增高按钮添加事件
            document.getElementById('taller').onclick = function () {
                document.getElementById('tim').style.height = '300px'
            }
            //给增长按钮添加事件
            document.getElementById('longer').onclick = function () {
                document.getElementById('tim').style.width = '300px'
            }
            //给改变颜色按钮添加事件
            document.getElementById('changebackground').onclick = function () {
                document.getElementById('tim').style.background = 'red'
            }
        }
    </script>
</body>
</html>

在这里插入图片描述
操作后

JS的数据类型

基础数据类型

字符串 string
数字(整型浮点型) number
布尔 boolean
null 空对象
undefined 未定义

复杂数据类型

数组 Array
对象 Object

检查数据类型的两种方法

typeof
Object.prototype.toString.call('数据') // 鉴别复杂数据类型、引用数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        console.info('字符串  ' + typeof('string'))
        console.info('数字 ' + typeof(100))
        console.info('布尔值 ' + typeof(true))
        console.info('空对象 ' + typeof(null))
        console.info('未定义 ' + typeof(undefined))
        console.info('对象 ' + typeof({}))
        console.info('数据 ' + typeof([]))
        console.info(Object.prototype.toString.call({}))
        console.info(Object.prototype.toString.call([]))
    </script>
</body>
</html>

在这里插入图片描述

JS 变量

用 var 声明一个变量
变量的限制：

变量的首字母必须由字母(a-zA-Z)或下划线(_)或美元符($)开头，不能是数字
后面的可以是字母(a-zA-Z)或下划线(_)或美元符($)或者是数字，并且是区分大小写的
区分大小写的意思是 var name 和 var Name 是定义两个不同的变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #tim{
            width:100px;
            height:100px;
            background: green;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="tim"></div>
    <script type="text/javascript">
        // 定义变量
        var a = 'miko'
        console.log('我是 ' + a)
        var oDiv = document.getElementById('tim')
        oDiv.style.height = '300px'
    </script>
</body>
</html>

JS 数据类型转换

显式转换(强制内容转换):

Number()
parseInt()
parseFloat()
String()
toString()
Boolean()

隐式转换

操作符或者语句进行运算时
if while 比较里面也会进行隐式转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var a= '123'
        //强制类型转换
        console.info(a,"类型 " + typeof(a))
        console.info(Number(a) + "用number进行类型转换 " + typeof(Number(a)))
        var b = 'abc'
        console.info(b,"类型 " + typeof(b))
        console.info(b,Number(b) + " 用number进行类型转换 " + typeof(Number(b)))
        // NaN 是 Not a number 的缩写，意思是 不是一个数字
        var c = '3.141592657'
        console.info(c,"parseInt转换后",parseInt(c))
        console.info(c,"parseFloat转换后",parseFloat(c))
        var c = '3.141592657abc'
        console.info(c,"parseInt转换后",parseInt(c))
        console.info(c,"parseFloat转换后",parseFloat(c))
        var c = 3
        console.info(c,"parseFloat转换后",parseFloat(c))
        var d = 123456
        console.info(d,"String转换",String(d))
        console.info(d,"toString转换",d.toString())
        console.info(d,Boolean(d))
        var f = 0
        console.info(f,Boolean(f))
        // 隐式转换
        var sum
        sum = 1+2
        console.info('sum = ' + sum)
        // 数字与字符串相加，发生类型转换，会变成字符串之间的拼接
        var sum
        sum = 1+'2'
        console.info('sum = ' + sum,'数字与字符串相加')
        // 判断，数字会转换为字符串
        if(12=='345'){
            console.info('判断成立，输出')
        }
        if(12=='12'){
            console.info('12=“12”判断成立，输出')
        }
    </script>
</body>
</html>

在这里插入图片描述

JS数组类型和对象

数组创建

直接创建

var arr = [] 创建空数组
var arr1 = [1,2] 创建有内容的数据

利用构造函数创建数组
3. var arr1 = new Array() 创建空数组
4. var arr2 = new Array(10) 创建一个长度为10的数组
5. var arr3 = new Array(5,4,3,2,1) 创建数组并初始化

对象创建

直接创建

var obj = {} 创建空对象
var obj1 = {a:1,b:2} 创建有内容的对象

利用构造函数创建

var obj = new Object()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        //创建数组
        var arr = []
        console.log(arr)
        var arr1 = [1,2,3]
        console.log(arr1)
        console.log(arr1.length)
        console.log(arr1[0])
        //创建对象
        var obj = {}
        console.log(obj)
        var obj1 = {a:1,b:2}
        console.log(obj1)
        console.log(obj1.a)
    </script>
</body>
</html>

在这里插入图片描述

Mikowoo007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript--(1)基本内容

一个简单的JS脚本一个效果：鼠标移入div背景颜色变成红色，鼠标移出，背景颜色变回白色事件相应函数： onmouseover 鼠标移入 onmouseout 鼠标移出<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Ti...
复制链接

扫一扫

专栏目录