《物联网web应用技术》课件 项目五 任务三家居光强调节界面编写_第1页
《物联网web应用技术》课件 项目五 任务三家居光强调节界面编写_第2页
《物联网web应用技术》课件 项目五 任务三家居光强调节界面编写_第3页
《物联网web应用技术》课件 项目五 任务三家居光强调节界面编写_第4页
《物联网web应用技术》课件 项目五 任务三家居光强调节界面编写_第5页
已阅读5页，还剩47页未读， 继续免费阅读

下载本文档

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

文档简介

《Web应用技术》物联网Web应用技术项目五

Web开发框架任务三

家居光强调节界面编写回顾Bootstrap布局需要的下拉菜单、导航栏、表格、输入框等；Bootstrap的插件的使用2.如何获取按钮点击事件并切换显示图标?1.如何获取屏幕分表率？任务引入任务描述:家居光强调节界面设计与程序编写任务教学目标：掌握jQuery的安装使用掌握jQuery的语法掌握jQuery选择器的使用掌握jQuery的事件调用掌握jQuery操作HTML的方法。任务概要教学内容jQuery

简介与安装jQuery

语法jQuery选择器jQuery事件一二三四家居光强调节界面设计五jQuery简介与安装知识点一jQuery是一个轻量级的“写的少，做的多”的JavaScript库jQuery（一）什么是jQuery？jQuery库包含以下功能：lHTML元素选取lHTML元素操作lCSS操作lHTML事件函数lJavaScript特效和动画lHTMLDOM遍历和修改lAJAXlUtilities提示：

除此之外，Jquery还提供了大量的插件。网络上有大量开源的JS框架,jQuery是目前最流行的JS框架；jQuery提供了大量的扩展；Google、Microsoft、IBM、Netflix等公司都在使用jQuery。（二）jQuery安装通过多种方法可在网页中添加jQuery，可用方法如下：从

下载jQuery库从CDN中载入jQuery,如从Google中加载jQuery。（二）jQuery安装有两个版本的jQuery可供下载：Productionversion-用于实际的网站中，已被精简和压缩。Developmentversion-用于测试和开发（未压缩，是可读的代码）。1.下载jQuery<head><scriptsrc="jquery-1.10.2.min.js"></script></head>下载地址：

中下载。jQuery库是一个JavaScript文件，可以使用HTML的<script>标签引用。（二）jQuery安装StaticfileCDN、百度、又拍云、新浪、谷歌和微软的服务器都存有jQuery。国内用户的站点，建议使用百度、又拍云、新浪等国内CDN地址；国外用户的站点可以使用谷歌和微软。如需从StaticfileCDN、又拍云、新浪、谷歌或微软引用jQuery，请使用以下代码。2.从CDN中载入jQuery（二）jQuery安装StaticfileCDN：2.从CDN中载入jQuery<head>

<scriptsrc="/jquery/1.10.2/jquery.min.js"></script></head>（二）jQuery安装百度CDN：2.从CDN中载入jQuery<head><scriptsrc="/libs/jquery/2.1.4/jquery.min.js"></script></head>（二）jQuery安装又拍云CDN：2.从CDN中载入jQuery<head><scriptsrc="/libs/jquery/jquery-2.0.2.min.js"></script></head>（二）jQuery安装新浪CDN：2.从CDN中载入jQuery<head><scriptsrc="/js/jquery/2.0.2/jquery-2.0.2.min.js"></script></head>（二）jQuery安装GoogleCDN：2.从CDN中载入jQuery<head><script

src="/ajax/libs/jquery/1.10.2/

jquery.min.js"></script></head>（二）jQuery安装MicrosoftCDN：2.从CDN中载入jQuery<head><scriptsrc="/ajax/jquery/jquery-1.9.0.min.js"></script></head>（二）jQuery安装如果网站包含许多页面，希望jQuery函数易于维护，可把jQuery函数放到独立的.js文件中。当使用jQuery时，会将函数直接添加到<head>部分中。但是放到一个单独的文件中，通过src属性来引用文件，更为方便。3.独立文件中使用jQuery函数<head><scriptsrc="/libs/jquery/1.10.2/

jquery.min.js"></script><scriptsrc="my_jquery_functions.js"></script></head>jQuery语法知识点二（一）基础语法：使用美元符号（$）定义jQuery选择符（selector）“查询”和“查找”HTML元素jQuery的action()执行对元素的操作：

基础语法

$(selector).action()jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。$(this).hide()-隐藏当前元素$("p").hide()-隐藏所有<p>元素$("p.test").hide()-隐藏所有class="test"的<p>元素$("#test").hide()-隐藏id="test"的元素（二）文档就绪事件为了防止文档在完全加载（就绪）之前运行jQuery代码，即在DOM加载完成后才可以对DOM进行操作，采用documentready函数。如果在文档没有完全加载之前就运行函数，操作可能失败。$(document).ready(function(){//开始写jQuery代码...});$(document).ready(function(){//开始写jQuery代码...});简洁写法（与以上写法效果相同）jQuery选择器知识点三jQuery选择器允许对HTML元素组或单个元素进行操作。jQuery选择器基于元素的id、类、类型、属性、属性值等“查找”（或选择）HTML元素。jQuery选择器基于已经存在的CSS选择器，还有一些自定义的选择器。jQuery中所有选择器都以美元符号开头：$()。jQuery选择器jQuery选择器（一）元素选择器jQuery元素选择器基于元素名选取元素。$(document).ready(function(){$("button").click(function(){$("p").hide();});});$("p")

在页面中选取所有<p>元素用户点击按钮后，所有<p>元素都隐藏（二）#id选择器jQuery#id选择器通过HTML元素的id属性选取指定的元素。页面中元素的id应该是唯一的，在页面中选取唯一的元素需要通过#id选择器。$(document).ready(function(){$("button").click(function(){$("#test").hide();});});$("#test")

通过id选取元素语法如下：当用户点击按钮后，有id="test"属性的元素将被隐藏：（三）.class选择器jQuery类选择器可以通过指定的class查找元素。$(document).ready(function(){$("button").click(function(){$(".test").hide();});});$(".test")

语法如下：当用户点击按钮后，有id="test"属性的元素将被隐藏：jQuery选择器jQuery中的选择器表：语法描述$("*")选取所有元素$(this)选取当前HTML元素$("ro")选取class为intro的<p>元素$("p:first")选取第一个<p>元素$("ulli:first")选取第一个<ul>元素的第一个<li>元素$("ulli:first-child")选取每个<ul>元素的第一个<li>元素$("[href]")选取带有href属性的元素$("a[target='_blank']")选取所有target属性值等于"_blank"的<a>元素$("a[target!='_blank']")选取所有target属性值不等于"_blank"的<a>元素$(":button")选取所有type="button"的<input>元素和<button>元素$("tr:even")选取偶数位置的<tr>元素$("tr:odd")选取奇数位置的<tr>元素jQuery事件知识点四（一）事件页面对不同访问者的响应叫做事件。事件处理程序指的是当HTML中发生某些事件时所调用的方法。在事件中经常使用术语“触发”（或“激发”）例如：“当您按下按键时触发keypress事件”。鼠标事件键盘事件表单事件文档/窗口事件clickkeypresssubmitloaddblclickkeydownchangeresizemouseenterkeyupfocusscrollmouseleave

blurunloadhover

（二）jQuery事件方法语法在jQuery中，大多数DOM事件都有一个等效的jQuery方法。页面中指定一个点击事件。下一步是定义什么时间触发事件。可以通过一个事件函数实现。$("p").click();$("p").click(function(){//动作触发后执行的代码!!});（三）常用的jQuery事件方法$(document).ready()方法允许我们在文档完全加载完后执行函数。该事件方法在jQuery语法部分中已经提到过。1.$(document).ready()click()方法是当按钮点击事件被触发时会调用一个函数。该函数在用户点击HTML元素时执行。在下面的实例中，当点击事件在某个<p>元素上触发时，隐藏当前的<p>元素。$("p").click(function(){$(this).hide();});2.click()（三）常用的jQuery事件方法当双击元素时，会发生dblclick事件。dblclick()方法触发dblclick事件，或规定当发生dblclick事件时运行的函数。3.dblclick()$("p").dblclick(function(){$(this).hide();});（三）常用的jQuery事件方法当鼠标指针穿过元素时，会发生mouseenter事件。mouseenter()方法触发mouseenter事件，或规定当发生mouseenter事件时运行的函数。4.mouseenter()$("#p1").mouseenter(function(){alert('您的鼠标移到了id="p1"的元素上!');});（三）常用的jQuery事件方法当鼠标指针离开元素时，会发生mouseleave事件。mouseleave()方法触发mouseleave事件，或规定当发生mouseleave事件时运行的函数。5.mouseleave()$("#p1").mouseleave(function(){alert("再见，您的鼠标离开了该段落。");});（三）常用的jQuery事件方法当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件。mousedown()方法触发mousedown事件，或规定当发生mousedown事件时运行的函数。6.mousedown()$("#p1").mousedown(function(){alert("鼠标在该段落上按下！");});（三）常用的jQuery事件方法当在元素上松开鼠标按钮时，会发生mouseup事件。mouseup()方法触发mouseup事件，或规定当发生mouseup事件时运行的函数。7.mouseup()$("#p1").mouseup(function(){alert("鼠标在段落上松开。");});（三）常用的jQuery事件方法hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数（mouseenter）;当鼠标移出这个元素时，会触发指定的第二个函数（mouseleave）。8.hover()$("#p1").hover(function(){alert("鼠标移动到元素上触发动作p1!");},function(){alert("鼠标已移开p1!");});（三）常用的jQuery事件方法当通过鼠标点击选中元素或通过tab键定位到元素时，该元素就会获得焦点。元素获得焦点时，发生focus事件。focus()方法触发focus事件，或规定当发生focus事件时运行的函数。9.focus()$("input").focus(function(){$(this).css("background-color","#cccccc");});（三）常用的jQuery事件方法当元素失去焦点时，发生blur事件。blur()方法触发blur事件，或规定当发生blur事件时运行的函数。10.blur()$("input").blur(function(){$(this).css("background-color","#ffffff");});家居光强调节界面程序设计知识点五（一）创建温湿度调节界面新建“家居光强调节界面”项目，并新建“家居光强调节界面.html”。复制模板代码，粘贴代码到“安防报警系统界面”文件中。（二）创建js源码文件新建“script.js”文件。（三）添加script.js源代码创建jQuery入口函数；在jQuery入口函数中添加内容：获取屏幕尺寸；监控窗口变化；绑定“lampCtrl”按钮click事件；添加页面标题的鼠标移入、移出事件。（四）添加家居光强调节界面页面内容<!DOCTYPEhtml><html><head> <metacharset="UTF-8">

<title>光强调节</title><linkrel="stylesheet"href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <scriptsrc="/jquery/2.1.1/jquery.min.js"></script> <scriptsrc="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head>在head部分将文档标题修改为“光强调节”；1.修改head中标题（四）添加家居光强调节界面页面内容<body><divclass="container"><h1>光强调节</h1> <divclass="row"><h4>当前分辨率:<strongid="curScreen"></strong></h4><divclass="col-md-6">

。。。 <divstyle="text-align:center;">

。。。 </div>

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

温馨提示

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

最新文档

评论

0/150

提交评论