JavaScript 01：基础

最新推荐文章于 2024-07-31 16:33:32 发布

南风和云

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量210

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/A15535286714/article/details/117710641

版权

一.JS引入方式

1.写在 head 中

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert (123)
    </script>
</head>

2.写在 button 的下面

<body>

<button>按钮</button>
<script>
    var btn = document.getElementsByTagName("button")[0]
    console.log(btn);
</script>

</body>

3.利用 script 中的 src 引入（像 link 引入 css 一样）

<script src="js_01.js"></script>

二.JS 获取标签

1.获取独有标签

（1）标题标签

console.log(document.title);

（2）获取头部标签.

console.log(document.head);

（3）获取 body 内容

console.log(document.body);

（4）输出内容

console.log(3);

2.其他标签的获取

（1）通过 id 获取元素

<p id="p1">段落</p>
<span class="sp1">我是天才</span>
<span class="sp1">我是天才</span>

var p1 = document.getElementById("p1")
    console.log(p1)

（2）通过 class 获取元素

可以通过索引来取值

var sp1 = document.getElementsByClassName("sp1")[0]
    console.log(sp1)

3.通过 css 选择器获取元素

（1）querySelector

console.log(document.querySelector(".sp1"));

（2）querySelectorAll

console.log(document.querySelectorAll(".sp1")[0]);

4.修改文本（inner）

（1）Text

p1.innerText = "我今天真漂亮"

(2) Html

html 可修改文本内容的字体大小，而 text 不可以。而在修改 class 时，需要指明下标

p1.innerHTML = "<h1>今天我格外帅</h1>"

三.JS 简单事件

1.单击事件(onclick)

<script>
    // 获取元素
    var obtn = document.getElementsByTagName("button")
    // 单击事件
    obtn[0].onclick = function (){
        console.log(1);// 功能
        console.log(this);// 功能
    //    在事件 this 表示接受事件的元素
    }
</script>

2.双击事件（ondblclick）

obtn[1].ondblclick = function () {
        console.log(2);
    }

3.鼠标划入事件（onmouseenter ）

var odiv = document.getElementById("div1")
    odiv.onmouseenter = function (){
        console.log(1);

4.鼠标划出事件（onmouseleave）

odiv.onmouseleave = function (){
        console.log(1.2);
    }

四.JS 修改样式

1.直接修改

var odiv = document.getElementsByTagName("div")[0]
    odiv.onclick = function () {
        //修改样式
        odiv.style.width = "300px"
        odiv.style.height = "300px"

2.间接修改

此方法与上一种方法的区别在于，此种方法可以传变量，但第一种方法不可传变量

a = width
    odiv.style["a"] = "300px"
    odiv.style["backgroundColor"] = "green"

3.cssText

odiv.style.cssText = "width:300px;height:300px"

4.增加 class 属性

var obtn = document.getElementsByTagName("button")
    obtn[0`在这里插入代码片`].onclick = function () {
        odiv.className = "div1"

5.删除 class 属性（removeAttribute）

obtn[1].onclick = function () {
        odiv.removeAttribute("class")
    }

6.增加删除 id name 与 class 相同（setAttribute）

var obtn = document.getElementsByTagName("button")
    obtn[0].onclick = function () {
        // 添加 class 属性
        odiv.setAttribute("id","div1")

7.查看属性是否存在（hasAttribute）

存在返回 true 不存在返回 false

console.log(odiv.hasAttribute("id"));

五.数据类型

1.数值型（number）

2.布尔型（ture flase）

3.未定义型（undefined）

4.字符串（string）

5.空值（null）

6.对象（object）

包括字典，列表

南风和云

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript 01：基础

一.JS引入方式1.写在 head 中<head> <meta charset="UTF-8"> <title>Title</title> <script> alert (123) </script></head>2.写在 button 的下面<body><button>按钮</button><script>
复制链接

扫一扫