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

    比较以下几个概念

名称	说明	举例
height( )	取得第一个匹配元素当前计算的高度值（px）。	获取第一段的高:  $("p").height();
height( val )	为每个匹配的元素设置CSS高度(hidth)属性的值。如果没有明确指定单位（如：em或%），使用px。	把所有段落的高设为 20:  $("p").height(20);
width( )	取得第一个匹配元素当前计算的宽度值（px）。	获取第一段宽: $("p").width();
width( val )	为每个匹配的元素设置CSS宽度(width)属性的值,如果没有明确指定单位如：em或%使用px。	将所有段落的宽设为 20:  $("p").width(20);
innerHeight( )	获取第一个匹配元素内部区域高度(包括补白、不包括边框)此方法对可见和隐藏元素均有效。
innerWidth( )	获取第一个匹配元素内部区域宽度(包括补白、不包括边框),此方法对可见和隐藏元素均有效。
outerHeight( [margin] )	获取第一个匹配元素外部高度(默认包括补白和边框),此方法对可见和隐藏元素均有效。
outerWidth( [margin] )	获取第一个匹配元素外部宽度(默认包括补白和边框)，此方法对可见和隐藏元素均有效。

    如图所示

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() );
});

    jQuery中的常用效果

    jQuery广泛使用的另外一个原因就是其易使用、效果绚丽的用户交互。

名称	说明	举例
show([speed,[easing],[fn]])	显示隐藏的匹配元素。	$("p").show("fast");
hide([speed,[easing],[fn]])	隐藏显示的元素	$("p").hide("slow");
toggle([speed],[easing],[fn])	用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。	$("p").toggle("slow");
slideDown([speed],[easing],[fn])	通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来	$(".btn2").click(function(){ $("p").slideDown(); });
slideUp([speed,[easing],[fn]])	通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。	$("p").slideUp("slow");
animate(params,[speed],[easing],[fn])	用于创建自定义动画的函数	$("#go").click(function(){ $("#block").animate({ width: "90%", fontSize: "10em" }, 1000 ); });

    jQuery中的ajax

     这个 会在稍候学习后再贴出来， jQuery内容不止这些，更多的内容还有待在实践中锻炼，稍候会编写几个简单的jQuery实例，在实践中运用jQuery。