目录1基础概念2基本使用3基础语法4consloe.log 到底有什么用5目前阶段的基础操作6现有知识总结7jQuery的使用8两个案例演示一基础概念前面学习 HTML 和 CSS 时我们已经能够把一个网页“搭出来”和“美化出来”但这样的网页还比较静态。如果希望网页能够响应用户的操作例如点击按钮 → 弹出提示 输入内容 → 获取输入框数据 点击菜单 → 展开内容 点击按钮 → 修改文字、颜色就需要 JavaScript。JavaScript简称JS是一门脚本语言最初主要用于浏览器中的网页交互。JavaScript和Java是什么关系你就可以理解为周杰和周杰伦他们完全就是两个不同的东西只不过在JavaScript刚开始进行创建的时候就是主线任务是和Java类似并且名字有Java也是为了蹭Java的流量吧二基本使用先介绍一下consloe.log是用于打印日志的那我们这里的使用还是跟css一样有三种写法先分别来展示一下1行内方式button onclickalert(hello)点我/buttonJavaScript 直接写在 HTML 标签中。适合非常简单的代码但代码复杂以后会很乱。2内部方式script console.log(hello); /script通过在body中使用script标签写入内容3外部方式console.log(hello2);script srcjs2.js/script通过创建一个新的js类来进行使用三基础语法这里主要是先学习JavaScript这门语言的一些基础就像开始学习Java的时候的变量定义数组之类的1变量常用数据类型numberstringbooleanundefined在这门语言不跟Java一样这里定义一个变量不是intString之类的而是可以统一使用letlet a 10; let b 3.14; let name 张三; let message hello; let flag true; let flag2 false; let a; console.log(a);2typeof查看类型let a 10; let b hello; let c true; console.log(typeof a); console.log(typeof b); console.log(typeof c);3运算符这里的运算符和Java类似但是有一个不一样就是以及比较是否相同但是在比较的时候会进行类型的转换就好比“10”以及10是相等的在比较大小的基础上也看类型是否相同就向上面那个例子在这里就是不相同的4数组let arr [10, hello, true]; arr.push(200); arr.splice(1, 1); arr[0] 100;数组的设置也很简单以及包容你的一个数组里面可以包含多种不同的类型的数据增加元素push删除元素splice从哪开始删除几个修改元素直接用下标把你想改的数字写下来就好了如果你直接写let arr【5】10就是将数组的长度直接设为6并且除了下标为5的那个内容是10其他的都是empty5函数function add(x, y) { let sum x y; return sum; }方法统一使用function 后面就是方法名字以及参数并且这里的方法的包容性也同样的很高你在调用的时候不一定说是两个数字相加也可以两个字符串等等add(5, 3); add(aa, 3); add(aa, bb); add(aa); add(aa, bb, cc); add(5);像aa和3就会出现字符串相加的情况像我的函数是两个参数但是你传了三个这样就会丢弃最后一个如果你少填了空出来的参数就会默认是undefined6对象let student { name: 张三, age: 20, sayHello() { console.log(hello); } };这里的方法最好直接写名字然后跟着对应的操作四consloe.log的作用这个就相当于Java当中的sout打印但是这个打印并不会出现在网页上而是打印在日志中所以consloe.log最大的作用就是调试那我现在就来介绍一下如何进行调试我们进入网页之后点击键盘上的f12点击控制台就可以看到我们的日志了script console.log(hello); /script script srcjs2.js/script console.log(hello2);在这里就可以看到我刚刚写的两个hello具体如何操作先举一个例子let arr [10, 20, 30]; arr.push(40); console.log(arr);这样我们通过日志就可以看到我们push有没有成功五基础操作现在学习阶段比较常见的可以先认识console.log()控制台打印。alert()浏览器弹窗。typeof查看数据类型。arr.length获取数组长度。arr.push()在数组末尾增加元素。arr.splice()删除数组元素。parseInt()把内容转换为整数。Math.random()生成随机数。Math.floor()向下取整。这些操作在后面的案例中会不断重复出现。六现有知识总结我们现在学完这些开始网页交互了吗还并没有我们现在学这些东西主要是学JavaScript的一些基础的语法还没到交互的关系当只有比如用户点击一个按钮浏览器接收到点击的信号JavaScript监听到之后执行对应的代码七jQueryjQuery 本质上还是建立在 JavaScript 之上的工具它封装了很多常见的页面操作使得选择 HTML 元素、操作 DOM 和处理事件更加简单如何导入我们先进入jQuery的官网然后进行下载下载完之后打开右键另存为到你写的代码的那个目录下然后复制粘贴到你的代码文件目录并且在代码中进行引入接下来就可以使用了代码中的导入最好写在head里面或者body的开头因为浏览器是代码从上往下进行加载所以写在开头避免加载出现问题script src./jquery-4.0.0.min.js/script基础用法$(selector).action();selector是选择哪一个后面的action是具体要执行的方法$(button).hide();这个就是找到button然后对他进行隐藏这里的选择器和前面css类似id使用#class使用. ,直接写就是找到所有的标签上面这个就是找到所有的p标签事件相关理解要进行网页交互就得先知道用户做了什么动作比如用户点击了一个什么输入了一个什么都是需要捕捉的动作所以后续我们使用jQuery主要就是带上用户的作用以及这个动作完之后返回什么$(button).click(function() { console.log(点击成功); });这个就是当用户点击button按钮之后打印一个日志事件里面的常用方法text() html() val()text是修改文本内容html是修改HTML里面的内容val是获取到用户输入接下来我用两个小案例来辅助学习案例1猜数字这个图片是我们要达到的效果首先就是我们输入数字产生一个次数以及结果的改变然后就是重新开始一局之后的数据的刷新!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title猜数字/title /head body div button idreset重新开始游戏/buttonbr 请输入你要猜的数字input typetext idguessnumbutton idguess猜/buttonbr 已经猜的次数span idcount0/spanbr 结果: span idresult/span /div script src./jquery-4.0.0.min.js/script script let numMath.floor(Math.random()*100)1; let count0; console.log(num); $(#guess).click(function(){ count; //拿到用户输入的数字用val let usernum$(#guessnum).val(); if(numusernum){ $(#result).text(猜小了); $(#count).text(count); }else if(numusernum){ $(#result).text(猜大了); $(#count).text(count); }else{ $(#result).text(猜对了); $(#count).text(count); } }) //接下来就是点击重新开始之后的重置 $(#reset).click(function(){ numMath.floor(Math.random()*100)1; console.log(num); count0; $(#guessnum).val(); $(#count).text(); $(#result).text(); }) /script /body /html案例2留言板预期效果在我们输完之后会在提交下面显示!DOCTYPE html html langzh-CN head meta charsetUTF-8 title表白墙/title style * { margin: 0; padding: 0; box-sizing: border-box; } .container { width: 520px; margin: 30px auto; text-align: center; } h1 { font-size: 56px; margin-bottom: 20px; } p { color: #888; margin-bottom: 25px; } .row { width: 500px; margin: 15px auto; display: flex; align-items: center; justify-content: center; } .row span { width: 100px; text-align: left; font-size: 24px; } .edit { width: 320px; height: 50px; font-size: 20px; padding-left: 10px; } .submit { width: 420px; height: 60px; background-color: orange; color: white; border: none; font-size: 28px; cursor: pointer; } .message { width: 420px; margin: 10px auto; text-align: left; font-size: 20px; padding: 10px; border-bottom: 1px solid #ddd; } /style /head body div classcontainer h1表白墙/h1 p输入后点击提交会将信息显示在下面/p div classrow span谁/span input classedit typetext /div div classrow span对谁/span input classedit typetext /div div classrow span说什么/span input classedit typetext /div div classrow input classsubmit typebutton value提交 /div /div !-- 引入你本地的 jQuery 4.0.0 -- script src./jquery-4.0.0.min.js/script script $(function () { // 给提交按钮绑定点击事件 $(.submit).click(function () { // 获取三个输入框中的内容 var from $(.edit:eq(0)).val(); var to $(.edit:eq(1)).val(); var message $(.edit:eq(2)).val(); // 打印到控制台方便调试 console.log(from); console.log(to); console.log(message); // 如果有内容为空就不提交 if (from || to || message ) { alert(请输入完整内容); return; } // 拼接一段 HTML var html div classmessage from 对 to 说 message /div; // 添加到 container 最后 $(.container).append(html); // 清空所有文本框 $(:text).val(); }); }); /script /body /html