pythonJavaScript相关

JavaScript

引入

<script>
     ****
 </script>

基本语法

变量

var 变量名 //未赋值的话默认值是undefined
 变量名 = 变量值; //不带var 是声明的全局变量
 //支持下列声明形式
 var name="yuan", age=20, job="lecturer";

注释

// 单行注释
 
  /*
    多行注释
  */

语句分割

;
console.log() 打印

数据类型

数字类型

JavaScript没有整型和浮点之分，只有number一种类型

字符串类型

点击查看代码

var str = "hello";
 console.log( str.length );  //字符串的长度
 console.log( str.toUpperCase() ); //字符串转换成大写
 console.log( str.toLowerCase() ); //字符串转换成小写
 // 与python 一样 支持索引取值，或者取索引值
 console.log(str[1]); // e
 console.log( str.indexOf("e") ); // 1  
 // 字符串的切片
 var str = "helloworld";
 var ret = str.slice(3,6);
 // 分割
 var str = "广东-深圳-南山";
 var ret = str.split("-");
 console.log( ret );
 // 截取
 var str = "hello world";
 var ret = str.substr(0,3);
 // 去除字符串首尾的空白
 var password = "    ge llo   ";
 var ret = password.trim();

undefined 与python中的None一样

类型转换

强制转换

// 1. 转换数据为数值类型
 // parseInt     把数据转换成整数
 // parseFloat   把数据转换成小数
 // Number       把数据转换成数值
 
 
 
 // 使用Number转换的数据里面必须是纯数字!!!!否则都会转换失败
 // 对于转换数值,如果转换失败的话,则结果为 NaN ,是 Not a Number ,但是NaN的类型也是number类型

// 转换字符串
 // 变量.toString()
 // String(数据)

var box2 = 1 + "200";
 console.log(box2); // 1200
 
 1200 的原因是因为在js 中字符串的拼接的优先程度大于数值的加减乘除

var box3 = 1 - "200";
 console.log(box3); // -199
 
 -199 的原因是因为在js中-是减号的意思，在js内部会将字符串200转换成数值

原始值与引用值

// 初始值类型
var a = "yuan";
var b = a;
a = "alvin";
console.log(a);//alvin
console.log(b);//yuan


// 上面的代码可以理解为程序自上向下执行，在b赋值后在打印b之前没使用b

!== 不全等[不仅判断数值,还会判断类型是否一致]
	=== 全等[不仅判断数值,还会判断类型是否一致]

//逻辑运算符
  &&   并且  and    两边的运算结果为true,最终结果才是true
  ||   或者  or     两边的运算结果为false,最终结果才是false
  !    非    not    运算符的结果如果是true,则最终结果是false ,反之亦然.

逻辑运算符进阶

1. 实现短路
var a = false || 2      >>> a = 2    //|| 取真值
var a = true && "hehe"  >>>  a = "hehe"

2. 快速布尔化[把数据快速转换成布尔类型]
var a = 100
!!a  >>> true

条件运算

var ret = age>=18?"成年":"未成年";
// 当age大于18则是成年，否则是未成年将结果返回给ret

条件判断

switch(条件){
      case 结果1:
           满足条件执行的结果是结果1时,执行这里的代码..
           break;
      case 结果2:
      	   满足条件执行的结果是结果2时,执行这里的代码..
      	   break;
      .....
      default:
           条件和上述所有结果都不相等时,则执行这里的代码
   }

数组对象

与python中的列表很相似

arr.length数组的长度可以根据索引值取相应的值

pop() 出栈删除最后的元素并返回 不能给参数

push() 入栈在数值的最后添加一个元素和python的append类似

shift() 将数值的第一个元素删除

unshift() 将value值插入到数组的开始

reverse()反转排列

slice 切片

sort() 排序 ASCⅡ排序

var arr = [3,4,1,2,5,10];
arr.sort();
console.log(arr);   //  [1, 10, 2, 3, 4, 5]

数值的升序

// 数值升序
var arr = [3,4,1,2,5,10];
arr.sort(function(a,b){
    return a-b;
});
console.log(arr);  // [1, 2, 3, 4, 5, 10]

数值的降序

var arr = [3,4,1,2,5,10];
arr.sort(function(a,b){
    return b-a;
});
console.log(arr); // [10, 5, 4, 3, 2, 1]

splice 添加/删除/替换元素重要

var arr1 = [1,2,3];
arr1.splice(1,1);
console.log(arr1); // 删除指定的1个成员  [1, 3]

// 添加
var arr2 = ["a","b","c","d"];
arr2.splice(2,0,"w","x","w"); 
console.log(arr2); // ["a", "b", "w", "x", "w", "c", "d"]


//替换
var arr3 = ["a","b","c"];
arr3.splice(1,1,"w");
console.log(arr3); // ["a", "w", "c"]

join() 拼接字符串

var arr1 = ["广东", "深圳", "南山"];
var str1 = arr1.join("-");

find() 高阶函数, 返回符合条件的第一个成员

filter()高阶函数, 对数组的每一个成员进行过滤,返回符合条件的结果

map() 对数组的每一个成员进行处理,返回处理后的每一个成员

includes 查询指定数据是否在数组中存在! indexOf() 查询指定数据在数组中第一次出现的位置 isArray() 判断变量的值是否是数组

遍历数组

var arr = [12,23,34]
 for (var i in arr){
       console.log(i,arr[i])
 }

// i 是每个元素的索引值
// arr[i]  是每个元素的值

Object对象

类似于python中的字典

定义

var person = {
                name : "alvin",
                age : 18
             }; 
console.log(person["age"]);  //两种方法获取到对象中的值
console.log(person.age)

for (var attr in person){
    console.log(attr,person[attr]);  // attr  是Object对象的键
}						//person[attr] 是Object对象的值

json序列化和反序列化

// 把json对象转换成json字符串
    var ret = JSON.stringify(data);
    console.log(ret ); // {"name":"xiaoming","age":22}

    // 把json字符串转换成json对象
    var str = `{"name":"xiaoming","age":22}`;
    var ret = JSON.parse(str);
    console.log(ret);

Date对象

//方法1：不指定参数
var nowd1=new Date();
console.log(nowd1.toLocaleString( ));  
//当前时间 2021/9/3 下午11:11:51

获取日期和时间
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)

日期和时间的转换:
// 返回国际标准时间字符串
toUTCString()
// 返回本地格式时间字符串
toLocalString()
// 返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.parse(x)
// 返回累计毫秒数(从1970/1/1午夜到国际时间)
Date.UTC(x)

点击查看代码

function getCurrentDate(){
            //1. 创建Date对象
            var date = new Date(); //没有填入任何参数那么就是当前时间
            //2. 获得当前年份
            var year = date.getFullYear();
            //3. 获得当前月份 js中月份是从0到11.
            var month = date.getMonth()+1;
            //4. 获得当前日
            var day = date.getDate();
            //5. 获得当前小时
            var hour = date.getHours();
            //6. 获得当前分钟
            var min = date.getMinutes();
            //7. 获得当前秒
            var sec = date.getSeconds();
            //8. 获得当前星期
            var week = date.getDay(); //没有getWeek
            // 2014年06月18日 15:40:30 星期三
            return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week);
        }

//解决 自动补齐成两位数字的方法
function changeNum(num){
    if(num < 10){
        return "0"+num;
    }else{
        return num;
    }
}
//将数字 0~6 转换成 星期日到星期六
function parseWeek(week){
    var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    //             0      1      2      3 .............
    return arr[week];
}

console.log(getCurrentDate());

Math对象

//  Number对象的内置方法
//  toFixed(x) 保留小数位
//  abs(x)  返回数值的绝对值
//  ceil(x)  向上取整
//  floor(x) 向下取整
//  pow(x,y)   x的y次方

Function 对象

定义

// 函数的定义方式1
function 函数名 (参数){
    函数体;
    return 返回值;
}

函数中的arguments对象

function add(a,b){
        console.log(a+b);//3
        console.log(arguments.length);//2
        console.log(arguments);//[1,2]
    }
add(1,2)

返回值只能返回一个值，如果需要返回多个值则需要返回对象或者数组
匿名函数使用匿名函数表达式时，函数的调用语句，必须放在函数声明语句之后！
```
// 匿名函数赋值变量
var foo = function () {
    console.log("这是一个匿名函数！")
};
```
函数作用域于python原理相似

js的预编译

**全局预编译的3个步骤：**

1. 创建GO对象（Global Object）全局对象，即window对象。
2. 找变量声明，将变量名作为GO属性名，值为undefined
3. 查找函数声明，作为GO属性，值赋予函数体

**局部预编译的4个步骤：**

1. 创建AO对象（Activation Object）执行期上下文。
2. 找形参和变量**声明**，将变量和形参名作为AO属性名，值为undefined
3. 将实参值和形参统一。
4. 在函数体里面找函数声明，值赋予函数体。

window对象

窗口方法

// alert()   弹出一个警告框
// confirm() 弹出一个确认框,点击确认,返回true, 点击取消,返回false
// prompt()  弹出一个消息输入框,当点击确认以后,则返回可以接收到用户在输入框填写的内容.如果点击取消,则返回null
// close()   关闭当前浏览器窗口
// window.open() 打开一个新的浏览器窗口

定时方法

// window.setInterval()    设置循环定时器
// window.clearInterval()  取消循环定时器
// window.setTimeout() 	   设置单次定时器
// window.clearTimeout()   取消单次定时器

案例

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input id="ID1" type="text" >
<button onclick="begin()">开始</button>
<button onclick="end()">停止</button>

<script>
    function showTime(){
           var nowd2=new Date().toLocaleString();
           var temp=document.getElementById("ID1");
           temp.value=nowd2;

    }
    var ID;
    function begin(){
        if (ID==undefined){
             showTime();
             ID=setInterval(showTime,1000);
        }
    }
    function end(){
        clearInterval(ID);
        ID=undefined;
    }

</script>

</body>
</html>

Location ( 地址栏)对象

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="func1()">查看Location对象</button>
<button onclick="func2()">跳转到百度</button>
<button onclick="func3()">F5</button>
<script>
    function func1(){
        console.log( location );
    }
    // 地址栏对象控制和操作地址栏
    // 所谓的地址就是当前页面所在地址
    // 地址结构:
    // 协议://域名:端口/路径/文件名?查询字符串#锚点
    console.log( `协议=>${location.protocol}` );
    console.log( `端口=>${location.port}` );
    console.log( `域名=>${location.hostname}` );
    console.log( `域名:端口=>${location.host}` );
    console.log( `路径=>${location.pathname}` );
    console.log( `查询字符串=>${location.search}` );
    console.log(`完整的地址信息=>${location.href}`);

    function func2(){
        // location.href="http://www.baidu.com"; // 页面跳转
        location.assign("http://www.baidu.com"); // 页面跳转
    }

    function func3(){
        location.reload(); // 刷新页面
    }
</script>
</body>
</html>

本地存储对象

点击查看代码

localStorage    本地永久存储
  localStorage.setItem("变量名","变量值");   保存一个数据到存储对象
  localStorage.变量名 = 变量值               保存一个数据到存储对象

  localStorage.getItem("变量名")   获取存储对象中保存的指定变量对应的数据
  localStorage.变量名              获取存储对象中保存的指定变量对应的数据

  localStorage.removeItem("变量名")   从存储对象中删除一个指定变量对应的数据
  localStorage.clear()               从存储对象中删除所有数据

sessionStorage  本地会话存储
  sessionStorage.setItem("变量名","变量值");   保存一个数据到存储对象
  sessionStorage.变量名 = 变量值               保存一个数据到存储对象

  sessionStorage.getItem("变量名")   获取存储对象中保存的指定变量对应的数据
  sessionStorage.变量名              获取存储对象中保存的指定变量对应的数据

  sessionStorage.removeItem("变量名")   从存储对象中删除一个指定变量对应的数据
  sessionStorage.clear()               从存储对象中删除所有数据

本地永久存储在关闭浏览器后依然可以存储在浏览器的数据库中，如果用户不主动删除怎永久存储在同一个浏览器中

本地会话存储在关闭后就不存在了

DOM对象

查找标签

直接查找标签

document.getElementsByTagName("标签名")
document.getElementById("id值")
document.getElementsByClassName("类名")

导航查找标签

elementNode.parentElement           // 父节点标签元素
elementNode.children                // 所有子标签
elementNode.firstElementChild       // 第一个子标签元素
elementNode.lastElementChild        // 最后一个子标签元素
elementNode.nextElementSibling     // 下一个兄弟标签元素
elementNode.previousElementSibling  // 上一个兄弟标签元素

CSS选择器查找

document.querySelector("css选择器")  //根据css选择符来获取查找到的第一个元素，返回标签对象（dom对象）
document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组

绑定事件
- 静态绑定直接把事件写在标签元素中。
- 动态绑定
  - 先获取dom对象
  - 对这个对象绑定事件
- 多标签绑定事件
  - 循环标签数组获取每个dom对象
  - 在绑定事件的函数中使用this代指当前的标签

文本操作

点击查看代码

<div class="c1"><span>click</span></div>

<script>

    var ele =document.querySelector(".c1");

    ele.onclick = function (){
        // 查看标签文本
        console.log(this.innerHTML)
        console.log(this.innerText)
    }

    ele.ondblclick = function (){
        // 设置标签文本
        this.innerHTML = "<a href='#'>yuan</a>"
        //this.innerText = "<a href='#'>yuan</a>"
    }

</script>

当innerHTML与innerText都对文本操作时效果是相同的，innerHTML当对a标签操作时，则获取的是这个链接标签，而innerText则是获取的a标签的文本信息

对标签赋值时，innerText是对标签的文本修改，innerHTML的赋值是a标签时，则修改成整个a标签的值

value操作

点击查看代码

<input type="text" id="i1" value="yuan">
    <textarea name="" id="i2" cols="30" rows="10">123</textarea>
    <select  id="i3">
        <option value="hebei">河北省</option>
        <option value="hubei">湖北省</option>
        <option value="guangdong">广东省</option>
    </select>

<script>

    // input标签
    var ele1 =document.getElementById("i1");
    console.log(ele1.value);
    ele1.onmouseover = function (){
        this.value = "alvin"
    }

    // textarea标签
    var ele2 =document.getElementById("i2");
    console.log(ele2.value);
    ele2.onmouseover = function (){
        this.innerText = "welcome to JS world！"
        this.value = "welcome to JS world！"
    }
    // select标签
    var ele3 =document.getElementById("i3");
    console.log(ele3.value);
    ele3.value= "hubei"

</script>

属性操作

点击查看代码

elementNode.className
elementNode.classList.add   // 增加标签
elementNode.classList.remove  // 移除标签

节点操作

点击查看代码

// 创建节点：
document.createElement("标签名")
// 插入节点
somenode.appendChild(newnode)             // 追加一个子节点（作为最后的子节点）
somenode.insertBefore(newnode,某个节点)   // 把增加的节点放到某个节点的前边
// 删除节点
somenode.removeChild()：获得要删除的元素，通过父元素调用删除
//替换节点
somenode.replaceChild(newnode, 某个节点);

常用事件

onload事件 刷新事件

onsubmit事件 提交事件

点击查看代码

<script>

     var ele = document.getElementById("i1");
     var user = document.querySelector("#i1 [type=text]")
     var pwd = document.querySelector("#i1 [type=password]")
     ele.onsubmit = function (e){
           console.log(user.value);
           console.log(pwd.value);

            return false;    // 终止事件执行
           // e.preventDefault() // 阻止元素默认行为
     }

</script>

onchange事件

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<select name="provonce" id="s1">
    <option value="hebei">请选择省份</option>
    <option value="hubei">湖北省</option>
    <option value="hunan">湖南省</option>
    <option value="hebei">河北省</option>
</select>

<select name="provonce" id="s2">
    <option value="hebei">请选择城市</option>

</select>

<script>

   var  data={"hunan":["长沙","岳阳","张家界"],"hubei":["武汉","襄阳","荆州"],"hebei":["石家庄","保定","张家口"]};
   console.log(data);
   var ele =  document.getElementById("s1");
   var ele2 =  document.getElementById("s2");
   ele.onchange=function () {
       console.log(this.value);
       var citys = data[this.value];
       console.log(citys);
       // 清空操作
       ele2.options.length=1;
       // 创建标签
       for (var i=0;i<citys.length;i++){
           var option =  document.createElement("option"); // </option></option>
           option.innerHTML=citys[i];
           ele2.appendChild(option)
       }
   }

</script>


</body>
</html>

onmouse事件 鼠标操作

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container{
            width: 300px;
        }
        #title{
            cursor: pointer;
            background: #ccc;
        }
       #list{
           display: none;
           background:#fff;
       }

        #list div{
            line-height: 50px;
        }
        #list  .item1{
            background-color: green;
        }

         #list  .item2{
            background-color: rebeccapurple;
        }

         #list  .item3{
            background-color: lemonchiffon;
        }


    </style>
</head>
<body>
<div id="container">
        <div id="title">使用了mouseout事件↓</div>
        <div id="list">
                <div class="item1">第一行</div>
                <div class="item2">第二行</div>
                <div class="item3">第三行</div>
        </div>
</div>
<script>

// 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

// 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

   var container=document.getElementById("container");
   var title=document.getElementById("title");
   var list=document.getElementById("list");
	//鼠标经过触发
   title.onmouseover=function(){
       list.style.display="block";
   };
	// 鼠标离开触发
   container.onmouseleave=function(){  // 改为onmouseout试一下
       list.style.display="none";
   };

/*

因为mouseout事件是会冒泡的，也就是onmouseout事件可能被同时绑定到了container的子元素title和list
上，所以鼠标移出每个子元素时也都会触发我们的list.style.display="none";

*/
</script>
</body>
</html>

onkey事件 键盘操作

点击查看代码

<input type="text" id="t1"/>

<script type="text/javascript">

    var ele=document.getElementById("t1");
	// 键盘按下触发事件
     ele.onkeydown=function(e){
        console.log("onkeydown",e.key)
    };
	/// 键盘抬起触发事件
     ele.onkeyup=function(e){
        console.log("onkeyup",e.key)
    };
</script>

onblur和onfocus事件 焦点获得或者失去时触发

点击查看代码

<input type="text" class="c1">


<script>

    var ele = document.querySelector(".c1");

    // 获取焦点事件
    ele.onfocus = function () {
        console.log("in")
    };

    // 失去焦点事件
    ele.onblur = function () {
        console.log("out")
    }

</script>

冒泡事件 父标签和子标签都有同一个事件时，子标签也回触发父标签的事件

点击查看代码

<div class="c1">
    <div class="c2"></div>
</div>


<script>

    var ele1 = document.querySelector(".c1");
    ele1.onclick = function () {
        alert("c1区域")
    };

    var ele2 = document.querySelector(".c2");
    ele2.onclick = function (event) {
        alert("c2区域");
        
        // 如何阻止事件冒泡
        event.stopPropagation();
    }

</script>

posted @ 2021-09-04 23:20 wq512 阅读(16) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Pytnon学习

pythonJavaScript相关

JavaScript

引入

基本语法

数据类型

类型转换

原始值与引用值

条件判断

数组对象

Object对象

Date对象

Math对象

Function 对象

window对象

Location ( 地址栏)对象

本地存储对象

DOM对象

常用事件

公告