JavaScript入门

最新推荐文章于 2024-09-12 14:28:05 发布

D11_

最新推荐文章于 2024-09-12 14:28:05 发布

阅读量849

点赞数 9

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Dxh0112_/article/details/140148684

版权

一.js介绍

1.介绍：JavaScript是一种轻量级的编程语言。是可插入HTML页面的编程代码

2.作用：JavaScript控制了网页的行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js介绍</title>
<!--    第一种引入方式，在head标签对里面，使用script标签对来书写-->
<!--    <script>-->
<!--        alert(123)-->
<!--    </script>-->

<!--    第三种 引入外部js文件 使用script标签对中的src属性来引入 但是要注意，引入js文件的这个script标签对里 就不能再写js代码了-->
    <script src="js介绍.js"></script>
</head>
<body>
<div>abc</div>

<!--第二种引入方式，放在body中，所有HTML代码的最下面-->
<!--     <script>-->
<!--        alert(123)-->
<!--     </script>-->
</body>
</html>

二.js获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js获取元素</title>
</head>
<body>
<div id="div1">zxc</div>
<div class="box1">21w3w3</div>
<div class="box1">21wefw</div>
<div class="box1">2fwefe</div>
<div name="box2">35252</div>
<div name="box2">35fsg</div>
<div name="box2">322252</div>
<div name="box2">3523332</div>
<script>
    //类似于python中的print，但是它是打印到控制台
    //console.log(123)

    //js获取独有标签，也就是只能出现一次的标签（不是只出现过一次的）
    //document代表当前整个文档对象
    //文档对象.title，就可以获取到title里面的内容
    console.log(document.title)
    //获取head标签对，获取body标签对
    console.log(document.head)
    console.log(document.body)


    //js获取其他标签（可以有多个标签）
    //根据标签的id获取具体的标签，getElementById括号内是一个字符串，字符串的值就是你要获取的那个元素的id值
    console.log(document.getElementById(div1))

    //根据class值获取标签，由于class可以重复，所以方法名中的element后面有s，而且他获取到的数据 是一个集合
    //这个获取到的集合，就可以当成列表来用，他具备列表的基本的特性，比如下标
    console.log(document.getElementsByClassName('box1'))
    console.log(document.getElementsByClassName('box1')[1])

    //根据标签名来获取，它也是一次性获取多个，得到的也是一个集合
    console.log(document.getElementsByTagName('box2'))

    //根据name属性去获取，获取到的是一个NodeList，但是也可以当成列表来用
    console.log(document.getElementsByName('box2'))
    console.log(document.getElementsByName('box2')[1])

    //根据css选择器的语法来获取元素，他只会获取一个，就是满足你的css选择器的条件的最开始的那个
    console.log(document.querySelector('div'))
    //如果想要全部获取，就在方法名后面加All，得到的是一个NodeList
    console.log(document.querySelectorAll('div'))

    //修改标签对内容
    //innerText,作用就是修改标签对的文本
    //定义变量并且给他赋值
    div1 = document.getElementById('div1')
    div1.innerText = '<h1>哈哈哈</h1>'

    //innerHTML,也可以修改标签对的文本内容，同时还会解析其中的html代码
    div2 = document.getElementsByName('box2')[0]
    div2.innerHTML = '<h1>qqq</h1>'
</script>
</body>
</html>

三.js简单事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js简单事件</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<button>单击</button>
<button>双击</button>
<div></div>
<script>
    btn = document.getElementsByTagName('button')
    //onclick就代表单击事件，给它赋值就是代表它单击要执行什么操作，一般这个值都是一个匿名函数，然后这个函数里面才是要执行的内容
    btn[0].onclick = function () {
        console.log(123)
        //this，类似于python中的self，代表当前正在发生事件的这个元素
        console.log(this)
    }
    //双击事件
    btn[1].ondblclick = function () {
        console.log(456)

    }

    //鼠标划入划出事件
    div = document.getElementsByTagName('div')[0]
    //划入
    div.onmouseenter = function () {
        console.log(1)

    }
    //划出
    div.onmouseleave = function () {
        console.log(2)

    }
</script>

</body>
</html>

四.js修改样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js修改样式</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="div1"></div>

<script>
    div = document.getElementsByTagName('div')[0]
    //利用类似于给对象属性重新赋值的方式去修改css样式
    //在style标签对里面可以设置的内容，在这里都可以修改，只不过某些属性名可能会和style里面不一样
    // div.style.width = '100px'
    // div.style.height = '100px'
    // div.style.backgroundColor = 'green'

    //一次性修改某个元素的多个样式
    //在style里面怎么写，这里的值就怎么写
    // div.style.cssText = 'width:200px;height:200px;background-color:pink;'


    //通过js操作元素的属性
    //如果元素本身没有class那就是添加class，如果有 就变成修改class值
    div.className = 'div1'
    //设置属性和属性值，有就修改
    div.setAttribute('ab','def')
    //查看属性是否存在，结果是false或者true
    console.log(div.hasAttribute('id'))
    //获取属性值，如果你要获取的这个属性不存在，那就得到一个null
    console.log(div.getAttribute('id'))
    //删除属性
    console.log(div.hasAttribute('class'))
    div.removeAttribute('class')
    console.log(div.hasAttribute('class'))
</script>
</body>
</html>