零起点HTML5+CSS3+JavaScript+jQuery前端开发案例式教程PPT课件(共14章)12.pptVIP

  • 4
  • 0
  • 约2.51千字
  • 约 10页
  • 2022-05-11 发布于安徽
  • 举报

零起点HTML5+CSS3+JavaScript+jQuery前端开发案例式教程PPT课件(共14章)12.ppt

8.1 jQuery简介 8.1 jQuery简介 是一个快速、简洁的JavaScript框架(JavaScript代码库)。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。全球大部分的网站使用jQuery。 8.1 jQuery简介 1.在本教程素材库中。 jQuery 的安装就是引入这个jQuery文件。 script src=jquery-1.12.4.min.js/script script type=text/javascript //你的jQuery代码 /script 下载 安装 注意: (1)必须先引入jQuery文件,jQuery 文件的路径一定要写正确。 (2)才能在下面的script type=text/javascript /script中写入jQuery代码,否则会出错。 8.2 jQuery选择器 !DOCTYPE html html head script src=jquery.min.js/script script type=text/javascript $(function(){ //id选择器 $(#gz).css(color,red); }) /script /head body div id=gz贵州百里杜鹃/div /body /html 8.2 jQuery选择器 用jQuery代码设置div标签中贵州百里杜鹃文字颜色为红色 运行效果 示例代码 $(function(){ } 页面所有的 html 标签(包括图片等)都加载完成 jQuery的css样式设置格式: 对象.css(“样式名”,”样式值”); $(#gz).css(color,red); 8.3 jQuery链式操作方式 jQuery链式操作:对发生在同一个jQuery对象上的操作,可以直接连写,不需要重复获取对象。 示例:单击任意一项span元素,文字变红色,其它未选择的span元素,文字变蓝色。 head script src=jquery.min.js/script script type=text/javascript $(function(){ $(#box span).click(function(){ $(this).css(color,red).siblings().css(color,blue); }) }) /script /head body div id=box spanweb前端开发1/span spanweb前端开发2/span spanweb前端开发3/span spanweb前端开发4/span spanweb前端开发5/span spanweb前端开发6/span /div /body 运行效果 部分代码 8.3 jQuery链式操作方式 重要说明 (1)jQuery单击事件语法格式 jQuery对象.click(function(){ } (2)$(this):当前操作的html元素 (3)jQuery 中css样式设置 选择器.css(属性名,属性值) (4)jQuery 中常用查找方法 (5)jQuery 中常用过滤元素方法 siblings():查找所有兄弟元素 children(): 查找所有子元素 find():查找与指定表达式匹配的元素 parents():查找唯一父元素 eq(index)获取元素集合中第N个元素,index为整数 8.4 jQuery鼠标事件 对象.click(function(){ } 单击事件 对象.dblclick(function(){ }); 双击事件 对象.mouseup(function(){ }); 鼠标弹起事件 对象.mousedown(function(){ }); 鼠标按下事件 8.4 jQuery鼠标事件 示例:点击操作id号为box的div,设置p元素背景为红色 style type=text/css *{margin: 0;padding: 0;} #box{ width: 100px;height: 100px;border: 1px solid black;margin: 40px auto; } #box P{ width: 50px;height: 50px;background: blue;margin:40px auto;} /

您可能关注的文档

文档评论(0)

1亿VIP精品文档

相关文档