Web前端—jquery知识总结

  l  什么是jquery？

    ²  明确三个目标：

    1.jQuery 是一个 JavaScript 库；jQuery 极大地简化了 JavaScript 编程；jQuery 很容易学习。

    ²  特点：

    1、jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。

    2、jquery被设计的目的是改变你写javascript的方式。

    3、支持各种主流浏览器。

      Ø  具体的特点：

      1、以强大的css选择器为基础，几乎所有的操作都先使用选择器查找DOM对象，之后进行各种操作。

      2、屏蔽浏览器的差异，对DOM的操作提供了方便的扩展，易用的事件处理API和动画API。

      3、强大的插件机制。（使用几个共同的页面可以共享一个插件）

    ²  学习目标

    通过讲解的五个实战的例子，介绍了jquery库是一个包含：HTML 元素选取；HTML 元素操作；CSS 操作；HTML 事件函数；JavaScript 特效和动画；HTML DOM 遍历和修改；AJAX；Utilities等等，jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。

      Ø  学习要求

       学习到如何选取 HTML 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务。

      Ø  引用方式

       分为内部引用和外部引用，同样式设计一样，外部单独的js文件好处是：如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

    ²  总结的思维导图如下图：点击见大图

    ²  个别知识点讲解

    Ø  语法示例

    $(this).hide() - 隐藏当前元素

    $("p").hide() - 隐藏所有段落

    $(".test").hide() - 隐藏所有 class="test" 的所有元素

    $("#test").hide() - 隐藏所有 id="test" 的元素

     关键之处：

    目的是：这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。 

    Ø  名称冲突

    1.jQuery 使用 $ 符号作为 jQuery 的简介方式。

    2.某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。

    3.jQuery 使用名为 noConflict() 的方法来解决该问题。

    4.var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

    Ø  事件

    Ø  Ajax简介

         i.AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。

        ii.AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

       iii.简短地说，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。

 

      Jquery与ajax：

     通过 jQuery AJAX方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

    Ø   AJAX get() 和 post() 方法

    jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

      区别

    1、GET - 从指定的资源请求数据；POST - 向指定的资源提交要处理的数据。

    2、GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据；POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

    在实战中我们主要用到的就是loading图片的加载，开始和结束时的ajaxstart和ajaxstop；此外还有就是通过ajax的load（）方法实现html静态页面、jsp动态页面以及远程服务器的加载。总而言之jquery的load（）方法很强大，ajax这部分这里只是稍微讲了讲，自己也只是初步的理解，希望在以后的学习中能够深入的学习。

  l  总结

    jquery与javascript的区别就是jquery就对javascript的一个扩展，封装，就是让javascript更好用，更简单。一句话jquery就是要用更少的代码，漂亮的完成更多的功能。