jQuery基础复习篇

一  jQuery效果

1⃣️效果

常见的效果设置有隐藏与显示效果(hide, show, toggle)如$("p").hide(speed, callback)；还有淡入淡出效果(fadeIn, fadeOut, fadeToggle, fadeTo),其中fadeTo可以淡入到给定的透明度，$(selector).fadeTo(speed,opacity,callback)。有上下滑动的效果(slideUp, slideDown, slideToggle), 用法同上。jquery的动画可用animate实现，语法如下：$(selector).animate({params},speed,callback);而stop方法则可以停止动画。

2⃣️回调与链接

由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。为了避免这个情况，可以以参数的形式添加 Callback 函数。如下：

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

我们常常是一次写一条 jQuery 语句（一条接着另一条），有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。如：$("#p1").css("color","red").slideUp(2000).slideDown(2000)。

二 jQuery操作html

1⃣️常见方法

常见的有text(), html(), val(),分别用来设置或返回文本内容，带有标签的元素内容以及表单字段的值，还有attr()方法用来操作属性。

2⃣️添加与删除元素

添加元素有append()， prepend(), after(), before()等方法，分别用来在被选元素的结尾，开头，后面，前面插入内容，这些方法都可以接受多个元素，如$("#test").append(text1, text2, text3)。

删除元素有remove(), empty()方法，分别是用来呢删除该元素及其子元素和只删除其子元素的方法。remove()方法可以接受参数进行过滤，如$("div").remove(".test")。

3⃣️设置css类

 jQuery可添加类，删除类，有addClass(), removeClass(), toggleClass()方法，还有css()方法可用来返回或设置属性，如$(".test").css("background-color") ；$("p").css({"background-color":"yellow","font-size":"200%"})。

4⃣️尺寸

可使用的方法有width(), height()这两个方法可以获得元素的实际宽度和高度（不包括内边距，边框，外边距），也可以使用这两个方法获取文档或者窗口的宽高，如$(window).width()，并可以此方法来设置元素宽高。还有innerHeight(), innerWidth()方法，可以返回元素带有内边距的宽高，outerWidth(), outerHeight()返回带有内边距以及边框的宽高，outerWidth(true), outerHeight(true)返回带有内边距，边框，外边距的宽度和高度。

三 jQuery遍历

1⃣️祖先元素：parent()方法获得直接父元素， parents()方法获取所有祖先元素，parents("ul")是对所有祖先元素进行筛选获取其中的ul元素，parentsUntil()是获取介于两个元素中间的所有祖先元素，如$("span").parentsUntil("div")。

2⃣️后代元素：children()返回该元素的直接子元素，find()方法返回所有后代元素，可在括号中添加选择器以对后代元素进行筛选。

3⃣️同胞元素：siblings()返回被选元素的所有同胞元素，常用的还有next(), nextAll(), nextUntil(), prev(), prevAll(), preUntil()。

4⃣️过滤：first(), last(), eq(), filter(), not()方法实现。

四  jQuery与Ajax

load()方法，举例如下：$(selector).load(URL,data,callback)，其中data是跟随url一起传给后台的参数。

get()方法：$.get(URL,callback)。

post方法：$.post(URL,data,callback)，其中data是要传给后台的数据，post方法可以传送大量的数据，而get方法只能传送少量的参数。这里还有很多种方法，最为常用的就是get(), post()以及通用的ajax方法。