javascript学习

引入JavaScript

<script>标签通常放在head标签里，也可以放在body里

1.内部标签

<script>

//写java代码

</script>

2.外部引入

在写一个js文件夹写一个qj.js

<!-- 外部引入，注意script不能自闭合-->
<script src="js/qj.js"></script>

<!--不写type，默认也是text/javascript-->
<script type="text/javascript">
</script>

基本语法

<!--    严格区分大小写-->
  <script>
    //一切变量都是var定义
    var score = 60;
    // alert(name);

    //条件控制
    if (score>60&&score<70){
        alert("60-70");
    }else if (score>70){
        alert("70+");
    }else{
        alert("other");
    }

    //console.log(score)在浏览器的console控制台打印变量。
   
    /*
    *asadas注释
    * */
  </script>

数据类型

数值，文本，图形，音频，视频

变量

不能数字开头

number

javascript不区分小数和整数，都用number

NaN表示这不是一个数

Infinity表示无限大

字符串

'sss'  "sss"

布尔值

true  false

逻辑运算

&&两个为真结果为真

||一个为真结果为真

比较运算（这是和java不一样的地方，要用===比较）

=赋值

==等于（类型不同，值相同也会true）

===绝对等于（必须要类型和值都相等）

须知：

1.NaN和任何数值都不相等，包括自己

2.只能通过isNaN(NaN)来判断这个数是否为NaN

浮点数问题：

尽量避免使用浮点数进行运算，存在精度问题

null和undefined

空和未定义

数组

js中数组不需要同一类型，和java不一样

var i = [1, 2, 'yhhtrt', true, null];

通过类似console.log(i[0])来输出，下标越界会输出undefined

对象

对象定义用{}大括号，数组用[]中括号

定义对象

var person={
    name: "dcadvsd",
    age: 12,
    tags: ["dg", "thd"]
}

取对象的值

person.name

严格检查模式

<script>
  'use strict';//使用严格检查模式（必须写在script的第一行）：预防出现一些不必要的问题
  //es6语法   建议用let定义局部变量
  let i = 1;

</script>

数据类型

字符串

1.可以使用单引号或者双引号

console.log("a");
console.log('s');

2.转义字符 \

\'

\n换行

\t

\u####Unicode字符

\x41   Ascll字符

3.多行字符串编写

使用~的引号

var o = `sds
sdfs
sdfsf
sdfsdfsd`

4.模板字符串

java 里的字符串拼接

在js里可以用下面的形式实现

let i = "hello";
let p = 1235;
let mm = `${i},${p}`;

5.字符串长度

str.length

6.字符串不可变

对字符串的某个下标赋值并没有改变原来的字符串

7. 大小写转换

str.toUpperCase()

str.toLowerCase()

8.获取指定的下标

str.indexof('t')

9.通过下标截取字符串[)

str.substring(1)表示截取下标为1后的所有字符串

str.substring(1,3)表示截取下标为1到2的字符串，取不到3

数组

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

1.长度

arr.length

注意假如对arr.length赋值，数组大小可变

2.arr.indexOf通过数组内的元素获得下标索引

arr.indexOf(s)

3.slice() 截取数组的一部分，返回一个新数组[)(和字符串截取的substring类似)

arr.slice(3)表示截取下标为3后的所有元素，返回一个新数组

arr.slice(3，5)表示截取下标为3到5的字符串，取不到5，返回一个新数组

4.push(),pop(),unshift(),shift()

arr.push()能往数组里添加元素，从尾部加

arr.pop()从数组去掉元素，从尾部去

arr.unshift()能往数组里添加元素，从头部加

arr.shift()从数组去掉元素，从头部去

5.排序sort()

arr = ["s", "dc", "ds", 2]
arr.sort()
arr = [2, "dc", "ds", "s"]

6.元素翻转

arr.reverse()就是变成倒序

7.concat()

arr.concat([1,2,3])这个方法可以将arr和这个新的数组拼接起来形成新数组

注意：不会改变原来的arr数组

8.连接符join

arr.join('-')打印拼接数组，使用特定的字符串连接
"2-dc-ds-s"

9.多维数组

arr = [[1,2],[3,4],[5,6]]

对象

若干个键值对组成

对象的每个属性都是字符串，值是任意

var person={

        name: "dcadvsd",

        age: 12,

        tags: ["dg", "thd"]

}

1.对象赋值

person.name="asdasd"

2.动态的删减属性,通过delete

delete person.name

动态 的添加，直接写新属性并添加值即可‘

person.xinshuxin="fdsdfs"

3.判断属性值是否在这个对象中

'age'  in  person

存在会返回true

'toString' in  person

这个是父类的方法，一定是true

4.判断一个属性是否是对象自身的属性hasOwnProperty('age')

流程控制

foreach循环

var arr = ["s", "dc", "ds", 2];
arr.forEach(function (value) {
  console.log(value);
});

for  in循环输出数组

var arr = ["s", "dc", "ds", 2];

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

Map和Set

map:

var  map = new Map([["a", 1], ["b", 112]]);
 var a = map.get("a");
 console.log(a);
 map.set("c", 21);
 map.delete("a");

set:无序不重复的集合

var set = new Set([1, 1, 1, 5, 6, 1]);//set可以去掉重复的值
set.add(2);
set.delete(1);
console.log(set.has(5));//是否包含某个元素

iterator

遍历数组

var arr = ["s", "dc", "ds", 2];
for (var num of arr){
  console.log(num);
}

遍历map

var  map = new Map([["a", 1], ["b", 112]]);
 for (let x of map) {
   console.log(x);
 }

遍历set

var set = new Set([1, 1, 1, 5, 6, 1]);//set可以去掉重复的值
for (let x of set) {
  console.log(x);
}

函数

定义函数

绝对值函数

方式一

function abs(x) {
//如果类型不是number，抛出异常
  if (typeof x !== 'number') {
    throw 'not a number';
  }
  if (x>=0){
    return  x;
  }else{
    return -x;
  }
}

方式二

var   abs = function(x) {
//如果类型不是number，抛出异常
  if (typeof x !== 'number') {
    throw 'not a number';
  }
  if (x>=0){
    return  x;
  }else{
    return -x;
  }
}

匿名函数，但是把结果赋值给对象

arguments代表传递进函数的所有参数，是一个数组

var   abs = function(x) {

  for(let i=0;i<arguments.length;i++){
    console.log(arguments[i]);
  }
  if (x>=0){
    return  x;
  }else{
    return -x;
  }
}

用arguments可以将所有参数输出，但是x始终代表第一个参数

rest获取除了已经定义的参数之外的所有参数，放在一个数组里

function aaa(a, b, ...rest) {
  console.log(rest);
}

只会打印出除了定义的参数以外的参数，并且放在一个数组里

变量的作用域

假设在函数体内声明，则在函数体外不可以使用   

假设一个函数定义了一个变量，在这个函数内嵌套了一个函数，内部的函数同样定义了一个同名的变量h3。分别在内外函数打印变量。

函数查找变量首先从自己的函数内找，找不到才去外部包括的函数去找同名变量。

 function aa() {
     let x = 2; 
     function bb() {
         let x = 1;
         console.log("bb" + x);
     }
     console.log("aa" + x);
     bb();
 }

全局对象window

    var x = 111;
    alert(x);
    alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下
    window.alert(window.x);//alert函数也是window对象下的一个变量

JavaScript只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内被找到，就会向外查找，如果在全局作用域都没找到，就报错RefrenceError 

冲突

由于所有的全局变量都绑定到window上，如果有多个js文件，使用了相同的全局变量就会发生冲突。

要将自己的代码全部放入自己定义的唯一全局变量中

局部作用域

function aa() {
  for (var i = 0; i < 100; i++) {
    console.log(i)
  }
  console.log(i);
}

用var来定义i,发现i在循环外还能使用

接下去用let来定义i

function aa() {
  for (let i = 0; i < 100; i++) {
    console.log(i)
  }
  console.log(i);
}

发现报错，说明let定义的是局部的变量，建议使用let

定义常量

const a = "3.14";//只读变量，不能被修改

方法

var xu = {
  name:"liang",
  birth: 2000,
  //方法
  age: function () {
    var now = new Date().getFullYear();
    return now-this.birth;
  }
}

调用方法xu.age()

apply方法

apply方法能劫持另一个对象的方法，继承另一个对象的属性

function.apply(obj,args)

obj代替function里的this对象

args是一个数组

举例一：

  var xu = {
      name: "liang",
      birth: 2000,
      age: aa
  }

function aa() {
    return new Date().getFullYear()-this.birth;
}

  aa.apply(xu, []);//将这个方法的this指向xu这个对象，参数为空
  console.log(xu.age())

举例二：

function aaa(name, age) {
    this.name = name;
    this.age = age;
}

function aa(name, age,sex) {
    aaa.apply(this, arguments);
    this.sex = sex;
}

var xx = new aa("svsd","svs","sddv");
console.log(xx);

aaa.apply(this, arguments);这句话的this代表aaa对象，

arguments代表一个数组["svsd","svs","sddv"]

举例三：

var arr = [1, 5, 3, 8];
var min = Math.min.apply(null, arr);
console.log(min);

null表示不指向任何一个对象，arr表示一个数组

apply会将数组的参数一个个传递给方法，从而判断出最大最小值

举例四：

var arr = new Array("fgnfg","hfhd","dv");
var arrr = new Array("fgnfg","hfhd","dv","hdh");
Array.prototype.push.apply(arr, arrr);
console.log(arr);

concat方法能把两个数组合并，但是不改变原本的数组

Array.prototype.push.apply可以实现数组合并

call方法

和apply类似

区别在于apply参数形式是数组

而call是参数列表

aaa.apply(this, arguments);

aaa.call(this,name,age)

内部对象

Date

var n = new Date();
n.getFullYear();//年
n.getMonth();//月  0-11代表月  比如现在7月实际会得到6
n.getDate();//日
n.getDay();//星期几
n.getHours();//时
n.getMinutes();//分
n.getSeconds();//秒
n.getTime();//时间戳 表示1970.1.1 0:00:00到现在的秒数
console.log(new Date(n.getTime()));//时间戳转为时间
n.toLocaleString();//获取本地时间

json

如何JavaScript支持的类型都可以用json来表示

对象用{}

数组用[]

所有的键值对都用key:value

var aa ={
  name:"cds",
  age:2,
  sf:"dgsg"
}
var json = JSON.stringify(aa);//对象转化为json字符串
console.log(json);
var bb = JSON.parse(json);//json字符串转换为对象
console.log(bb);

面向对象编程

class

class  student{
  constructor(name) {
    this.name = name;
  }
  hello(){
    alert("hello");
  }
}

继承

class  student{
  constructor(name) {
    this.name = name;
  }
  hello(){
    alert("hello");
  }
}
class xiaostudent extends student{
  constructor(name,age) {
    super(name);
    this.age=age
  }
  myage() {
    alert("888888")
  }
}

var xiao = new xiaostudent("acscas", "adsaa");
console.log(xiao.myage());

prototype

在JavaScript中每一个函数都有prototype属性，这个属性指向函数的原型对象

最终 的原型都是object，object的原型都是object，所以这是一个原型链

操作BOM对象（重点）

BOM浏览器对象模型

window代表浏览器窗口

window.innerHeight     //内部高度
window.innerWidth     //内部宽度
window.outerHeight  //外部高度

window.outerWidth    //外部宽度

Navigator封装了浏览器的信息(基本上不用)

navigator.appName 
navigator.appVersion

screen屏幕

screen.height

screen.width

location（重要）定位

location.reload()   //刷新网页

location.assign('')  //设置新的地址

document当前的页面

document.title='xxx'    //改变页面的标题

获取具体的文档树节点

<dl id="app">
  <dt>title</dt>
  <dd>fvd</dd>
</dl>

<script>
  var elementById = document.getElementById("app");
  console.log(elementById);
</script>

获取cookie     document.cookie

history代表浏览器的历史记录（不建议使用）

history.back()  //后退

history.forward()   //前进

操作DOM对象（重点）

DOM文档对象模型

更新、遍历、删除、添加四种操作

要操作一个DOM 节点，要先获得这个DOM 节点

<div id="father">
  <h1> sdd sd</h1>
  <p id="aaa"></p>
  <p class="ccc"></p>
</div>
<script>
  //对应标签选择器，id选择器，类选择器
  document.getElementsByTagName("h1");
  document.getElementById("aaa");
  document.getElementsByClassName("ccc");
  var father = document.getElementById("father");
  console.log(father.children);//获取父节点下的所有子节点

这是原生态的代码，之后都使用jQuery

更新节点

操作文本

<div id="id1">
</div>
<script>
  var id1 = document.getElementById('id1');
  id1.innerText="adsvsdv";//添加文本
  id1.innerHTML = '<strong>123</strong>';//html可以解析标签，但是text只会当成文本输出
</script>

操作css

var id1 = document.getElementById('id1');
id1.innerText="adsvsdv";//添加文本
id1.style.color = 'red';
id1.style.fontSize = '200px';
id1.style.padding = "2em"; //内边距

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除子节点

<div id="father">
  <h1> sdd sd</h1>
  <p id="aaa"> ds sdds</p>
  <p class="ccc">ds sd ds</p>
</div>
<script>
  var p1 = document.getElementById("aaa");
  var father = p1.parantElement;//得到该节点的父节点
  father.removeChild(p1)//删除子节点
</script>

删除节点的时候要注意当你通过下标father.removeChild(father.children[0])删除了一个节点，那么这个节点不存在了，children是时刻变化的，这时候在通过下标去删除最后的节点，已经不存在下标指定的这个子节点了。

插入节点

获得一个dom节点，当它为空，可以通过innerHTML来增加元素，但是如果不为空，用innerHTML会把原来的内容覆盖掉，所以不能使用这种方法

追加attend

<p id="js">javascript</p>
<div id="list">
  <p id="se">javase</p>
  <p id="ee">javaee</p>
  <p id="me">javame</p>
</div>

<script>
  var js = document.getElementById("js");
  var list = document.getElementById("list");
  list.appendChild(js);
</script>

创建一个新节点来添加

<p id="js">javascript</p>
<div id="list">
  <p id="se">javase</p>
  <p id="ee">javaee</p>
  <p id="me">javame</p>
</div>

<script>
  var list = document.getElementById("list");
  var newp = document.createElement('p');//创建一个p标签
  newp.id = 'newp';
  newp.innerHTML = 'hello';
  list.appendChild(newp);
  
  var script = document.createElement('script');//创建一个script标签
  script.setAttribute("type", "text/javascript");//键值对的形式添加比较万能
  list.appendChild(script);
</script>

 创建style，设置样式为text/css,设置文本，再把style添加到head标签里

var style = document.createElement('style');
style.setAttribute("text", "text/css");
style.innerHTML = 'body{background-color:green}';
document.getElementsByTagName('head')[0].appendChild(style);

操作表单

文本框 text

下拉框 <select>

单选框  radio

多选框 checkbox

隐藏域 hidden

密码框 password

等等

<form action="post">
  <p>
  <span>用户名:</span><input type="text" id="username" >
  </p>
  <p>
    <span>性别:</span><input type="radio" id="boy" name="sex" value="nan">男
    <input type="radio" id="girl" name="sex" value="nv">女
  </p>
</form>

<script>
  var input_text = document.getElementById("username");
  var boy_radio = document.getElementById("boy");
  var girl_radio = document.getElementById("girl");
  //得到输入框的值并修改
  input_text.value="cascasc";

  //对于单选框，多选框等等value只能得到当前的值
  //checked判断是否被选中
  boy_radio.checked//查看返回值是true还是false，判断是否被选中
</script>

提交表单（验证）

<!--  MD5工具类  -->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

<form method="post" action="#">
  <p>
    <span>用户名:</span><input type="text" id="username" name="username" >
  </p>
  <p>
    <span>密码:</span><input type="password" id="password" name="password">

  </p>
<!--  绑定事件-->
  <input type="submit" value="提交" onclick="aa()">
</form>

<script>
  function aa() {
    var username = document.getElementById("username");
    var password = document.getElementById("password");
    console.log(username.value);
    //md5算法加密
    password.value = md5(password.value);
    console.log(password.value);
  }
</script>

更优的方法

因为上面的方式当输入密码点击提交的时候密码会变长

我们可以用普通的密码框获取密码，但是通过隐藏域的方式来提交密码,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  MD5工具类  -->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<!--表单提交绑定事件 用onsubmit="return  aa()"-->
<form method="post" action="https://www.baidu.com/" onsubmit="return  aa()">
  <p>
    <span>用户名:</span><input type="text" id="username" name="username" >
  </p>
  <p>
    <span>密码:</span><input type="password" id="input-password">
  </p>
<!--   隐藏域-->
    <input type="hidden" id="md5-password" name="password">

  <input type="submit" value="提交">
</form>

<script>
  function aa() {
    var username = document.getElementById("username");
    var pwd = document.getElementById("input-password");
    var md5pwd = document.getElementById("md5-password");
      md5pwd.value = md5(pwd.value);//将获得的输入框内的密码加密
      if (username.value == "xuliangjie"&&pwd.value=="123"){
          return true;
      }else {
          alert("用户名或密码错误");
          return false;
      }
  }
</script>

</body>
</html>

jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  在线引入jQuery-->
<!--  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>-->
<!--    导入jQuery，去官网下载-->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>

<a href="" id="test-jquery">点我</a>
<script>
    //jQuery的使用公式： $(选择器).action()
    //选择器就是css的选择器  id就是#，class就是.
    $('#test-jquery').click(function (){
        alert('hello');
    })
</script>
</body>
</html>

选择器 

标签选择器、id选择器、类选择器

    document.getElementsByTagName("p");
    document.getElementById("id");
    document.getElementsByClassName("classname");
    
//    jquery里
    $("p").click();
    $("#id1").click();
    $(".class1").click();

文档工具站 https://jQuery.cuishifeng.cn

事件

鼠标事件、键盘事件、其他事件

举例一个鼠标移动事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="lib/jquery-3.6.0.js"></script>
  <style>
    #divmove {
      width: 500px;
      height: 500px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<!--获取鼠标当前的坐标-->
mouse：<span id="move"></span>

<div id="divmove">
在这里移动鼠标试试
</div>


<script>
  //当网页元素加载完毕之后相应事件
  // $(document).ready(function (){})
  //上面的部分可以简写为
  $(function () {
    $('#divmove').mousemove(function (e) {
      $('#move').text('x:' + e.pageX +'      y'+ e.pageY);
    });
  });
</script>
</body>
</html>

jQuery操作dom元素

操作文本

<ul id="test-ul">
  <li id="asd"></li>
  <li class="da"></li>
</ul>

<script>
  //原生的方式
  // var test = document.getElementById('test-ul');
  // var asd = document.getElementById('asd');
  // test.innerText="dvsdsdvsdvsd";

  $("#test-ul li[id=asd]").text();//输出文本的值
  $("#test-ul li[id=asd]").text('scascascas');//设置文本的值，会覆盖原来的
  $("#test-ul").html("<strong>dvsvdsdvsd</strong>");//可识别文本里的标签
</script>

css的操作

<ul id="test-ul">
  <li id="asd">阿萨德</li>
  <li class="da">acasc</li>
</ul>

<script>
  //原生的方式
  // var test = document.getElementById('test-ul');
  // var asd = document.getElementById('asd');
  // test.innerText="dvsdsdvsdvsd";

  $("#test-ul li[id=asd]").text();//输出文本的值
  $("#test-ul li[class=da]").text('scascascas');//设置文本的值，会覆盖原来的
  $("#test-ul li[id=asd]").html("<strong>dvsvdsdvsd</strong>");//可识别文本里的标签

  $("#test-ul li[id=asd]").css({"color":"red"},{"background":"blue"});
</script>

元素的显示和隐藏（本质是css里的display：none）

$("#test-ul li[class=da]").show();
// $("#test-ul li[class=da]").hide();隐藏