前端知识增补—JavaScript

JavaScript 简介

JavaScript 是什么

  JavaScript (简称 JS), 是⼀个脚本语⾔, 表明型或即时编译型的编程语⾔. 固然它是作为开辟Web⻚⾯的脚本语⾔⽽着名，但是它也被⽤到了很多⾮欣赏器情况中   HTML：                  ⽹⻚的布局  CSS：                     ⽹⻚的表现  JavaScript：          ⽹⻚的⾏为   如需在 HTML 页面中插入 JavaScript，请利用 <script> 标签
  <script> 和 </script> 会告诉 JavaScript 在那里开始和竣事
  <script> 和 </script> 之间的代码行包罗了 JavaScript
  
  在欣赏器页面  Fn + F12    ——>
  查抄元素、修改样式、调试代码、网络分析、控制台输出等欣赏器开辟者工具功能
  
  console.log()  打印日记
  变量

JavaScript 是⼀⻔动态弱范例语⾔，变量可以存放差别范例的值(动态)
随着步调的运⾏, 变量的范例大概会发⽣改变
   
          var a = 10;
          var b = "10";
          console.log(a==b);
          console.log(a===b);
  

    ==   ⽐较相称(会进⾏隐式范例转换)      ===   ⽐较相称(不会进⾏隐式范例转换)   数据范例

   
      <script>
          var a = 10;
          console.log("a" + typeof a);        
          a = "你好";
          console.log("a" + typeof a);        
          let b = 20;
          console.log("b" + typeof b);
          var c = true;
          console.log("c" + typeof c);
          var d;
          console.log("d" + typeof d);
      </script>
  

    JavaScript对象

  数组

     
      1.    如果下标超出范围读取元素, 则效果为 undefined         2.    不要给数组名直接赋值, 此时数组中的全部元素都没了        相称于原来 arr 是⼀个数组, 重新赋值后酿成字符串了                           var a = new Array();
           a[0] = 1;           //增
           a[1] = "你好";
           console.log(a);
           console.log(a[1]);  //查
           a[0] = 2;           //改
           console.log(a);
          
           var b = [1,2,"你好啊",true];
           console.log(b);
   
           b.splice(2,1);      //删
           console.log(b);
                  
           b[100] = 3;
           b['h'] = "hello"
           console.log(b);
   

    函数     

        函数界说并不会执⾏函数体内容, 必须要调⽤才会执⾏. 调⽤⼏次就会执⾏⼏次             调⽤函数的时间进⼊函数内部执⾏, 函数竣事时回到调⽤位置继承执⾏. 可以借助调试器来观察           函数的界说和调⽤的先后次序没有要求. (这⼀点和变量差别, 变量必须先界说再使⽤)               实参和形参之间的个数可以不匹配. 但是现实开辟⼀般要求形参和实参个数要匹配           1.     如果实参个数⽐形参个数多, 则多出的参数不到场函数运算           2.     如果实参个数⽐形参个数少, 则此时多出来的形参值为 undefined                     此时形如      function() { }      如许的写法界说了⼀个匿名函数, 然后将这个匿名函数⽤⼀个变量来表现              后⾯就可以通过这个 c 变量来调⽤函数了                        var a = function add(x,y){
               console.log(x+y);            
           }
           console.log(typeof add);
           console.log(typeof a);
          
           function add(x,y){
               console.log(x+y);          
           }
           add(1,2);
          
           var b = function add(x,y){
               console.log(x+y);
           }
           b(1,2);
   
           var c = function (x,y){
               console.log(x+y);
           }
           c(1,2);
           c(1);
           c(1,2,3);
           c("你好");
   

    对象

        在 JS 中, 字符串, 数值, 数组, 函数都是对象        每个对象中包罗多少的属性和⽅法        •    属性: 事物的特性        •    ⽅法: 事物的⾏为            1.    使⽤ 字⾯量 创建对象 [常⽤]                              使⽤ { } 创建对象             •     使⽤ { } 创建对象            •     属性和⽅法使⽤键值对的情势来构造           •     键值对之间使⽤ , 分割. 末了⼀个属性后⾯的 , 可有可⽆            •     键和值之间使⽤ : 分割           •     ⽅法的值是⼀个匿名函数                 / 1.      使⽤      .      成员访问运算符来访问属性      `.`      可以明白成      "     的     "               console     .     log     (student.name);               // 2.      使⽤      [ ]      访问属性     ,      此时属性须要加上引号               console     .     log     (student[     'height'     ]);               // 3.      调⽤⽅法     ,      别忘记加上      ()               student.     sayHello     ();                           2.       使⽤ new Object 创建对象                         var        student =        new        Object       ();        //        和创建数组类似                     student.name =        "       明云       "       ;                     student.height =        175       ;                     student[       'weight'       ] =        170       ;                     student.sayHello =        function        () {                          console       .       log       (       "hello"       );                     }                     console       .       log       (student.name);                     console       .       log       (student[       'weight'       ]);                     student.       sayHello       ();                                 留意, 使⽤ { } 创建的对象也可以随时使⽤        student.name = "明       ";        如许的⽅式来新增属性                           3.        使⽤ 构造函数 创建对象                             function         构造函数名        (        形参        ) {                           this        .        属性         =         值        ;                           this        .        ⽅法         =         function        ...                        }                        var         obj =         new         构造函数名        (        实参        );                                  留意:                           •          在构造函数内部使⽤ this 关键字来表⽰当前正在构建的对象                          •          构造函数的函数名⾸字⺟⼀般是⼤写的                          •          构造函数的函数名可以是名词                          •          构造函数不须要 return                           •          创建对象的时间必须使⽤ new 关键字                          this 相称于 "我"                                                
           var a = {};         //创建空对象
           var student = {
               name:'明云',
               height:175,
               weight:170,
               sayHello:function(){
                   console.log("hello");                
               }
           };
           //获取对象的属性
           console.log(student.height);
           console.log(student['weight']);
           //添加属性
           student.ago = 18;
           student['gender'] = "男";        
           console.log(student);
   
           a.age = 13;
           console.log(a);      
   

    JQuery

  jQuery是⼀个快速、轻便且功能丰富的JavaScript框架
  引⼊依靠

  在使⽤jQuery CDN时，只须要在HTML⽂档中加⼊如下代码
     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   网站地点 jQuery CDN
      src   属性指明白JQuery库地点的URL. 这个URL是CDN(内容分发⽹络)服务提供商为jQuery库      提供的⼀个统⼀资源定位符           开辟时, 发起把JQuery库下载到当地, 放在当前项⽬中. 引⼊外部地点, 会有外部地点不能访问的⻛险        下载⽅式:         1.    通过欣赏器访问上述毗连         2.    右键 -> 另存为.... 生存到当地, 放在项⽬中即可      JQuery 语法

  jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些利用
        $(selector).action()        •   $()   是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和利用 HTML 元素     •   Selector 选择器, ⽤来"查询"和"查找" HTML 元素      •   action 利用, 执⾏对元素的利用   JQuery 选择器

    JQuery选择器 基于已经存在的CSS选择器, 除此之外, 另有⼀些⾃界说的选择器.      jQuery 中全部选择器都以   $ 开头：$()          <p><a href="https://www.sogou.com/">搜狗</a></p>
       <img src="D:\前端代码\微信图片_20240524141849.jpg" width="200px"/>
       <script src="D:\前端代码\JQrery.js"></script>
       <script>
           //获取元素属性
           var a = $("p a").attr("href");
           console.log(a);
   
           $("p a").attr("href","http://www.baidu.com");
           // $("img").attr("width","500px");
           $("#test").click(function(){
               $("img").attr("width","500px");
           });
   

    JQuery变乱

  
    JS 要构建动态⻚⾯, 就须要感知到⽤⼾的⾏为     ⽤⼾对于⻚⾯的⼀些利用(点击, 选择, 修改等) 利用都会在欣赏器中产⽣⼀个个变乱, 被 JS 获取到, 从⽽进⾏更复杂的交互利用   利用元素

     text()  设置或返回所选元素的⽂本内容
      html()  设置或返回所选元素的内容（包罗 HTML 标签)             val()  设置或返回表单字段的值                     这三个⽅法即可以获取元素的内容, ⼜可以设置元素的内容              有参数时, 就进⾏元素的值设置, 没有参数时, 就进⾏元素内容的获取                  attr() ⽅法⽤于获取属性值
      css() ⽅法设置或返回被选元素的⼀个或多个样式属性             1.     append() : 在被选元素的末端插⼊内容            2.     prepend() : 在被选元素的开头插⼊内容            3.     after() : 在被选元素之后插⼊内容            4.     before() : 在被选元素之前插⼊内容                 5.      remove() : 删除被选元素（及其⼦元素）               6.      empty() : 删除被选元素的⼦元素                       <ol>
           <li>List1</li>
           <li>List2</li>
           <li>List3</li>
       </ol>
       <script>
           $("ol").append("<li>append</li>");
           $("ol").prepend("<li>prepend</li>");
           $("ol").before("before");
           $("ol").after("after");
       </script>
   

           <ol>
           <li>List1</li>
           <li>List2</li>
           <li>List3</li>
       </ol>
       <div id="div1">我是一个div</div>
       <button id="remove">删除div</button>
       <button id="empty">清空ol</button>        
       <script>
           $("#remove").click(function(){
               $("#div1").remove();
               // $("div").remove();
           });
           $("#empty").click(function(){
               $("ol").empty();
           })
   

    综合案例

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。