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

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;} /