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

浏览数：44 / 时间：2015年06月09日

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="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代码

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

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

jquery代码实现效果