Javascript

标签：arr console log res Javascript var string

JS的引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的引入方式</title>
    
</head>
<body>
    <!-- js的第一种引入方式 -->
   <script>
        alert("js的第一种引入方式")
    </script> 

    <!-- js的第二种引入方式 文件引入 -->
   <script src="myjs.js"></script> 
    
    <!-- js的第三种引入方式 -->
    <!-- onclick单击事件 -->
    <div onclick="alert(11)" >点我1</div>

    <!-- js的第四种引入方式 -->
    <a href="javascript:alert('你点我了么?')">点我2</a>

</body>
</html>

注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注释/变量</title>
</head>
<body>
    <script>
        // ###1 注释分为两类: (1) 单行注释 (2) 多行注释
        // 我是单行注释
        /* 我是多行注释 */

        // ###2 变量
        /* var的用作是划分当前变量的作用域 不写var,默认声明全局的变量 */
        var a = 1;
        var a=1,b=2,c=3
        console.log(a);
        console.log(b,c)

        // ###3 变量的命名
        var $ = "特殊的变量名";
        var $abc = 111;
        console.log($);
        console.log($abc);

    </script>

</body>
</html>

JS数据类型

基本数据类型

Boolean

var a1 = true;  //小写
var a1 = false;
console.log( a1 , typeof(a1) )

Number

var num = 0b101;
var num = 0o127;
var num = 0xff;
var num = 1000;
var num = 3.13;
var num = 3.13e2;

// Infinity  无穷大
var num = 3.13e999999999999999999999999999999999999;

// -Infinity 负无穷大
var num = -3.13e999999999999999999999999999999999999;
console.log(num , typeof(num) )

// NaN =>  not a number 不是一个数字
/*
            1.NaN和任何数字计算都是NaN
            2.与NaN做比较,除了NaN!=NaN为真,剩下都是false
*/
var num = 10 - "abc"; //NaN
var num = NaN + 1
var num = NaN == NaN
var num = NaN != NaN; // true 
var num = NaN > 100;  // false
var num = isNaN(NaN); // true
console.log(num , typeof(num))

String

	    // 单引号''
        var string = 'I love js';

        // 双引号""
        var string = "i love python very much";

        // 在转义字符前面加\,防止转义原型化输出
        var string = "我爱你,\\n 中国"
        console.log(string)

        // 反引号`` 1.支持跨行 2.解析变量
        // 1.支持跨行
        var string = `
        <ul>
            <li>111</li>
        </ul>
        `
        // 2.解析变量 ${变量名}
        var name = "赵沈阳";
        var string = `${name}`;
        
        console.log(string , typeof(string))   // 赵沈阳

Undefined

null

[!NOTE]

以上两者属于设计出继承object的对象

引用数据类型

object

所有引用数据类型继承object

var obj = new Object()
var obj = {}        
console.log(obj,typeof(obj))

字典格式

var obj = {"a":1,"b":2}
console.log(obj , typeof(obj))


//js对象,可以在类外添加成员
obj.name = "张三";
console.log(obj , typeof(obj));

Array

var arr = new Array();
var arr = [];
arr[0] = 10;
arr[1] = 11;
arr[2] = 12;
var arr = [10,11,12,13];
console.log(arr , typeof(obj));

function

function func(){
console.log("我是函数");
}
func()
console.log(func,typeof(func))

Date

强制转换

boolean

/*
            //布尔类型为假的七中情况:
            0 0.0 '' NaN undefined null false 
 */
var a = false;
var a = null;
var a = 0;
var a = 0.0;
var a = '';
var a = NaN;
var a = undefined;

// 注意点 空数组 空对象都是true
var a = []; // true
var a = {}; // true
var res = Boolean(a);
console.log(res , typeof(res));

Number

parseInt

// 1. parseInt 强制转换成整型 
/* 要求: 必须数字开头; */
var num = 1.934567; //1
var num = "abc";    //NaN
var num = "123";    //123
var num = "123abc"; //123
var num = "abc123"; //NaN
var num = "1.34abc" //1
var num = []        //NaN 
var num = false        //NaN 
var res = parseInt(num); 
console.log(res ,typeof(res))

parseFloat

// 2.parseFloat 强制转换成浮点型
/* 要求: 必须数字开头; */
var num = 100; //1
var num = "abc";    //NaN
var num = "123";    //123
var num = "123abc"; //123
var num = "abc123"; //NaN
var num = "1.34abc"; //1.34
var num = {};        //NaN 
var num = true;
var res = parseFloat(num); 
console.log(res ,typeof(res))

Number

var a = false
var a = "123.456"; //123
var res = Number(a)    // string ——》  number
console.log(res ,typeof(res))

String

/*
	 字符串的强转是在原有类型的两边套上引号,表达字符串类型;
*/
var a = 100;
var a = 4.89;
var a = "abc";
var a = [];
var a = undefined;
var a = null;
var a = NaN;
var res = String(a);
console.log(res , typeof(res))

自动类型转换

// 1.Number+Boolean
console.log(res ,typeof(res))  // 11
var res = 3.4 + true;
console.log(res ,typeof(res))  // 4.4
var res = 10 + 3.1;
console.log(res ,typeof(res))  // 13.1

// 2.Number+Boolean+String (对于字符串来说 +号意味着拼接)
var res = true + "100";
console.log(res ,typeof(res))  //true100
var res = 100 + "101" + 100;
console.log(res,typeof(res))   //100101100

// 3.除了+号,剩下的都可以做运算(必须是数值)
var res = 100 - "101";
console.log(res ,typeof(res)) //-1
var res = 100 - "99abc";
console.log(res,typeof(res))  //NAN

运算符

// (1) ++ -- 递增,递减
// num++ 先赋值在自增
var num = 100;
var res = num++;
console.log(res , typeof(res));
var res = num++;
console.log(res , typeof(res));
// ++num 先自增在赋值
var num = 100;
var res = ++num;
var res = ++num;
console.log(res , typeof(res));

// (2) === !== (全等于,不全等于)比较两样东西1.比较值的大小 2.比较值的类型
var res = "1" == 1;
console.log(res , typeof(res));
var res = "1" === 1;
var res = "1" !== 1;
console.log(res , typeof(res));

// (3) && => and  ,  || => or   ,  ! => not
var num = 8
if(num > 5 && num <10){
	console.log("ok1~");
}

if(num>10 || num < 3){
	console.log("ok2~");
}
var num = 0
if(!num){
	console.log("ok3~");
}

// (4) 三元(目)运算符
var age = 18;
var res = age >= 18 ? "成年人":"儿童";
console.log(res)

for的特性

for( var i in Iterable ) 获得索引号

 console.log("<===============第一组===================>")
//for( var i in Iterable )  获取的是数组中的索引号;
var arr = ["孟浩然","赵子龙","康乃馨","张飞","汪精卫"];

for(var i in arr ){
    console.log(i);
    console.log(arr[i]);
}

console.log("<===============第二组===================>")
// 获取的是js对象中的键
var dic = {"a":"王同培","b":"马村你","c":"张宇"};
for(var i in dic){
    console.log(i)       
    console.log(dic[i]) ;    
}

for( var i of Iterable ) 获得索引号

console.log("<===============第三组===================>")
// ### 4.for( var i of Iterable ) 获取的是数组中的值; [等价于python中 for i in Iterable:]
for(var i of arr){
    console.log(i);
}

console.log("<===============第四组===================>")
// 注意点: for(var i of dic) 不能遍历js对象[字典] error
/*
        var dic = {"a":"王同培","b":"马村你","c":"张宇"};
        for(var i of dic){
            console.log(i)     
        }
        */
// 字符串的遍历:
for(var i of "abcdefg"){
    console.log(i)
}

函数

普通函数

//普通函数 (存在预加载机制,提前把函数加载到内存中,然后代码整体在执行)
func1()
function func1(){
	console.log(111);
}

匿名函数

// 方式二 匿名函数(匿名函数没有预加载价值,必须先定义在调用)
// func2() error
    var func2 = function(){
    console.log('我是func2~');
}
func2();

使用new创建对象函数

var func3 = new Function("alert('我是func3~');alert('woshi3333');");
console.log(func3,typeof(func3));
// func3();

// 使用关键字
var func4 = new Function("x","y","alert(x+y)");
func4(5,6);

闭包函数

function func5(){
    var a = 100;
    function func6(){
        console.log(a,"<===>");
        return "我是闭包函数";
    }
    return func6;
}

func = func5();
res = func();
console.log(res);

箭头函数

function mysum(x,y){
    return x+y;
}
res = mysum(5,6)
console.log(res);

//	箭头函数
var mysum = (x,y)  =>  {return x+y;}        
var res = mysum(5,6);
console.log(res);

函数的参数只有普通位置参数,默认参数

[!NOTE]

js中的形参实参不匹配不会报错

arguments

自动收集所有的实参

function func8() {
// console.log(a,b)
// console.log(arguments)
var total = 0;
for(var i of arguments){
    total += i;
    console.log(i);	
}
return total;
}
res = func8(1,100,2,3,4,5,56,6);
console.log(res);

函数的调用

正常调用

function func(){
            console.log("函数正在执行 ... ");
        }

// 1.正常调用
 func();

函数立即执行

(function func2(){
    console.log("函数正在执行2 ... ")
})();

!function(){
    console.log("我在执行4 ... ");
}();

~function(){
    console.log("我在执行5 ... ");
}();

//匿名函数的立即执行
(function(){
    console.log("匿名函数正在执行3 ... ")
})();

对象

定义对象方法一

var obj = new Object();
console.log(obj , typeof(obj))

//类外添加成员
obj.name = "孙坚";
obj.age = 18;
obj.weight = "200斤";
obj.eat = function(){
    alert("我会吃竹子");
}
console.log(obj.name)

obj.eat();

定义对象方法二

var obj = {
    name:  "张三",
    age : 20,
    sex   : "男性",
    drink : function(something){
        console.log("我会喝牛栏山",something);
    }
}

//调用对象
console.log(obj["age"])  // obj[Key]
//调用函数
obj["drink"](1)

定义对象方法三似类

function Person(name,age,sex){
    //this 为 本对象的指针
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.func = function(){
        console.log("我是func");
        return this.sex;
    }
}

var obj1 = new Person("刘一风",30,"男性");
var obj2 = new Person("张三风",90,"女性");

通用调用方式

//对象.属性
//对象.函数()

遍历调用

// 打印对象的key值
for(var i in obj1){
    console.log(i)  //type is string
}  
 
// with(对象的属性) 语法可以直接获取对象成员的值
with(obj1){
    console.log(name);
    console.log(sex);
    console.log(age);
    res = func();
    console.log(res);
}

//遍历对象中的数据;
for(var i in obj1){
    with(obj1){
        console.log(eval(i)) // 通过eval解析string
    }
}

Json对象

stringfy

var data = {
    'name':"文东",
    age:20,
    "sleep":function(){
    alert("文东一天睡23小时,还有一个小时上厕所.");
	}
}
// js对象 => json格式的字符串
var res = JSON.stringify(data);
cons  e.log(res , typeof(res)); // {"name":"文东","age":20}

parse

// json格式的字符串 => js对象

res = '{"name":"东东","age":30}';  
var res2 = JSON.parse(res);
console.log(res2,typeof(res2));

字符串对象

length

var string = "to be or not to be";
// 获取字符串长度 length	
var res = string.length
var res = string[-1] // js中不可以
console.log(res)

trim

// 清除两侧的空白 trim
var res = string.trim()
console.log(string)
console.log(res)

indexof

// 获取首次出现的位置 indexOf  
/*找不到返回-1*/
var string = "to be or not to be";
var res = string.indexOf("z")
console.log(res)

lastIndexof

// 最后一次出现的位置 lastIndexOf 
/*找不到返回-1*/
var res = string.lastIndexOf("zzz")
console.log(res)

concat

// 连接字符串	concat	 [ python的 os.path.join  + ]
var res = string.concat("d:\\","python32\\","day42");
console.log(res);

slice

// 截取字符串 slice
/* string.slice(开始值,结束值) 字符串的切片  留头舍尾  [支持逆向下标]*/
var string = "11122233e or not to be";
var res = string.slice(1,7);
var res = string.slice(-5,-1);      // to b
// var res = string.slice(-5,-10); //截取不到返回空
console.log(res)

substr

// 截取字符串 substr
/* string.substr(开始值,截取几个) */
var string = "11122233e or not to be";
var res = string.substr(3,4)
console.log(res)

split

// 拆分字符串 split  [ python的 split ]
var string = "11122233e or not to be";
var res = string.split(" ")
console.log(res)

toUpperCase

// 全部大写
var string = "11122233e Or noT tO be";
res = string.toUpperCase();
console.log(res)

toLowerCase

// 全部小写
var string = "11122233e Or noT tO be";
res = string.toLowerCase();
console.log(res)

search

// 匹配第一次找到的索引位置,找不到返回-1
var string = "aaabbb oldaoy ccc"
 /* /正则表达式/修饰符 g:全局匹配 i:不区分大小写 m:多行匹配  */
var res = string.search(/oldboy/) 
console.log(res) //7

match

// 返回匹配的数据
/* /正则表达式/修饰符 g:全局匹配 i:不区分大小写 m:多行匹配  */
var string = "我的电话是 : 13838384388 你的电话是: 13854381438"
var res = string.match(/\d{11}/);  // 匹配一个
var res = string.match(/\d{11}/g); // 匹配多个,(需要修饰符加上g) 
console.log(res) // 一个对象
console.log(res[0]) //找到的第一个值
console.log(res[1]) // 全局匹配的找到的第二个值

replace

//字符串替换 replace
/* replace默认只替换一次 */
var string = "to be or not to be";
var res = string.replace("to","two")
console.log(res)      // two be or not to be

实现replace全替换

方法一

function myreplace(string,a,b){
    /*
                找最后一个to,如果找不到返回-1
                如果能找到就不停的进行替换,直到-1为止,循环终止;
   */
    while(string.IndexOf(a) != -1){
        console.log(1)
        string = string.replace(a,b);
    }
    return string;
}  

var string = "to be or not to be";   
var res = myreplace(string,"to","two")
console.log(res) // two be or not two be

方法二

var string = "to be or not to be";
var res = string.replace(/to/g,"two");    //正则全局搜索所有的替换
console.log(res)

数组对象

定义

var arr = Array();
var arr = Array(10,11,12);
var arr = [15,16,17]
console.log(arr , typeof(arr))

增加

var arr = [];
arr[0] = 10;
arr[1] = 11;
arr[2] = 12;

// js特征:允许在一个临时的索引值上插入数据; 
arr[10] = 50; // 跨越3-9下标
console.log(arr)
console.log(arr[5])

push

// 从数组的最后插入元素  
var arr = [];
var res = arr.push(111);
var res = arr.push(222);
var res = arr.push(333);
console.log(res,arr)

unshift

// unshift 从数组的前面插入元素 
var arr = [100,101];
var res = arr.unshift(1);
var res = arr.unshift(333);
console.log(res , arr);

concat

// concat 迭代追加数据 
var arr1 = [1,2,3]
var arr2 = ["你好","我好","她也好"]
var res = arr1.concat(arr2)
console.log(res, typeof(res));

删除

delete

// delete 删除
/* 把值删掉了,原位置用空来取代,返回undifined */
var arr = [1, 2, 3, "你好", "我好", "她也好"];
delete arr[1];
console.log(arr);
console.log(arr[1])

pop

// 从后面删除
var arr = [1, 2, 3, "你好", "我好", "她也好"];
delete arr[1];
console.log(arr);
console.log(arr[1])

shift

// (shift 从前面删除
var arr = [1, 2, 3, "你好", "我好", "她也好"];
var res = arr.shift()
console.log(res , arr)

改查

splice

// 特别splice  从指定位置往后进行删除或者添加
/* arr.splice(从第几个位置开始,删除几个,[可选的是添加的元素])   */
var arr = [1, 2, 3, "你好", "我好", "她也好"];
// 从第二个2位置开始,删除2个
var res = arr.splice(2,2)
console.log(res , arr)

// 从第二个2位置开始,删除0个,添加,"hello","world"
var arr = [1, 2, 3, "你好", "我好", "她也好"];
var res = arr.splice(2,0,"hello","world")
console.log(res , arr)

其他

join

// 拼接字符串  join
var arr = ["you","can","you","up"];
var res = arr.join("#")
console.log(res)

reverse

// 数组元素反转 reverse
var arr = [100,200,3,150];
var res = arr.reverse();
console.log(res);

slice

// 截取数组的一部分 slice 
/* arr.slice(开始值,结束值) 数组的切片  留头舍尾  [支持逆向下标]*/
var arr = ["宋健","何旭彤","刘利伟","高雪峰","戈隆","王致和","马生平"]
var res = arr.slice(2)
var res = arr.slice(2,4)
var res = arr.slice(-3,-1)
console.log(res);

sort

// 排序 默认升序 sort 对字符串形式排序
var arr = ["1","2","3","4","9","22","21"];
var res = arr.sort()
console.log(res)


// 对数字排序
var arr = [100,1,2,3,4,9,22,21];
// sorted 里面的参数是一个函数,通过函数进行升序或者降序排序;
/* return 1代表交换位置,如果return -1 代表不交换位置 */
var res = arr.sort(function(a,b){
 	return a-b;
});
console.log(res)

数学对象

round

//四舍五入round
var res = Math.round(3.5)
var res = Math.round(2.5)
var res = Math.round(2.31)
console.log(res)

max/min

//最大值 max        
var res = Math.max(1,2,3,4,34343);
//最小值 min
var res = Math.min(1,2,3,4,34343);
//绝对值 abs
var res = Math.abs(-90);
console.log(res)

abs

//绝对值 abs
var res = Math.abs(-90);
console.log(res)

floor/ceil

//向下取整 floor 地板
var res = Math.floor(3.001)
//向上取整 ceil 天花板
var res = Math.ceil(3.990)

pow

//幂运算 pow
var res = Math.pow(2,3)

sqrt

//开方运算 sqrt             
var res = Math.sqrt(9)
console.log(res)

random

//获取从0到1随机值   0<x<1
var res = Math.random()
console.log(res)


//获取1~10的随机值 1 <= x <= 10
var res = Math.ceil(Math.random() * 10 )
console.log(res)

// 获取从 m 到 n 的随机值 

function randrange(m,n){
    return Math.ceil(Math.random() * (n-m+1) ) + (m - 1);
}

日期对象

getFullYear

getMonth

getDate

getHours

getMinutes

getSeconds

  var obj = document.getElementById("clock");
        console.log(obj)
        function func(){
            var d = new Date();
            console.log(d);
            // 获取年份
            var year = d.getFullYear()
            // 获取月份 月份范围 0 ~ 11 0代表1月份
            var month = d.getMonth()
            // 获取日期
            var date = d.getDate()
            // 获取小时
            var hour = d.getHours()
            // 获取分钟
            var minutes = d.getMinutes()
            // 获取秒数
            var seconds = d.getSeconds()
            strvar= `现在的时间是: ${year}年-${month+1}月-${date}日  ${hour}:${minutes}:${seconds}`;
            console.log(strvar);
            obj.innerHTML = strvar
            console.log(minutes, typeof(minutes));

            // 清除定时器的效果
            if(minutes == 8){
                clearInterval(id);
            }

        }

        var id = window.setInterval(func,1000)

BOM对象

alert

//弹出警告框 
window.alert('你好')

confirm

// 确认弹窗
var res = window.confirm("确认弹窗")
// res is true or false

prompt

var res = window.prompt("请输入您的银行密码:")
console.log(res);

close

// 关闭浏览器窗口
window.close();

innerHeight/innerWidth

// innerHeight innerWidth 获取浏览器窗口内部的宽和高
console.log(`浏览器窗口内部的宽度${window.innerWidth}`)
console.log(`浏览器窗口内部的高度${window.innerHeight}`)

定时器

setinterval

settimeout

/*
            # 定时器种类(两种):基于单线程的异步并发程序;
            window.setInterval(函数名,间隔时间(毫秒))   // 定时执行多次任务
            window.setTimeout(函数名,间隔时间(毫秒))    // 定时执行一次任务
            
            retrun 定时器的序号

            window.clearInterval(id号)  // 清除定时器 setInterval
            window.clearTimeout(id号)   // 清除定时器 setTimeout

*/

navigator

console.log(navigator);
console.log(navigator.platform)  // 判断是pc端还是移动端
console.log(navigator.userAgent) // 在爬虫程序中,可以伪造成浏览器进行数据爬取,绕开服务端的反爬机制;

History


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="func1()">查看历史对象</button>
    <button onclick="func2()">跳转到上一页</button>
    <button onclick="func3()">跳转到下一页</button>
    <button onclick="func4()">当前页面刷新</button>
    <script>
        function func1(){
            console.log(history);
        }

        function func2(){
            history.go(-1);
        }

        function func3(){
            // history.go(1);
            history.go(2);
        }

        function func4(){
            history.go(0);
        }
    </script>
    
</body>
</html>

location

console.log(location);
console.log(`协议:${location.protocol}`);
console.log(`ip端口号:${location.host}`);
console.log(`端口号:${location.port}`);
console.log(`路径:${location.pathname}`);
console.log(`获取锚点:${location.hash}`);
console.log(`获取地址栏参数:${location.search}`);
console.log(`完全地址:${location.href}`)

跳转

// location.href = "http://www.baidu.com";方法一
location.assign("http://www.jd.com");

刷新

location.reload();

过一秒再刷新

// 过一秒在刷新页面
function func4(){
    setTimeout(func3,1000);
    console.log("我执行了...")
}

DOM对象

<body>
    <div id="box">
        <p class="p1" >张三</p>
        <p class="p2">李四</p>
        <p class="p3">赵刘</p>
        <p name="ceshi1"></p>
        <p name="ceshi1"></p>
    </div>

    <div>
        <input type="text" name="username" />
        <input type="password" name="pwd" />
        
        <p1>112233</p1>
        <box>55666</box>
        
</body>

document

返回整个文档对象

document.documentElement

返回整个文档的Html部分

document.getElementById

// 通过id获取div节点对象
var box = document.getElementById("box");
console.log(box);

getElementsByClassName

// 通过类名获取节点对象 [返回的是数组]
var p2 = document.getElementsByClassName("p2");
console.log(p2 , typeof(p2));

document.getElementsByTagName

// 通过标签获取节点对象 [返回的是数组]
var p = document.getElementsByTagName("p");
console.log(p)
console.log(p[1])

document.getElementsByName

// 通过标签身上的name属性 [返回的是数组] 一般用在input表单中
var ceshi1 = document.getElementsByName("username")[0];
console.log(ceshi1);

querySelector

// 通过css选择器获取对应的元素节点        
// querySelector ,只获取找到的第一个;
var p1 = document.querySelector(".p1");
console.log(p1)
var box = document.querySelector("#box");
console.log(box)

querySelectorAll

// querySelectorAll 获取所有找到的元素节点,返回数组
var all = document.querySelectorAll("input[name=username]")[0];
console.log(all);

<div id="box">
<p>
    <input type="text" name="username" />
    <input type="password" name="pwd" />
</p>
<p class="p1" >张三</p>
<p class="p2">李四</p>
<p class="p3">赵刘</p>
<p name="ceshi1"></p>
<p name="ceshi1"></p>

children

console.log(document)
console.log(document.documentElement); // html
console.log(document.documentElement.children)  // html 中的 head 和 body

parentElement

var zs = document.querySelector(".p1");
console.log(zs);
var div = zs.parentElement;
console.log(div)

[!NOTE]

标签称为元素

nextSibling

 // 获取下一个节点对象nextSibling
console.log(input1.nextSibling.nextSibling);
<!-- <input type="text" name="username" /> 后有空格 空格是下一个节点对象 所以需要取两次变成下一个标签-->

nextElementSibling

// 获取下一个元素节点对象 nextElementSibling
var input2 = input1.nextElementSibling;

previousSiblin

console.log(input2.previousSibling)

previousElementSibling

// 获取上一个元素节点对象 previousElementSibling
console.log(input2.previousElementSibling)

innerHTML

// 获取标签里面所有内容 [标签 + 文本]
// 修改时候可以标签的操作

InnerText

// 获取标签里面所有内容 [标文本]
// 修改时候可以控制文本

document.write

// document.write 把数据以字符串的形式展现在浏览器
document.write(p);

小实验控制输入密码

// 效果1: 显示隐藏密码
var password = document.querySelector("input[name=pwd]")
console.log(password);
console.log(password.type);
console.log(password.name);
console.log(password.value); 
console.log(password.className)

function change(){
    var btn = document.querySelector("#btn")
    console.log(btn);
    if(password.type=="password"){
        password.type = "text";
        btn.innerHTML = "点我隐藏密码";
    }else{
        password.type= "password";
        btn.innerHTML = "点我显示密码";
    }
}

小实验点击更换图片

var img = document.querySelector("img");
console.log(img)
img.onclick = function(){
    console.log(img.src) // http://127.0.0.1:5500/images/oneal1.jpg
    var arr = img.src.split("/")
    imgname = arr[arr.length - 1]
    console.log(arr , imgname);

    if(imgname == "oneal1.jpg"){
        img.src = "images/bakeli.jpg";
    }else{
        img.src = "images/oneal1.jpg";
    }

可以抓住标签对象直接绑定匿名函数

小实验控制多选的选择

// 获取btn节点对象
var btn1 = document.querySelector("#ul1 li:nth-child(1) button");
var btn2 = document.querySelector("#ul1 li:nth-child(2) button");
var btn3 = document.querySelector("#ul1 li:nth-child(3) button");
// 全选
btn1.onclick = function(){
    // 获取#ul2 li 里的input
    /*
                var data_lst = document.getElementById("ul2").getElementsByTagName("input");
                console.log(data_lst)
            */
    var data_lst = document.querySelectorAll("#ul2 li input");
    console.log(data_lst)
    // 获取数组当中每一个input节点元素对象
    for(var input of data_lst){
        //console.log(input.checked)
        // 设置节点input的checked属性为true;
        input.checked = true;                
    }
}

// 不选
btn2.onclick = function(){
    var data_lst = document.querySelectorAll("#ul2 li input");
    console.log(data_lst)
    // 获取数组当中每一个input节点元素对象
    for(var input of data_lst){
        //console.log(input.checked)
        // 设置节点input的checked属性为true;
        input.checked = false;                
    }
}

// 反选
btn3.onclick = function(){
    var data_lst = document.querySelectorAll("#ul2 li input");
    console.log(data_lst)
    // 获取数组当中每一个input节点元素对象
    for(var input of data_lst){
        if(input.checked === true){
            input.checked = false;
        }else{
            input.checked = true;
        }
    }
}

JS控制Css属性

js的dom对象获得相关的行内css属性

// 获取方法一 使用驼峰
console.log(box.style.width);
console.log(box.style.backgroundColor);

// 获取方法二  使用key
console.log(box.style["width"]);
console.log(box.style["background-color"]);
console.log(box.style["font-size"]);

getComputedStyle

// 获取方法三 getComputedStyle 获取该节点对象的所有样式 写在style 标签中

console.log( window.getComputedStyle(box).fontSize );
console.log( window.getComputedStyle(box)["font-size"]);

静态绑定

// html 中
<button onclick="func1()">按钮1</button>
<div class="box"></div>



var box = document.getElementsByClassName("box")[0];
var t;
console.log(box);
function func1(){
    var left = parseInt(window.getComputedStyle(box).left)
    console.log(left ,typeof(left));
    // console.log(box.style.left);
    t = setInterval(function(){
        left += 10;
        box.style.left  = `${left}px`;
    } , 50)
}

动态绑定

// onm ouseover 鼠标指针悬停在指定元素上时触发
box.onmouseover = function(){
clearInterval(t);
}
// onm ouseout  鼠标指针离开指定元素时触发
box.onmouseout = function(){
func1()
}

模态框的实现


<!DOCTYPE html>
    <html lang="en">
        <head>
        <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>模态框</title>
<style>
                .box {
                    position:fixed;
                    width:100%;
                    height:100%;
                    top:0px;
                    background-color: greenyellow;
                    display: none;   /* 隐藏模态框*/
                }

                .content
                {            
                    border:solid 1px red;
                    width:500px;
                    height:500px;
                    background-color:tan;
                    margin:auto;
                    margin-top:14%;        
                }

</style>

</head>
	
<body>
<button id="login">登录</button>

<div class="box">
       <div class="content" >
       <span class="close">X</span>
   	    <br/>
        <span>账号: <input type="text"  /></span>
   	    <br/>
        <span>密码: <input type="password"  /></span>
       </div>
</div>

    <script>
                var btn = document.getElementById("login");
                var box = document.querySelector(".box");
                var close = document.querySelector(".close");
                btn.onclick = function(){
                    box.style.display = "block"; /* 点击时 显示*/ 
                }
                close.onclick = function(){
                    box.style.display = "none";
                }
    </script>
</body>
</html>

Ajax

js实现

AJAX异步数据传输:

ajax,谐音“阿贾克斯”,是英文Asynchronous Javascript And XML,
中文翻译为js与xml的异步传输技术.

效果:在不刷新页面的情况下,请求到后台数据.也叫网页无刷新技术.

ajax本质就是利用javascript提供的XMLHttpRequest对象 ,
代替浏览器地址中传递参数请求服务器的过程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js版本的 ajax 网页无刷新技术 </title>
</head>
<body>
    <input type="text" name="city" value="" /> <button id="btn">查询</button>
    <div id="info"></div>
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            var city = document.querySelector("input[name=city]");
            console.log(city.value);      // 获得city = 北京       

            // 1.创建ajax请求对象
            var xhr = new XMLHttpRequest();
            console.log(xhr)
            
            // 2.打开连接
            // 获取的地址:http://wthrcdn.etouch.cn/weather_mini?city=北京
            // 请求方式 地址 第三个参数可选 true 或者 false  默认true 代表异步 false 代表同步 缺省异步
            xhr.open("get",`http://wthrcdn.etouch.cn/weather_mini?city=${city.value}`)  // false 同步程序 true 异步程序
            // 3.发送请求 向服务器发送请求
            xhr.send();
            
            /*
                readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

                0: 请求未初始化
                1: 服务器连接已建立
                2: 请求已接收
                3: 请求处理中
                4: 请求已完成，且响应已就绪
            */

            // 4.每当 readyState 改变时，就会触发 onreadystatechange 事件
            xhr.onreadystatechange = function(){
                // 服务端的状态码为4 ,  客户端的状态码为200 , 代表数据已经传输完毕;
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        // console.log(xhr.responseText);
                        
                        // 解析json格式的字符串 => js对象
                        var res = JSON.parse(xhr.responseText);
						// 获取一周天气数据 
                        var data_lst = res.data.forecast
						// 拼装数据
                        
                        var content = `<table border=1 width=600 >`;
                        content += `<tr> <th>天气</th> <th>天气</th> </tr>`;
                        
                        for(var i of data_lst){
                            console.log(i);                          
                            content += `<tr> <td>${i.date}</td> <td>${i.type}</td> </tr>`;
                        }
                        content += `</table>`;
                        
                        // 获取info节点对象
                        var info = document.querySelector("#info");
                        // 把表格数据插入到info div当中;
                        info.innerHTML = content;
                    }
                }
            }


        }
    </script>
    
</body>
</html>

标签：arr,console,log,res,Javascript,var,string
From： https://www.cnblogs.com/wbcde116/p/18109274

JS的引入方式

注释

JS数据类型

基本数据类型

Boolean

Number

String

Undefined

null

引用数据类型

object

字典格式

Array

function

Date

强制转换

boolean

Number

parseInt

parseFloat

Number

String

自动类型转换

运算符

for的特性

for( var i in Iterable ) 获得索引号

for( var i of Iterable ) 获得索引号

函数

普通函数

匿名函数

使用new创建对象函数

闭包函数

箭头函数

函数的参数只有普通位置参数,默认参数

arguments

函数的调用

正常调用

函数立即执行

对象

定义对象方法一

定义对象方法二

定义对象方法三 似类

通用调用方式

遍历调用

Json对象

stringfy

parse

字符串对象

length

trim

indexof

lastIndexof

concat

slice

substr

split

toUpperCase

toLowerCase

search

match

replace

实现replace全替换

方法一

方法二

数组对象

定义

增加

push

unshift

concat

删除

delete

pop

shift

改查

splice

其他

join

reverse

定义对象方法三似类