当前位置:文档之家› 《jquery基础教程》PPT课件

《jquery基础教程》PPT课件

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