《jquery基础教程》PPT课件

《《jquery基础教程》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

JQuery入门1.JQuery特点：短小精悍(19k)，接口设计得精妙(自然语言的风格)，与程序思路配合精密。极大限度地体现了javascript的特性。1.1轻量级（19k）jquery-1.3.2.min.js1956kjquery-1.3.2.js4337118k1.2支持xpath查询，dom1-3，轻松选择需要的元素；1.3css支持；简单的动画实现，支持自定义动画；1.4跨浏览器1.5支持插件开发，现有插件多；1.6拥有官方UI程序供使用，效果好。(http://jqueryui.com/home)1.7DHTMLDOM选择器与链式语法$(“p.surprise”).addClass(“ohmy”).show(“slow”); JQuery入门2.JQuery是怎么工作?在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件。所以,我们用一个ready事件作为处理HTML文档的开始.这个地方跟Ext的Ext.onReady(function(){})类似。$(document).ready(function(){//dostuffwhenDOMisready});这是一种最普遍也是一种最基本的方式。如果你熟悉了JQuery之后，你可以采用一些其他的简写的方式，如：$(function(){});$().ready(function(){});前提条件是你已经加入了jquery的基本js！O(∩_∩)O~ JQuery入门2.1Hello,Jquery！例子1：$(function(){alert("Hello,Jquery!");});页面会直接显示Hello,Jquery!为什么？？因为在载入页面的时候，因为这个JS在head标签里面，故先会载入js，它就跟我们写的普通的js类似，直接放在js标签里面。**哪要是我们想处理一些事件咋办？？如：clickevent，changeeventandsoon!在普通的js中，我们是在某些标签里面添加了一些相关的属性，如：onClick(),onChange()…在Jquery里面，为了方便，我们除掉了‘on’，直接就是click(),change()…这点请大家记住。不要急，等会给大家展示几个实例。 选择器和事件1.howtofindme!为什么要有选择器？选择器的作用是干什么？在普通的JS里面，我们做选择有以下的一些方法：document.getElementById("id")document.getElementByName("name")document.getElementByTagName("tagname")……这些东西写起来是不是好长啊，写的好烦啊！有没有什么更好的方法让我少写一下，我想偷点懒;如果你有这个想法，那么我现在告诉你，选择JQuery就对了。呵呵！如果大家对所谓的JS框架有所了解的话，相信应该知道这个所谓的框架的基本原理，就是对上述的那些语句进行了封装。如果说到选择器，就不的不谈的”$()”，待续… 选择器和事件工厂函数$()$()函数会消除使用for循环访问一组元素的需求，因为放到圆括号中的任何元素都将自动执行循环遍历，并且会被保存到一个jQuery对象中。放在括号中的变量基本上是无限制的！1.1例子见choose.htmlsiblings(expr)--同辈元素2.jQuery提供两种方式来选择html的elements，第一种是用css和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div>ula")）；第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。2.1：实例$(function(){$("#orderList").addClass("red");});给orderList添加了一个样式$(function(){$("#orderList>li").addClass("red");});给orderList中的li添加了一个样式 选择器和事件例子2：光标的切换$(function(){$("#orderListli:last").hover(function(){$(this).addClass("red");},function(){$(this).removeClass("red");});});当把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一个element上生效见maopao.html注意：#orderListli:last---这是一种什么样的写法？这就是传说总的XPath表示法，如果你采用这种写法，html中一般的节点你都能找到 DOM操作一对文档一些节点的操作1.toggleClass():交替的移除和添加类2.insertBefore()、before()在某元素的前面插入元素insertAfter()、after()-外部插入见dom.html文件3.appendTo()把某个段落追加到某个元素中如：