Js基础（语法，操作，jQuery)

Javascript

1. 引入

• 需要在script标签内写js

• <!--内嵌-->
  <script>alert("hello world");//输出hello world	
  </script> 
  

2.浏览器控制台使用

• 用浏览器打开，f12打开控制台，选择源代码，在里面可以找到自己的代码，打上断点刷新可以调试

• 控制台输出

  • console.log()//控制台标准输出模式
    

3.数据类型（快速基础）

• 声明 :全部都可以是var

• number

  • //js不区分小数和整数，Number
    123//整数123
    123.1//浮点数123.1
    1.123e3//科学计数法
    -99 //复数
    NaN //not a number
    Infinity //表示无限大
    

• 字符串

  • abc' "abc"
    

• Bool

  • true,false
    

• 逻辑

  • && //两个都为真，结果为真
    || //一个为真，结果为真
    ! //真即假，假即真
    
    

• 比较运算符

  • = //赋值
    == //等于（类型不一样，值一样，也会判断为true)
    ==== //绝对等于（类型一样，值一样，结果true)
        //注：坚持不要使用=比较
    //须知：
    NaN===NaN //->false 
    //这个与所有的数值都不相等
    //只能通过IsNaN函数来判断
    

• 数组
  java的数值必须是相同类型的对象~，JS中不需要这样！

  • //保证代码的可读性，尽量使用[]
    var arr =[1,2,3,4,5,'he11o',nu11,true];
    new Array(1,12,3,4,4,5,'he11o');
    

  • 取数组下标：如果越界了，就会报undefined错

• 对象

  对象是大括号，数组是中括号
  每个属性之间使用逗号隔开，最后一个不需要添加

  • var person ={
        name: "leilei",
        age :18,
        tags:['a','b','c']
    }
    

  • 取对象的值

  • person.name
    person.age
    

4.严格检查模式

• ‘use strict’,严格检查模式，预防javascript.的随意性导致产生的一些问题
• 必须写在们avaScript的第一行！
• 局部变量建议都使用Let去定义~

5.数据类型（具体）

5.1字符串

• 多行字符串编写

  • //tab上面esc键下面
    var msg =
    `hello
    world
    你好ya
    你好`
    

• 模板字符串

  • <script>
        "use strict";
    let name = "leilei";
    console.log(`你好，${name}`)
    </script>
    

• 字符串长度

  • str.lenth
    

• 字符串是不可变，不是传引用

• 大小写转换

  • str.toUpperCase();
    str.toLowerCase();
    

• 截取字符串

  • //前闭后开
    str.substring(1)//从第一个字符串截取到最后一个字符串
    str.substring(1,3)//[1,3)
    

• 返回指定位置处的字符

  • str.charAt();
    

• 返回指定字符的位置

  • str.indexOf('字符')
    

5.2数组

• Arrayi可以包含任意的数据类型

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

• 长度

  • arr.length
    

• slice()截取Array的一部分，返回一个新数组，类似于String中的substring

  • arr.slice(3);//4，5，6；
    arr.slice(1,3)//2，3，
    

• push(),pop() 尾部 ->相当于是stack栈

  • push:压入到尾部
    pop:弹出尾部的一个元素
    

• unshift(）,shift(）头部 ->相当于是队列的前面

  • unshift:压入到头部
    shift:弹出头部的一个元素
    

• 排序sort()

• 反转 reverse();

  • arr.reverse();//6，5，4，3，2，1
    

• concat() 拼接

  • arr.concat(['a','b','c']);
    //1，2，3，4，5，6，a,b,c;
    

  • 注意：concat()并没有修改数组，只是会返回一个新的数组

• jion() 连接符

  • arr.join('-');
    //1-2-3-4-5-6;
    

• 二维数组

  • arr =[[1,2],[3,4],['a','b']];
    arr[1][1]//->4
    

5.3对象

• 若干个键值对

  • var对象名={
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
    }
    

  • 对象赋值

    • 对象名.属性名 =属性值
      

  • 使用一个不存在的对象属性，不会报错！undefined

  • 动态增添删减属性

    • delete person.name //true ->删除元素，返回一个bool值
      person//person的name属性没了
      

    • person.name ="haha" // "haha" ->增添元素，返回增添的值
      person//多了haha的name
      

• 判断属性值是否在这个对象中 xxx in XXX!

  • name in person// true
    

• 判断一个属性是否是这个对象自身拥有的hasOwnProperty()

  • person.hasownProperty('tostring')//false, 因为tostring是所有的类的父类
    person.hasownProperty('name')//true  是person私有的属性
    

• for循环

  • //for (var index in object){}
    for (let num in age){
        console.log(age[num])//获取下标
    }
    
    for(let num of age){
        console.log(num)//直接获取值
    }
    
    age.forEach(function (element, index, array) {
        // element: 指向当前元素的值
        // index: 指向当前索引
        // array: 指向Array对象本身
        console.log(element + ', index = ' + index);
    });
    

5.4Map和Set

• Map:键值对

  • var map01 = new Map([
        ["tom", 100],
        ["xixi", 99],
        ["haha", 90],
    ]);
    var age = map01.get("tom"); //通过key获取value值
    console.log(age);
    map01.set("admin",123)//添加一个元素
    map01.delete("admin")//删除一个元素
    

• Set:无序不重复的集合

  • var set01 =new Set([3,1,3,1,2,3,2]);
    set01.add(5);//添加
    set01.delete(1);//删除
    set.has(3)//判断有无
    

6.函数

6.1定义函数

1. function 函数名(参数){
       ;
   }
   

2. var 函数名  = function(参数){
       
   }
   //相当于是一个匿名函数，然后将返回值给函数名
   

6.2调用

• js可以任意传参，也可以不传递参数

• 函数名 (参数)
  

• 但对于一个明显不符逻辑的东西可以直接手动抛出

  • if (x！='number'){
        throw "Not a Number"
    }
    

6.3新特性函数rest

function a(x,y,...rest){
    console.log(x);
    console.log(y);
    console.log(rest);
}

结果

• >a(1,2,3,4)//传入
  //输出
  1
  2
  [3, 4]
  

• 作用，获取传入参数剩下的值，编成数组

6.4变量的作用域

• 内部函数可以访问外部函数的成员，反之则不行

  • function a() {
        var x = 1;
        function b() {
            var y = x + 1;
        }
        var z = y + 1;
    }
    //y is not defined
    

• 全局变量与局部变量同名问题

  • var box = 1; //全局变量
    function display(box) {
        var box = 3; //此处box与全局变量box没有关系，这里的box为传递的参数，相当于新声明的局部变量
        var b = 2; //局部变量
        console.log("box-->" + box);
    }
    display();
    //b不能访问
    console.log("b-->" + b);//b is not defined
    

7.内置对象

7.2Math

• Math.random() 随机数

• Math.ceil() 向上取整，大于最大整数

• Math.floor() 向小取整，小于最小整数String

• console.log(Math.random());//随机小数
  var num = 1.4;
  console.log(Math.ceil(num)); //2
  console.log(Math.floor(num));//1
  

7.2Date

• //获取日期
  getFullYear() //年
  getMonth()//月
  getDate() //日
  getHours()//时
  getMinutes()//分
  getSeconds()//秒
  
  //设置日期
  setYear()
  setMonth()
  setDate()
  setHours()
  setMinutes()
  setSeconds()
  toLoacalestring() //转换成本地时间字符串
  

• 说明：
  1.getMonth():得到的值：0_11(1月12）
  2.setMonth():设置值时g~11
  3.toLocaleString():可根据本地时间把Date对象转换为字符串，并返回结果。

• var d = new Date();
  console.log(d.getDate());//30
  

7.3对象的序列化，反序列化

• ​ 序列化即将S对象序列化为字符串，反序列化即将字符串反序列化为S对象。JS中通过调用SON方法，可以将对象序列化成字符串，也可以将字符串反序列化成对象。

• //序列化对象，将对象转为字符串
  JSON.stringify(object);
  //反序列化，将一个]son字符串转换为对象。
  JSON.parse(jsonstr);
  

  • var obj = {
        name: "zhangsan",
        age: 19,
        islike: true,
        cat: ["猫咪", "咪咪"],
    };
    console.log(obj);
    var str =JSON.stringify(obj);
    console.log(str);
    //转成对象，反序列化
    var obj2 = JSON.parse(str);
    obj2.age =20;
    console.log(obj2);
    

9.事件

• ​ 事件(Event)是JavaScript.应用跳动的心脏，进行交互，使网页动起来。当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了。

• 作用

  • 验证用户输入的数据。
  • 增加页面的动感效果。
  • 增强用户的体验度

• 常用事件

  • on1oad:当页面或图像加载完后立即触发
    onb1ur:元素失去焦点
    onfocus:元素获得焦点
    onc1ick:鼠标点击某个对象
    onchange:用户改变域的内容
    onmouseover:鼠标移动到某个元素上
    onmouseout:鼠标从某个元素上离开
    onkeyup:某个键盘的键被松开
    onkeydown:某个键盘的键被按下
    

    • <body onload="loadwindow()">//在body里放置onload事件，在加载时候运行函数
          <script>
              function loadwindow(){
                  console.log("加载..")
              }
          </script>
      </body>
      

• 事件流:接受事件的顺序

  • 事件流的顺序：事件冒泡和事件捕获
    事件冒泡（从小到大）
    事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档
    事件捕获(从大到小)
    document对象接受，然后逐级向下传播到具体的节点
    

• html事件处理程序

  • <script>
        function test() {
        console.log("鼠标离开了..");
    }
    </script>
    <input type="button" value="提交" onclick="alert('hello')" onmouseout="test()" />//点击按钮弹出hello，鼠标离开调用test函数
    

• Dom 0级事件

  • 将一个函数赋值给一个事件处理程序属性

  • 只能为同一个元素的同一个事件设定一个事件程序（覆盖）

    •     <button id="bot">Dom 0级事件</button>//创建id
      <script>
      var bot =document.getElementById("bot");//通过id获取这个变量
      console.log(bot);
      bot.onclick =function(){//通过函数来调用事件
          console.log("Dom 0级事件")
      }</script>
      

• Dom 2级事件

  • “DOM2级事件"定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，并且他们都接受3个参数：要处理的事件名（这里面就不需要带上on了）、作为事件处理的函数和一个bool值(一般省略)；

    • <button id="bot2">Dom 2级事件</button>
      <script>
          var bot2 = document.getElementById('bot2');
          bot2.addEventListener('click',function (){//添加监听，加上一个匿名函数
              console.log("Dom 2级事件...")
          })
      </script>
      

  • 如果是想要删除某个Dom 2级事件，不能删除匿名函数；

10.Bom对象

• BOM的核心对象是window,它表示浏览器的一个实例。window对象有双重角色，它既是通过javaScripti问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量函数，都以window作为其Globaly对象，因此有权访问parselnt()等方法。

10.1系统消息框

• 浏览器通过（实际是window对象的方法）alert()、confirm()、prompt()方法可以调用系统对话框向用户显示

  • (1)消息框：a1ert,常用。
    	a1ert()方法用于显示带有一条指定消息和一个oK按钮的警告框。
    (2)输入框：prompt,返回提示框中的值。
    	prompt()方法用于显示可提示用户进行输入的对话框。
    参数（可选）：
    	第一个参数：要在对话框中显示的纯文本。
    	第二个参数：默认的输入文本。
    (3)确认框：confirm,返回true/false.
    confirm()方法用于显示一个带有指定消息和oK及取消按钮的对话框。
    

  • <body>
        <button type="button" onclick="tesetAlert()">消息框</button>
        <button type="button" onclick="testPromt()">输入框</button>
        <button type="button" onclick="testConfirm()">确认框</button>
        <script>
            function tesetAlert(){
                alert("hello world");
                console.log("你好...");//这里因为alert的原因会阻碍执行
            }
            function testPromt (){
                prompt("请输入你想要内容"," ");
            }
            function testConfirm(){
                var flag  = confirm("你确认要删除吗")//这里会弹出确认框
                if(flag ){
                    alert("删除成功...");
                }else {
                    alert("别乱点哦...");
                }
            }
        </script>
    </body>
    

• 打开窗口

  • window.open()方法既可以导航到一个特定的URL也可以用来打开一个新的窗口

    •     <button type="button" id="btn1">打开窗口</button>
      <script>   
          var btn1 = document.getElementById("btn1");
          btn1.onclick= function () {
              // oepn()//打开空白新窗口
              // open("2.html")//打开本地
              open("http://www.baidu.com")//打开远程
           	open("http://www.baidu.com",self)//打开远程,在本身的页面打开
          };
      </script>
      

• 关闭窗口

  • 调用window.close()就好了

10.2时间函数

• setTimeout()
  setTimeout():在指定的毫秒数后调用函数或计算表达式。返回一个唯一的标识；也可以通过返回的标识cliearTimeout(id):来清除指定函数的执行。

  • setTimeout(函数，时间(毫秒)) ;//返回值是一个id，通过这个id可以调用clearTimeout(id)来清除指定的函数
    
    

10.3history函数

• history对象是历史对象。包含用户（在浏览器窗口中）访问过的URL。history对象是window对象的一部分，可通过window.history属性对其进行访问。

  • history对象的属性：length，返回浏览历史记录的url数量

  • history对象的方法：
    back():加载history列表中的前一个URL。
    forward():加载历史列表中的下一个URL。当页面第一次访问时，还没有下一个urI。

    go(number|URL): URL参数使用的是要访问的URL。而number参数使用的是要访问的URL在History的URL列表中的相对位置。go(-1),到上一个页面

10.4 location对象

• location对象是window对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
  • location对象的属性 href:设置或返回完整的URL
  • location对象的方法
    reload():重新加载当前文档。
    replace():用新的文档替换当前文档。

11.Dom

Dom：文档对象模型

• ​ 要实现页面的动态交互效果，bom操作远远不够，需要操作html才是核心。如何操作html,就是DOM。简单的说，dom提供了用程序动态控制hmtl接口。DOM即文档对象模型描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。

11.1节点

• ​ 加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。DOM将这种树型结构理解为由节点组成，组成一个节点树。对于页面中的元素，可以解析成以下几种类型的节点：

• 节点类型	HTML内容	例如
  文档节点	文档本身	整个文档document
  元素节点	所有的HTML元素	、 、
  属性节点	HTML元素内的属性	id、href、name、class
  文本节点	元素内的文本	hello
  注释节点	HTML中的注释

11.2获取节点

• 注意：操作dom必须等节点初始化完毕后，才能执行。
  • 建议：把js代码放在html末尾就可以

方法	描述
getElementByld()	根据id获取dom对象，如果id重复，那么以第一个为准
getElementsByTagName()	根据标签名获取dom对象数组
getElementsByClassName()	根据样式名获取dom对象数组
getElementsByName()	根据name属性值获取dom对象数组，常用于多选获取值

• <body>
      <div id="fa">
          <h1>标题1</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
  </div>
  </body>
  
  <script>
  var h1 = document.getElementsByTagName('h1');
  var p1=document.getElementById('p1');
  var p2 =document.getElementsByClassName("p2")
  var fa = document.getElementById('fa');
  </script>
  

11.3更新节点

• <body>
      <div id="id1"></div>
  </body>
  <script>
      var id1 = document.getElementById('id1');
      id1.innerText='haha';
  </script>
  

• 操作文本

  • id1.innerText修改文本的值
  • id1.innerHTML = "<strong>123</strong>"可以解析Html文本标签

• 操作js

  • id1.style.color = "lightblue";
    id1.style.fontSize = "50px";
    id1.style.padding = "10px";
    

• 删除节点：

  步骤：先获取父节点，在通过父节点删除自己

  • <body>
        <p id="p1">p1</p>
    </body>
    <script>
    var fath =p1.parentElement;fath.removeChild(p1)
    </script>
    

• 插入节点

  • 因为正常的innerText方法是会直接覆盖的，所以我们需要追加

  • <body>
        <p id="js">javascript</p>
        <div id="list">
            <p id="se">javase</p>
            <p id="ee">javaee</p>
            <p id="me">javame</p>
        </div>
    </body>
    <script>
        var js = document.getElementById("js");
        var list = document.getElementById("list");
        list.append(js);//追加一个js
    </script>
    

  • 创建节点

    • //法一：
      var newp = document.createElement("p");
      newp.id = "p1";
      newp.innerText = "hello";
      list.append(newp);
      
      //法二(更方便，实用)
      var script = document.createElement("script");
      script.setAttribute("type", "text/javascript");
      

• 获取和设置表单的值

  • <body>
        <form action="post">
            <p><span>用户名：</span><input type="text" id="username" /></p>
            <p>
                <span>性别：</span>
                <input type="radio" name="sex" id="boy" />男
                <input type="radio" name="sex" id="girl" />女
            </p>
        </form>
    </body>
    <script>
        var input_text = document.getElementById("username");
        input_text.value = "1223";//修改表单的值
        var boy = document.getElementById("boy");
        var girl = document.getElementById("girl");
        boy.checked()//判断单选框是否被选中 
    </script>
    

12.表单提交校验

• 提交表单

  • 使用普通outton按钮+onclick事件+事件中编写代码：
    获取表单.submit():

    • <body>
          <form
                action="http://www.baidu.com"
                name="myform2"
                id="myform1"
                method="get"
                >
              姓名:<input type="text" id="uname" />
              <input type="button" value="提交表单" onclick="submitForm()" />
              <!--事件加函数来执行-->
          </form>
      </body>
      <script>
          function submitForm() {
              var id1 = document.getElementById("myform1");
              var id2 = document.getElementById("uname").value;
              if (id2 == null || id2.trim() == "") {//if最好带括号吧，养成习惯
                  return;
              }
              id1.submit();//调用原生的submit函数
          }
      </script>
      

  • 使用submit按钮+οnclick=“return函数()”+函数编写代码：
    最后必须返：return true|false

    • <body>
          <form
                action="http://www.baidu.com"
                name="myform2"
                id="myform2"
                method="get"
                >
              姓名:<input type="text" id="uname2" />
              <input type="submit" value="提交表单" onclick="return submitForm2()" />
              <!--任然是事件加函数，但是这里返回函数的值-->
          </form>
      </body>
      <script>
          function submitForm2() {
              var id2 = document.getElementById("uname2").value;
              if (id2 == null || id2.trim() == "") {
                  return false;//如果不可以就返回假
              }
          }
      </script>
      

13.Jquery

13.1什么是Jquery

jQuery是一套兼容多浏览器的javascript脚本库.核心理念是写得更少，做得更多，相当于是js的大的类库

13.2优点

• 提供了强大的功能函数
• 解决浏览器兼容性问题
• 实现丰富的UI和插件
• 纠正错误的脚本知识

13.3核心

$符号在jQuery中代表对jQuery对象的引用，"jQuery"是核心对象。通过该对象可以获取jQueryx对象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。

$ <==>jquery

13.4选择器

• 基础选择器

选择器	名称	举例
id选择器	#id	$(“#testDiv”)选择id为testDiv的元素
元素名称选择	element	$(“div”)选择所有div元素器
类选择器	.class	$(“.blue”)选择所有class=blue的元素
选择所有元素	*	$(“*”)选择页面所有元素
组合选择器	selector1,selector2,selectorN	$(“#estDiv,span.blue”)同时选中多个选择器匹配的元素

• 层次选择器

选择器	名称	举例
后代选择器	ancestor descendant	$(“#parent div”)选择id为parent的元素的所有div元素
子代选择器	parent >child	$(“#parent>div”)选择idweiparent的直接div子元素
相邻选择器	prev +next	$(“.blue +img”)选择css类为blue的下一个img元素
同辈选择器	prev ~sibling	$(“.blue ~img”)选择css类为blue之后的img元素

• 表单选择器

Forms	名称	举例
表单选择器	:input	查找所有的inputi元素：$(“：input”); 注意：会匹配所有的input、,textarea、select和button元素。
文本框选择器	:text	查找所有文本框：$(“：text”)
密码框选择器	:password	查找所有密码框：$(“：password”)
单选按钮选择器	:radio	查找所有单选按钮：$(“：radio”)
复选框选择器	:checkbox	查找所有复选框：$(“：checkbox”)
提交按钮选择器	:submit	查找所有提交按钮：$(“：submit”)
图像域选择器	:image	查找所有图像域：$(“：image’”)
重置按钮选择器	:reset	查找所有重置按钮：$(“：reset”)
按钮选择器	:button	查找所有按钮：$(“：button”)
文件域选择器	:file	查找所有文件域：$(“：file”)

13.5Dom操作

• 节点文本操作：

  • <body>
        <ul id="test">
            <li class="js">javascript</li>
            <li name="python">python</li>
        </ul>
    </body>
    <script src="../../Jquery/jquery.js"></script>
    <script>
        $("#test li[name=python]").text();//获取值
        $("#test li[name=python]").text("123");//修改值
    </script>
    <!--修改html同理，获取之后.html() ，里面没有东西就是获取，有东西，就是修改-->
    

• css操作

  • $("#test li[name=python]").css({"color","red"});
    

• 元素的隐藏与显示

  •   $("#test li[name=python]").show();
      $("#test li[name=python]").hide();