第7章 JQuery基础
Jquery基础知识之菜鸟教程
Jquery基础知识之菜鸟教程 jquery核⼼： write less do more1.jQuery 语法基础语法： $(selector).action();2.⽂档就绪事件：⽂档完全加载完后执⾏函数第⼀种⽅式： $(document).ready(function(){});第⼆种⽅式： $(function(){});3.jQuery 选择器元素选择器 $("p").hide(); // 所有的p元素隐藏#id选择器 $("#test").hide();//id为test的元素隐藏.class选择器 $('.test').hide(); // class为test的所有元素隐藏$("*") //选取所有元素$(this) // 选取当前HTML元素$("p .intro") // 选取class 为intro的p元素$("ul li:first") //选取第⼀个ul元素下的第⼀个li元素$('ul li:first-child') //选取每个ul下的第⼀个li元素$('[href]') //选取所有带href属性的元素$('a[target="_blank"]') //选取所有a元素(带有target属性值为_blank)$('a[target !="_blank"]') //选取所有a元素(不带有target属性值为_blank)$(":button") // 选取所有type=“button”的input和button元素$("tr：even") // 选取所有的偶数⾏$("tr:odd") //选取所有的奇数⾏4.jQuery 事件事件：页⾯对不同访问者的响应⿏标事件： click dbclick mouseenter mouseleave hover(悬停事件)键盘事件： keypress keydown keyup blur表单事件： submit change focus unload⽂档窗⼝事件：load resize scroll4.1 jQuery 事件⽅法语法$("p").click(function(){//点击p元素后执⾏的代码});$("p").dblclick(function(){ //双击事件$(this).hide();});$("#p1").mouseenter(function(){ // ⿏标指针穿过元素事件alert("You entered p1!");});$("#p1").mouseleave(function(){// ⿏标指针离开元素事件alert("Bye! You now leave p1!");});$("input").focus(function(){// 元素获得焦点事件$(this).css("background-color","#cccccc");});$("input").blur(function(){// 元素失去焦点事件$(this).css("background-color","#ffffff");});5.jQuery 效果5.1 隐藏和现实HTML元素：$(selector).hide(speed,callback);$(selector).show(speed,callback);例：$("button").click(function(){$("p").hide(1000);//1000毫秒，隐藏的速度，1s钟隐藏});5.2 来回切换隐藏和显⽰⽤ toggle();<button>隐藏/显⽰</button>$("button").click(function(){$("p").toggle();});6. 淡⼊淡出$(selector).fadeIn(speed,callback);$(selector).fadeOut(speed,callback);$(selector).fadeToggle(speed,callback);$(selector).fadeTo(speed,opacity,callback);$("button").click(function(){ //三个div逐次出现$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000);});$("button").click(function(){ //三个div逐次淡出，依次看不见$("#div1").fadeOut();});<button>点击淡⼊/淡出</button>$("button").click(function(){$("#div3").fadeToggle(3000);});$("button").click(function(){$("#div1").fadeTo("slow",0);//0完全透明，div1看不见了});7. 滑动⽅法$(selector).slideDown(speed,callback); //向下收起来$(selector).slideUp(speed,callback); //向上收起来$(selector).slideToggle(speed,callback);8.动画：默认情况下，所有 HTML 元素都有⼀个静态位置，且⽆法移动。
JQuery基础_ppt
成功之路JQuery基础学习目标掌握jQuery 框架和环境基本概念掌握jQuery 的核心函数和对象掌握jQuery 选择器基本用法掌握jQuery 属性用法掌握jQuery 类对象用法掌握jQuery 事件用法掌握jQuery 的效果简单用法了解jQueryAJAX 的功能jQuery 概述基本概念jQuery John Resig javascript 库.CSS3IE 6.0+, FF是建立的一个轻量级兼容，还兼容各种浏览器（1.5+, Safari 2.0+, Opera 9.0+）使用户能更方便地处理HTML 文档、事件、实现动画效果，并且方便地为网站提供Ajax 交互jQuery 能做什么以插件的形式持续地通过开发加入新的功能 1.获取页面的部分内容2.修改页面的外观3.修改页面的内容4.在页面中响应用户的交互5.给页面加上动画6.无刷新返回服务器端的信息7.还提供了改进基本的JavaScript 结构，如迭代和数组操作谁在用jQuery主流javascript 库①Prototype ②Ext ③YUI jQuery:④Dojo ⑤mooTools ⑥jQuery:①短小精悍，支持xpath 查询，dom1-3，css 支持；②简单的动画实现，支持自定义动画；③支持插件开发，现有插件多；④完整的api 文档以及范例，易学；⑤拥有官方UI 程序供使用，效果好。
jQuery 下载当前版本1.4.4官方网站下载：/jQuery 安装和使用在页面头部head js<script type="text/javascript"src="./script/jquery.js"></script>使用语法：中，添加VS2008中可以实现jQuery 的智能提示/KB958502/Releas e/ProjectReleases.aspx?ReleaseId=1736 Aptana StudioFireFox3+ FireBug1.2配置jQuery 环境1、安装vs2008 sp12、安装jq 插件3、添加jq 脚本到工程中应用jQuery 到代码Jquery 框架的结构参考网站jQuery jQuery Blog()官方网站中文社区一个有不少教程和插件 很好的API 查询站点/index.xml240多个jQuery 插件的列表/Terrylee/archive/2007/12/09/the-ultimate-jquery-plugin-list.htmljQuery 核心函数1核心函数$(expression,[context])接收一个包含CSS 选择器的字符串，然后用这个字符串去匹配一组元素$(html)根据提供的原始HTML 标记字符串，动态创建由jQuery 对象包装的DOM 元素将一个或多个元素转化为对象$(elements)DOM jQuery 两种访问Jquery 核心函数的方法①$（expression,[context]）②jQuery （expression,[context]）jQuery 核心函数2函数功能jQuery(callback)$(document).ready()的简写jQuery(expression, [context])根据表达式，查找匹配的一组核心函数语法元素jQuery(html, [ownerDocument])动态创建jQuery 包装的DOM 元素jQuery(elements)将DOM 元素转化为jQuery 对象页面载入jQuery(callback)$(document).ready(callback)绑定一个在DOM 文档载入完成后执行的函数 同一个页面上可以多次使用Document 对象Demo<html><head><script src="js1.4/jquery-1.4.1.js"type="text/javascript"></script><script type="text/javascript">$(document).ready(function () {$('#div1').append('<b>Hello World 1</b></br>');});$(document).ready(function () {$('#div1').append('<b>Hello World 2</b></br>');});</script></head><body><div id="div1"></div></body></html>重复注册demo1_document.htmElements 对象Demo<html><head><script src="js1.4/jquery-1.4.1.js"type="text/javascript"></script><script type="text/javascript">$(document).ready(function() {$("<b>Hello </b>").insertBefore("#p1");$("#p1").after("<b>World</b>");$(document.body).css("background", "red");});</script></head><body><p id="p1">这是一个段落</p></body></html>DOM 对象demo2_elements.html①基本选择器*,class,element, id, selector1, selector2等.通过jQuery返回对象②层级选择器ancestor descendant, parent > child,prev +next ,prev ` siblings③内容选择器contains[text], empty, parent, has[selector]等.④子元素选择器even, odd,eq[index], last, first 等返回jQuery 对象基本选择器*,class,element, id, selector1, selector2等.最常用根据给定的ID 匹配一个元素。
jquery基础
jQuery基础教程一(传说中的ready)首先我们来说明一下什么是JqueryjQuery 是一个新型的JavaScript库.jQuery是一个简洁快速的JavaScript库，它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。
jQuery的设计会改变你写JavaScript代码的方式。
jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不用的应用程序。
jQuery是一个轻量级的脚本，其代码非常小巧，JavaScript包只有15K左右。
jQuery支持CSS1-CSS3,以及基本的xPathjQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ 第一步 ready函数如果你需要一些函数需要在DOM加载就绪以后才能执行,当然window.onload()能实现同样的功能，但当window.onload函数执行的时候，要说明所有东西已经载入，包括图像和横幅等等。
要知道较大的图片下载速度会比较慢，因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果，这样就花费了很长的等待时间，这不是我们想要的.$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。
通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数.(document)意思是说，获取整个网页文档对象（类似的于window.document），$(document).ready意思就是说，获取文档对象就绪的时候。
$(document).ready(function() {// do stuff when DOM is ready//当文档载入后从此处开始执行代码});jquery基础教程二(鼠标点击事件)下面我们来看看jquery如何给 DOM 各个元素批量绑定事件<SCRIPT LANGUAGE="JavaScript"><!--$(document).ready(function() {$("div").click(function(){//$("div")就是页面中所有的 div标签alert("Hello World!");})})//--></SCRIPT>$("div").click $("div")就是页面中所有的 div标签这句话就是给所有的标签为div的元素绑定了一个click事件即当所有div 被鼠标单击的时候执行 alert("Hello World!");<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery基础教程二（demo鼠标点击事件）</title><script language="javascript"src="/demo/jquery.js"></script><SCRIPT LANGUAGE="JavaScript"><!--$(document).ready(function() {$("div").click(function(){alert("Hello World!");})//--></SCRIPT></head><body><div>Hello World!</div></body></html>程序演示地址 : /demo/jquery基础教程二demo鼠标点击事件.htmljquery基础教程三(css的操作之addClass和removeClass)下面我们看看jquery对css的操作方法 addClass和removeClassaddClass为每个匹配的元素添加指定的类名。
JavaScript+jQuery前端开发基础教程教案
JavaScript+jQuery前端开发基础教程教案第一章：JavaScript概述1.1 课程介绍本章节将介绍JavaScript的发展历程、特点以及应用场景。
使学生了解JavaScript的历史背景和基本概念，为后续学习打下基础。
1.2 教学目标了解JavaScript的历史和发展掌握JavaScript的基本特点掌握JavaScript的应用场景1.3 教学内容1.3.1 JavaScript的历史和发展1.3.2 JavaScript的基本特点1.3.3 JavaScript的应用场景1.4 教学方法采用讲解、案例演示、互动提问等方式进行教学。
1.5 课后作业简述JavaScript的历史和发展。
列举出JavaScript的三个基本特点。
说出JavaScript的应用场景。
第二章：HTML与CSS基础2.1 课程介绍本章节将介绍HTML和CSS的基本概念，以及如何使用它们来创建网页。
学生将学会如何编写HTML代码和应用CSS样式。
2.2 教学目标掌握HTML的基本结构了解CSS的作用和基本语法学会使用CSS样式化网页2.3 教学内容2.3.1 HTML基本结构2.3.2 CSS的基本语法和作用2.3.3 使用CSS样式化网页2.4 教学方法采用讲解、案例演示、互动提问等方式进行教学。
2.5 课后作业编写一个简单的HTML页面，包括、段落和图片。
尝试使用CSS样式化你的HTML页面，使其看起来更美观。
第三章：JavaScript基本语法和操作3.1 课程介绍本章节将介绍JavaScript的基本语法和基本操作，如变量、数据类型、运算符、控制语句等。
学生将学会如何编写简单的JavaScript代码。
3.2 教学目标掌握JavaScript的基本语法学会使用JavaScript进行基本操作3.3 教学内容3.3.1 JavaScript的基本语法3.3.2 变量和数据类型3.3.3 运算符和控制语句3.4 教学方法采用讲解、案例演示、互动提问等方式进行教学。
jQuery基础入门ppt
基本过滤选择器
基本过滤选择器示例
改变第一个 div 元素的背景色为 # bbffaa
$("div:first")
改变id不为 one 的所有p元素的背景色为 # bbffaa
$("p:not('#one')")
改变索引值为偶数的 tr元素的背景色为 # bbffaa
$(“tr:even")
jQuery的选择器
jQuery 选择器
选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery 选择器的优点: 简洁的写法
完善的事件处理机制
基本选择器
基本选择器是 jQuery 中最常用的选择 器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素
jQuery 基础教程
内容简介
一 二 三jQuery的由来及 Nhomakorabea介 jQuery对象和DOM对象 jQuery选择器
三
JavaScript框架简介
随着JavaScript、CSS、Ajax等技术的不断 进步，越来越多的开发者将一个又一个丰 富多彩的程序功能进行封装，供其他人可 以调用这些封装好的程序组件（框架） 当前流行的 JavaScript 库有:
jQuery的优势
轻量级 （Lightweight） 强大的选择器 出色的DOM操作封装 可靠的事件处理机制 出色的浏览器兼容性
jQuery 理念: 写得少, 做得多
jQuery的使用
下载：提供了最新的 jQuery框架下载。目前最新的版本jquery1.11.1.min.js
jQuery教程学习
jQuery教程jQuery其实很简单，相信您看了CSS学习网精心编写的jQuery速成教程后，一定会被它的优雅、轻巧吸引住，而且如果您掌握了它，定能成为提升薪水的一个资本。
本节并没有涉及到jQuery如何编写，只为大家解决几个常见问题，因为这也是面试中常常遇到的几个问题。
如果你掌握了jQuery可以成为提升工资的一个资本。
另外我写教程的时候需要一边发布一边写，因此如果当你看到某节教程的标题不是【蓝色加粗字体、标题后面无精品推荐】这些条件，那么劝大家不要看此教程，因为它还没发育好呢！课程列表：第一章：基础篇- 对象的获取第一节：jQuery速成- 向jQuery进军！第二节：jQuery速成- 核心！第三节：jQuery速成- 核心方法的使用第四节：jQuery速成- 基本对象获取第五节：jQuery速成- 层级对象获取第六节：jQuery速成- 简单对象获取第七节：jQuery速成- 内容对象的获取和对象可见性！第八节：jQuery速成- 对象获取进阶第九节：jQuery速成- 子元素的获取第十节：jQuery速成- 表单对象的获取第十一节：jQuery速成- 元素属性的设置与移除第二章：进阶篇- 对象的筛选第十二节：jQuery速成- 过滤第十三节：jQuery速成- 查找第十四节：jQuery速成- 串联第三章：文本篇- 对象文本处理第十五节：jQuery速成- 内部插入第十六节：jQuery速成- 外部插入第十七节：jQuery速成- 包裹第十八节：jQuery速成- 替换，删除和复制第十九节：jQuery速成- 元素的赋值第四章：样式篇- 层叠样式表的处理第二十节：jQuery速成- 样式的设置与定义第五章：提高篇- jQuery中的事件机制第二十一节：jQuery速成- 页面的载入事件与事件处理第二十二节：jQuery速成- 鼠标事件与交互第二十三节：jQuery速成- 焦点事件第二十四节：jQuery速成- 键盘事件第二十五节：jQuery速成- 其他事件第六章：效果篇- jQuery中的动画效果第二十六节：jQuery速成- 动画实现的基本方法第二十七节：jQuery速成- 元素的渐隐渐显第二十八节：jQuery速成- 元素的滑动第二十九节：jQuery速成- 自定义动画第七章：工具篇- jQuery中的工具使用第三十节：jQuery速成- 浏览器种类及其特性的检测第三十一节：jQuery速成- 数组和对象的操作第三十二节：jQuery速成- 工具杂项第八章：高级篇- Ajax异步请求及调用实战第三十三节：jQuery速成- Ajax请求(讲解篇)第三十四节：jQuery速成- Ajax请求(实战篇)第一章：基础篇- 对象的获取第一节：jQuery速成 - 向jQuery进军！jQuery速成- 向jQuery进军！jQuery其实很简单，相信您看了CSS学习网精心编写的jQuery速成教程后，一定会被它的优雅、轻巧吸引住，而且如果您掌握了它，定能成为提升薪水的一个资本。
JQuery基础
JQuery基础1、JQuery概念A、Jquery是一个优秀的Javascript框架。
它是轻量级的js库，它兼容CSS3，还兼容各种浏览器，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
B、JavaScript的缺点:控件的操作方式不统一，不同浏览器容易出观兼容问题。
为了简化操作，出现了许多对JavaScript封装的函数库比如Prototype、JQuery等。
C、JQuery的优点:小巧、方便、功能强大。
插件丰富、开源、免费。
D、VS在VS2010中已经实现自动完成功能，VS2008需要安装VSSP1补丁和VS90SP1-KB958502-X86补丁才能更好的支持，然后引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js 放在同目录下，VS2008中才会有自动提示和自动完成功能。
E、JQuery文件说明:jquery-1.4.2.js是JQuery主文件。
jquery-1.4.2.min.js是压缩板JQuery主文件。
jquery-1.4.2-vsdoc.js是JQuery在VS中的自动提示功能。
2、JQuery之ReadyA、JQuery的read和Dom onload的区别:onload是所有Dom元素创建完毕触发，而ready 则是Dom元素创建完就触发，这样可以提高网页的响应速度。
3、JQuery内置函数A、$.map(array, function)函数:对数组array中每个元素调用function函数逐个处理，function 函数处理返回一个新的数组。
jQuery基础教程(新手入门必看)
WEB论坛您的位置：WEB开发站长站web前端JS/VBSjqueryjQuery基础教程(新手入门必看)jQuery基础教程(新手入门必看)2009-10-10 21:54:18 作者：admin 来源：浏览次数：133 网友评论 0条此文以实例为基础一步步说明了jQuery的工作方式。
现以中文翻译（添加我的补充说明）如下。
如有相关意见或建议请麻烦到我的 BLOG 写个回复或者 EMAIL 告知。
英文原版：http://jquery.bassistance.de/jquery-getting-started.html ，感谢原文作者Jörn Zaefferer内容提要安装Hello jQueryFind me:使用选择器和事件Rate me:使用AJAXAnimate me(让我生动起来):使用FXSort me(将我有序化):使用tablesorter插件(表格排序)Plug me:制作您自己的插件Next steps(下一步)安装一开始,我们需要一个jQuery的库,最新的下载可以到这里找到。
这个指南提供一个基本包含实例的包供下载.(译者Keel注:一定要下载这个包，光看文章不实践肯定是不行的。
)下载后解压缩，然后用你最喜欢的文本编辑器打开starterkit.html和custom.js这两个文件。
(译者Keel注:这两个就是例子文件,所有的例子都用这两个例子作出,custom.js写jQuery代码,starterkit.html观察效果.建议用editPlus打开)现在,我们就已经做好了一切准备来进行这个著名的"Hello world"例子.本章的相关链接:jQuery DownloadsHello jQuery在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:$(document).ready(function() {// do stuff when DOM is ready});放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.$(document).ready(function() {$("a").click(function() {alert("Hello world!");});});这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jQuery选择器分类
jQuery选择器功能强大，种类也很多，分类如下： 类CSS选择器
基本选择器 层次选择器 属性选择器
过滤选择器
基本过滤选择器 可见性过滤选择器
28/46
基本选择器
选择器
描述
返回
示例
#id
.class
element
* selector1, selector2,
基本过滤选择器
• 基本过滤选择器可以选取第一个元素、最后一个元素、
索引为偶数或奇数的元素
名称
语法构成 :first
:last 基本过滤选择器
:even
:odd
描述
示例
选取第一个元素
$(" li:first" )选取所有 <li>元素中的第一个 <li>元素
选取最后一个元素
$(" li:last" )选取所有 <li>元素中的最后一 个<li>元素
第7章 jQuery基础
学习目标
• 了解JavaScript框架种类及其优缺点 • 了解jQuery库，能够搭建jQuery开发环境 • 了解jQuery对象$ • 掌握基本选择器 • 掌握过滤选择器 • 掌握表单选择器
本章任务
• 任务1：使用jQuery在警告框中显示“Hello World!”
• 英文解释：Framework/Library/Toolkit
为什么需要框架？
• JavaScript 框架或库是一组能轻松生成跨浏览器 兼容的 JavaScript 代码的工具和函数。每一个库 都在众多流行的 Web 浏览器的现代版本上进行了 可靠的测试，因此，您可以放心地使用这些框架， 您的基于 JavaScript 的 RIA 将会在不同浏览器和 平台上以类似的方式工作。
jQuery开发工具和插件
• Dreamweaver • Aptana • jQueryWTP和Spket插件 • Visual Studio 2012 • 其他工具
第一个jQuery程序
<script src="jquery-1.11.1.min.js"></script>
<script>
引入jQuery
• YUI控件库为你页面提供一组高交互性性的可视化元素。这些 元素完全在客户端创建维护，不需要请求服务器进行页面刷新。
Prototype
• prototype是最早成型的JavaScript库之一，是一个易于使 用、面向对象的JavaScript框架。它封装并简化和扩展一 些在Web开发过程中常用到JavaScript方法与Ajax交互处 理过程。
示例• 实现隔行变色效果，只需一句关键代码
$("tr:even").css("background-color","#ccc");
jQuery能做什么
• 访问和操作DOM元素 • 控制页面样式 • 对页面事件进行处理 • 扩展新的jQuery插件 • 与Ajax技术完美结合
提示
jQuery能做的JavaScript也都能做，但使用 jQuery能大幅提高开发效率
名称
jquery-1.版本号.js （开发版）
大小
约268KB
说明
完整无压缩版本，主要用于 测试、学习和开发
jquery-1.版本号 .min.js（发布版）
约91KB
经过工具压缩或经过服务器 开启Gzip压缩，主要应用于 发布的产品和项目
•<s在crip页t s面rc=中"js/引jqu入eryj-Q1.1u1.e3.rjsy" type="text/javascript"></script>
• 任务2：网站品牌列表的显示与收起
RIA技术
• RIA(Rich Internet Applications)富互联网应用,具 有高度互动性、丰富用户体验以及功能强大的客 户端。
• 常见的RIA技术
–Ajax –Flex –Sliverlight
• JavaScript及其框架是实现RIA的重要工具
任务1:使用jQuery在警告框中显示“Hello World!”
任务描述： • 页面加载完成之后弹出一个警告框，显示“Hello
World！”。 任务分析：
在警告框中显示“Hello World! ”，可以采用以下步骤： 1. 完成静态页面设计。 2. 引入jQuery库。 3. 使用jQuery对象$，在DOM结构加载完成之后执行自定义函数 4. 在自定义函数中调用alert方法弹出警告框。
ExtJS
• ExtJS常简称为Ext，原本是对YUI的一个扩展，主要用于 创建前端用户界面，现可利用包括JQuery在内的多种JS 框架作为 基础库，而Ext作为界面的扩展库来使用。
• Ext可以用来开发富有华丽外观的富客户端应用，能使B/S 应用更加具有活力，但由于它侧重于界面，本身比较臃肿， 另Ext并非完全免费 ，如果用于商业用途，需要付费获得 授权许可。
练习• 需求说明
– 在Dreamweaver中配置jQuery开发环境 – 打开页面时，弹出窗口，提示信息为“我编写的第
一个jQuery程序！^_^”
任务2：网站品牌列表的显示与收起
任务2：网站品牌列表的显示与收起
• 实现思路：
– 首先设计html结构，添加页面样式。 – 使用基本过滤选择器将第7条后的品牌隐藏。 – 使用可见性过滤选择器判断隐藏的品牌是否显示，如果
$(document).ready(function(){
alert(“我们将开启JQuery的学习之旅！ ");
});
弹出一个对话框
</script>
等待DOM文档载入后执行类 似于window.onload
JQuery运行核心
• $(document).ready()是整个JQuery运行的核心。
window.onload
1. 执行时机：必须等待网页中所 有的内容加载完毕后才能执行。
2. 不能同时编写多个 对应JQuery代码： $(window).load()
$(document).ready()
1. 执行时机：网页形成整个DOM 树之后执行。
2. 能同时编写多个 3. 可以简写成$()
练习—编写第一个jQuery程序
选取索引是偶数的所 $(" li:even" )选取索
有元素（index从0开 引是偶数的所有<li>
始）
元素
选取索引是奇数的所 $(" li:odd" )选取索引
有元素（index从0开 是奇数的所有<li>元
始）
素
32/46
基本过滤选择器
• 基本过滤选择器可以根据索引的值选取元素
什么是框架？
• 随着JavaScript、CSS、Ajax等技术的不断进步，越 来越多的开发者将一个又一个丰富多彩的程序功能进 行封装，供其他人可以调用这些封装好的程序组件 （框架）
• 中文解释：“框架”指一套包含工具、函数库、约定， 以及尝试从常用任务中抽象出可以复用的通用模块， 目标是使开发人员把重点放在任务项目所特有的方面， 避免重复开发。
<span>的子元素
代元素
$(‘prev+ next’) 选取紧接在prev元素后的 集 合 $(‘.one + div’)选取class
next元素
元素 为one的下一个<div>元
素
$(‘prev~sibling 选取prev元素之后的所有 集 合 $(‘#two ~ div’)选取id为
s’)
…, selectorN
根据给定的id匹配一个元 素
根据给定的类名匹配元素
根据给定的元素名匹配元 素
匹配所有元素
将每一个选择器匹配到的 元素合并d为test的元
元素
素
集合 $(“.test”)选取所有class为
元素
test的元素
集合 元素
$(‘p’)选取所有的<p>元素
集合 元素
$(‘*’)选取所有的元素
$(‘div, span, p.myClass’)选
集合 取所有<div>、<span>和拥
元素 有class为myClass的<p>标
签的一组元素
层次选择器
• 层次选择器通过DOM 元素之间的层次关系来获取元素
选择器
描述
返回
示例
$(‘ancestor 选取ancestor元素里的所 集 合 $(‘div span’)选取<div>
Dojo
• Dojo 的强大之处在于Dojo提供了很多其他 JavaScript库所没有提供的功能。如离线存储的 API,生成图标的组件等。
• Dojo是一款鼓非常适合企业级应用的JavaScript库。 • Dojo学习四线陡，文档不齐全，API不稳定，但自
Dojo1.0版本后，情况好转。
初识jQuery
jQuery的优势
• 轻量级 （Lightweight） • 强大的选择器 • 出色的DOM操作封装 • 可靠的事件处理机制 • 出色的浏览器兼容性
jQuery 理念: 写得少, 做得多
获取jQuery
• 进入jQuery官网：
点击此处下载
jQuery库文件
• jQuery库分开发版和发布版
descendant’) 有descendant后代元素 元素 里的所有的<span>元素