JavaScript的入门

最新推荐文章于 2024-01-23 13:12:42 发布

qq_45486059

最新推荐文章于 2024-01-23 13:12:42 发布

阅读量759

点赞数 3

本文链接：https://blog.youkuaiyun.com/qq_45486059/article/details/107029422

版权

引入javascript

<!--script 必须成对出现-->

<!--外部引入-->
<script src="js/main.js"></script>


<!--内部引入-->

<script >
//。。。。。。
</script>

基本语法

注释

//单行注释

/**/多行注释

javascript严格区分大小写

变量.函数的类型以及作用域（变量提升）

/*声明变量的3种方式 var全局变量  let局部变量,只能是在块元素里面，块元素里面就不能引用 const常量不可以通过重新赋值改变其值（但是对象属性，数组被赋值为常量是不受保护的。），也不可以在代码运行时重新声明。它必须被初始化为某个值。*/
var a;
let a1;
const c=1;

//常量
//在同一作用域中，不能使用与变量名或函数名相同的名字来命名常量。
/*
function f() {};
const f = 5;*/
/*
const f=10
var  f=10*/
//全局变量
window .w=100;
/*undefined  可以当作flase使用。也可以用来检查变量是否赋值*/
/*var定义的变量，如果是没有赋值，数据类型的环境会把它当成0，boolean就是false*/

//数组，对象属性被赋值为常量是不受保护的，所以下面的语句执行时不会产生错误。
const MY_OBJECT = {"key": "value"};
MY_OBJECT.key = "otherValue";
alert(MY_OBJECT.key);

const LIS=[2,1];
LIS.push(3);
alert(LIS)



/*函数声明*/
function ff(){

}
/*函数表达式*/
var gg=function() {

}

/*
变量提升：
用let声明的变量在6以前会提升变量到代码块的顶部，在6或者6之后let声明的变量就不能够提升
6或者6后只有全局作用域和函数声明，即将变量声明提升到它所在作用域的最开始的部分。*/
var a;

{
    alert(a);
}

a=10;
//函数
alert(f1); // function f1() {}
alert(f2); // undefined
function f1() {}
var f2 = function() {}

数据结构和类型

7大数据类型(undefined ,null ,Number,BigInt,String,Symbol(6新加的类型))以及一个对象（Object）类型

字符串

正常的字符串是使用一个’’ ""包裹

注意转义字符\

可以多行字符串编写
```
var a=`
abc
def
hqe
`
```
```
//转换为大写
toUpperCase()
//转换为小写
a.toLowerCase()
```

数组

数组可以包含任意的数据类型

var arr=[1,2,3,4,5,6,"123"]
arr[1]=10;
var a=arr[1];
//数组长度是可以变化的，如果赋值过小，元素会丢失。多是通过下表取值和赋值
slice()//截取数组的一部分，返回一个新数组
arr.indexOf(1)//获得元素索引

push()//压住到尾部，往数组最后面添加元素
pop()//弹出尾部的一个元素，删除最后一个元素

unshift()//压住到头部
shift()//弹出头部的一个元素

sort()//排序。升序

reverse()//反转

concat()//拼接，并没有修改数组，只是会返回一个新的数组

jion() 指定的字符串连接

对象

若干个键值对，javascripct里面的键多是String类型的

var people={
	name : "周华",
	age: 18,
	sex: "男"

}

//使用一个不存在的对象的熟悉，是不会报错的

//可以动态的删除对象的属性
delete people.name
//可以动态的添加，直接给新的属性添加值即可
people.name=123

//判断属性值是否在这个对象中
//第一种
"age" in people
//第二种
people.hasOwnProperty("age")

类型转换

JavaScript是一种动态类型语言(dynamically typed language)。这意味着你在声明变量时可以不必指定数据类型，而数据类型会在代码执行时会根据需要自动转换。

//int自动转换为字符串
x = "The answer is " + 42 // "The answer is 42"
y = 42 + " is the answer" // "42 is the answer"

//字符串自动转换为int
 a="37" - 7 // 30
c="37" + 7 // "377"


//字符转换为数字的方法parseInt()  转换为浮点类型parseFolat()

严格检查模式

//'use strict';严格检查模式，预防javaScripy的随意性导致产生的一些问题
<script>
   'use strict'
    i=10;
</script>

流程控制

//if判断
var arg=3;
if(arg>3){
   alert(123);
   }else{
         alert(4); 
   }

//while循环
while(arg<100){
      console.log(arg);
    arg++;
      }


//for循环
for(let i=0;i<arg;i++){
    console.log(i);
}

var args=[1,2,3,4,5];
//forEash循环

args.forEach(function (value) {
   console(value);         
        })

for(var num in args){
    //num 是个索引
    console.log(args[num]);
}

Map和Set （ES6的新特性）

//Map
var map=new Map([["ss","周杰伦"],["zz","华晨宇"],["dd","李斯丹妮"]]);
//根据健位获得指定的value
var name=map.get("ss");
//添加或者修改值
map.set("ff","林俊杰");
//删除
 map.delete("ss");
//迭代set
  for (let obj of map) {
            console.log(obj);
        }


//Set
var set =new Set([3,1,1,1,1]);//会去重复
set.add(2);//增加
set.delete(1);//删除
set.has(2)//判读是否包含2

//迭代set
 for (let obj of set) {
            console.log(obj);
        }

函数

//定义函数
//方式一
 function methon(x){
        if(x>0){
            return x;
        }else{
            return -x;
        }
    }

//一旦执行到return方法就会结束，并且返回结果，如果没有执行return，函数结束完也会返回一个结果。结果为wndefined

//方式二
var  methon=function (x){
        if(x>0){
            return x;
        }else{
            return -x;
        }
    }


//调用函数
methon(10)



arguments可以获得传入的所有参数，rest是除了你固定的参数外所有的参数，只能写在参数最后面，必须是参数里面是...rest

方法

方法就是把函数放在对象的里面，对象只有2个东西，方法和属性。

var dbh={
    name: "戴宝华",
    bitrh: 2000,

    age:function () {
        return new Date().getFullYear()-this.bitrh;
    }
}

//使用
//属性
dbh.name
//方法
dbh.age()

//apply可以控制this的指向


        function age() {
            return new Date().getFullYear()-this.bitrh;
        }


        var dbh={
            name: "戴宝华",
            bitrh: 2000,

           age:age()
        }


        age.apply(dbh,[]);

内部对象

Date

        var now=new Date();
        now.getFullYear();//年份
        now.getMonth();//月份 0-11月份
        now.getDate()//日
        now.getDay();//星期
        now.getHours();//时
        now.getMinutes();//分
        now.getSeconds();//秒
        now.getTime();//时间戳，全世界同意，从1970 1 1 0:00:00到现在的时间戳
		new Date(now.getTime());//时间戳转换为时间
		now.toLocaleString()//本地时间，是一个方法。不是属性

JSON

是一种轻量级的数据交换格式。简洁和清晰的层次结构使得JSON成为理想的数据交换语言

易于人的阅读和编写，同时易于机器的解析和生辰，有效的提升网络传输。

任何js支持的类型多可以用JSON来表示

格式：

对象用{}，数组用[],所有的键值对多用key:value

var user={
    name:"dbh",
    age:12,
    sex:"男"
}

//对象转换为JSON
 var jsonUser=JSON.stringify(user);

 //json字符串解析为对象,参数为json字符串
var userDx= JSON.parse(jsonUser);

//JSON和js对象的区别
var obj={a:"123",b:"123"};
var json='{"a":"123","b":"123"}';

原型对象

var student={
     name:'dbh',
    run:function(){
         console.log(this.name+"run");
    }
}

var zhou={
    name:'zhou',
 }

 //zhou的原型student(可以称之为父类) 个_
 zhou.__proto__=student;

class继承（ES6引入的）

//ES6以前
function Student(name){
    this.name=name;

}



//给Student增加一个方法
Student.prototype.hello = function () {
    alert("hello");
}
//使用
var Student=new Student(123);

//es6以后
  class student{
            constructor(name){
                this.name=name;
            }
            hello(){
                alert("hello");
            }


        }

//使用
var student=new student(123);

  //继承
        class litter extends People{
            constructor(name,age){
                super(name);
                this.name=name;
                this.age=age;
            }

            myage(){
                alert(this.age);
            }
        }
    var xh= new litter("小红",12);

操作BOM对象

BOM:浏览器对象模型

浏览器有：

IE 6-11
Chrome
Safari
FireFox

第三方有：

qq浏览器
360浏览器
UC浏览器

window

window.alert(2131)//弹出
2131
//浏览器内部和外部宽度
window.innerHeight
472
window.innerWidth
368
window.outerHeight
591
window.outerWidth
1408

navigator

封装了浏览器的信息，大多数不会使用这个对象，因为会被修改。不建议使用这些属性来判断和编写代码

navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Safari/537.36"
navigator.appName
"Netscape"
navigator.platform
"Win32"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Safari/537.36"

screen

代表屏幕的尺寸

screen.width
1536
screen.height
864

location

location代表当前页面的url信息

host:主机

href:当前指向的位置

protocol:协议

reload()：重新加载，刷新

location.assign(“http://www.baudu.com”)：设置新的定位。

document

当前的页面的信息

后的cookie

document.cookie
"uuid_tt_dd=10_30714054690-1592751583502-597203; dc_session_id=10_1592751583502.919250; __gads=ID=4e6231bd0774627b:T=1592751586:S=ALNI_MYI_uLd6iFuue_4KgLMuKu1BuUTRQ; UserName=qq_45486059; UserNick=qq_45486059; AU=E0F; UN=qq_45486059; p_uid=U000000; BT=1592817129043; Hm_up_6bcd52f51e9b3dce32bec4a3997715ac=%7B%22islogin%22%3A%7B%22value%22%3A%221%22%2C%22scope%22%3A1%7D%2C%22isonline%22%3A%7B%22value%22%3A%221%22%2C%22scope%22%3A1%7D%2C%22isvip%22%3A%7B%22value%22%3A%220%22%2C%22scope%22%3A1%7D%2C%22uid_%22%3A%7B%22value%22%3A%22qq_45486059%22%2C%22scope%22%3A1%7D%7D; Hm_ct_6bcd52f51e9b3dce32bec4a3997715ac=6525*1*10_30714054690-1592751583502-597203!5744*1*qq_45486059; c_first_ref=default; c_first_page=https%3A//mp.youkuaiyun.com/console/article; Hm_lvt_6bcd52f51e9b3dce32bec4a3997715ac=1592967169,1593084234,1593084573,1593177153; Hm_lpvt_6bcd52f51e9b3dce32bec4a3997715ac=1593177153; dc_tos=qcjbd0; dc_sid=30c51ff0df67b76f0b619b893bdc05b4; announcement=%257B%2522isLogin%2522%253Atrue%252C%2522announcementUrl%2522%253A%2522https%253A%252F%252Fmarketing.youkuaiyun.com%252Fp%252F00839b3532e2216b0a7a29e972342d2a%253Futm_source%253D618%2522%252C%2522announcementCount%2522%253A0%252C%2522announcementExpire%2522%253A3600000%257D"

cookie可以设置一个httpOnly只读不写

history

history
History.back()//后退
history.forward()//前进

操作BOM对象

浏览器网页就是一个Dom树形结构！

1. 更新：更新Dom节点

2. 遍历dom节点：得到Dom节点
3. 删除：删除一个Dom节点
4. 添加：添加一个新的节点

要操作一个Dom节点，就必须获得这个Dom对象

var h1= document.getElementsByTagName("h1");
var p1=document.getElementById("p1");
var p2= document.getElementsByClassName("p2");
var father=document.getElementById("father");
var childrens= father.children;

father.firstChild//第一个
father.lastChild//最后一个
p1.nextElementSibling//p1的下一个


//操作js

dbh.innerText="123"//修改文本的值，dbh就是你设置的id
dbh.innerHTML="<a>123123</a>"//修改文本的值，但是可以使用标签
dbh.style.color="red"//操作文本样式
dbh.style.fontSize="100px"//修改字体大小
dbh.style.background="yellow"//修改背景颜色

//删除节点
//删除步骤：首先需要的到父节点信息，然后通过父节点在去删除想要删除的子节点，但是必须时id的不能时class的
  var father =document.getElementById("father");
    father.removeChild(p1);

//第二种，这种在删除节点的时候children时刻时在变化的，删除节点的时候，需要注意。	
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[3]);



//插入节点
//我们获得某个dom节点，如果这个节点时空的，就可以增加一个元素了，但是如果dom如果已近存在元素，就不能这样增加一个元素，因为会被覆盖


   var p= document.getElementById("p");
   var div= document.getElementById("div");
   div.appendChild(p);//追加到后面



//通过js创建一个新的节点
 var a=document.createElement("ul");//创建一个ul标签
    a.id="new a";//设置a的id
   div.appendChild(a);//把a追加到div里面


   var c=document.createElement("script");//创建一个script标签
   c.setAttribute("id","sc");
   c.setAttribute("type","text/javascript");
   c.innerHTML="var dbh='戴宝华'";

   div.appendChild(c);


   var s=document.createElement("style");//通过拆改你style标签修改body的背景颜色
    s.setAttribute("type","text/css");
    s.innerHTML="body{background: yellow;}";

    var head=document.getElementsByTagName("head")[0];
    head.appendChild(s);

//插入到前面


   var p= document.getElementById("p");
   var p1= document.getElementById("p1");

   var div= document.getElementById("div");
   div.appendChild(p);
   div.insertBefore(p1,p);//p1是你要插入的元素，是放在p的上面，p是你指定的位置上的元素

div.replaceChild(p1,p);//替换,p1新，p需要换的

操作表单（验证）

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/md5.js"></script>

</head>
<body>
<form action="#" method="post" onsubmit="return  subm()">
    <p><span>账号</span><input type="text" id="username" name="username"></p>
    <p><span>密码</span><input type="password" id="pwd"></p>
    <p><input hidden type="password" id="hpwd" name="upwd"></p>
    <input type="submit"></input>

</form>


<script>
   function subm() {
       var uname= document.getElementById("username");
        var pwd=document.getElementById("pwd");
       var hpwd=document.getElementById("hpwd");
       hpwd.value=md5(pwd.value);
       console.log(uname.value);
       console.log(pwd.value);
       console.log(hpwd.value);

       return ture;
    }

</script>


</body>
</html>

jQuery

jQuery库，里面存在大量的js函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn引入-->
    <script src="http://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous">
    </script>


</head>
<body>


<a id="text" href="#">点我</a>
<script>
     $("#text").click(function () {
        alert("Hello Wolder");
    })

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

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="    crossorigin="anonymous" >
    </script>

    <style>
        #div{
            width: 500px;
            height: 400px;
            border: 1px solid yellow;
        }

    </style>
</head>
<body>
mouse:<span id="mouseMoves"></span>
<div id="div">
    移动鼠标
</div>

<script>
    //网页加载完毕，响应时间
    $(function(){
       /*
       //鼠标移动事件
       $("#div").mousemove(function (e) {
            $("#mouseMoves").text("x:"+e.pageX+"y:"+e.pageY);
        });*/

       /* $("#div").mousedown(function () {//点击,和click不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。
           alert(123);
        })*/
       /* $("#div").click(function () {//点击 需要按键被按下，而且需要松开
            alert(123);
        })*/

      /*  $("#div").mouseout(function () {//当鼠标指针从元素上移开时，发生 mouseout 事件。
            alert(123);
        })*/
      /*  $("#div").mouseover(function () {//当鼠标指针位于元素上方时，会发生 mouseover 事件。
            alert(123);
        })*/

        $("#div").mouseup(function () {//当在元素上放松鼠标按钮时，会发生 mouseup 事件。
            alert(123);
        })



    });





</script>

</body>
</html>

jquery操作Dom

//节点文本操作
$("#test-ul li[class=python]").text();//获得值
$("#test-ul li[class=python]").text("设置值");//设置值
$("#test-ul li[class=python]").html();//获得值
$("#test-ul li[class=python]").html("12313");//设置值,可以设置标签


//css操作

//一个值
$("#test-ul").css("color","yellow");
//多个值
$("#test-ul").css({"color":"yellow","background": "red" });

//显示
$("#test-ul li[class=python]").show();
//隐藏//本质是display=none
$("#test-ul li[class=python]").hide();
 //如果元素是显示就会隐藏，是隐藏就会显示
$("#test-ul li[class=python]").toggle();