day01_jQuery.ppt

jQuery_day01,Contents,目,录,jQuery 概述 jQuery 的基本使用 jQuery 选择器 jQuery 样式操作 jQuery 效果,能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 jQuery 选择器 能够操作 jQuery 样式 能够写出常用的 jQuery 动画,目标,TARGET,学习jQuery的主要内容,要点提示,jQuery入门导读,掌握程度：了解,1.1 jQuery导读,什么是JavaScript的库JavaScript库有哪些,要点提示,JavaScript库,掌握程度：了解,1.2 JavaScript库,1、什么是javascript库？一个用javascript封装了很多属性和方法的文件。2、javascript库有哪些？jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等,1.2 JavaScript库,课堂问答,知识总结,jQuery的概念jQuery的优点,要点提示,jQuery概述,掌握程度：理解,1.3 jQuery概述,1、jQuery的概念jQuery是javascript实现的一个库。设计宗旨是”Write Less，Do More”,即写的少，做的多。2、jQuery的优点跨浏览器兼容链式编程，隐式迭代简化DOM操作，支持事件、样式、动画支持插件扩展开发开源免费,1.3 jQuery概述,课堂问答,知识总结,jQuery的下载及版本介绍jQuery的体验jQuery中的入口函数,要点提示,jQuery的使用及入口函数,掌握程度：了解,1.4 jQuery的使用及入口函数,jQuery中的入口函数有哪些 第一种：$(function()./此处是页面 DOM 加载完成的入口);第二种：$(document).ready(function()./此处是页面DOM加载完成的入口);注意：$可换成jQuery。等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。相当于原生 js 中的 DOMContentLoaded。不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。4.更推荐使用第一种方式。,1.4 jQuery的使用及入口函数,课堂问答,知识总结,了解jQuery中的顶级对象$,要点提示,jQuery中的顶级对象$,掌握程度：了解,1.5 jQuery中的顶级对象$,jQuery中的$和jQuery怎么理解 jQuery中$和jQuery是一回事儿，是jQuery中的顶级对象（本质是一个方法）。可以用=判断，也可以查看源码，两个符号完全相同,1.5 jQuery中的顶级对象$,课堂问答,知识总结,知道jQuery对象和DOM对象的不同,要点提示,DOM对象和jQuery对象,掌握程度：掌握,1.6 DOM对象和jQuery对象,知道jQuery对象和DOM对象的相互转换,要点提示,DOM对象和jQuery对象相互转换,掌握程度：掌握,1.7 DOM对象和jQuery对象相互转换,1、jQuery对象如何转换成DOM对象？2、DOM对象如何转换成jQuery对象（重点）？,1.7 DOM对象和jQuery对象相互转换,课堂问答,课堂问答,1.7 DOM对象和jQuery对象相互转换,课堂问答,知识总结,1、jQuery对象如何转换成DOM对象？jQuery对象索引值jQuery对象.get(索引值)2、DOM对象如何转换成jQuery对象（重点）？$(DOM对象),jQuery常用API功能介绍,要点提示,jQuery常用API导读,掌握程度：应用,2.1 jQuery常用API导读,学会使用jQuery的基本选择器学则标签学会使用jQuery的层级选择器学则标签,要点提示,jQuery基本和层级选择器,掌握程度：应用,2.2 jQuery基本和层级选择器,1.基础选择器重点使用：id，类名，标签名。2.层级选择器中后代和子代全部掌握。3.学会混合使用，获取指定元素。,2.2 jQuery基本和层级选择器,课堂问答,知识总结,知道jQuery中的隐式迭代,要点提示,掌握程度：了解,2.3 隐式迭代,隐式迭代,掌握筛选选择器中的获取元素方法,要点提示,筛选选择器,掌握程度：应用,2.4 筛选选择器,2.4 筛选选择器,课堂问答,知识总结,学会使用筛选方法获取父子元素,要点提示,选取父子元素,掌握程度：应用,2.5 选取父子元素,2.5 选取父子元素,课堂问答,知识总结,完成下拉菜单案例,要点提示,案例：新浪下拉菜单,掌握程度：应用,2.6 案例：新浪下拉菜单,练习,jQuery实现新浪下拉菜单,提示,鼠标进入指定元素，显示他的子元素鼠标移出指定元素，隐藏他的子元素,5分钟,2.6 案例：新浪下拉菜单,案例：新浪下拉菜单,能够使用其他的筛选方法,要点提示,jQuery其他筛选方法,掌握程度：应用,2.7 jQuery其他筛选方法,