Web前端开发 课件 第12章 jQuery基础.pptx

第12章jQuery基础学习任务任务1 了解jQuery框架，并掌握jQuery的安装和语法任务2 掌握jQuery的多种选择器、jQuery中的DOM操作及jQuery事件的相关事件学习路线/ 3412.1 jQuery框架概述框架在生活中类似于建筑物的骨架，jQuery框架是在JavaScript的基础上，将常用操作进行封装，使页面特效实现更加简单、快捷。12.1.1 jQuery简介jQuery是由John Resig于2006年1月创建的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了 JavaScript开发人员遍历HTML文档元素、应用DOM、处理事件、执行动画和开发AJAX的操作。jQuery是一个JavaScript函数库，主要包含以下功能： HTML元素选取HTML元素操作 CSS操作HTML事件函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAXUtilities（实用工具）提供了大量插件/ 34jQuery的优势jQuery强调的理念是“写得少，做得多”。概括起来，jQuery具有以下优势：轻量级。量小轻巧。强大的选择器。支持CSS1到CSS3的选择器，以及自身高级而复杂的选择器。出色的DOM操作的封装。可靠的事件处理机制。完善的AJAX（Asynchronous Javascript And XML，即异步JavaScript和XML）。jQuery将所有的 AJAX操作封装到函数$.ajax()中，开发者处理AJAX时无须关心浏览器的兼容性及XMLHttpRequest的处理问题。丰富的插件支持。完善的文档。开源。/ 34jQuery安装方法1 官网下载最新jQuery包。进入/。点击“Download jQuery”进入下载页面。有两个版本： Production version（生产版），用于实际网站，已精简和压缩。 Development version（开发版），用于测试和开发。将下载的jquery-3.4.1.js放到网站上的公共位置以便由HTML文档引用。在要使用jQuery的页面头部引入jQuery包。例如在HTML的头部加上：<script src="js/jquery.min.js" type="text/javascript"></script>方法2 引用外部网站的jQuery包（不推荐使用）。/ 3412.1.4 jQuery语法1. jQuery的基本语法：$( 元素 ).操作( )说明：$ : 定义jQuery。元素 : HTML元素对象。操作 : 对元素的操作。实例如下：$( this ).hide( ) : 隐藏当前元素。$( "p" ).hide( ) : 隐藏所有 <p> 元素。$( "p" )相当于JavaScript中的 document.getElementsByTagName( "p" ) 。$( "p.test" ).hide( ) : 隐藏所有 class="test" 的 <p> 元素。$( "#test" ).hide( ) : 隐藏 id="test" 的元素。$( "#test" )相当于JS中的 document.getElementById( "test" ) 。/ 34jQuery的入口函数，在HTML所有标签（DOM）都加载之后才会执行，也叫页面初始化。格式如下：$( document ).ready( function( ) {// 页面加载完成后执行的代码} ) ;或者：$( function( ) {// 页面加载完成后执行的代码} ) ;JavaScript的入口函数，在所有内容（包括外部图片之类的文件）都加载之后才会执行。格式如下： window.onload = function( ) {// 页面加载完成后执行的代码}使用JS为元素设置样式举例JavaScript方法var div = document.getElementById( "test1" ) ; div.style.border = "1px solid #ff0000" ;jQuery方法$( "#test1" ).css( "border" , "1px solid #ff0000" ) ;/ 3412.2 jQuery选择器12.2.1 jQuery的常用选择器选择器是jQuery的根基，是用来寻找页面元素的。选择器的结果就是0个或1个或多个HTML元素。选择器的写法是$(" ")，其实是一个函数，称为工厂函数，通过该函数可以返回选择器结果。jQuery常用选择器如下所示。选择器种类语法格式描述举例id选择器$("#id名")匹配指定id的第1个元素$("#p1")。如果多个元素id相同（应避免），只匹配第1个类选择