nullnullJQuery
课件
超市陈列培训课件免费下载搭石ppt课件免费下载公安保密教育课件下载病媒生物防治课件 可下载高中数学必修四课件打包下载
第一章 初识 jQuery第一章 初识 jQueryjQuery是由John Resig 于2006年1月推出的一款轻量级的JavaScript库.它是目前应用最为广泛的优秀开源JavaScript/Ajax框架之一
已经成为Microsoft ASP.NET,Visual Studio以及NOVIA Web Run Time等主流开发平台的组成部分.
依托著名的的自由软件组织 Software Freedom Conservancy, jQuery核心库以及相关项目 jQuery UI(用户界面库),QUnit(JavaScript测试套件),Sizzle(纯javaScript CSS选择器引擎) 联合组成了jQuery Project,已经正式成为一个有组织的开源项目.第一章 初识 jQuery第一章 初识 jQueryjQuery 是方便快捷的Web 开发利器,它的出现在Web开发领域引发了一场Javascript风暴,它的优雅风格和强大功能令无数Web开发者流连忘返.许多刚接触JavaScript框架的新手都选择了jQuery,而且许多Web开发人员也从其他框架转移到jQuery.
在jQuery核心库的基础上,jQuery官方还利用jQuery 的可扩展性设计出一套jQuery UI 用户界面开发库,其中包括许多交互操作功能,用户界面部件,例如鼠标拖放,排序,缩放,选项卡以及对话框等.
jQuery UI 具有良好的兼容性,支持当今流行的所有主流浏览器,包括IE6.0+,FF2+,Safari3.1+,Opera9.0+ 以及Chrome1.0等等.使用jQuery UI,不需要编写繁琐的JavaScrip 代码,就可以轻松地在网页中创建各种常见的用户界面功能和各种令人赏心悦目的特效.第一章 初识 jQuery第一章 初识 jQueryjQuery 以简洁优雅的语法和跨浏览器兼容性,极大地简化了HTML文档遍历,DOM操作,事件处理,动画特效以及Ajax请求等编程任务,可以用于快速开发Web 应用程序.jQuery的主要设计目标是改变编写JavaScript代码的方式,既写更少的代码,做更多事情.通过jQuery开发团队不懈努力,jQuery方法的复杂度显著下降,其性能和速度全面提升.昔日用传统方式编写的几十行JavaScript代码,借助于jQuery 独特而简洁的语法改写之后将变成廖廖几行.
学习提示: 本课程的学习,需要具备Html 和CSS 的基本知识,并熟悉JavaScript语法.
但不需要拥有其他JavaScript框架的经验.
第一章 初识 jQuery第一章 初识 jQuery在当今的Web 开发中,JavaScript是一种广为应用的网页脚本语言.为了简化JavaScript 编程任务,以满足Web用户对网站功能日益增长的要求,近年来各种各样的JavaScript 库相继问世.jQuery就是一款轻量级的JavaScript 库,它不仅功能强大,而且简洁优雅,深受Web开发人员的喜爱.本文首先简要介绍jQuery的功能和优势.
jQuery 顾名思义 就是JavaScript 加 Query ,既通过JavaScript从文档中查询元素并对其进行操作
下面总结jQuery 的功能:第一章 初识 jQuery第一章 初识 jQuery获取网页元素.HTML DOM(Document Object Model 文档对象模型) 定义了访问和处理HTML文档的标准方法,它将HTML文档呈现为带有元素,属性和文本的树结构(节点树).虽然可以通过JavaScript 来重构整个HTML文档,可以添加,移除,改变或重排网页中的元素,但是如果不使用JavaScript库,而直接使用原生的JavaScript脚本来访问HTML文档中的某个元素,则必须编写繁琐的代码.
jQuery 提供了一套高效可靠的选择器,将这些选择器与工厂函数 $() 结合使用,就可以方便快捷地从文档中选择所需的元素. 第一章 初识 jQuery第一章 初识 jQueryb) 设置网页外观.HTML标记用于定义文档内容,同时由浏览器来完成文档布局.虽然可以使用CSS样式
表
关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf
定义如何显示HTML元素,并实现内容与表现形式的分离,不过一旦遇到了不同浏览器不完全支持相同标准的情况,仅仅使用CSS也往往无法达到预期目的.jQuery 提供了跨浏览器的解决
方案
气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载
,当访问者使用当前流行的大多数浏览器时,用jQuery 设置的网页都可以保持相同的外观.
c) 更改网页内容.使用jQuery 的API方法,只需要编写少量代码,就可以很轻松地修改HTML文档内容,例如动态改变段落,DIV元素或表格单元格包含的文本,插入或翻转网页上的图片等等.第一章 初识 jQuery第一章 初识 jQueryd)响应用户操作.jQuery 提供了可靠的事件处理机制,可以在各种浏览器中捕获形形色色的网页事件,并通过代码对用户的操作做出适当响应,从而为网页添加动态性和交互性.
e) 添加动画效果. jQuery 不仅内置了一些淡入,擦除之类的效果,还提供了制作新效果的工具包,开发者可以使用这些功能为网页添加动画效果,在实现交互行为的同时提供视觉上的反馈,令站点访问者耳目一新.
f) 实现Ajax 交互. Ajax 的全称是Asynchronous JavaScript and XML . 意思就是异步的JavaScript 和 XML.Ajax是Web2.0的核心技术.jQuery 对Ajax提供了很好的支持,借助于jQuery ,它允许以异步通信方式向服务器发出HTTP请求并从服务器获取响应信息.客户端可以在任何时候与服务器进行通信,而无需刷新整个页面第一章 初识 jQuery第一章 初识 jQueryjQuery 的横空出世在Web 开发领域中引发了一场JavaScript风暴,它的优雅风格和强大功能令无数Web开发者一见倾心.人们之所以纷纷选择jQuery ,主要由于它具有以下优势:
1) 跨浏览器兼容性.由于各种浏览器的内核和解析方式各不相同,相同的前端代码往往不能实现相同的效果.因此Web开发人员在编写JavaScript脚本时通常不得不对不同浏览器之间差异进行处理,这就增加了编程的复杂性.jQuery基于熟知的标准设计,它为Web脚本编程提供了一个通用的抽象层.使用jQuery 编写的客户端脚本可以支持所有流行的浏览器,包括IE6.0+,FF2+,Safari3.1+,Opera9.0+ 以及Chrome1.0等等第一章 初识 jQuery第一章 初识 jQuery2) 轻量级. jQuey 库文件只有155KB,其Min版并在服务器端启用了GZip压缩,则jQuery 库文件大小只有24KB左右,这不仅减少了文件占用的存储空间,还缩短了通过网络传输文件的时间.
3) 基于CSS 选择器. 每个CSS 样式规则由选择器和属性声明两个部分组成,其中选择器用于标识和选择网页元素,属性声明则用于设置所选网页元素的外观.jQuery的大部分概念都是从HTML和CSS 结构中借用而来的,使用jQuery的工厂函数 $ ( ) 和CSS 选择器可以很方便地从网页中”查询”到所需要的任何元素,而且jQuery 支持从CSS1到CSS3几乎所有的选择器.由于多数Web开发人员对HTML和CSS比较熟悉,因此可以十分轻松地学会使用jQuery .
第一章 初识 jQuery第一章 初识 jQuery4) 链式操作 . 在传统情况下,使用JavaScript 编写客户端脚本时需要使用临时变量来表示特定的网页元素,并通过许多语句对该元素进行反复操作.例如首先通过 innerHTML 属性设置元素包含的内容,然后通过设置style.color 属性设置元素的文本颜色.为了避免不必要的代码重复,jQuery 采用了一种独特的编程模式,在这种模式下基于一个对象的多数操作将返回该对象本身,从而可以对它进行下一个操作.这种操作称为链式操作,它是jQuery 最受开发人员喜爱的特色之一.
5) 面向集合. 在JavaScript 客户端脚本编程中,经常使用循环语句对某个集合中的所有元素进行操作.在jQuery 中,使用工厂函数 和指定选择器可以获取所有匹配元素的集合,还可以通过调用hide 或 show 方法来隐藏或显示所有元素.对集合中的所有元素而不是单个元素进行操作,也称为隐式迭代.使用这种编程方法,通过一个简单的语句就可以实现循环结构的功能
第一章 初识 jQuery第一章 初识 jQuery6) 详细的文档 为了帮助初学者快速掌握jQuery 的使用方法,jQuey 官方网站上发布了详细的API文档和丰富的应用示例.这些文档多为英文文档.不过,国内一些开发人员已翻译制作了中文参数文档的HTML,XML和CHM版本,以及用于Dreamweaver CS3 和 Dreamweaver CS4的插件(mxp文件)
7) 丰富的UI控件. jQuery UI是基于jQuery 库的用户界面开发库,它提供了一套交互组件,页面部件以及丰富的特效.jQuery 的易扩展性吸引了世界各地的Web开发者来创建有创意和实用价值的jQuery 控件.迄今为止,已经开发出数百种jQuery 控件,而且还会不断有新的控件问世第一章 初识 jQuery第一章 初识 jQuery8) 与其它JavaScript 库共存. jQuery 仅仅创建一个名为jQuey 对象,所有属性和方法均包含在该对象之中,为了简化编程,通常使用美元符号 $ 作为 JavaScript 的快捷方式,但是$ 作为jQuery 的别名也可以随时交出控制权,以确保jQuery 不会与其他库的$ 对象发生冲突. 这样在一个项目中同时使用jQuery 和 其他JavaScript 库.
9) 免费开源. jQuey 是一个开源项目,任何人都可以从因特网上自由下载jQuery 库,并免费使用. jQuery 开源项目具有GNU公共许可证和MIT许可证的双重许可,前者适合将jQuery 包含在其他开源项目中;后者则便于在专有软件中使用jQuery
第一章 初识 jQuery第一章 初识 jQuery第一章 初识 jQuery第一章 初识 jQuery第一个 jQuey 的应用
为了揭开jQuery 的神秘面纱,我们结合一个典型例子来说明jQuery 在 Ajax 开发中的应用.
下面的例子是模拟注册网站用户时常见的检测过程.分别通过原始的JavaScript 代码 和 jQuery 来实现Ajax 请求,我们可以从两者的比较 对 jQuery 获得一个初步的体验.
首先访问jQuery的官方网站 网址：http://jquery.com
第一章 初识 jQuery第一章 初识 jQuery第一章 初识 jQuery第一章 初识 jQuery第一章 初识 jQuery第一章 初识 jQuery目前jQuery 最新版本为1.7.1，我们下载的版本为1.7Minified --英文单词：精简
Uncompressed --英文单词：未压缩
两者的区别是：
Min 版本主要用于产品和项目
Uncompress 版本主要用于学习，测试和开发
-------------------我们选择的就是此版本进行下载使用第一章 初识 jQuery第一章 初识 jQuery第一章 初识 jQuery第一章 初识 jQueryjQuery库下载之后不需要安装，只要将js库文件复制到站点中的某个文件夹就可以了
接下来我们实现下面的网页效果图的源代码编写：第一章 初识 jQuery第一章 初识 jQuery如果是新的用户名注册，则要有相应的提示信息第一章 初识 jQuery第一章 初识 jQuery当在注册页上输入用户名和密码并单击“提交”按钮时，就会将表单数据发送到服务器端进行处理．如果检测到所提交的用户已被注册，则应向用户显示相应的提示信息，并让其选择新的用户名进行尝试．这是传统的用户注册处理方法．
更好的解决方案是：当在文本框中输入用户名并离开此文本框时，既刻显示出此用户名是否可用的信息，而不必等到提交表单之后．这种解决方案需要借助于Ajax技术才能实现．既通过客户端JavaScript脚本以异步方式向服务器传递数据并获取相应的响应．
这里先简要介绍一下Ajax， Ajax技术的核心是XMLHttpRequest对象．使用XMLHttpRequest对象可以通过JavaScript客户端脚本来实现对服务器的异步请求，既在后台发送请求并接收服务器响应，通过动态获取响应数据来实现页面的局部更新．这样可以避免每次发送请求都要重新下载整个页面，既减轻了服务器负担，又加快了响应速度，而且还缩短了用户的等待时间，不会造成用户体验的中断．第一章 初识 jQuery第一章 初识 jQuery下面编写第一个简单的JQuery应用程序
1）功能描述
在页面加载时，弹出一个模式对话框，显示出“您好，欢迎来到jQuery世界” 字样，单击“确定”按钮后关闭该窗口．
2）实现代码
新建一个.html的文件，保存在 D:\JQuery文件夹下,并命名为jquery_001.html 键入以下代码第一章 初识 jQuery第一章 初识 jQuery3)请注意上图当中的第4行代码该行代码表明应该事先把下载的 jQuery-1.7.js保存到相应
目录
工贸企业有限空间作业目录特种设备作业人员作业种类与目录特种设备作业人员目录1类医疗器械目录高值医用耗材参考目录
下，采用src实现抓取第一章 初识 jQuery第一章 初识 jQuery
$(document).ready(function ( )
{ //程序段 }
)
该代码结构类似于传统的JavaScript代码：
Window.onload = function( )
{ //程序段 } //onload –窗体加载事件第一章 初识 jQuery第一章 初识 jQuery上述两段代码在功能上可以互换，但它们之间又有区别：
1）执行时间不同：$(document).ready 在页面框架下载完成就可以运行，而window.onload必须要在页面全部加载完成（包含下载图片）后才能运行．很明显，前者运行效率要高于后者．
2）执行数量不同：$(document).ready可以重复写多个，并且每次运行结果不同，而window.onload尽管可以运行多个，但仅输出最后一个运行结果，无法完成多个结果的输出
3）$(document).ready(function( ) { }) 可以简写成$(function() { } ),因此与下面的代码是等价的．
第一章 初识 jQuery第一章 初识 jQuery第一章 初识 jQuery第一章 初识 jQueryJQuery 程序的代码风格
$ 美元符的使用
在jQuery 程序中，使用最多的就是” $ ” 符号了,无论是页面元素的选择，功能函数的前缀，都必须使用该符号，也可以说它就是jQuery 的标志．
2) 事件操作链接式书写
在编写页面某元素事件时，jQuery程序可以使用链接式的方式编写该元素的所有事件．为了更好的说明该书写方法的使用，我们通过一个示例加以讲解
功能描述：
在页面中，有一个
标记，在该标记内，包含二个
标记，一个为主题，另一个为内容.页面首次加载时，被包含的内容
标记是不可见的，当用户单击主题
标记时，改变自身的背景色，并将内容
标记显示出来．第一章 初识 jQuery第一章 初识 jQuery本部分代码上半部分，注意看行号信息 第一章 初识 jQuery第一章 初识 jQuery本代码为中间部分，也是最重要的部分，注意看 ．号 实现的链式操作写法
当用户单击Class名称为”divTitle”的元素时，自身增加名称为”divCurrColor”的样式，同时，将接下来的Class名称为”divContent”元素显示出来．可以看出这两个功能是通过 . 号实现链接在一起． 第一章 初识 jQuery第一章 初识 jQuery本代码为最后部分，目的是定义主题及各个子链接第一章 初识 jQuery第一章 初识 jQuery初始网页内容下图为单击主题后的页面效果单击后网页效果，我们发现
主题自身的样式
也发生了改变第一章 初识 jQuery第一章 初识 jQueryJQuery 访问DOM对象
DOM（Document Object Model,文本对象模型）的每一个页面都是一个DOM对象，通过传统的JavaScript方法访问页面中的对象，就是访问DOM对象.
例如：在页面中有2个
标记元素，其代码如下：
测试文本
通过下面的JavaScript代码就可以访问DOM对象和获取或设置其内容值
var tDiv = document.getElementById(“divTmp”);//获取DOM对象
var oDiv = document.getElementById(“divOut”);//获取DOM对象
var cDiv = tDiv.innerHTML;//获取DOM对象中的内容
oDiv.innerHTML = cDiv; //设置DOM对象中的内容
如果执行上面的JavaScript代码,将在ID为”divOut”的标记中显示ID为”divTmp”的标记内容.
第一章 初识 jQuery第一章 初识 jQuery什么是jQuery对象
在jQuery库中,通过本身自带的方法获取页面元素的对象,我们称之为jQuery对象;为了同样实现在ID为”divOut”的标记中显示ID 为”divTmp”的标记内容,采用jQuery访问页面元素的方法,其实现的代码如下:
var tDiv = $(“#divTmp”); //获取jQuery对象
var oDiv = $(“#divOut”); //获取jQuery对象
var cDiv = tDiv.html(); //获取jQuery对象
oDiv.html(cDiv); //设置jQuery对象中的内容
对比上页中的JavaScript代码,我们可以看出jQuery对象访问方法比DOM对象访问方法更简单,更高效.它们实现的功能都是相同的
第一章 初识 jQuery第一章 初识 jQueryJQuery 控制DOM对象
在介绍使用jQuery 控制DOM对象前,先通过一个简单的示例,说明如何用传统的JavaScript方法访问DOM对象.
请见
jQuery_004.html
jQuery_004_jq.html
第一章 初识 jQuery第一章 初识 jQueryjQuery 控制页面CSS
在jQuery框架中,通过自带的javascript编程,提供全部的CSS3下的选择器,开发者可以首先定义自己的样式文件,然后通过jQuery中的addClass()方法将该样式轻松地添加到页面指定的某元素中,而不用考虑浏览器的兼容性.
toggleClass(className)方法
请见示例:
jquery_005.html第二章 jQuery选择器第二章 jQuery选择器1)什么是选择器?
jQuery选择器继承了CSS与Path 语言的部分语法,允许通过标签名,属性名或内容对DOM元素进行快速,准确的选择,而不必担心浏览器的兼容性,通过jQuery选择器对页面元素的精准定位,才能完成元素属性和行为的处理
选择器的优势:
与传统的JavaScript获取页面元素和编写事件相比,jQuery选择器具有明显的优势,具体表现在以下两个方面:
代码更简单
完善的检测机制第二章 jQuery选择器第二章 jQuery选择器代码更简单
由于在jQuery库中,封装了大量可以通过选择器直接调用的方法或函数,使编写代码更加简单轻松,简单几行代码就可以实现较为复杂的功能.
比如有一个实现表格隔行变色功能的示例,分别使用传统的JavaScript 语言 和 JQuery 语言加以说明 :
请分别查看 :
Jquery_006_js.html
Jquery_006_jq.html第二章 jQuery选择器第二章 jQuery选择器完善的检测机制
在传统的javascript代码中,给页面中某元素设置事件时,必须先找到该元素,然后赋予相应的属性与事件;如果该元素在页面中不存在或被前面代码所删除,那么浏览器将提示运行出错信息,影响后续代码的执行.因此在javascript代码中,为了避免显示这样的出错信息,先要检测该元素是否存在,然后再运行其属性或事件代码,从而导致代码冗余,影响执行效率.
在jQuery中,选择器定位页面元素时,无需考虑所定位的元素在页面中是否存在,即使该元素不存在,浏览器也不提示出错信息,极大地方便了代码的执行效率.
请参看:
jquery_007.html jquery_007_jq.html第二章 jQuery选择器第二章 jQuery选择器jQuery 选择器详解
根据所获取页面中元素的不同,可以将jQuery选择器分为:
基本选择器,层次选择器,过滤选择器,表单选择器四大类
其中:
在过滤选择器中可以又可以分为:
简单过滤选择器,
内容过滤选择器,
可见性过滤选择器,
属性过滤选择器,
子元素过滤选择器,
表单对象属性过滤选择器 等6种第二章 jQuery选择器第二章 jQuery选择器基本选择器 基本选择器是jQuery 中使用最频繁的选择器,它由元素ID,Class,元素名,多个选择符组成,通过基本选择器可以实现大多数页面元素的查找,第二章 jQuery选择器第二章 jQuery选择器使用基本选择器选择元素
功能描述
一个页面中包含两个
标记,其中一个用于设置ID属性,另一个用于设置Class属性;我们再增加一个
标记,全部元素均为隐藏,然后通过jQuery基本选择器显示相应的页面标记
(2) 实现代码
请参看 jquery_009.html,第二章 jQuery选择器第二章 jQuery选择器层次选择器
层次选择器通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代,父子,相邻,兄弟等关系,通过其中某类关系可以方便快捷地定位元素.其详细说明如下:第二章 jQuery选择器第二章 jQuery选择器上表说明:ancestor descendant 与parent >child 所选择的元素集合是不同的,前者的层次关系是祖先与后代,后者是父子关系;另外prev+next可以使用.next( )代替,而prev~siblings 可以使用nextAll( ) 代替
功能描述 在页面中,设置4块标记,其中第二块
中,添加1个
标记,在该标记中再新增一个 标记,全部元素初始值均为隐藏,然后通过jQuery层次选择器,显示相应的页面标记
实现代码 :
请参看 jquery_010.html
第二章 jQuery选择器第二章 jQuery选择器简单过滤选择器
过滤选择器是根据某类过滤规则进行元素的匹配,书写时都以冒号(:)开头,简单过滤选择器是过滤选择器中使用最广泛的一种,其详细说明如下:第二章 jQuery选择器第二章 jQuery选择器第二章 jQuery选择器第二章 jQuery选择器关于简单过滤选择器的使用案例:
功能描述:
在页面中,设置一个
浙公网安备 33021202002483