第7章 Javascript与前端开发技术_第1页
第7章 Javascript与前端开发技术_第2页
第7章 Javascript与前端开发技术_第3页
第7章 Javascript与前端开发技术_第4页
第7章 Javascript与前端开发技术_第5页
已阅读5页，还剩49页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第7章

Javascript与前端开发技术知识要点（1）掌握在网页中插入脚本语言的三种方式（2）掌握JavaScript脚本语言的基本语法规则：变量、运算符、表达式、语句以及函数（3）掌握JavaScript对象、浏览器对象和HTMLDOM对象（4）熟悉JQuery和Bootstrap的基本用法（5）了解前端开发框架：Vue.js、React和Angular本章目标（1）使用脚本语言script标记符直接插入脚本链接外部脚本1．三种插入JS的方法(2)Javascript语言的语法所谓变量，就是程序中一个已命名的存储单元。变量的主要作用是存取数据和提供存放信息的容器。1．变量<script>vartoday=15;//today="Todayisthe15th";</script>注意：JavaScript是区分大小写的，因此today和Today是不同的(2)Javascript语言的语法2．运算符+、-、*、/、%、++、--算术运算符&&（逻辑与）、||（逻辑或）、!（逻辑非）逻辑运算符<、<=、>、>=、==、===、!=、!==比较运算符+（字符串接合操作）字符串运算符&（按位与）、|（按位或）、^（按位异或）、<<（左移）、>>（右移）、>>>（无符号右移）位操作运算符(2)Javascript语言的语法赋值运算符=、+=、-=、*=、/=、%=、&=、|=、^=、<<=、>>=、>>>=条件运算符?:（条件?结果1:结果2，表示若“条件”值为真，则表达式的值为“结果1”，否则为“结果2”）其他运算符.（成员选择运算符）、[]（下标运算符）、()（函数调用运算符）、,（逗号运算符）、delete（删除一个对象的属性或一个数组索引处的元素）、new（生成一个对象的实例）、typeof（返回表示操作数类型的字符串值）、void（不返回任何数值）(2)Javascript语言的语法3．条件语句if(expression1)statement1;elseif(expression2)statement2;elseif(expression3)statement3;…elsestatementn;switch(expression){casevalue1:statement1;break;casevalue2:statement2;break;...default:statement;}(2)Javascript语言的语法4．循环语句for(initializationStatement;condition;adjustStatement){statement;}while(expression){statement;}do{statement;}while(expression);break;continue;(2)Javascript语言的语法5．函数functionfunctionName(parameter1,parameter2...){statements;return;}JS实例(3)Javascript对象和浏览器对象对象就是客观世界中存在的特定实体。对象包含两个要素：1．什么是对象？01用来描述对象特性的一组数据，也就是若干变量，称为属性02用来操作对象特性的若干动作，也就是若干函数，称为方法通过访问或设置对象的属性，并且调用对象的方法，我们就可以对对象进行各种操作，从而获得需要的功能：document.titledocument.write()(3)Javascript对象和浏览器对象2．三种对象Array、Date、Math、String等JavaScript内部对象Part01window、screen、location等浏览器对象Part02documentHTMLDOM对象Part03(3)Javascript对象和浏览器对象Array对象(3)Javascript对象和浏览器对象Date对象(3)Javascript对象和浏览器对象Math对象常用属性E（欧拉常数，约为2.718）、PI（圆周率常数，约为3.14159）和SQRT2（2的平方根，约为1.414）等常用方法abs(num)（绝对值）、cos(num)（余弦）、pow(num1,num2)（num1的num2次方）、random() （随机数）、round(num)（四舍五入）、sin(num)（正弦）、sqrt(num)（平方根）、toString()（返回表示该对象的字符串）。Math.cos(Math.PI/3));(3)Javascript对象和浏览器对象String对象vartxt="string";vartxt='string';vartxt="HelloWorld!";document.write(txt.length);varstr="请访问我们的网站！"varn=str.replace("我们的网站","/");document.write(n);(3)Javascript对象和浏览器对象window对象表示浏览器窗口。所有JavaScript全局对象、函数以及变量均自动成为window对象的成员（全局变量是window对象的属性，全局函数是window对象的方法）。window对象包含document、navigator、location、history等子对象，是浏览器对象层次中的最顶级对象。3．浏览器对象01属性document,location等02方法alert(),confirm(),open(),close()等(3)Javascript对象和浏览器对象screen对象(3)Javascript对象和浏览器对象location对象(3)Javascript对象和浏览器对象navigator对象(4)HTMLDOMHTMLDOM定义了所有HTML元素的对象和属性，以及访问它们的方法。它是关于如何获取、修改、添加或删除HTML元素（包括其内容和属性等）的标准。在DOM中，每个东西都是节点，包括：元素节点、属性节点、文本节点、注释节点，等等。常用父（parent）、子（child）和同胞（sibling）等术语来描述节点之间的关系。1．什么是DOM？(4)HTMLDOMHTMLDOM定义了所有HTML元素的对象和属性，以及访问它们的方法。它是关于如何获取、修改、添加或删除HTML元素（包括其内容和属性等）的标准。在DOM中，每个东西都是节点，包括：元素节点、属性节点、文本节点、注释节点，等等。常用父（parent）、子（child）和同胞（sibling）等术语来描述节点之间的关系。1．什么是DOM？<html><head><title>文档标题</title></head><body><ahref=””>我的链接</a><h1>我的标题</h1></body></html>(4)HTMLDOM可以用特定的方法和属性引用这些节点，以便在脚本中正确地使用它们。方法是我们可以在节点（HTML元素）上执行的动作，属性是我们可以在节点（HTML元素）设置和修改的值。2．使用DOM方法和属性(4)HTMLDOM常用属性：body、forms、images、links、title等常用方法：getElementsByClassName()、getElementById()、getElementsByTagName()、querySelector()、querySelectorAll()、write()使用document.forms等属性，使用document.getElementById()等方法，可以访问到DOM中的具体元素，之后可以引用其属性和方法进行操作。3．document对象(4)HTMLDOM4．使用Console面板(4)HTMLDOM5．元素对象属性childNodes、children、className、clientHeight、clientWidth、firstChild、id、innerHTML、lastChild、style方法getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()、setAttribute()使用parentNode、firstChild、lastChild、nextSibling、previousSibling、children和childNodes等属性，可以遍历HTMLDOM树，以对相应节点进行操作。使用innerHTML、textContent和style等属性，可以访问或设置HTML元素的内容和样式。使用appendChild()、removeChild()、replaceChild()和insertBefore()等方法，可以修改HTMLDOM树。(4)HTMLDOM6．事件处理直接在DOM元素中指定事件处理程序<inputonclick="alert('谢谢支持')"type="button"value="点我"/>在JavaScript中用元素的事件属性进行指定elementObject.onXXX=function(){//事件处理代码}使用元素的addEventListener()方法elementObject.addEventListener(eventName,eventHandler);(4)HTMLDOM7．常见事件类别事件描述鼠标事件onclick当用户单击某个对象时触发oncontextmenu在用户单击鼠标右键打开快捷菜单时触发ondblclick当用户双击某个对象时触发onmousedown鼠标按键被按下时触发onmouseenter当鼠标指针移动到元素上时（从元素外部进入元素内部）触发onmouseleave当鼠标指针移出元素时（从元素内部离开到元素外部）触发onmousemove鼠标被移动时触发onmouseover鼠标指针移到某元素之上时（进入元素内部时触发，包括在元素内

部移动）触发onmouseout鼠标指针从某元素上移开时（离开元素内部时触发，包括在元素内

部移动）触发onmouseup鼠标按键被松开时触发(4)HTMLDOM类别事件描述键盘事件onkeydown某个键盘按键被按下时触发onkeypress某个键盘按键被按下并松开时触发onkeyup某个键盘按键被松开时触发表单事件onblur元素失去焦点时触发onchange表单元素的内容改变时触发onfocus元素获取焦点时触发oninput元素获取用户输入时触发onselect用户选取文本时触发onsubmit表单提交时触发(4)HTMLDOM类别事件描述其他事件onload一张页面或一幅图像完成加载时触发onresize窗口或框架被重新调整大小时触发onscroll当文档被滚动时触发onunload用户退出页面时触发ondrag元素正在被拖动时触发ondrop拖动元素放置在目标区域时触发(4)HTMLDOM实例：Tab导航（5）使用JQuery1．安装与使用下载JS文件jquery-3.4.1.jsjquery-3.4.1.min.jsjquery-3.4.1.slim.jsjquery-3.4.1.slim.min.js链接JS文件<scriptsrc="jquery-3.4.1.min.js"></script>（5）使用JQuery2．基本语法<!DOCTYPEhtml><!--表明本文档是个HTML5文档--><metacharset="utf-8"><!--指定文档的字符编码--><scriptsrc="jquery-3.4.1.min.js"></script><script><!--自定义JQuery代码-->$(document).ready(function(){//$(function(){$("p").click(function(){$(this).hide();});});</script>（5）使用JQuery3．JQuery选择器选择器实例说明*$("*")选取所有元素this$(this)选取当前HTML元素标记符$("p")选取所有p元素标记符,标记符

…$("h2,div,span")选取所有h2、div和

span元素#id$("#test")选取id为

test的元素.class$(".test")选取所有class为

test的元素.class,.class

…$(".intro,.demo,.end")选取class为"intro"、"demo"或"end"的所有元素parent>child$("div>

p")选取作为div元素直接子元素的所有p元素parentdescendant$("div

p")选取作为div元素后代的所有p

元素element+

next$("div+

p")选取与每个div元素相邻的下一个p元素element～siblings$("div～p")选取与div元素同级的所有p

元素[attribute]$("[href]")选取带有href

属性的元素（5）使用JQuery选择器实例说明[attribute=value]$("a[target='_blank']")选取所有

target属性值等于"_blank"的a元素[attribute!=value]$("a[target!='_blank']")选取所有

target属性值不等于"_blank"的a元素[attribute$=value]$("[href$='.jpg']")选取所有带有href

属性且值以".jpg"结尾的元素[attribute|=value]$("[title|='Tomorrow']")选取所有带有title

属性且值等于'Tomorrow'或者以

'Tomorrow'后跟连接符作为开头的字符串[attribute^=value]$("[title^='Tom']")选取所有带有

title属性且值以"Tom"开头的元素[attribute～=value]$("[title～='hello']")选取所有带有

title属性且值包含单词"hello"的元素[attribute*=value]$("[title*='hello']")选取所有带有

title

属性且值包含字符串"hello"的元素:first/:last$("p:first")选取第一个p元素:first-child/:last-child$("p:first-child")选取属于其父元素的第一个子元素的所有p元素:even/:odd$("tr:even")选取偶数位置的tr元素。索引值从0开始，第

1元

素是偶数（0），第2元素是奇数（1），以此类推（5）使用JQueryJQuery选择器（5）使用JQuery6．JQuery方法HTML/CSS方法append()（在被选元素的结尾插入内容）、attr()（设置或返回被选元素的属性/值）、css()（为被选元素设置或返回一个或多个样式属性）、html()（设置或返回被选元素的内容）、remove()、text()等JQuery事件方法click()、dblclick()、mouseenter()、mouseleave()、hover()、keypress()、keydown()、keyup()、blur()、change()、submit()、focus()、resize()、scroll()等。（5）使用JQueryJQuery方法（5）使用JQuery7．JQuery动画效果动画效果方法：animate()、delay()、fadeIn()、fadeOut()、fadeTo()、fadeToggle()、finish()、hide()、show()、slideDown()、slideToggle()、slideUp()、stop()、toggle()等(6)使用Bootstrap1．安装与使用Bootstrap文件夹JQuery文件拷贝到Bootstrap/js文件夹使用BootstrapHTML模板(6)使用Bootstrap2．网格系统Bootstrap提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。(6)使用Bootstrap3．Bootstrap布局Bootstrap使用一系列的容器（container）、行（row）和列（col）来对内容进行布局。容器类是container（固定宽度）或container-fluid（全屏宽度），行类是row，列类是col-*-*（第一个星号表示响应的设备：sm、md、lg或xl，第二个星号表示所占列数，同一行的列数相加为12），并且可以用空格分隔多个（如类"col-sm-3col-md-6"表示在平板上占3列，在桌面显示器上占6列）(6)使用Bootstrap.col-任意屏幕或小屏幕-针对任意尺寸屏幕或屏幕宽度小于576px（容器最大宽度non

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论