1. 技术文章
  2. JavaScript--(1)基本内容

JavaScript--(1)基本内容

由 寵の児 提交于 2019-12-24 01:02:12

一个简单的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 时页面标签还没加载

  1. window.onload 的作用是当页面加载完成后自动触发该事件
  2. 一个页面应该只有一个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的数据类型

基础数据类型

  1. 字符串 string
  2. 数字(整型浮点型) number
  3. 布尔 boolean
  4. null 空对象
  5. undefined 未定义

复杂数据类型

  1. 数组 Array
  2. 对象 Object

检查数据类型的两种方法

  1. typeof
  2. 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 声明一个变量
变量的限制：

  1. 变量的首字母必须由字母(a-zA-Z)或下划线(_)或美元符($)开头，不能是数字
  2. 后面的可以是字母(a-zA-Z)或下划线(_)或美元符($)或者是数字，并且是区分大小写的
  3. 区分大小写的意思是 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 数据类型转换

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

  1. Number()
  2. parseInt()
  3. parseFloat()
  4. String()
  5. toString()
  6. Boolean()

隐式转换

  1. 操作符或者语句进行运算时
  2. 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数组类型和对象

数组创建

直接创建

  1. var arr = [] 创建空数组
  2. 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) 创建数组并初始化

对象创建

直接创建

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

利用构造函数创建

  1. 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>

在这里插入图片描述

标签
meta
typeof
meta标签
js
html文件
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!