第1章 初识jQuery2ppt课件.ppt

《第1章 初识jQuery2ppt课件.ppt》由会员分享，可在线阅读，更多相关《第1章 初识jQuery2ppt课件.ppt（54页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、在此输入您的封面副标题第1章 初识jQuery2第1章 初识jQuery第1章 初识jQueryjQuery简介DOM对象与jQuery对象如何使用jQuery开发和调试工具的使用 学习目标掌握熟悉掌握掌握jQuery的概念及优势12熟悉开发和调试工具的使用掌握jQuery基本使用方法3 目录如何使用jQuery1.21.21.11.1jQuery简介1.31.3点击查看本小节知识架构点击查看本小节知识架构点击查看本小节知识架构DOM对象与jQuery对象1.41.4开发和调试工具的使用点击查看本小节知识架构 知识架构1.1 jQuery简介1什么是jQuery2jQuery的版本 知识架构1

2、.2 如何使用如何使用jQuery1jQuery的下载和引入2第一个jQuery程序3jQuery的语法特点 知识架构1.3 Dom对象与对象与jQuery对象对象1什么是Dom对象2什么是jQuery对象3jQuery对象与DOM对象的转换 知识架构1.4 开发和调试工具的使用开发和调试工具的使用1开发工具HBuilder2调试工具Chrome开发者工具 1.1 jQuery简介什么是jQueryjQuery是一款跨浏览器的开源Javascript库。jQuery最初是由John Resig在2006年1月正式发布。作用作用：实现代码更加简洁，有效的提高程序开发效率。 1.1 jQuery简

3、介p 轻量级：文件小巧，大小仅有94.8KB；p 简洁：语法简洁易懂，学习速度快；p 全面：方便开发者使用；p 强大选择器：获取元素的方式更加灵活；什么是jQueryjQuery优势优势： 1.1 jQuery简介jQuery版本jQuery的版本和兼容性的版本和兼容性：p jQuery 1.x：兼容IE6/7/8，官方只做BUG维护；p jQuery 2.x：不兼容IE6/7/8，官方也只做BUG维护；p jQuery 3.x：不兼容IE6/7/8，只支持最新的浏览器。 1.2 如何使用jQueryjQuery下载和引入实现步骤实现步骤： 访问； 1.2 如何使用jQueryjQuery下载

4、和引入 访问实现步骤实现步骤： 1.2 如何使用jQueryjQuery下载和引入下载链接地址；实现步骤实现步骤： 1.2 如何使用jQueryjQuery下载和引入jQuery压缩版本压缩版本：是将jQuery文件中的空白字符、注释、空行等与逻辑无关的内容删除，并进行一些优化。优势优势：p 压缩版本：文件体积小，加载速度快。p 未压缩版本：代码可读性更好。 1.2 如何使用jQueryscript标签引入jQuery下载和引入p把下载好的jQuery文件保存到项目目录中p在项目的HTML文件中使用标签引入。 1.2 如何使用jQuery CDN引入jQuery下载和引入p 许多网站还提供了静

5、态资源公共库。p 通过CDN（内容分发网络）可以提高jQuery的下载速度。 实现步骤实现步骤：在Chrome浏览器中打开；点击say hello按钮； 弹出提示框；1.2 如何使用jQuery第一个jQuery程序 1.2 如何使用jQuery链式编程 事件的绑定jQuery的语法特点 1.2 如何使用jQuery $(#myId); / 获取id值为myId的元素对象 jQuery的语法特点选择器的使用作用作用：jQuery选择器用于获取网页元素对象进行操作。 1.2 如何使用jQuery content var html = $(#myId).html(); / 获取元素的内容； ale

6、rt(html); / 输出结果：content $(#myId).html(Hello); / 执行后变为Hello jQuery的语法特点元素对象的操作作用作用：jQuery中对获取的元素对象可以进行一系列的操作。 1.2 如何使用jQuerysay hello / 绑定单击（click）事件，参数是事件的处理程序； $(button).click(function() alert(Hello); );jQuery的语法特点事件的绑定作用作用：jQuery中对获取的元素对象可以进行一系列的操作。 1.2 如何使用jQuery 012. / 索引为2的li元素的内容设置为Hello； $(u

7、l).find(li).eq(2).html(Hello);jQuery的语法特点链式编程作用作用：jQuery中支持多个方法链式调用的形式，编写最少的代码。 1.3 DOM对象与jQuery对象什么是DOM对象DOM对象指的是文档对象模型。作用作用：结构化的描述，并将HTML页面与脚本、程序语言联系;结构结构：层层嵌套的HTML标签就是一个类似树形的DOM文档;元素元素：所有的元素内容都是一个节点。 1.3 DOM对象与jQuery对象DOM 链接 / 获取li标签对象集合 HTMLCollection(2) li,li;var lis; lis = document.getElements

8、ByTagName(li); var firstLi = lis0;/ 获取第1个li标签的DOM对象var text = firstLi.innerText; 获取什么是DOM对象 1.3 DOM对象与jQuery对象什么是jQuery对象jQuery对象对象：通过“$(参数)”的形式可以创建jQuery的实例对象。用法用法：调用jQuery中提供的html()方法获取元素内容；创建方式创建方式：使用$(参数)和jQuery(参数)；简写简写：$(div).html()； 1.3 DOM对象与jQuery对象示例 Hello jQuery / 创建div元素对象，保存为obj; var ob

9、j = $(div); / 判断obj是否为jQuery对象; alert(obj instanceof jQuery); / 输出结果：true / 调用html()方法获取元素内容; alert(obj.html(); / 输出结果：Hello jQuery 什么是jQuery对象 1.3 DOM对象与jQuery对象 var str = test; / 调用静态方法trim()过滤字符串两端的空白字符 var result = + $.trim(str) + ; alert(result);/ 输出结果：test 示例多多学学一一招招jQuery的静态方法p “$.方法名()”的形式调用

10、静态方法。p 可以进行DOM对象无关的操作，提供许多便利。 1.3 DOM对象与jQuery对象/ jQuery对象不存在innerHTML属性，访问结果为undefined$(div).innerHTML;/ DOM对象不存在 html()方法，调用不存在的方法会出错document.getElementById(myId).html();示例jQuery对象与DOM对象的转换jQuery对象对象：jQuery对象只能调用jQuery中的属性或方法；DOM对象对象：DOM对象也只能调用DOM中的属性或方法； 1.3 DOM对象与jQuery对象jQuery对象与DOM对象的转换jQuery对

11、象转换成DOM对象jQuery对象对象：属于类数组对象，其内部将DOM对象作为数组元素。转换方式转换方式：p objindex；p obj.get(index)； 1.3 DOM对象与jQuery对象obj.get(index) 第1个div元素 /将第一个div元素内部的内容显示 var result =$(div).get(0).innerHTML; alert(result); jQuery对象与DOM对象的转换jQuery对象转换成DOM对象 1.3 DOM对象与jQuery对象objindex 第1个div 第2个div var divs = $(div); var div1 = d

12、ivs0; var div2 = divs1; alert(div1.innerHTML); / 第1个div alert(div2.innerHTML); / 第2个div jQuery对象与DOM对象的转换jQuery对象转换成DOM对象 1.3 DOM对象与jQuery对象示例say hello / 获取DOM对象btn; var btn = document.getElementById(btn); / 将DOM对象转换成jQuery对象; var btn1 = $(btn); / 验证转换结果; alert(btn = btn10); / truejQuery对象与DOM对象的转换D

13、OM对象转换成jQuery对象 1.4 开发和调试工具的使用开发工具HBuilderHBuilder是一款深度集成Eclipse的IDE编辑器。项目开发项目开发：Web前端的开发，不能进行Java等后台开发。工具优势工具优势：语法提示功能，新增快捷键，让前端开发更加便捷。 1.4 开发和调试工具的使用注意注意开发工具HBuilder使用步骤使用步骤： 访问； 1.4 开发和调试工具的使用开发工具HBuilder使用步骤使用步骤： 选择版本下载； 1.4 开发和调试工具的使用开发工具HBuilder使用步骤使用步骤： 单击启动文件HBuilder.exe； 1.4 开发和调试工具的使用开发工具H

14、Builder使用流程使用流程：创建jQuery目录； 创建Web项目； 1.4 开发和调试工具的使用开发工具HBuilder使用流程使用流程：利用Hbuilder运行文件； 点击红色图标运行文件；单击 1.4 开发和调试工具的使用快捷键快捷键作用作用Ctrl + N 新建文件Ctrl +W关闭文件Ctrl + Shift + W关闭全部文件Ctrl + S保存文件Ctrl + Shift + S保存全部文件Alt + /激活代码助手Ctrl + / 开启关闭注释行多多学学一一招招Hbuilder常用快捷键 1.4 开发和调试工具的使用快捷键快捷键作用作用Ctrl + Shift + /开启关

15、闭注释已选内容Ctrl + F打开搜索条，可以查找替换指定内容或者全部内容Ctrl + H 搜索框，可以搜索指定内容的位置Ctrl +T查找文件Ctrl + R运行Ctrl + P激活边看边改视图Ctrl + Z撤销多多学学一一招招Hbuilder常用快捷键 快捷键快捷键作用作用Ctrl + Shift + F整理代码格式Ctrl +向上移动行Ctrl +向下移动行多多学学一一招招Hbuilder常用快捷键1.4 开发和调试工具的使用 1.4 开发和调试工具的使用调试工具Chrome开发者工具打开方式打开方式：p 按F12键；p Ctrl + Shift + I快捷键；p 鼠标右击选择检查选项

16、；p 更多工具中的开发者工具； 1.4 开发和调试工具的使用调试工具Chrome开发者工具控制台面板控制台面板：p Elements面板；p Console面板；p Sources面板；p Network面板； 1.4 开发和调试工具的使用调试工具Chrome开发者工具Elements面板面板： Elements面板即元素面板。功能功能：可以直接操作DOM元素和样式。特点特点：p 非常方便开发者调试HTML结构和CSS样式；p 与修改后的效果实时同步； 1.4 开发和调试工具的使用Elements面板调试工具Chrome开发者工具举例举例：p 查看元素属性；p 修改元素属性；p 修改样式； 1

17、.4 开发和调试工具的使用调试工具Chrome开发者工具Console面板面板： Console面板即控制台面板。功能功能：p 使用控制面板输出日志信息；p 直接编写代码；p 作为与JavaScript进行交互的Shell命令行； 1.4 开发和调试工具的使用Console面板调试工具Chrome开发者工具举例举例：p 直接定义函数并调用；p 注入Console对象中常用方法；p 快速显示页面中元素的信息；p Shift+Enter实现代码换行；p Ctrl+鼠标滚轮 放大/缩小。 1.4 开发和调试工具的使用调试工具Chrome开发者工具Sources面板面板： Sources面板即源代码面

18、板。功能功能：p 在工作区打开本地文件，可以实时编辑代码；p 支持断点调试。 1.4 开发和调试工具的使用Sources面板调试工具Chrome开发者工具举例举例：单击代码序号137和141 ；断点显示在Breakpoints断点区；刷新页面查看代码运行情况； 1.4 开发和调试工具的使用调试工具Chrome开发者工具Network面板面板：Network面板即网络面板。功能功能：p 记录网络请求详情信息；p 进行网络性能优化； 1.4 开发和调试工具的使用单击调试工具Chrome开发者工具举例举例：点亮红色图标；打开折叠面板； 查看运行状况； 本章小结本章首先介绍了jQuery的概念和语法特点，然后讲解了jQuery的使用方法以及DOM对象与jQuery对象的关系，最后演示如何运用前端常用的开发工具和调试工具。学习本章内容后，读者需要掌握jQuery的语法特点，熟练进行jQuery对象与DOM对象的相互转换，熟悉开发工具和调试工具的使用。