jQuery 初探

什么是jQuery?

        正如官网所描述：jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript。轻量级的js库，兼容各种浏览器，jQuery使用户能更方便地处理HTML documents、events、实现动画效果及提供AJAX交互，其文档说明很全，同时还有许多成熟的插件可供选择，jQuery能够使用户的html页代码和内容分离。jQuery，在我看来就是把javascript中常见的逻辑、函数等封装成使用更为简单的逻辑、函数，以便用更简洁、健壮的代码实现更多更丰富的功能和特效，正如其宣言：write less,do more!

jQuery的特点：
         1、提供了强大的功能函数，使用这些函数使得代码更简洁健壮。
         2、解决浏览器兼容性问题，屏蔽了浏览器的差异，避免为每种浏览器单独编写相应代码。
         3、漂亮的动画效果和更好的用户体验，例如简单的show("slow")，即可实现淡出的效果。
jQuery对象
        编写javascript程序要首先获得对象, jQuery选择器改变我们以前获取对象的方式, 可以获取几乎任意的对象。
        在javascript中获取dom对象，使用的是

var div = document.getElementById("testDiv");

        Dom对象有很多不同的类型比如input,div, span等，同时Dom对象的属性和方法也较少；而在jQuery中，对DOM对象进行了扩充，将所有对象封装，我们可以称之为jQuery对象，jQuery对象获取方法，jQuery对象拥有更多的方法和属性：

：var jQueryObject = $("#testDiv");

        jQuery对象转换为DOM对象的方法，返回的是即是DOM对象：

var dom = $("#testDiv")[0];

jQuery的选择器:
        本小菜认为正是由于jQuery对DOM丰富而简洁的操作而使jQuery风行，恰如其名query：查询选择之意。
        在传统javascript中只能使用有限的函数根据id和TagName获取Dom对象，而在jQuery下，我们可以用更多的方法获取对象，这些方法可以类比CSS中的选择器，同时返回的对象为jQuery对象，例如：

var jQueryObject = $("#testDiv");  var jQueryObject = $(".testDiv");  var jQueryObject = $("div");

        上面使用的$即是jQuery的简写引用，使用jQuery同样可以达到相同的效果：

var jQueryObject = jQuery("#testDiv");

        当然这只是jQuery中最简单的几个选择方法，你可以使用丰富的选择器和筛选器，例如：* :first :last :even :odd >等。

jQuery与属性和样式

        jQuery中的attr()：通过对attr的操作，我们能轻松修改jQuery对象的属性。

       比如使用下列语句为所有图像设置src和alt属性。

$("img").attr({ src: "test.jpg", alt: "Test Image" });

         使用下列语句将文档中图像的src属性删除

$("img").removeAttr("src"); 

    修改CSS的类：使用jQuery，还可以轻松实现对指定对象的CSS选择器尽心操作。

    比如使用下列语句，为匹配的元素加上 'selected' 类。

$("p").addClass("selected");

    使用下列语句从匹配的元素中删除 'selected' 类。

$("p").removeClass("selected");

          修改CSS样式：修改指定对象的样式也变得更为简单。

    使用下列语句将所有段落的字体颜色设为红色并且背景为蓝色。

$("p").css({ color: "#ff0011", background: "blue" }); 

    使用下列语句将所有段落字体设为红色。

$("p").css("color","red");

         height和width：比较以下几个概念

    如图所示：

jQuery中的事件

        jQuery事件对象将不同浏览器的差异进行了合并,比如可以在所有浏览器中通过 event.target 属性来获取事件的触发者。

    绑定事件：为指定对象绑定事件。

    使用以下语句当每个段落被点击的时候，弹出其文本:

$("p").bind("click", function(){     alert( $(this).text() );   });

       使用以下语句把所有段落的所有事件取消绑定:

$("p").unbind(); 

       使用以下语句为每一个匹配元素的特定事件绑定一个一次性的事件处理函数，当所有段落被第一次点击的时候，显示所有其文本：

$("p").one("click", function(){     alert( $(this).text() );   });

        常用事件：jQuery中简化了事件的使用方法。例如使用

$(document).ready(function(){  // 在这里写你的代码...  });

        即可执行DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

          使用以下事件即可表示当鼠标指针穿过元素时，会发生 mouseenter 事件：

$("p").mouseenter(function(){  $("p").css("background-color","yellow");  });

          使用以下代码即可在选择元素上绑定一个或多个事件的事件处理函数：

$("p").on("click", function(){  alert( $(this).text() );  });