《JavaScript程序设计》课件——项目7-1 jQuery对象和选择器.pptx

JavaScript程序设计2021

1课程导入2任务导入3知识讲解4任务实施项目7-1jQurey对象和选择器5任务总结

知识回顾任务导入知识讲解任务实施任务总结Location对象是获取什么内容的？Navigator对象是获取什么内容的？提问

知识回顾任务导入知识讲解任务实施任务总结任务重难点完成下拉菜单案例完成精品展示案例重点：初识jQueryjQuery基本选择器jQuery层级选择器jQuery筛选选择器jQuery其他选择器

知识回顾任务导入知识讲解任务实施任务总结初识jQuery1.初识jQueryjQuery：jQuery是一个快速、简洁的JavaScript库，其设计宗旨是“writeless，domore”，倡导用更少的代码，做更多的事情。1.1什么是jQueryjQuery特点：jQuery是一个轻量级的脚本，其代码非常小巧。语法简洁易懂，学习速度快，文档丰富。支持CSS1~CSS3定义的属性和选择器。跨浏览器，支持的浏览器包括IE6~IE11和FireFox、Chrome等。实现了JavaScript脚本和HTML代码的分离，便于后期编辑和维护。插件丰富，可以通过插件扩展更多功能。

知识回顾任务导入知识讲解任务实施任务总结初识jQueryjQuery官方网站：1.2获取jQueryjQuery所有版本下载链接地址：

知识回顾任务导入知识讲解任务实施任务总结初识jQueryjQuery下载页面：

知识回顾任务导入知识讲解任务实施任务总结初识jQueryjQuery引入：div{width:200px;height:200px;background-color:pink;}scriptsrc=jquery-3.3.1.min.js/scriptdiv/divscript$(div).hide(); //隐藏div元素/script引入jquery-3.3.1.min.js1.3使用jQuery

知识回顾任务导入知识讲解任务实施任务总结初识jQueryjQuery与JavaScript的区别：//jQuery代码（为了方便对比，将代码分成两行书写）vardiv=$(div); //获取元素div.hide();//对元素进行操作//JavaScript原生代码vardiv=document.querySelector(div);//获取元素div.style.display=none;//对元素进行操作jQuery与JavaScript区别

知识回顾任务导入知识讲解任务实施任务总结初识jQueryjQuery书写位置：//语法1（简写形式）$(function(){//页面DOM加载后执行的代码});//语法2（完整形式）$(document).ready(function(){//页面DOM加载完成后执行的代码});jQuery书写位置

知识回顾任务导入知识讲解任务实施任务总结初识jQueryjQuery中的加载事件：对比项window.onload$(document).ready()执行时机必须等待网页中的所有内容加载完成后（包括外部元素，如图片）才能执行网页中的所有DOM绘制完成后就执行（可能关联内容并未加载完成）编写个数不能编写多个能够编写多个，依次执行简化写法无$()

知识回顾任务导入知识讲解任务实施任务总结初识jQueryjQuery对象的表示方法：1.4jQuery对象//使用“$”$(function(){$(div).hide();});$符号//使用“jQuery”jQuery(function(){jQuery(div).hide();});jQuery

知识回顾任务导入知识讲解任务实施任务总结初识jQueryjQuery对象的静态方法：//创建jQuery对象，语法为“$(参数)”console.log($(div));//创建div元素的jQuery对象//调用静态方法，语法为“$.方法名()”console.log($.trim(a));//利用trim()方法去掉字符串两端的空白字符$符号

知识回顾任务导入知识讲解任务实施任务总结初识jQueryDOM对象不能使用jQuery方法hide()：//DOM对象varmyDiv=document.querySelector(div);myDiv.hide();//错误写法//jQuery对象vardiv=$(div);div.style.display=none; //错误写法hide()方法

知识回顾任务导入知识讲解任务实施任务总结初识jQueryDOM对象与jQue