一、JavaScript简介

  1. 什么是JavaScript：

  • Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执

    1.    行JavaScript代码。简称JS !

  • JS是Netscape网景公司的产品，最早取名为LiveScript为了吸引更多java开发人员。更名为JavaScript。

  1. 弱类型
  • JS 是运行在浏览器端的一门编程语言是弱类型（所有关键字都可以用一个来接收），Java 是强类型。
  • 弱类型：指的就是所有类型的数据都可以用一个关键子去接收(var、let、const)，语法相对来说没有那么严格
  • 因为浏览器的性能很强大，Js可以是弱类型的。

二、JS的应用

2.1 js的hello world的程序
  1. js代码的编写位置
  • 在html页面中定义一个script标签，在该标签中写js代码

  • 我们可以创建一个外部的js文件，将js代码写在这个文件里面，在html页面中进行引入

    1. <script>
    2. alert('网页弹窗')
    3. alert('hello world')
    4. </script>

  • js中的注释和java中的注释方式完全一致。

2.2 js中的变量
  1. 在js中用于接收变量的关键字 ：var、let
  • var能够接收的是局部变量
  • let表示的是全局变量
  • const用于声明常量：不可变的量
  1. 使用（typeof 数据）可以查看数据的类型

2.3 js中的逻辑判断
  1. js中数据的本身就可以表示真或者假 负数也是真，js中处理0，false，undefined本身表示为假；

  2. 且运算：两个同时为真的数据进行且运算时取到的时后面的数据。 

    1. 参与且运算的数据包含假的数据，则会取到为假的数据，如果两个数          据都为假，那么会取到前者的值。取到的靠前为假的值。

  3. 或运算：只要两者数据都为真，取到前者的数据。一真一假取到的为真的数据。两者同时为假则取到后者的数据。取到的靠前为真的值。

2.4 js中的数组
  1. js中的数组可以存放任意类型的数据，在java中数组只能存放某一种数据类型的数据；数据下标从0开始。
  1. 案例： 学生的期末考试成绩：98、88、70、87、95、68、90、85、74、93 求最大值，最小值、总和、平均值

2.5 js中的函数

  1. 创建、调用函数

    1. //方式一
    2. function fun1(){
    3. 函数体；
    4. }
    5. //方式二
    6. let fun2 = function(){
    7. 函数体；
    8. }
    9. //调用
    10. fun();

  2. js中函数的总结：

  • js中的函数不支持重载
  • js中的函数没有返回值类型，如果你想给方法的调用处返回数据，直接写return关键字返回数据即可

  • js中的函数参数列表是没有数据类型的

    function fun3(name, age)

  • arguments 函数中的一个隐式的数组对象，用于接收参数数据

2.5 js 中的事件

  1. onload加载完成事件: 

    1.  浏览解析完所有标签后/页面加载完成之后，常用于做页面js 代码初           始化操作。

  2. onclick单击事件:

    1.  常用于按钮的点击响应操作。

  3. onblur失去焦点事件:常用用于输入框失去焦点后验证其输入内容是否合法。

  4. onchange内容发生改变事件:常用于下拉列表和输入框内容发生改变后操作
  5. onsubmit表单提交事件:常用于表单提交前，验证所有表单项是否合法。

2.7 静态注册和动态注册
  1. 静态注册事件:

通过html标签的事件属性直接赋于事件响应后的代码，这种方式我们
叫静态注册。

  1. 动态注册事件:

是指先通过js 代码得到标签的dom对象（通常指HTML标签），然后
再通过dom对象.事件名= function()这种形式赋于事件响应后的代
码，叫动态注册。

  1. 所有的动态绑定操作必须放到文本就绪函数（window.onload = function）里；否则无法指行动态绑定的事件，由于浏览器顺序解析时是按顺序解析的。 ```javascript <!DOCTYPE html> 

  1. <!--静态绑定单机事件-->
  2. <!--<input type="button" value="测试单击事件" onclick="alert('鼠标单击事件静态绑定触发了！！')">-->
  4. <!--动态绑定-->
  5. <input type="button" id="onclickInput" value="测试单击事件"><br>
  7. <!--静态绑定失去焦点事件-->
  1. <!--动态绑定-->
  2. 动态绑定失去焦点事件:<input type="text" id="onblurInput"><br>
  4. <!--静态绑定内容发生改变事件-->
  1. 动态绑定内容发生改变事件：<select id="selectEl">
  2.                                 <option>--请选择你的爱豆--</option>
  3.                                 <option>--蔡徐坤--</option>
  4.                                 <option>--张艺兴--</option>
  5.                                 <option>--刘浩然--</option>
  6.                                 <option>--许光汉--</option>
  7.                        </select>

  3. <a name="QXcL4"></a>
  4. ##### 2.8 DOM模型和document 对象
  6. 1. DOM全称是Document Object Model 文档对象模型
  7. 1. doucument野封象
  8. - 第一点:Document它管理了所有的HTML文档内容。
  9. - 第二点: document它是一种树结构的文档。有层级关系。第三点:它让我们把所有的标签都对象化
  10. - 第四点:我们可以通过document 访问所有的标签对象。
  12. <a name="cZ2WK"></a>
  13. ##### 2.9 js常用属性
  15. 1. childNodes 属性,获取当前节点的所有子节点
  16. 1. firstChild属性，获取当前节点的第一个子节点
  17. 1. lastChild 属性，获取当前节点的最后一个子节点
  18. 1. parentNode 属性，获取当前节点的父节点
  19. 1. nextSibling属性,获取当前节点的下一个节点
  20. 1. previousSibling属性，获取当前节点的上一个节点
  21. 1. className用于获取或设置标签的class属性值
  22. 1. innerHTML属性,表示获取/设置起始标签和结束标签中的内
  23. 1. innerText属性，表示获取/设置起始标签和结束标签中的文本
  24. ```javascript
  25. <!DOCTYPE html>
  26. <html lang="en">
  27. <head>
  28.     <meta charset="UTF-8">
  29.     <title>常用属性</title>
  31. </head>
  33. <script>
  35.     window.onload = function (){
  37.         //获取所有的子节点
  38.         let childNodes = document.getElementById("body").childNodes
  40.         //获取第一个子节点
  41.         let firstChild = document.getElementById("body").firstChild
  43.      /*   for (let i in childNodes){
  45.             alert(childNodes[i])
  47.         }*/
  49.         //alert(firstChild)
  51.         //获取div
  52.         let box = document.getElementById("box");
  54.         //获取所有的内容
  55.         alert(box.innerHTML)
  57.         //获取文本内容
  58.        alert(box.innerText)
  59.     }
  61. </script>
  63. <body id="body">
  65.     <h1>hello world</h1>
  66.     <br>
  68.     <div id="box">
  69.         <span>我是div内部的span标签</span>
  70.     </div>
  72.     <span></span>
  74. </body>
  75. </html>

三、jQuery

3.1 jquery介绍

导入控件：
jquery能代替以上操作，且更简单。需要导入jquery的控件。jquery-1.7.2.js

  1. jQuery也就是JavaScript和查询(Query) ，它就是辅助

JavaScript开发的js类库

  1. 它的核心思想是write less,do more(写得更少，做得更多)，

所以它实现了很多浏览器的兼容问题。

  1. jQuery现在已经成为最流行的JavaScript库，在世界前

10000个访问最多的网站中，有超过55%在使用jQuery。

  1. jQuery是免费、开源的，jQuery的语法设计可以使开发

更加便捷，例如操作文档对象、选择DOM元素、制作动.
画效果、事件处理、使用Ajax以及其他功能

  1. 参照文档：https://jquery.cuishifeng.cn/

3.1 jquery介绍
  1. jquery的核心函数$( 对象)<br />通过jquery的方式来声明一个文本就绪函数<br />如下代码：采用原生的js方式动态绑定单击事件，和采用jquery方式绑定单击事件。
  1. <!--引入jquery控件-->
  2. <script src="../jquery/jquery-1.7.2.js"></script>
  4. <script>
  6.     //通过jquery的方式来声明一个文本就绪函数
  7.     $(function (){
  9.         //通过原生js来获取对应的标签对象
  10.         let button = document.getElementById("button");
  12.      /*   button.onclick = function (){
  14.             alert("通过原生js的方式来绑定单击事件")
  16.         }*/
  18.         //[object HTMLInputElement] dom对象
  19.         //alert(button)
  21.         let jqueryBut = $(button)
  23.         //[object Object] jquery对象
  24.         //alert(jqueryBut)//[object Object]
  26.         //alert(jqueryBut[0])//[object HTMLInputElement]
  28.         //通过jquery的方式来获取标签对象
  29.         //#是id选择器。
  30.         let jqueryButton = $("#button")
  32.         //jquery对象
  33.         //alert(jqueryButton)
  34.         jqueryButton.click(function (){
  36.             alert("通过jquery的方式来绑定单击事件")
  38.         })
  40.     })
  42. </script>
  43. <body>
  45.     <input type="button" id="button" value="测试">
  47. </body>
  48. </html>

3.3 对象转换与区别

  1. dom对 象转jquery对象
    将dom对象添加到jquery的核心函数中$(dom对象)
    2、jquery对 象转成dom对象
    jquery对象的本质共文就是dom对象的数组+ jQuery提供的一系
    列功能函数，可以根据下标索引来取到对应的dom对象

  2. 区别：

  • jquery计对 F dom对象中所有的属件大对数部会付装成对应的函数，
  • jquery不能 够调Hdom对象中的属件，dom对象也不能调用jquery对象的函数

3.3 jQuery选择器

  1. ID选择器:根据id查找标签对象

  2. . class 选择器:根据class查找标签对象（就是一个点）
  3. element选择器:根据标签名查找标签对象
    • 选择器: 表示任意的，所有的元素

  5. selector1, selector2 组合选择器:合并选择器1，选择器

    1.  2的结果并返回    取并集。<br />             组合选择器参数为待标签类型。

  6. 层级选择器

  • ancestor descendant后代选择器:在给定的祖先元素下

匹配所有的后代元素

例如 let bodydiv = $(body div); 旨在匹配body内部的div

  • parent>child子元素选择器:在给定的父元素下匹配所

有的子元素

  • prev+next相邻元素选择器:匹配所有紧接在prev元素

后的next元素

  • prev ~ sibings之,后的兄弟元素选择器:匹配prev元素之

后的所有siblings元素
用来找某类元素的某类兄弟

3.4 案例

案例需求：使用jquery选择器来完成全选、全不选、反选

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>常用属性</title>
  7. </head>
  9. <!--引入jquery控件-->
  10. <script src="../jquery/jquery-1.7.2.js"></script>
  12. <script>
  14.     //文本就绪函数
  15.     $(function (){
  16.          //给全选按钮绑定单击事件
  17.         $("[value = '全选']").click(function (){
  19.             //遍历多选框
  20.             $("[name = 'hobby']").each(function (){
  22.                 //this.checked = true
  23.                 $(this).prop("checked",true)
  25.             })
  27.         })
  29.         //全不选
  30.         $("[value = '全不选']").click(function (){
  32.             //遍历多选框
  33.             $("[name = 'hobby']").each(function (){
  35.                 //this.checked = false
  36.                 $(this).prop("checked",false)
  38.             })
  39.         })
  41.         //反选
  42.         $("[value = '反选']").click(function (){
  44.             //遍历多选框
  45.             $("[name = 'hobby']").each(function (){
  47.                 //this.checked = !this.checked
  48.                 $(this).prop("checked",!this.checked)
  50.             })
  51.         })
  53.     })
  56. </script>
  58. <body>
  60.     爱好：<br>
  62.     打篮球 <input type="checkbox" name="hobby" value="打篮球">
  63.     约会 <input type="checkbox" name="hobby" value="约会">
  64.     敲代码 <input type="checkbox" name="hobby" value="敲代码">
  65.     干饭 <input type="checkbox" name="hobby" value="干饭">
  66.     睡觉 <input type="checkbox" name="hobby" value="睡觉">
  67.     <br>
  68.     <input type="button" value="全选"><br>
  69.     <input type="button" value="全不选"><br>
  70.     <input type="button" value="反选"><br>
  72. </body>
  73. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>常用属性</title>
  7. </head>
  9. <!--引入jquery控件-->
  10. <script src="../jquery/jquery-1.7.2.js"></script>
  12. <script>
  14.     //文本就绪函数
  15.     $(function (){
  17.         $("[value = '计算']").click(function (){
  19.             let num1 = $("#num1").val()
  21.             let num2 = $("#num2").val()
  23.             let result;
  25.             //获取选中状态下的运算符
  26.             let ysf = $("select option:selected").val()
  28.             if (ysf == '+'){
  30.                 //Number()将字符串类型的数据转换成整型的
  31.                 result = Number(num1) + Number(num2)
  33.             }else if (ysf == '-'){
  35.                 result = Number(num1) - Number(num2)
  37.             }else if (ysf == '*'){
  39.                 result = Number(num1) * Number(num2)
  41.             }else if (ysf == '/'){
  43.                 result = Number(num1) / Number(num2)
  44.             }
  46.             //用于数据的追加
  47.             $("#result").val(result)
  49.         })
  51.     })
  54. </script>
  56. <body>
  57.     计算器：<br>
  58.     <input type="text" name="num1" id="num1">
  60.     <select name="ysf">
  61.         <option value="">--请选择运算符--</option>
  62.         <option value="+">+</option>
  63.         <option value="-">-</option>
  64.         <option value="*">*</option>
  65.         <option value="/">/</option>
  66.     </select>
  68.     <input type="text" name="num2" id="num2"><br>
  69.     <input type="button" value="计算"><br>
  70.     结果：<input type="text" id="result">
  72. </body>
  73. </html>