首页 > 代码库 > jquery基础教程 - 第一章 JQUERY入门
jquery基础教程 - 第一章 JQUERY入门
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(‘<a href="http://www.mamicode.com/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="http://www.mamicode.com/jquery.js"></script>
编写jquery代码
在页面中动态弹出一个提示
<!DOCTYPE html>
<html>
<head>
<title>第一个jquery页面</title>
<script type="text/javascript" src="http://www.mamicode.com/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
jquery基础教程 - 第一章 JQUERY入门