[计算机软件及应用]jquery_基础教程
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
不要急，等会给大家展示几个实例。
选择器和事件
1、 how to find me! 为什么要有选择器？选择器的作用是干什么？ 在普通的JS里面，我们做选择有以下的一些方法： document.getElementById("id") document.getElementByName("name") document.getElementByTagName("tagname") ……
JQuery
www.softedu.org
1、JQuery入门 2、选择器和事件 3、DOM操作 4、XPath 专题 5、each 函数介绍 6、效果之CSS 7、Ajax 8、插件tablesort 9、JQuery 性能
www.softedu.org
课程目标
JQuery 入门
1、JQuery特点：
那要是我们想处理一些事件咋办？如：click event， change event and so on! 在普通的js中，我们是在某些标签里面添加了一些相关的属性， 如： onClick(), onChange()… 在Jquery里面，为了方便，我们除掉了‘on’，直接就是 click(),change()…这点请大家记住。
这些东西写起来是不是好长啊，写的好烦啊！有没有什么更好的 方法让我少写一下，我想偷点懒;如果你有这个想法，那么我现 在告诉你，选择JQuery就对了。呵呵！
如果大家对所谓的JS框架有所了解的话，相信应该知道这个所谓 的框架的基本原理，就是对上述的那些语句进行了封装。 如果说到选择器，就不得不谈的”$()”，待续…
insertAfter()、after()-外部插入 见dom.html文件
3.appendTo() 把某个段落追加到某个元素中 如：<div id=‘tt’></div><div id=‘ttt’></div> $(“#tt”).appendTo(‘#ttt’); <div id=‘ttt’> <div id=‘tt’></div> </div> append()这个函数是什么意思？？ pretend(),pretendTo()---内部插入
选择器和事件
工厂函数$() $()函数会消除使用for循环访问一组元素的需求，因为放到圆括号中的任 何元素都将自动执行循环遍历，并且会被保存到一个jQuery对象中。 放在括号中的变量基本上是无限制的。
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添加了一个样式
1.3 css支持；简单的动画实现，支持自定义动画；
1.4 跨浏览器
1.5 支持插件开发，现有插件多；
1.6 拥有官方UI程序供使用，效果好。 (http://jqueryui.com/home)
1.7 DHTML DOM选择器与链式语法
$(“p.surprise”).addClass(“ohmy”).show(“slow”);
短小精悍(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 入门
2、JQuery是怎么工作? 在做所有事情之前,我们要让jQuery读取和处理文档的
DOM,必须尽可能快地在DOM载入后开始执行事件。所以,我们 用一个ready事件作为处理HTML文档的开始. $(document).ready(function() {
// do stuff when DOM is ready }); 这是一种最普遍也是一种最基本的方式。 如果你熟悉了JQuery之后，你可以采用一些其他的简写的方式 ，如： $(function() {}); $().ready(function() {}); 前提条件是你已经加入了jquery的基本js！
DOM操作二
4. 要用新元素或文本替换每个匹配的元素，使用html()、text()、val()、 attr(); 要移除每个匹配的元素中的元素，使用empty(); 要从文档中移除每个匹配的元素及其后代元素使用remove(); 注意remove和empty的区别 例子：dom.html
Fra Baidu bibliotek JQuery 入门
2.1 Hello,Jquery！ 例子1： $(function(){ alert("Hello, Jquery!"); }); 页面会直接显示Hello, Jquery!为什么？因为在载入页面的时候 ，因为这个JS在head标签里面，故先会载入js，它就跟我们写 的普通的js类似，直接放在js标签里面。
注意： #orderList li:last---这是一种什么样的写法？这就是传说总的 XPath表示法，如果你采用这种写法，html中一般的节点你都能找到
DOM操作一
对文档一些节点的操作 1.toggleClass():交替的移除和添加类 2.insertBefore()、before()在某元素的前面插入元素
选择器和事件
1、 how to find me! 为什么要有选择器？选择器的作用是干什么？ 在普通的JS里面，我们做选择有以下的一些方法： document.getElementById("id") document.getElementByName("name") document.getElementByTagName("tagname") ……
JQuery
www.softedu.org
1、JQuery入门 2、选择器和事件 3、DOM操作 4、XPath 专题 5、each 函数介绍 6、效果之CSS 7、Ajax 8、插件tablesort 9、JQuery 性能
www.softedu.org
课程目标
JQuery 入门
1、JQuery特点：
那要是我们想处理一些事件咋办？如：click event， change event and so on! 在普通的js中，我们是在某些标签里面添加了一些相关的属性， 如： onClick(), onChange()… 在Jquery里面，为了方便，我们除掉了‘on’，直接就是 click(),change()…这点请大家记住。
这些东西写起来是不是好长啊，写的好烦啊！有没有什么更好的 方法让我少写一下，我想偷点懒;如果你有这个想法，那么我现 在告诉你，选择JQuery就对了。呵呵！
如果大家对所谓的JS框架有所了解的话，相信应该知道这个所谓 的框架的基本原理，就是对上述的那些语句进行了封装。 如果说到选择器，就不得不谈的”$()”，待续…
insertAfter()、after()-外部插入 见dom.html文件
3.appendTo() 把某个段落追加到某个元素中 如：<div id=‘tt’></div><div id=‘ttt’></div> $(“#tt”).appendTo(‘#ttt’); <div id=‘ttt’> <div id=‘tt’></div> </div> append()这个函数是什么意思？？ pretend(),pretendTo()---内部插入
选择器和事件
工厂函数$() $()函数会消除使用for循环访问一组元素的需求，因为放到圆括号中的任 何元素都将自动执行循环遍历，并且会被保存到一个jQuery对象中。 放在括号中的变量基本上是无限制的。
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添加了一个样式
1.3 css支持；简单的动画实现，支持自定义动画；
1.4 跨浏览器
1.5 支持插件开发，现有插件多；
1.6 拥有官方UI程序供使用，效果好。 (http://jqueryui.com/home)
1.7 DHTML DOM选择器与链式语法
$(“p.surprise”).addClass(“ohmy”).show(“slow”);
短小精悍(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 入门
2、JQuery是怎么工作? 在做所有事情之前,我们要让jQuery读取和处理文档的
DOM,必须尽可能快地在DOM载入后开始执行事件。所以,我们 用一个ready事件作为处理HTML文档的开始. $(document).ready(function() {
// do stuff when DOM is ready }); 这是一种最普遍也是一种最基本的方式。 如果你熟悉了JQuery之后，你可以采用一些其他的简写的方式 ，如： $(function() {}); $().ready(function() {}); 前提条件是你已经加入了jquery的基本js！
DOM操作二
4. 要用新元素或文本替换每个匹配的元素，使用html()、text()、val()、 attr(); 要移除每个匹配的元素中的元素，使用empty(); 要从文档中移除每个匹配的元素及其后代元素使用remove(); 注意remove和empty的区别 例子：dom.html
Fra Baidu bibliotek JQuery 入门
2.1 Hello,Jquery！ 例子1： $(function(){ alert("Hello, Jquery!"); }); 页面会直接显示Hello, Jquery!为什么？因为在载入页面的时候 ，因为这个JS在head标签里面，故先会载入js，它就跟我们写 的普通的js类似，直接放在js标签里面。
注意： #orderList li:last---这是一种什么样的写法？这就是传说总的 XPath表示法，如果你采用这种写法，html中一般的节点你都能找到
DOM操作一
对文档一些节点的操作 1.toggleClass():交替的移除和添加类 2.insertBefore()、before()在某元素的前面插入元素