Web前端开发必知必会 课件-中文版 lesson12 JQuery基础特效及应用_第1页
Web前端开发必知必会 课件-中文版 lesson12 JQuery基础特效及应用_第2页
Web前端开发必知必会 课件-中文版 lesson12 JQuery基础特效及应用_第3页
Web前端开发必知必会 课件-中文版 lesson12 JQuery基础特效及应用_第4页
Web前端开发必知必会 课件-中文版 lesson12 JQuery基础特效及应用_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

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

文档简介

地址：杭州市滨江区滨文路528号邮政编码：3100532024/4/10jQuery基本应用LESSON11CONTENTS01jQuery概述

02选择器与DOM操作03jQuery特效

什么是jQuery一个开源的、跨平台的JavaScript函数库轻量级封装、化简JavaScript，兼容CSS3，跨浏览器支持HTML元素选取HTML元素操作CSS操作HTML事件函数JavaScript特效和动画HTMLDOM遍历和修改AJAX…提供大量的插件Download：/download/

创始人：JohnResig或者链接到：CDN服务器（ContentDeliveryNetwork）$(“p”).css(“border”,”5pxsolidred”);$("#flip").mouseover(function(){$("#panel").slideDown("slow");});

01使用jQuery：

选取HTML元素，对该元素执行操作i.e.

$(“p”).hide();

//hideallparagraphs

<script>$(document).ready(function(){//文档就绪，必写，//避免文档加载完成前运算代码而出错$("#flip").mouseover(function(){$("#panel").slideDown("slow");});$("#flip").click(function(){$("#panel").slideUp("slow");}); });</script>$(selector).action()<scriptsrc="/jquery-3.4.1.min.js"></script>自带库：<scriptsrc=“js/jquery-3.4.1.js"></script>入口函数，可简写为：

$(function(){//执行代码

});jQuery为网页提供交互与特效Events事件ready()load(),unload()keydown(),keyup(),keypress()click(),dbclick(),hover(),mousedown(),mousemove(),mouseover()…form：focus(),submit()…特效与动画hide(),show(),切换toggle()fadeIn(),fadeOut():(图片轮播实例)slideDown(),slideUp()animation()Writeless,domorejQueryselector选择器作用：找网页元素方法:

$(“selectorname”)$称工厂函数选择器名即网页CSS选择器名，匹配其对应的网页元素类,ID,标签，属性选择器，后代，子代,例:

$(“#p1").click(function(){$(this).hide(); });位置选择器：$(“tr:even”).click()…02jQueryVSJavaScript$()的本质—取代了JavaScript的各种对象操作

$("#idname")：取代document.getElementById("idname")

$(".classname")：取代document.getElementsByClassName("classname")

$("tagname")：取代document.getElementsByTagName("tagname")Writeless,domorejQuery中选择器的类型，属性与css的操作分别说明下列是jQuery的哪种选择器？$("h2")，$("#panel")，$(".class1")$("navli")，$("div>p")，$("input[type='text']")标签属性操作：$(selector).attr(attrname[,value])，例如：$("img").attr("width","500");标签样式操作：$(selector).css(attr[,value])$(selector).addClass(classname)$(selector).removeClass(classname）$(selector).toggleClass(classname）

（续）练习：（1）添加一图片，点击图片，修改图片大小;（2）设置段落背景色；（3）添加/切换段落字体大小、背景色。位置选择器（例）一系列筛选选择器，用法类似伪元素（:）$(“selector:位置”)如：$(“tr:even”)//0是偶数$(“td:first”)$(“li:eq(2)”)//索引从0开始鼠标悬停，切换图片关键点：定义showImage()函数functionshowImage(name){ $("#pptImage").attr("src","image/ppt2/"+name+".jpg"); }通过src属性值，切换图片文件名onmouseover="showImage(n)“举一反三：让它定时切换，如3秒钟切换一次。03jQueryeffects特效

事件

触发

特效/动作/操作：显示隐藏（已完成）hide(),show()切换toggle()滑上滑下slideDown(),slideUp()slideToggle()淡进淡出fadeIn(),fadeOut():(实例：图片淡进淡出轮播)滚上滚下animate({},time)(综合实例：响应式jQuery特效框架网页)12303slideDown（->Dropdownmenu->yourmenu）

（举一反三）应用：面板滑上滑下<scriptsrc="/jquery-3.3.1.min.js"></script><script>$(document).ready(function(){$("#flip").click(function(){$("#panel").slideDown("slow");});});</script>a<styletype="text/css">#panel,#flip{ padding:5px; text-align:center; background-color:#e5eecc; border:solid1px#c3c3c3;}#panel//下拉面板，初始不可见{ padding:50px; display:none;}</style>b<body><divid="flip">点我滑下面板</div><divid="panel">Helloworld!</div></body>c$(function(){//简写，后面为执行代码图片轮播效果：

使用

fadeIn()、fadeOut()

li:eq(index)位置选择器，index从0开始<script>>//切换上一张图片functionlast(){//当前图片淡出

$("li:eq("+index+")").fadeOut(1500);//判断当前图片序号是否为第一张

if(index==0)//如果是第一张，序号跳转到最后

index=3;else//否则图片序号自减1index--; //新图片淡入

$("li:eq("+index+")").fadeIn(1500);} </script>//当前图片序号

varindex=0;$(document).ready(function(){setInterval("next()",5000);});//切换下一张图片functionnext(){//当前图片淡出

$("li:eq("+index+")").fadeOut(1500);//判断当前图片序号是否为最后一张

if(index==3)//如果是最后一张，序号跳转到第一张

index=0;else //否则图片序号自增1index++;//新图片淡入

$("li:eq("+index+")").fadeIn(1500);}<!--按钮1，用于切换上一张图片--><buttonid="btn01"onClick="last()"><imgsrc="image/ppt/left.png"/></button><!--按钮2，用于切换下一张图片--><buttonid="btn02"onClick="next()"><imgsrc="image/ppt/right.png"/></button>子块定义：position:absolute;top:0px;left:0px;z-ind

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

温馨提示

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

最新文档

评论

0/150

提交评论