Jquery基础教程 - 第一章 JQUERY入门


内容提要

1、jquery能做什么

2、jquery为什么如此出色

3、第一个jquery驱动的页面

4、纯javascript与jquery

5、开发工具

6、小结


1、jquery能做什么

取得文档中的元素

--jQuery为准确的获得需要检查或操纵的文档元素，提供了可靠而富有效率的选择符机制。

找到所有应用了.content class样式的div中所有的P标签

$('div.content').find('p');

修改页面外观

-- jQuery提供了跨浏览器的标准解决方案。而且，即使页面已经呈现之后，JQuery仍然可以

改变文档中某个部分的类或者个别样式

找到页面所有的ul标签的第一个li子标签，然后为它们增加名为active的样式

$('ul>li:first').addClass('active');

改变文档内容

--jquery使用少量代码就可改变文档的内容。

可以改变文本、插入或翻转图像、列表重新排序，甚至对HTML文档的整个结构都能重写和

补充。

为ID为"container"的元素添加一个链接：

$('#container').append('<ahref="more.html">more</a>');

响应用户操作

--jquery提供了截获形形***的页面事件的适当方式，而不需要使用事件处理程序拆散HTML

代码。

为使用的.show-details样式的button元素添加一个click事件，事件就是：显示使用.details样式的DIV

$('button.show-details').click(function(){$('div.details').show();});

为页面添加动态效果

-- jquery中内置了一批淡入、擦除之类的效果，以及制作新效果的工具包。

为ID为msubject的元素添加隐藏的动态效果为slide

$('div.details').slideDown;

无需刷新页面从服务器获取数据(ajax)

-- jquery通过消除ajax过程中对浏览器限定的复杂性，使开发人员专注于服务器端的功能

设计；

$('div.detail').load('more.html #content');

简化常见的javascript操作（迭代数组 ）

-- jquery改进了对基本的javascript数据结构的操作

$each(obj,function(key,value){tatal+=value;});


2、jquery为什么如此出色

利用CSS的优势

--jquery将查找页面元素的机制构建与CSS选择符上

支持扩展

--jquery将特殊情况下使用的工具归入插件当中，为了避免特性蠕变（损坏特性的简洁、

轻巧、稳定及错误的出现等）

抽象浏览器的不一致性

--jquery添加一个抽象层来标准化常见的任务，从而有效的减少了代码量，同时也极大的简

化了这些任务，有效解决浏览器多样性的复杂问题。

总是面向集合

--jquery找到某类页面元素进行操作时，无需进行循环遍历每个元素。相反，jquery中许多

方法（.hide）被设计成自动操作对象集合，而不是单个对象，利用这种隐式迭代的技术

，可以抛弃臃肿的循环机构，从而大幅减少代码量

将多重操作集于一行

--为了避免过度使用临时变量或不必要的重复代码，jquery在大多数方法中采用了一种称作

连缀的编程模式。这种模式意味着机遇一个对象进行的多数操作的结果，都会返回这个对

象本身，一边为该对象应用下一次操作。


3、第一个jquery驱动的页面

下载使用jquery

--jquery不需要安装，只需要使用它的副本即可

副本可放在外部站点上，放在自己的服务器上，只要在HTML文档中使用<script>元素把它

引用进来即可<script src="jquery.js"></script>

编写jquery代码

在页面中动态弹出一个提示

<!DOCTYPEhtml><html><head><title>第一个jquery页面</title><scripttype="text/javascript"src="jquery.js"></script><script>$(document).ready(function(){alert("第一个jquery页面");});</script><head><body></body><html>

jquery代码实现效果


4、纯javascript与jquery

window.onload()不可多次使用，必须等到页面内容包括图片的所有元素加载完才能执行

$(document).ready();可多次使用在DOM就绪后马上执行

相较而言，jquery代码不仅写起来省事，读起来简单，而且也比纯javascript代码的执行速度快


5、使用开发工具

各浏览器厂商都有自己对应的开发调试工具


6、小结

本章重点指出了

-jquery能做什么

-为什么使用jquery

-如何使用jquery