jquery对象介绍及一些jquery小特效

一.jquery对象的介绍。

引入jquery库后，通过形如$("#id")的方式得到的对象叫做jquery对象。如var $uu = $("#username");

jquery对象和dom对象不一样，一般的，为了方便同dom对象区分，将jquery对象赋值给变量时，通常让这个变量名以$开始，如上面的$u1，这样一看就知道它是jquery对象了。

jquery对象与dom对象的区别与联系：

先讲dom对象，dom对象是浏览器自带对象(不用引入任何js库，就可以用var username = document.getElementById("username");来获取id属性设为username的元素，也叫dom对象)，dom对象只能调用dom对象相关的属性和方法，不能调用jquery对象的相关的属性和方法。

jquery对象是jquery库独有的，也只能调用jquery对象相关的属性和方法，不能调用dom对象相关的属性和方法。

jquery对象和dom对象是可以互转的：

由dom对象获得jquery对象，只需用jquery()或者$()包裹dom对象即可，一般选用后一种方式包裹，简单些。如下：

var $u2 = jquery(username);

或者

var $u3 = $(username);

由jquery对象获得dom对象，如下：

var username = $uu[0];

也就是说jquery对象是一个数组，里面元素就是dom对象。可以通过$uu.length来获取此数组的长度。

二.一些常用的jquery特效：

1.隐藏、显示某元素，hide()、show()方法：

$("#one").hide();　　//隐藏id为one的盒子，底层是设置了display为none;

$("#one").show();　　//显示id为one的盒子，底层是设置了display为block;

还可以往方法中传递一个时间参数，以毫秒为单位，表示多少时间内隐藏、显示：

$("#one").hide(3000);　　//3s内隐藏id为one的盒子，效果是在这3s内指定的盒子慢慢缩小，直至不见

$("#one").show(3000);　　//3s内显示id为one的盒子，效果是在这3s内指定的盒子慢慢变大，直至样式指定的大小

2.淡入淡出，让某盒子慢慢退掉颜色、显示颜色，fadeOut()、fadeIn()方法：

$("#one").fadeOut();　　//让id为one的盒子的背景色慢慢褪去，最后盒子消失，display为none

$("#one").fadeIn();　　//让id为one的盒子的背景色慢慢恢复

同理，如果往fadeOut()、fadeIn()方法中传入一个时间参数，则表示在多少时间之内完成以上操作。

3.滑动解锁，slideUp()、slideDown()方法：

$("#one").slideUp();　　//盒子上滑收缩隐藏

$("#one").slideDown();　　//盒子下滑恢复显示

同理，如果往slideUp()、slideDown()方法中传入一个时间参数，则表示在多少时间之内完成以上操作。

4.执行动画，animate()方法，用法：animate({" ":" "})，大括号里面数据是json格式，键值都要用双引号括住：

$("#one").animate({"margin-left":"300px"});　　//让盒子往右300px

$("#one").animate({"margin-left":"300px"},3000);　　//3s内让盒子往右300px

$("#one").animate({"padding":"30px"});　　//让盒子变大60px