js基础

js导读

'''
js属于编写运行在浏览器上的脚本语言

js采用ECMAScript语法
操作BOM: 浏览器对象模型
操作DOM: 文档对象模型
'''

js引入(*)

<style>
    #box, #wrap, #temp, #res {
        width: 200px;
        height: 200px;
        background-color: red;
        margin-top: 10px;
    }
</style>
<!--1.行间式: 就是代码块书写在全局事件属性中-->
<!--this就是激活该代码块(脚本)的页面标签(页面元素对象)-->
<div id="box" onclick="this.style.borderRadius = '10px'"></div>
<div id="wrap" ondblclick="this.style.backgroundColor = 'orange'"></div>

<div id="temp"></div>
<!--2.内联式-->
<script>
    // id为标签的唯一标识, 使用可以识别到html的具体标签
    temp.onclick = function () { // 完成某一项功能
        this.style.width = "400px";  // this => temp
    }
</script>

<div id="res"></div>
<!--3.外联式-->
<script src="js/1.js">
// js/1.js
res.onclick = function () {  // res点击会触发一个功能
    this.style.height = "100px";  // this => res
    this.style.backgroundColor = "yellow";
    this.style.borderRadius = "50%";
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js引入</title>
    <style>
        #box, #wrap, #temp, #res {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 10px;
        }
    </style>
    <script>
        alert("hello js")
    </script>
</head>
<body>
    <!--1.行间式-->
    <div id="box" onclick="this.style.borderRadius = '10px'"></div>
    <div id="wrap" ondblclick="this.style.backgroundColor = 'orange'"></div>

    <div id="temp"></div>
    <!--2.内联式-->
    <script>
        temp.onclick = function () {
            this.style.width = "400px";
        }
    </script>

    <div id="res"></div>

</body>
<!--3.外联式-->
<script src="js/1.js">
    // 有src链接外部js的script标签相当于单标签, 会自动屏蔽标签内部代码块
</script>

</html>

View Code

js选择器

<div id='box' class="bb"></div>
<div class='box1 bb'></div>
<div class='box1 bb'></div>
<script>
// getElement系列
// box
var box = document.getElementById('box');
// [] | [.box1] | [.box1, ..., .box1]
var boxs = document.getElementsByClassName('box1');  
// [] | [div] | [div, ..., div]    
var divs = document.getElementsByTagName('div');  
    
// 总结: 参数采用的是id名或类名或标签名,不需要带符号(#|.)
</script>

<script>
// 只能获取检索到的第一个满足条件的标签(元素对象)
var div = document.querySelector('.bb');  
// 获取的是满足条件的有双类名的.box1.bb
var divs = document.querySelectorAll('body .box1.bb');
    
// 总结: 参数采用的就是css选择器语法
</script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js选择器</title>
    <style>
        #box, .box1, .box2 {
            background-color: orange;
            width: 200px;
            height: 200px;
            margin-top: 2px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <!--虽然id可以重复, 但是js中就无法唯一标识识别, 所以约定俗成标签id名一定不能重复-->
    <div id="box"></div>

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

    <div class="box2">1</div>
    <div class="box2">2</div>
</body>
<script>
    // 事件绑定这函数的地址, 使用激活事件, 就会通过函数地址找到函数功能体, 完成指定功能
    // 页面如果有两个id="box", 一个都匹配不上
    // box.onclick = function () {
    //     this.style.borderRadius = "50%";
    // }


    // document对象

    // getElement系列选择器
    // 能获得到第一个id="box", 但是第二个永远取不到, 所以id还是不能重复
       document.getElementById('box').onclick = function () {
        this.style.borderRadius = "50%";
    }


    // js变量的定义
    // 关键字(var) 变量名 = 变量值;
    var num = 10;
    // 如何查看变量名
    var a = num;

    // print(num); // 调用浏览器使用打印机

    // 弹出框查看(*)
    // alert(num);
    // alert(a);

    // 浏览器控制台查看(***)
    // console.log(num);
    // console.log(a);

    // 将内容书写到页面(*)
    // document.write(num);   //写到html页面的最后面
    // document.write(a);

    // 断点调试(***)
    // 断点调节(debug)
    // var box = document.getElementById('box');
    // 上面和下面获取的都是第一个box, box的点击事件最终绑定到的是改变背景颜色的函数地址
    // box.onclick = function () {
    //     this.style.backgroundColor = "green";
    // }
    // 通过类名 => 类名可以重复 => 获取的结果是数组(列表)
    var boxs = document.getElementsByClassName('box1');
    console.log(boxs);
    boxs[0].onclick = function () {
        this.style.backgroundColor = 'blue'
    }

    boxs[1].onclick = function () {
        this.style.backgroundColor = 'pink'
    }
    // 通过标签名 => 标签名 => 获取的结果是数组(列表)
    var divs = document.getElementsByTagName('div');
    console.log(divs);
    divs[1].ondblclick = function () {
        divs[1].style.borderRadius = "50%";
    }

</script>

<script>
    // 参数: css语法的选择器
    var box2s = document.querySelectorAll('body .box2');
    console.log(box2s);

    var box2 = document.querySelector('body .box2');
    console.log(box2);
</script>
</html>

View Code

事件

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

// 元素对象.事件名 = 函数
box.onclick = function() {
    // 具体功能代码块; this代表就是激活该事件的元素对象
    this.style.color = 'red'; // 将box的字体颜色修改为红色
}

// 事件名
onclick: ((this: SVGElement, ev: MouseEvent) => any) | null;
ondblclick: ((this: SVGElement, ev: MouseEvent) => any) | null;
onfocusin: ((this: SVGElement, ev: FocusEvent) => any) | null;
onfocusout: ((this: SVGElement, ev: FocusEvent) => any) | null;
onload: ((this: SVGElement, ev: Event) => any) | null;
onmousedown: ((this: SVGElement, ev: MouseEvent) => any) | null;
onmousemove: ((this: SVGElement, ev: MouseEvent) => any) | null;
onmouseout: ((this: SVGElement, ev: MouseEvent) => any) | null;
onmouseover: ((this: SVGElement, ev: MouseEvent) => any) | null;
onmouseup: ((this: SVGElement, ev: MouseEvent) => any) | null;

操作页面文档(*****)

// 1. 通过选择器获取页面元素对象(指定的标签)
// 2. 为该对象绑定事件
// 3. 通过事件中的功能操作元素对象
// i) 修改内容: innerText | innerHTML
// ii) 修改样式
// iii) 修改类名

var box = document.querySelector('.box'); // 获取页面元素
box.onclick = function () {  // 绑定事件
    // 修改内容
    // this.innerText = "innerText";  // 不能解析html标签
    // this.innerHTML = "<i>innerHTML</i>";  // 可以解析html标签

    // 修改样式 => 修改的是行间式 => 优先级高于所有内联外联样式(没有设置!important)
    // this.style.color = "green";
    // this.style.fontSize = "12px";

    // 修改类名
    // this.className = "box1";  // 直接修改类名, 会丢失之前类名下的属性们
    // 在原类名基础上添加类型
    this.className += " box1"; // 多类名之间用空格隔开, 所有做字符串拼接时一定需要添加空格
    // 清除类名
    this.className = "";  // 将类名等于空字符串就是置空类名
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>操作页面文档</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
            font: 900 30px/200px "STSong";
            text-align: center;
            color: red!important;
            margin: 0 auto;
        }
        .box.box1 {
            color: greenyellow!important;
            font-size: 12px;
            font-weight: lighter;
        }
    </style>
</head>
<body>
    <div class="box">文本内容</div>
</body>
<script>
    var box = document.querySelector('.box');
    box.onclick = function () {
        // 修改内容
        // this.innerText = "innerText";
        // this.innerHTML = "<i>innerHTML</i>";  // 可以解析html标签

        // 修改样式 => 修改的是行间式
        // this.style.color = "green";
        // this.style.fontSize = "12px";

        // 修改类名
        // this.className = "box1";  // 直接修改类名, 会丢失之前类名下的属性们
        // 在原类名基础上添加类型
        this.className += " box1";
        // var cName = this.className;
        // console.log(cName);
        // cName = cName + " " + "box1";
        // console.log(cName);
        // this.className = cName;
        // 清除类名
        this.className = "";
    }

</script>
</html>

View Code

计算后样式

// 内联或外联设置的(行间式设置getComputedStyle也能获取到)样式都叫计算后样式，行间式设置的样式是设置好的样式。
.box {
    font-size: 100px;
}

// 如何获取计算后样式
// getComputedStyle(元素对象, 伪类).属性名
var box = document.querySelector('.box');
var ftSize = getComputedStyle(box, null).fontSize;
console.log(ftSize);  // 100px

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>计算后样式</title>
    <style>
        /*计算后样式: 内联式和外联式书写的样式都叫计算后样式*/
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <!--<div class="box" style="font-size: 30px">12345</div>-->
    <div class="box">12345</div>
</body>
<script>
    // 如何获取提取设置好的样式属性值
    var box = document.querySelector('.box');
    var ftSize = box.style.fontSize;  // 这种方式操作的永远是行间式
    console.log(">>>>>>>>>>>>>>>>" + ftSize);

    // 如何获取计算后样式
    // getComputedStyle(元素对象, 伪类).属性名
    ftSize = getComputedStyle(box, null).fontSize;
    console.log("=================" + ftSize);

</script>
</html>

View Code

js基础语法

数据类型

值类型

// Number: 数字类型
var a1 = 10;
var a2 = 3.14

// String: 字符串
var s1 = "123";
var s2 = '456';

// undefined: 未定义
var u1;
var u2 = undefined;

// Boolean: 布尔
var b1 = true;
var b2 = false;

// typeof() 来查看类型

引用类型

// Object
var obj = {};

// Function
var func = function(){}

// Null
var n = null;

其他

//数组对象
a = new Array(1, 2, 3, 4, 5);
a = [1,2,3,4,5]  // 语法糖

//时间对象
a = new Date(); // 当前时间
a = new Date("2019-3-1 12:00:00");  // 设定的时间

//正则
 1.正则 /正则语法/
 2.参数g 全文匹配
 3.参数i 不区分大小写

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js基础语法</title>
</head>
<body>
    js基础语法
    <div id="box"></div>
</body>
<script>
    // 1.定义变量
    var num = 10;
    var s = "hello js";
    console.log(num, "<<>>", s);
    console.log("%d  %s", num, s);
    // 将字符串赋值给页面元素对象
    box.innerText = s;

    //命名规范：
    // 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
    // 区分大小写
    // 不能出现关键字及保留字
    // var var = 30;  // 出错

    // 数据类型
    // 值类型
    // 数字类型 | 字符串类型 | 未定义类型 | 布尔类型
    // 用typeof()函数可以查看变量类型

    // 1.Number
    var a = 10;
    console.log(a, typeof(a));
    a = 3.14;
    console.log(a, typeof(a));

    // 2.String
    a = '123';
    console.log(a, typeof(a));
    a = "456";
    console.log(a, typeof(a));

    // 3.undefined
    var b;
    console.log(b);
    a = undefined;
    console.log(a, typeof(a));

    // 4.boolean
    a = true;
    console.log(a, typeof(a));
    b = false;
    console.log(b, typeof(b));


    // 引用类型
    // 5.Function
    a = function () {
        return 0;
    }
    console.log(a, typeof(a));


    // 6.Object => 当做字典
    a = {
        name: "Bob",
        age: 18
    }
    console.log(a, typeof(a));

    // 7.Null => 空对象
    a = null;
    console.log(a, typeof(a));


    // 其他
    // 数组对象
    a = new Array(1, 2, 3, 4, 5);
    console.log(a, typeof(a));
    a = [5, 4, 3, 2, 1];  // 语法糖
    console.log(a, typeof(a));

    // 时间对象 (cookie)
    a = new Date(); // 当前时间
    // a = new Date("2019-3-1 12:00:00");  // 设定的时间
    console.log(a, typeof(a));
    var year = a.getFullYear();
    console.log(year)
    console.log(a.getDay())  // 周几
    console.log(a.getMonth())  // 月份(从0)
    console.log(a.getDate())  // 几号

    // 正则
    var re = new RegExp('\\d{3}', 'g');
    var res = "abc123abc123".match(re);
    console.log(res);

    re = /\d{2}/g;
    res = 'a1b23c456'.match(re);
    console.log(res);

    re = /[abc]/gi;
    res = 'aBc'.match(re);
    console.log(res);
    // 总结:
    // 1.正则 /正则语法/
    // 2.参数g 全文匹配
    // 3.参数i 不区分大小写


    // 数组与对象(字典)的使用
    var arr = [3, 5, 2, 1, 4];
    console.log(arr[2]);

    var dic = {
        "name": "Bob",
        age: 18,
        "little-name": "b"
    }

    console.log(dic['name']);
    console.log(dic['age']);
    console.log(dic.name);
    console.log(dic.age);
    console.log(dic["little-name"])  //括号中包含特殊字符 只能采用这种访问方式
    // dic中所有的key都是string类型, value可以为任意类型
    // dic中key可以通过中括号及.语法访问值,但key不满足js命名规范时,只能使用中括号语法

</script>
</html>

View Code

posted @ 2019-01-22 19:59 zhao_peng 阅读(169) 评论(0) 编辑收藏举报

刷新页面返回顶部

zhao_peng

js基础

js导读

js引入(*)

js选择器

事件

操作页面文档(*****)

计算后样式

js基础语法

数据类型

公告