潭州课堂25班：Ph201805201 WEB 之 JS 第四课 (课堂笔记)

JS 引入方式

在 HTML 中写入

写在的标签里

<script>

</script>
推荐 放在 </body> 结束之前

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div class="box">你好同学</div>

    <script>

        var box=document.querySelector('.box');             //  获取对象

        box.innerText='我好，';

    </script>

</body>

</html>

导入 js 文件

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div class="box">你好同学</div>

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

    <script>

        var box=document.querySelector('.box');             //  获取对象

        box.innerText='我好，';

    </script>

</body>

</html>

// 1.js

var box=document.querySelector('.box');             //  获取对象

box.style.color='red';


获取对象

获取对象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            height: 30px;

            width: 200px;

            background: #525d68;

        }

    </style>

</head>

<body>

    <div>我就是我</div>

    <div id="box1">你就是你</div>

    <div class="box2">他就是他</div>

    <script>

        var box = document.getElementsByTagName('div') ;     //  通过标签获取对象

        console.log(box[0].innerText);

        var box1 = document.getElementById('box1');         //  通过 id 获取对象

        console.log(box1.innerText);

        var box2 = document.getElementsByClassName('box2');

        console.log(box2[0].innerText);

        // CSS 选择器

        var box3 = document.querySelector('div');

        console.log(box3.innerText);

        var box4 = document.querySelector('#box1');

        console.log(box4.innerText);

        var box5 = document.querySelector('.box2');

        console.log(box5.innerText);

        var box6 = document.querySelectorAll('div');        // querySelectorAll 拿到全部对象 用列表

        console.log(box6[0].innerText);

    </script>

</body>

</html>

样式修改

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            height: 30px;

            width: 200px;

            background: yellow;

        }

        .test{

            font-size: 100px;

            color: gray;

        }

    </style>

</head>

<body>

    <div>你好同学</div>

    <script>

        //单个样式修改

        var box = document.getElementsByTagName('div')[0];

        // box.style.fontSize='50px';

        // box.style.color='red';

        //多个样式同时修改

        // box.style.cssText='height;300px; width:200px; color:blue';

        // box.style.cssText=a+ ':' +b;  ==    box.style[0]=b;          // 用于函数中变量传参，

        // //赋值型

        box.className='test';

    </script>

</body>

</html>

鼠标事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box{

            height: 30px;

            width: 100px;

            background: skyblue;

            line-height: 30px;

            text-align: center;

            cursor: pointer;            /*小手*/

        }

        .box1{

            height: 200px;

            width: 500px;

            background: gray;

            margin-top: 20px;

        }

        .box2{

            height: 200px;

            width: 500px;

            background: gray;

            margin-top: 20px;

        }

    </style>

</head>

<body>

    <div class="box">点击事件</div>

    <div class="box1"></div>

    <div class="box2"></div>

    <script>

        // 鼠标单双 击 事件

        var box = document.getElementsByClassName('box')[0];

        box.onclick=function () {

            // console.log('单击')

            var im = document.getElementsByTagName('div')[1];

            im.style.background = "url('https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg')"

        };

        box.ondblclick=function () {

            console.log('双击')

        };

        // 鼠标移入移出

        var box2 = document.getElementsByTagName('div')[2];

        box2.onmouseenter = function(){                     // 鼠标移入

            box2.style.background = 'red';

        };

        box2.onmouseleave = function(){                     // 鼠标移出

            box2.style.background = 'yellow';

        }

    </script>

</body>

</html>

事件操作补充

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <select id="aa">

        <option>1</option>

        <option>2</option>

        <option>3</option>

        <option>4</option>

    </select>

    <script>

        window.onresize = function (ev) {       // 窗口尺寸发生变化，触发

            console.log('123456879')

        };

        //下拉框事件

        var sel = document.getElementById('aa');

        sel.onchange = function () {            // 下拉框事件

            console.log('000000000000')

        };

    </script>

</body>

</html>

属性操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="box">属性操作</div>

    <script>

        // 获取元素

        var box = document.getElementById('box');

        //操作合法属性 （增 删 改 查）

        //增

        box.className = 'test';

        //改

        box.className = 'aa';

        // 查

        console.log(box.className);

        //删

        box.removeAttribute('class');

        //操作自定义属性 （增 删 改 查）

        //增

        box.setAttribute('aa','bb')   ;          // <div id="box" aa="bb">属性操作</div>

        // 改

        box.setAttribute('cc','dd')   ;          // <div id="box" cc="dd">属性操作</div>

        // 查

        console.log(box.hasAttribute('cc'))

        // 删

        box.removeAttribute('cc');

    </script>

</body>

</html>

数据类型

查找数据类型

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <script>

        var a=5;

        console.log(typeof  a);

        var b = 'aaa';

        console.log(typeof b);

        console.log(typeof false)

        var c;

        console.log(typeof c);          // 当 var 了一个变量，但没给其值，就是 undefined 数据类型

        //对象类型  数组

        var d = [1,3,2,4];

         console.log(typeof d);   //object

        //

        var  e={'k1':'v1', 'k2':'v2'};   //object

        console.log(typeof e);

    </script>

</body>

</html>

潭州课堂25班：Ph201805201 WEB 之 JS 第四课 (课堂笔记)的更多相关文章

潭州课堂25班：Ph201805201 WEB 之 JS 第六课 (课堂笔记)
上节补充方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
潭州课堂25班：Ph201805201 WEB 之 JS 第五课 (课堂笔记)
算数运算符 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
潭州课堂25班：Ph201805201 WEB 之页面编写第二课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
潭州课堂25班：Ph201805201 WEB 之页面编写第一课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
潭州课堂25班：Ph201805201 WEB 之 Ajax第八课 (课堂笔记)
js <——>jq <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
潭州课堂25班：Ph201805201 WEB 之 jQuery 第七课 (课堂笔记)
jq 的导入 <body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">< ...
潭州课堂25班：Ph201805201 WEB 之 CSS 第三课 (课堂笔记)
在 CSS 中第个标签都可以认为是个盒子,盒子就有以下几层边框 border border-top: 5px solid black; /*上边框实线*/ border-right: 3px do ...
潭州课堂25班：Ph201805201 WEB 之页面编写第四课登录注册 (课堂笔记)
index.html 首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
潭州课堂25班：Ph201805201 WEB 之页面编写第三课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

随机推荐

php 日期格式转换万能公式
思路用strtotime转换时间的字符串 $t='2017-03-09 02:30'; echo(date('Y-m-d H-i', strtotime($t)));
nodejs 使用mysql 进行查询的问题
因为返回的是个对象 var selectSql1="select * from spc_word_mst where WORD_ID=? limit 0,1 "var select ...
深入解析内存原理：RAM的基本原理
1. 寻址原理概述RAM 主要的作用就是存储代码和数据供CPU 在需要的时候调用.但是这些数据并不是像用袋子盛米那么简单,更像是图书馆中用有格子的书架存放书籍一样,不但要放进去还要能够在需要的时候准确 ...
spring事物回滚遇到的问题
在service层使用声明式事务添加@Transactional(rollbackFor = Exception.class)注解多个方法进行数据库操作,执行失败则隐式的回滚事务,但是已经成功的发方 ...
解决报错SAXNotRecognizedException: Feature 'http://javax.xml.XMLConstants/feature/secure-processing' not recognized
今天调试appium脚本,发现运行脚本就报错 SAXNotRecognizedException: Feature 'http://javax.xml.XMLConstants/feature/sec ...
viewpager显示图片的Adapter
package com.ming.chiye.yishanghorse.Adapter; import android.content.Context; import android.graphics ...
Vue源码
参考文章:http://hcysun.me/2017/03/03/Vue%E6%BA%90%E7%A0%81%E5%AD%A6%E4%B9%A0/?utm_source=qq&utm_medi ...
Dubbo入门---搭建一个最简单的Demo框架
参考文档: https://blog.csdn.net/noaman_wgs/article/details/70214612/
javafx实现模态/模式窗口
import javafx.stage.*; import javafx.scene.*; import javafx.scene.paint.Color; import javafx.scene.c ...
RISC-V架构简介
大道至简——RISC-V架构之魂(上)https://blog.csdn.net/zoomdy/article/details/79580529 大道至简——RISC-V架构之魂(中)https:// ...

潭州课堂25班：Ph201805201 WEB 之 JS 第四课 (课堂笔记)

潭州课堂25班：Ph201805201 WEB 之 JS 第四课 (课堂笔记)的更多相关文章

随机推荐

热门专题