首页 > 代码库 > 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代码实现效果

wKiom1Q-Kd_R2hLDAAEvN9qIcm8616.jpg


4、纯javascript与jquery

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

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

    

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


5、使用开发工具

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


6、小结

    本章重点指出了 

        - jquery 能做什么

        - 为什么使用jquery

        - 如何使用 jquery

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