[工学]jquery 基础教程.ppt

JQuery 入门 2.JQuery是怎么工作? 在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件。所以,我们用一个ready事件作为处理HTML文档的开始. 这个地方跟Ext的Ext.onReady(function() {})类似。 $(document).ready(function() { // do stuff when DOM is ready }); 这是一种最普遍也是一种最基本的方式。 如果你熟悉了JQuery之后，你可以采用一些其他的简写的方式，如： $(function() {}); $().ready(function() {}); 前提条件是你已经加入了jquery的基本js！ O(∩_∩)O~ JQuery 入门 2.1 Hello,Jquery！ 例子1： $(function(){ alert(Hello, Jquery!); }); 页面会直接显示Hello, Jquery!为什么？？因为在载入页面的时候，因为这个JS在head标签里面，故先会载入js，它就跟我们写的普通的js类似，直接放在js标签里面。 ** 哪要是我们想处理一些事件咋办？？如：click event， change event and so on! 在普通的js中，我们是在某些标签里面添加了一些相关的属性，如： onClick(), onChange()… 在Jquery里面，为了方便，我们除掉了‘on’，直接就是click(),change()…这点请大家记住。 不要急，等会给大家展示几个实例。 选择器和事件 1. how to find me! 为什么要有选择器？选择器的作用是干什么？ 在普通的JS里面，我们做选择有以下的一些方法： document.getElementById(id) document.getElementByName(name) document.getElementByTagName(tagname) …… 这些东西写起来是不是好长啊，写的好烦啊！有没有什么更好的方法让我少写一下，我想偷点懒;如果你有这个想法，那么我现在告诉你，选择JQuery就对了。呵呵！ 如果大家对所谓的JS框架有所了解的话，相信应该知道这个所谓的框架的基本原理，就是对上述的那些语句进行了封装。 如果说到选择器，就不的不谈的”$()”，待续… 选择器和事件 工厂函数$() $()函数会消除使用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添加了一个样式 选择器和事件 例子2：光标的切换 $(function() { $(#orderList li:last).hover(function() { $(this).addClass(red); }, function() { $(this).removeClass(red); } ); }); 当把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一个element上生效 见maopao.html 注意： #orderList li:last---这是一种什么样的写法？这就是传说总的XPath表示法，如果你采用这种写法，html中一般的节点你都能找到 DOM操作一 对文档一些节点的操作 1.toggleClass():交替的移除和添加类 2.insertBefore()、before()在某元素的前面插入元素 insertAfter()、after()-外部插入 见dom.html文件 3.appendTo() 把某个段落追加到某个元素中 如：div id=‘tt’/divdiv id=‘