jQuery基础概览.ppt

总结 简要介绍了jQuery的基础知识、jQuery特效和动画过程以及jQuery对XHTML元素操作的方法。 A C * jQuery基础 练习 要将页面的状态栏中显示“已经选中该文本框”，JavaScript语句正确的是（ ）。 window.status 已经选中该文本框 document.status 已经选中该文本框 window.screen 已经选中该文本框 document.screen 已经选中该文本框“ history对象的方法（ ）用于加载历史列表中的下一个URL页面。 next B. back C. forward D. go -1 主要内容 使用JavaScript脚本编写程序有时过于繁琐，而且当实现一些特殊效果时程序量较大，有一定难度，可以使用JavaScript框架去解决这些问题，jQuery是用的最多的一个轻量级JavaScript框架。 要点 jQuery基础 jQuery特效和动画。 jQuery对XHTML元素操作。 1 jQuery基础 jQuery是轻量级JavaScript库。jQuery可以对XHTML元素进行选取和操作，通过程序对CSS进行控制，定义了很多XHTML事件函数，能够实现JavaScript特效和动画，而且更方便对HTML DOM进行遍历和修改。jQuery极大地简化了JavaScript编程，并且很容易学习掌握。 1 jQuery基础——添加jQuery库 jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数。可以通过下面的标记把jQuery添加到页面中： script type text/javascript src jquery.js 共有两个版本的jQuery可供下载（/）：一个是精简的，另一个是未压缩的。 1 jQuery基础——添加jQuery库 如果不愿意在自己的计算机上存放jQuery库，可以从Google或Microsoft的CDN （内容分发网络）加载jQuery核心文件。 在页面的头部中加入下面的标记可以使用Google的CDN。 script type text/javascript src /ajax/libs/jquery/1.6.0/jquery.min.js 在页面的头部中加入下面的标记可以使用Microsoft的CDN。 script type text/javascript src /ajax/jquery/jquery-1.6.min.js 1 jQuery基础——jQuery语法 jQuery可以选取XHTML元素，并对它们执行操作。jQuery基础语法如下： $ selector .action 其中美元符号“$”定义jQuery，选择符（selector）选取XHTML元素，action 执行对元素的操作。 $ this .hide /*隐藏当前元素*/ $ p .hide /*隐藏所有段落*/ $ #test .hide /*隐藏所有id test的元素*/ 1 jQuery基础——jQuery语法 1. jQuery选择器 jQuery选择器主要有三种： 元素选择器 jQuery使用CSS选择器来选取XHTML元素，也就是说选取元素的方法和CSS是相同的。 如：$ p 选取 元素，$ ro 选取所有class intro的 元素。 1 jQuery基础——jQuery语法 属性选择器 jQuery使用XPath表达式来选择带有给定属性的元素。XPath是一门在XML文档中查找信息的语言，XPath使用路径表达式。 如：$ [href] 选取所有带有href属性的元素，$ [href #] 选取所有带有href值等于#的元素。 CSS选择器 CSS选择器可用于改变元素的CSS属性。 下面例子把所有p元素的背景颜色更改为红色： $ p .css background-color,red ; 1 jQuery基础——jQuery语法 2. jQuery事件 jQuery为事件处理进行了特别设计，jQuery事件处理方法也是采用函数的形式，通常会在页面 部分定义事件，在响应事件的函数中编写jQuery代码。基本结构如下： $ selector .event function //响应事件代码 其中event指选择器选择的元素某一事件，括号里面是响应事件的函数。 1 jQuery基础——jQuery语法 jQuery常用事件主要有： $ document .ready function ：将函数绑定到文档的就绪事件（当文档完成加载时）。 $ selector .click function ：触发或将函数绑定到被选元素的单击事件。