自己做网站自己做推广教程视频教程,ppt设计报价,wordpress点餐主题,wordpress社交分享本节⽬标
了解什么是JavaScript, 学习JavaScript的常⻅操作, 以及使⽤JQuery完成简单的⻚⾯元素操作. 一. 初识 JavaScript
1.JavaScript 是什么 JavaScript (简称 JS), 是⼀个脚本语⾔, 解释型或即时编译型的编程语⾔. 虽然它是作为开发Web⻚⾯的脚本语⾔⽽出名#xff0c;…本节⽬标
了解什么是JavaScript, 学习JavaScript的常⻅操作, 以及使⽤JQuery完成简单的⻚⾯元素操作. 一. 初识 JavaScript
1.JavaScript 是什么 JavaScript (简称 JS), 是⼀个脚本语⾔, 解释型或即时编译型的编程语⾔. 虽然它是作为开发Web⻚⾯的脚本语⾔⽽出名但是它也被⽤到了很多⾮浏览器环境中.
发展历史
JavaScript 之⽗ 布兰登 . 艾奇 (Brendan Eich) JavaScript 最初只是为了完成简单的表单验证(验证数据合法性), 结果后来不⼩⼼就⽕了.
1994年⽹景公司Netscape发布了Navigator浏览器0.9版。这是历史上第⼀个⽐较成熟的⽹络浏览器轰动⼀时。但是这个版本的浏览器只能⽤来浏览不具备与访问者互动的能⼒. ⽹景公司急需⼀种⽹⻚脚本语⾔使得浏览器可以与⽹⻚互动1995年Sun公司将Oak语⾔改名为Java, 正式向市场推出, 并⼤肆宣传: ⼀次编写到处运⾏. ⽹景公司⼼动了决定与Sun公司结成联盟。它允许Java程序以applet⼩程序的形式直接在浏览器中运⾏, 甚⾄考虑直接将Java作为脚本语⾔嵌⼊⽹⻚, 但是这样会让HTML⽹⻚太复杂了, 不得不放弃1995年4⽉, Brendan Eich ⼊职了⽹景公司1995年5⽉⽹景公司做出决策决定开发⼀⻔新的语⾔, 新的语⾔要看上去与Java⾜够相似但是⽐Java简单. Brendan Eich被指定为该语⾔的设计师. 对Java⼀点兴趣都没有的Brendan Eich, 为了应付公司安排的任务, 只⽤10天时间就把Javascript设计出来了.(由于设计时间太短, 语⾔的⼀些细节考虑得不够严谨导致后来很⻓⼀段时间Javascript 写出来的程序混乱不堪)
最初在⽹景公司, 该语⾔命名为 LiveScript, 当时⽹景公司认为, Java作为当时最流⾏的编程语⾔, 带有Java 的名字有助于这⻔新⽣语⾔的传播, 将 LiveScript 命名为 JavaScript.
其实 Java 和 JavaScript 之间的语法⻛格相去甚远. JavaScript 发展历史可以参考阮⼀峰⼤神的博客
http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html JavaScript 和 HTML 和 CSS 之间的关系 HTML: ⽹⻚的结构(⻣)CSS: ⽹⻚的表现(⽪)JavaScript: ⽹⻚的⾏为(魂) 2.JavaScript快速上⼿
1. 在HTML⽂件中, 写如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptalert(Hello JavaScript!)/script
/body
/html
2. 运⾏浏览器 3 引⼊⽅式
JS有3种引⼊⽅式语法如下表格所⽰
引⼊⽅式语法描述⽰例⾏内样式直接嵌⼊到 html 元素内部input typebutton value点我⼀下 οnclickalert(haha)内部样式定义script标签写到 script 标签中script alert(haha); /script外部样式定义script 标签通过src属性引⼊外部js⽂件script srchello.js/script
3种引⼊⽅式对⽐:
1. 内部样式会出现⼤量的代码冗余, 不⽅便后期的维护所以不常⽤.
2. ⾏内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的jS.
3. 外部样式html和js实现了完全的分离, 企业开发常⽤⽅式. 二、基础语法
JavaScript 虽然⼀些设计理念和 Java 相去甚远, 但是在基础语法层⾯上还是有⼀些相似之处的.
有了 Java 的基础很容易理解 JavaScript 的⼀些基本语法.
1 变量
创建变量(变量定义/变量声明/变量初始化), JS声明变量有3种⽅式
关键字解释⽰例var早期JS中声明变量的关键字, 作⽤域在该语句的函数内var name zhangsan;letES6 中新增的声明变量的关键字, 作⽤域为该语句所在的代码块内let name zhangsan;const声明常量的声明后不能修改const name zhangsan;
注意事项:
1. JavaScript 是⼀⻔动态弱类型语⾔变量可以存放不同类型的值(动态), ⽐如:
var name zhangsan;var age 20;
随着程序的运⾏, 变量的类型可能会发⽣改变. (弱类型)
var a 10; // 数字a hehe; // 字符串
Java是静态强类型语⾔, 在变量声明时, 需要明确定义变量的类型. 如果不强制转换, 类型不会发⽣变化.
2. 变量名命名规则: a. 组成字符可以是任何字⺟、数字、下划线_或美元符号$ b. 数字不能开头 c. 建议使⽤驼峰命名
3. 表⽰字符串拼接, 也就是把两个字符串⾸尾相接变成⼀个字符串.
4. \n 表⽰换⾏ 2.数据类型 虽然js是弱数据类型的语⾔但是js中也存在数据类型js中的数据类型分为 原始类型 和 引⽤类型具体有如下类型
数据类型描述number数字. 不区分整数和⼩数.string字符串类型.字符串字⾯值需要使⽤引号引起来, 单引号双引号均可.boolean布尔类型. true 真, false 假undefined表⽰变量未初始化. 只有唯⼀的值 undefined.
使⽤typeof函数可以返回变量的数据类型
scriptlet aa10;console.log(typeof aa);aaaaaconsole.log(typeof aa);aatrue;console.log(typeof aa);let bb;console.log(typeof bb);/script 3. 运算符
JavaScript 中的运算符和 Java ⽤法基本相同
运算符类型运算符算术运算符 , - , * , / , %⾃增⾃减运算符 , --赋值运算符 , , - , * , / , %⽐较运算符• , , , , ! , ! • ⽐较相等(会进⾏隐式类型转换) • ⽐较相等(不会进⾏隐式类型转换)逻辑运算符 , || , !位运算符• 按位与 • | 按位或 • ~ 按位取反 • ^ 按位异或移位运算符• 左移 • 有符号右移(算术右移) • ⽆符号右移(逻辑右移)三元运算符条件表达式 ? true_value : false_value
代码⽰例: scriptlet aa10;let bb10;console.log(aabb,aabb);console.log(aabb,aabb);/script 三、 JavaScript对象
1.数组
(1 数组定义
创建数组有两种⽅式
1. 使⽤ new 关键字创建
// Array 的 A 要⼤写var arr new Array();
2. 使⽤字⾯量⽅式创建 [常⽤]
var arr [];var arr2 [1, 2, haha, false]; // 数组中保存的内容称为 元素
注意: JS 的数组不要求元素是相同类型.
这⼀点和 C, C, Java 等静态类型的语⾔差别很⼤. 但是 Python, PHP 等动态类型语⾔也是如此.
(2 数组操作
1. 读: 使⽤下标的⽅式访问数组元素(从 0 开始)
2. 增: 通过下标新增, 或者使⽤ push 进⾏追加元素
3. 改: 通过下标修改
4. 删: 使⽤ splice ⽅法删除元素 代码⽰例
scriptlet arr [1, 2, haha, false];//读取数组元素console.log(arr[0]);//添加数组元素arr[4]sd;console.log(arr);arr[100]cccc;console.log(arr.length);//修改数组元素arr[0]10;console.log(arr);//删除数组元素arr.splice(1,1);console.log(arr);//第一个下标为开始删除的下标第二个参数为删除的个数/script 注意:
1. 如果下标超出范围读取元素, 则结果为 undefined
2. 不要给数组名直接赋值, 此时数组中的所有元素都没了.
相当于本来 arr 是⼀个数组, 重新赋值后变成字符串了. 2.函数
(1 语法格式 // 创建函数/函数声明/函数定义 function 函数名(形参列表) { 函数体 return 返回值; } // 函数调⽤ 函数名(实参列表) // 不考虑返回值 返回值 函数名(实参列表) // 考虑返回值 函数定义并不会执⾏函数体内容, 必须要调⽤才会执⾏. 调⽤⼏次就会执⾏⼏次.调⽤函数的时候进⼊函数内部执⾏, 函数结束时回到调⽤位置继续执⾏. 可以借助调试器来观察.函数的定义和调⽤的先后顺序没有要求. (这⼀点和变量不同, 变量必须先定义再使⽤) (2 关于参数个数
实参和形参之间的个数可以不匹配. 但是实际开发⼀般要求形参和实参个数要匹配
1. 如果实参个数⽐形参个数多, 则多出的参数不参与函数运算
sum(10, 20, 30); // 30
2. 如果实参个数⽐形参个数少, 则此时多出来的形参值为 undefined sum(10); // NaN, 相当于 num2 为 undefined.
JS 的函数传参⽐较灵活, 这⼀点和其他语⾔差别较⼤. 事实上这种灵活性往往不是好事. (3) 函数表达式
另外⼀种函数的定义⽅式
var add function() {
var sum 0;
for (var i 0; i arguments.length; i) {
sum arguments[i];
}
return sum;
}
console.log(add(10, 20)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add); // function 此时形如 function() { } 这样的写法定义了⼀个匿名函数, 然后将这个匿名函数⽤⼀个变量来表
⽰.
后⾯就可以通过这个 add 变量来调⽤函数了.
JS 中函数是⼀等公⺠, 可以⽤变量保存, 也可以作为其他函数的参数或者返回值. 3.对象 在 JS 中, 字符串, 数值, 数组, 函数都是对象每个对象中包含若⼲的属性和⽅法.
属性: 事物的特征.⽅法: 事物的⾏为.
JavaScript 的对象 和 Java 的对象概念上基本⼀致. 只是具体的语法表项形式差别较⼤.
1. 使⽤ 字⾯量 创建对象 [常⽤]
使⽤ { } 创建对象 let student{name:chenjie,height:180,age:18,sayHello: function() {console.log(hello);}}console.log(student);
使⽤ { } 创建对象属性和⽅法使⽤键值对的形式来组织.键值对之间使⽤ , 分割. 最后⼀个属性后⾯的 , 可有可⽆键和值之间使⽤ : 分割.⽅法的值是⼀个匿名函数.
使⽤对象的属性和⽅法: 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 相当于 我 使⽤构造函数重新创建猫咪对象
function Cat(name, type, sound) {this.name name;this.type type;this.miao function () {console.log(sound); // 别忘了作⽤域的链式访问规则}}
var mimi new Cat(咪咪, 中华⽥园喵, 喵);var xiaohei new Cat(⼩⿊, 波斯喵, 猫呜);var ciqiu new Cat(刺球, ⾦渐层, 咕噜噜);console.log(mimi);mimi.miao(); 四、JQuery
W3C 标准给我们提供了⼀系列的函数, 让我们可以操作:
⽹⻚内容⽹⻚结构⽹⻚样式 但是原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们学习使⽤JQuery来操作⻚⾯对象. jQuery是⼀个快速、简洁且功能丰富的JavaScript框架, 于2006年发布. 它封装JavaScript常⽤的功能代码, 提供了简洁⽽强⼤的选择器和DOM操作⽅法. 使⽤JQuery可以轻松地选择和操作HTML元素从⽽减少了开发⼈员编写的代码量提⾼了开发效率, 它提供的 API 易于使⽤且兼容众多浏览器这让诸如 HTML ⽂档遍历和操作、事件处理、动画和 Ajax 操作更加简单. JQuery对于事件的处理也进⾏了简化, 提供了⼀个简单的API来绑定、触发和处理事件使开发⼈员能够更⽅便地处理各种交互⾏为. 1 引⼊依赖
使⽤JQuery需要先引⼊对应的库
在使⽤jQuery CDN时只需要在HTML⽂档中加⼊如下代码
script srchttps://code.jquery.com/jquery-3.7.1.min.js/script
参考地址: https://releases.jquery.com/
其中 src 属性指明了JQuery库所在的URL. 这个URL是CDN(内容分发⽹络)服务提供商为jQuery库提供的⼀个统⼀资源定位符.
如果需要使⽤其他版本的JQuery, 可以在官⽹进⾏下载 Jquery官⽅共提供了4种类型的JQuery库 uncompressed : ⾮压缩版本(易读, 但是⽂件较⼤, 传输速度慢)minified: 压缩版(不易读, ⽂件⼩, 性能⾼, 开发中推荐)slim: 精简瘦⾝版, 没有Ajax和⼀些特效slim minified : slim 的压缩版 开发时, 建议把JQuery库下载到本地, 放在当前项⽬中. 引⼊外部地址, 会有外部地址不能访问的⻛险.
下载⽅式: 通过浏览器访问上述连接 右键 - 另存为.... 保存到本地, 放在项⽬中即可.
也可以从其他CDN上下载引⽤JQuery
⽐如:
script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script 2 JQuery 语法
jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作
基础语法 $(selector).action()
$() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素.Selector 选择器, ⽤来查询和查找 HTML 元素action 操作, 执⾏对元素的操作 JQuery 的代码通常都写在 document ready 函数中.
document整个⽂档对象, ⼀个⻚⾯就是⼀个⽂档对象, 使⽤document表⽰.
这是为了防⽌⽂档在完全加载就绪之前运⾏ jQuery 代码即在 ⽂档加载完成后才可以对 ⻚⾯进⾏操作。
如果在⽂档没有完全加载之前就运⾏函数操作可能失败 $(document).ready(function(){alert(页面加载完成);});
⽰例:
bodybutton typebutton点我消失/buttonscript$(document).ready(function(){$(button).click(function(){$(this).hide();})});/script /body
给按钮添加了click事件, 点击后元素消失.
简洁写法:
$(function(){// jQuery functions go here}); 3 JQuery 选择器
我们通过JQuery选择器来选择⼀些HTML元素. 然后对元素进⾏操作.
JQuery选择器 基于已经存在的CSS选择器, 除此之外, 还有⼀些⾃定义的选择器.
jQuery 中所有选择器都以 $ 开头$().
语法描述$(*”)选取所有元素$(this)选取当前 HTML 元素S(p)所有p 元素$(p:first)选取第一个p元素$(p:last)最后一个p元素$(.box)所有 classbox的元素S(#box)idbox的元素$(.intro .demo)所有 classintro 且 classdemo 的元素$(p .intro)选取 class 为 intro 的p元素$(ul li:first)选取第一个ul元素的第一个 li 元素$(:input)所有input 元素$(:text)所有 typetext的input元素$(:checkbox)所有 typecheckbox的input 元素 4 JQuery事件
JS 要构建动态⻚⾯, 就需要感知到⽤⼾的⾏为.
⽤⼾对于⻚⾯的⼀些操作(点击, 选择, 修改等) 都会在浏览器中产⽣⼀个个事件, 被 JS 获取到, 从⽽进⾏更复杂的交互操作.
浏览器就是⼀个哨兵, 在侦查敌情(⽤⼾⾏为). ⼀旦⽤⼾有反应(触发具体动作), 哨兵就会点燃烽⽕台的狼烟(事件), 后⽅就可以根据狼烟来决定下⼀步的对敌策略.
事件由三部分组成:
事件源: 哪个元素触发的事件类型: 是点击, 选中, 还是修改?事件处理程序: 进⼀步如何处理. 往往是⼀个回调函数.
例如: 某个元素的点击事件:
$(p).click(function(){//动作发⽣后执⾏的代码});
常⻅的事件有:
事件代码文档就绪事件(完成加载)$(document).ready(function)点击事件$(selector).click(function)双击事件$(selector).dblclick(function)元素的值发生改变$(selector).change(function)鼠标悬停事件S(selector).mouseover(function) 5 操作元素
(1)获取/设置元素内容
三个简单的获取元素内容的JQuery⽅法
JQuery方法说明text()设置或返回所选元素的文本内容html()设置或返回所选元素的内容(包括 HTML标签)val()设置或返回表单字段的值
这三个⽅法即可以获取元素的内容, ⼜可以设置元素的内容.
有参数时, 就进⾏元素的值设置, 没有参数时, 就进⾏元素内容的获取.
代码⽰例:
获取元素内容: div idtestspan你好/span/divinput typetext valuehelloscript$(document).ready(function () {let html $(#test).html();console.log(html内容为:html);let text $(#test).text();console.log(⽂本内容为:text);let inputVal $(input).val();console.log(inputVal);});/script
设置元素内容 div idtest/divdiv idtest2/divinput typetext valuescript$(document).ready(function () {$(#test).html(h1设置html/h1);$(#test2).text(h1设置text/h1);$(input).val(设置内容);});/script
(2)获取/设置元素属性
JQuery attr() ⽅法⽤于获取属性值.
代码⽰例
获取元素属性 pa hrefhttps://www.baidu.com idbaidu百度/a/pscript$(function(){let href $(p a).attr(href)console.log(href);});/script 设置元素属性 pa hrefhttps://www.baidu.com idbaidu百度/a/pscript$(function(){$(p a).attr(href,https://www.jingdong.com)console.log($(p a).attr(href));});
(3 获取/返回css属性
css() ⽅法设置或返回被选元素的⼀个或多个样式属性
代码⽰例
获取元素属性
div stylefont-size: 36px;我是⼀个⽂本/divscript$(function(){let fontSize $(div).css(font-size);console.log(fontSize);});/script
设置元素属性
div stylefont-size: 36px;我是⼀个⽂本/divscript$(function(){$(div).css(font-size,24px);});/script (4) 添加元素
添加 HTML 内容
append() : 在被选元素的结尾插⼊内容 prepend() : 在被选元素的开头插⼊内容 after() : 在被选元素之后插⼊内容before() : 在被选元素之前插⼊内容
代码⽰例: olliList item 1/liliList item 2/liliList item 3/li/olimg srcDH.jpg script$(function () {$(ol).append(liappend/li);$(ol).prepend(liprepend/li);$(img).before(图⽚前插⼊);$(img).after(图⽚后插⼊);});/script (5) 删除元素
删除元素和内容⼀般使⽤以下两个 jQuery ⽅法
remove() : 删除被选元素及其⼦元素empty() : 删除被选元素的⼦元素。
代码⽰例: div iddiv1我是⼀个div/divbutton删除 div 元素/buttonscript$(function () {$(button).click(function(){$(#div1).remove();});});
删除被选元素的⼦元素 olliList item 1/liliList item 2/liliList item 3/li/olbutton删除列表元素/buttonscript$(function () {$(button).click(function(){$(ol).empty();});});/script
五、综合案例
1 猜数字
预期效果 代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjquery-3.7.1.min.js/script
/head
bodybutton typebutton idreset重新开始⼀局游戏/buttonbr请输⼊要猜的数字input typetext idnumberbutton typebutton idbutton猜/buttonbr已经猜的次数span idcount0/spanbr结果span idresult/spanscript$(function () {// 随机⽣成⼀个 1-100 的数字var guessNumber Math.floor(Math.random() * 100) 1// 0 - 1 之间的数var count 0;// click: 点击// 事件驱动Event-Drive只要真正发⽣了点击事件时才执⾏该函数$(#button).click(function () {count;$(#count).text(count);var userGuess parseInt($(#number).val());if (userGuess guessNumber) {$(#result).text(猜对了);$(#result).css(color,gray);} else if (userGuess guessNumber) {$(#result).text(猜⼩了);$(#result).css(color,blue);} else {$(#result).text(猜⼤了);$(#result).css(color,red);}});$(#reset).click(function(){guessNumber Math.floor(Math.random() * 100) 1count 0;$(#count).text(count);$(#result).text();$(#number).val();});});/script
/body
/html
2 表⽩墙
预期效果 需求: 按要求在⽂本框中输⼊内容, 点击提交按钮, 输⼊内容显⽰在⻚⾯下⽅.
代码实现
1. 提前准备如下HTML和CSS代码
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.container {width: 400px;margin: 0 auto;}h1 {text-align: center;padding: 20px 0;}p {color: #666;text-align: center;font-size: 14px;padding: 10px 0;}.row {height: 40px;display: flex;justify-content: center;align-items: center;}span {width: 100px;line-height: 40px;}.edit {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: orange;border: none;}/style/headbodydiv classcontainerh1表⽩墙/h1p输⼊后点击提交, 会将信息显⽰在表格中/pdiv classrowspan谁: /spaninput classedit typetext/divdiv classrowspan对谁: /spaninput classedit typetext/divdiv classrowspan说什么: /spaninput classedit typetext/divdiv classrowinput typebutton value提交 classsubmit/div/div/body/html
2. 实现提交
$(function () {// 给点击按钮注册点击事件$(.submit).click(function () {// 1. 获取到编辑框内容var from $(.edit:eq(0)).val();var to $(.edit:eq(1)).val();var message $(.edit:eq(2)).val();console.log(from , to , message);if (from || to || message ) {return;}
// 2. 构造 html 元素 var html div classrow from 对 to 说: message /div;// 3. 把构造好的元素添加进去$(.container).append(html);// 4. 同时清理之前输⼊框的内容$(:text).val();});}); 六. 总结
1. HTML是⼀种超⽂本标记语⾔, 主要⽤于⻚⾯内容的显⽰和排版.如果需要更漂亮的样式展⽰和⻚⾯效果, 需要搭配CSS和JavaScript来使⽤
2. 学习HTML主要是学习标签, HTML的标签特别多, 了解基本语法即可
3. CSS重点是学习CSS的选择器使⽤
4. JavaScript是⼀个脚本语⾔, 和Java没有关系. JQuery是⼀个JavaScript框架, 使⽤JQuery可以轻松地选择和操作HTML元素, 提⾼我们的开发效率.
5. 前端开发对于后端开发⼈员⽽⾔不是很重要, 不必花费过多时间在这个上⾯. 达到借助⽹络能阅读代码的⽔平即可.
