潭州课堂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 ...

随机推荐

ubuntu 禁用 guest 账户
第一步: run the command(s) below: (编辑如下文件) sudo vi /usr/share/lightdm/lightdm.conf.d/50-ubuntu.c ...
移动端中遇到的坑（bug）！！！
1.模拟单选点击的时候,在ios手机下,点击下面的内容选择,会出现页面闪一闪!! 解决方案:样式重置html的时候加上这句 -webkit-tap-highlight-color: rgba(0, ...
编写html与js交互网页心得：编写两个按钮切换显示不同的图片
第一步:先建立一个html网页,如下: <!DOCTYPE html><html> <head> <meta charset="utf-8&quo ...
saltstack自动化运维系列12配置管理安装redis-3.2.8
一.准备redis自动化配置的文件(即安装一遍redis,然后获取相关文件和配置在salt中执行上线) 1.源码安装redis3.2.8并注册为系统服务安装依赖yum install -y tcl ...
Maven编译时，出现找不到符号
解决办法: 如果使用的是聚合工程 1.执行project--clean(eclipse)或者build project(intellij),将项目清理一下. 2.执行聚合工程中的 Maven--cl ...
Android通讯：通话
Android通讯之通话功能的实现: 在Android中,android.telephony.TelephonyManager对象是开发者获取当前通话网络相关信息的窗口,通过TelephonyMana ...
linux设备模型：扩展篇
Linux设备模型组件:总线一.定义:总线是不同IC器件之间相互通讯的通道;在计算机中,一个总线就是处理器与一个或多个不同外设之间的通讯通道;为了设备模型的目的,所有的设备都通过总线相互连接,甚至 ...
Go语言规格说明书之接口类型（Interface types）
go version go1.11 windows/amd64 本文为阅读Go语言中文官网的规则说明书(https://golang.google.cn/ref/spec)而做的笔记,介绍Go语言的 ...
lnmp创建站点
一.创建站点 1.输入命令 lnmp vhost add 输入域名 www.xxx.com 回车回车回车 y创建 n不创建网站如果有目录权限更改目录权限 chown -R www:www /h ...
Laravel框架中Blade模板的用法
1. 继承.片段.占位.组件.插槽 1.1 继承 1.定义父模板 Laravel/resources/views/base.blade.php 2.子模板继承 @extends('base') 1.2 ...

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

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

随机推荐

热门专题