《JQuery实战进阶：“web技能”》课件-第一章 初识jQuery

JQuery应用开发——初识jQuery目录1.1jQuery简介1.2jQuery引入方式1.3DOM对象和jQuery对象1.4DOM对象和jQuery对象的相互转换1.5vscode开发工具的使用1.6案例--第一个jQuery程序JQuery应用开发——课程简介01课程学习目标课程学习内容目录CONTENT02课程学习特色0301课程学习目标知识目标1、掌握选择器的基本使用方法2、掌握DOM节点的添加、删除等操作3、掌握为DOM元素添加事件4、掌握为元素添加动画的方法5、通过Ajax实现页面的局部刷新三维目标素质目标知识

目标能力目标能力目标1、具备独立编写jQuery基本语法代码的能力2、具备使用jQuery为网页添加特效的能力3、具备设计动态效果并使用控制台调试程序的能力素质目标1、培养代码注释，增强代码可读性的习惯2、培养代码共享，提高代码通用性的精神jQuery事件处理04jQuery中的DOM操作0302

jQuery选择器1.什么是jQuery和jQuery优势；2.jQuery的下载和引入；3.编辑器：vscode的使用；4.jQuery对象和DOM对象的含义5.DOM对象和jQuery对象的转换1.基本选择器、层次选择器、基本过滤选择器、可见性过滤选择器、属性过滤选择器、表单选择器使用方法1、样式的操作；2、类的操作；3、节点的插入、删除、查找、遍历、包裹、复制、替换操作1、鼠标事件；2、键盘事件；02课程学习内容01初识jQueryjQuery打造个性化网站0706

jQuery操作Ajax1.基本动画的使用方法；2.自定义动画的使用方法；1.jquery发出POST、GET请求;2.$.ajax方法的使用规则和参数的设置；3、跨域问题产生的原因和解决方案1、完成首页、详情页的设计与实现02课程学习内容05jQuery动画整门课程设计为前后关联的七个学习情景、学习难度循序渐进，利于初步学习过程中，掌握基础知识特色一特色二特色三微课设计采用任务工单制模式，配有教学任务、学习案例等相关资源，利于熟练学习过程中，学会编程技巧教师在课程讲解中，注重代码格式、注释等良好的编程风格培养，利于精通学习过程中，提高职业素养03课程学习特色JQuery应用开发——jQuery简介01jQuery简介jQuery的基本使用目录CONTENT02总结0301jQuery简介1、什么是jQuery

jQuery就是一个Javascript库，使用jQuery会比使用JavaScript更简单。

js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这个js文件。jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。01jQuery简介2、jQuery特点jQuery是一个轻量级的脚本，其代码非常小巧。语法简洁易懂，学习速度快，文档丰富。支持CSS1~CSS3定义的属性和选择器。跨浏览器，支持的浏览器包括IE6~IE11和FireFox、Chrome等。实现了JavaScript脚本和HTML代码的分离，便于后期编辑和维护。插件丰富，可以通过插件扩展更多功能。02jQuery的基本使用1、引入jQuery文件

<scriptsrc=‘jquery.min.js’></script>引入02jQuery的基本使用2、jQuery的入口函数

这是为了防止文档在完全加载（就绪）之前运行jQuery代码，即在DOM加载完成后才可以对DOM进行操作。$=jQuery，$是jquery的简写。$(function(){

//开始写jQuery代码…})$(document).ready(function(){

//开始写jQuery代码…})简写02jQuery的基本使用2、jQuery的入口函数

window.onload$(document).ready()执行机制必须等待网页全部加载完毕（包括图片等），然后再执行包裹代码只需等待网页中的DOM结构加载完毕，就能执行包裹代码编写个数只能写一个能写N个执行次数只能执行一次，如果执行第二次，那么第一次的执行会被覆盖可以执行多次，都不会被上一次覆盖简写方案无$(function()

{

})03总结jQuery简介:jQuery就是一个Javascript库，使用jQuery会比使用JavaScript更简单。01jQuery的基本使用：入口函数

02jQuery应用开发——jQuery下载和引入01jQuery的下载jQuery的引入目录CONTENT02总结0301jQuery的下载1、官方网站获取

01jQuery的下载1、官方网站获取

IE6-IE11以及各种标准浏览器;只做bug维护，不再新增加功能，应用广泛,最终版本jQuery1.x不再支持IE6-IE8浏览器，从而更加轻量级，最终版本是jQuery2.2.4jQuery2.x只支持最新浏览器，是官方主要更新维护的版本以jQuery.3.6.0为例进行讲解jQuery3.x01jQuery的下载1、官方网站获取jQuery压缩版本：是将jQuery文件中的空白字符、注释、空行等与逻辑无关的内容删除，并进行一些优化。

名称大小说明Jquery-3.版本号.js(开发版)约268KB完整无压缩版本，主要用于测试、学习和开发Jquery-3.版本号.min.js(生产版)约91KB经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目02jQuery的引入1、引入本地下载的jQuery

<!--引入本地下载的jQuery--><scriptsrc="jquery-1.12.4.js"></script>把下载好的jQuery文件保存到项目目录中在项目的HTML文件中使用<script>标签引入。Script标签引入02jQuery的引入2、引入CDN加速的jQuery

<!--引入CDN加速的jQuery--><scriptsrc="/jquery-1.12.4.js"></script>CDN引入许多网站还提供了静态资源公共库。通过CDN（内容分发网络）可以提高jQuery的下载速度。03

总结jQuery的下载：官方网站获取的jQuery包括1.x，2.x，3.x版本01jQuery的引入方式：引入本地下载的jQuery、引入CDN加速的jQuery02JQuery应用开发——DOM对象和jQuery对象01DOM对象jQuery对象目录CONTENT02总结0301DOM对象1、DOM对象

DOM对象指的是文档对象模型。作用：结构化的描述，并将HTML页面与脚本、程序语言联系;结构：层层嵌套的HTML标签就是一个类似树形的DOM文档;元素：所有的元素内容都是一个节点。01DOM对象1、DOM对象

DOM获取<ul><liid=‘title’><ahref="#">链接</a><li></ul>//获取li标签的DOM对象

varoli=document.getElementsById(‘title');

//获取li中的文本内容

vartext=oli.innerText;总结：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象（js对象）。02jQuery对象2、jQuery对象

总结：使用jQuery中的方法获取页面中的元素返回的对象就是jQuery对象。

<div>HellojQuery</div><script>

//创建div元素对象，保存为obj;结果：HellojQuery</script>DOM获取<ul><liid=‘title’><ahref="#">链接</a><li></ul>//获取li标签的DOM对象

varoli=$(“#title”);

//获取li中的文本内容

vartext=oli.text();02jQuery对象2、jQuery对象

注意：jQuery对象无法使用DOM对象的任何方法，DOM对象也不能使用jQuery里的方法，DOM对象和jQuery对象分别拥有一套独立的方法，不能混用03

总结DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象01Jquery对象：使用jQuery中的方法获取页面中的元素返回的对象就是jQuery对象。02JQuery应用开发——DOM对象和jQuery对象的相互转换01jQuery对象转成DOM对象DOM对象转成jQuery对象目录CONTENT02总结0301jQuery对象转DOM对象//jQuery对象不存在innerHTML属性，访问结果为undefined$('div').innerHTML;//DOM对象不存在html()方法，调用不存在的方法会出错document.getElementById('myId').html();示例jQuery对象：jQuery对象只能调用jQuery中的属性或方法；DOM对象：DOM对象也只能调用DOM中的属性或方法；jQuery对象与DOM对象可以互相转换01jQuery对象转DOM对象1、[index]方法

jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象//从jQuery对象中取出DOM对象$(“li")[0];//方式1//取出DOM对象后就可以用DOM方式操作元素$("div")[0].style.display="none";jQuery对象转换DOM对象01jQuery对象转DOM对象2、get(index)方法

jQuery本身提供的，通过get(index)方法得到相应的DOM对象//从jQuery对象中取出DOM对象varoli=$(“li").get(0);//方式2//取出DOM对象后就可以用DOM方式操作元素oli.style.display="none";jQuery对象转换DOM对象02DOM对象转jQuery对象varmyDiv=document.getElementById(‘cang');//获取DOM对象vardiv=$(myDiv); //转换成jQuery对象div.hide();//调用jQuery对象的方法DOM对象转成jQuery对象1、$(DOM对象)

对于一个DOM对象，只需要$()把DOM对象包装起来，就可以获得一个jQuery对象

平时用到的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。03总结jQuery对象转成DOM对象：[index]方法、get(index)方法01DOM对象转成jQuery对象：$(DOM对象)02JQuery应用开发——VSCode开发工具的使用01VSCode简介VSCode安装目录CONTENT0203VSCode使用VSCode插件安装04总结0501VSCode简介

VisualStudioCode(简称VSCode/VSC)是微软公司推出的一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、GIT等特性，支持插件扩展等等。优点：

比sublime开源，比webstorm更轻

智能提示很强大

自带emmet

插件安装非常方便

自带强大的调试功能

软件跨平台支持Win、Mac以及Linux系统02VSCode安装1、VSCode安装

打开官网：03VSCode使用

1、文件目录管理

File(文件)-----openfloder(打开文件夹)新建文件新建文件夹刷新03VSCode使用

2、颜色主题

设置首选项按钮-----colortheme设置首选项03VSCode使用

3、其他操作

放大缩小视图：ctr++和ctr+-向上复制一行：alt+shift+⬆向下复制一行：alt+shift+⬇当光标点击到某一行时，默认选中全行，可以直接复制剪切04VSCode安装插件

1、安装方法

插件安装按钮04VSCode安装插件

2、推荐安装的插件

插件作用Chinese(Simplified)LanguagePackforVSCode中文(简体）语包心OpeninBrowser右击选择浏览器打开html文件JS-CSS-HTMLFormatter每次保存,都会自动格式化jscss和html代码05总结VSCode简介:

VSCode是微软公司推出的一款免费开源的现代化轻量级代码编辑器01VSCode安装：官网下载安装包，点击下一步02VSCode使用：文件目录管理、颜色主题、快捷键03VSCode安装插件：安装方法和推荐安装插件04JQuery应用开发第一个jQuery程序01任务导入提出任务目录CONTENT02分析任务03任务实施04总结0501

任务导入

同学们，在认识了jQuery，学习了jQuery引入方式、vscode开发工具的使用之后，我们一起来完成第一个jQuery程序吧！02

提出任务本次课任务完成第一个jQuery程序，实现开关灯效果03任务分析任务分析：点击“开灯”按钮点击“关灯”按钮案例效果：点击“开灯”按钮，点亮灯泡，按钮上的文本显示“关灯”点击“关灯”按钮，灯泡关闭，按钮上的文本显示“开灯”3.attr()方法修改src属性实现灯泡点亮、关闭效果4.val()方法实现修改按钮上文本的效果实践：让我们动手实践一下吧04

任务