Jquery基础---w3cschool

========================================================2017-03-29

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

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

$("button").click(function(){

$("p").toggle();

});

可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素.

淡入淡出：

JQueryObject.fadeOut();用于淡入已隐藏的元素。

语法:

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeIn() ;

$("button").click(function(){

$("#div1").fadeIn();

$("#div2").fadeIn("slow");

$("#div3").fadeIn(3000);

});

jQueryObject.fadeOut(); 方法用于淡出可见元素。

jQueryObject.fadeToggle(); fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

jQueryObject.fadeTo(); 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。（颜色变淡）

=================================2017-03-30

【【滑动】】

jQuery 拥有以下滑动方法：

jQueryObject.slideDown(); 用于向下滑动元素。

语法：

$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideDown() 方法：

$("#flip").click(function(){

$("#panel").slideDown();

});

jQueryObject.slideUp(); 用于向上滑动元素。

jQueryObject.slideToggle(); 可以在 slideDown() 与 slideUp() 方法之间进行切换。

jQuery 效果 - 动画

animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：

【提醒】默认地，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

--不透明级别：opacity:0.5;

[请注意，生成动画的过程中可同时使用多个属性：]

$("button").click(function(){

$("div").animate({

left:'250px',

opacity:'0.5',

height:'150px',

width:'150px'

});

});

【注意】当使用 animate() 时，必须使用 Camel(驼峰标记法) 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

--也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

$("button").click(function(){

$("div").animate({

left:'250px',

height:'+=150px',

width:'+=150px'

});

});

jQuery animate() - 使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

$("button").click(function(){

$("div").animate({

left:'250px',

height:'+=150px',

width:'+=150px'

});

});

jQuery animate() - 使用预定义的值

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

$("button").click(function(){

$("div").animate({

height:'toggle'

});

});

jQuery animate() - 使用队列功能

默认地，jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

$("button").click(function(){

var div=$("div");

div.animate({height:'300px',opacity:'0.4'},"slow");

div.animate({width:'300px',opacity:'0.8'},"slow");

div.animate({height:'100px',opacity:'0.4'},"slow");

div.animate({width:'100px',opacity:'0.8'},"slow");

});

【【停止动画】】

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

$(selector).stop(); //不带参数

$(selector).stop(stopAll,goToEnd); //带参数

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

$("#stop").click(function(){

$("#panel").stop();

});

【【jQuery - Chaining】】

Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

当进行链接时，代码行会变得很差。不过，jQuery 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进。

$("#p1").css("color","red")

.slideUp(2000)

.slideDown(2000);

【【jQuery - 获得内容和属性】】

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

$("#btn1").click(function(){

alert("Text: " + $("#test").text());

});

$("#btn2").click(function(){

alert("HTML: " + $("#test").html());

});

$("#btn1").click(function(){

alert("Value: " + $("#test").val());

});

--jQuery attr() 方法用于获取属性值

$("button").click(function(){

alert($("a").attr("href"));

});

【【设置内容 - text()、html() 以及 val()】】

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

--text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html()：

$("#btn1").click(function(){

$("#test1").text(function(i,origText){

return "Old text: " + origText + " New text: Hello world!

(index: " + i + ")";

});

});

$("#btn2").click(function(){

$("#test2").html(function(i,origText){

return "Old html: " + origText + " New html: Hello <b>world!</b>

(index: " + i + ")";

});

});

使用过程中参数i,origText照写，origText随便写，自动识别为被选元素下标和原始值

--jQuery attr() 方法也用于设置/改变属性值。

$("button").click(function(){

$("#w3s").attr(

"href","http://www.w3school.com.cn/jquery",

"title","这是百度的链接"

);

}); attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

$("button").click(function(){

$("#w3s").attr("href", function(i,origValue){

return origValue + "/jquery";

});

});

【【jQuery - 添加元素】】

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

$("p").append("Some appended text.");

$("p").prepend("Some prepended text.");

通过 append() 和 prepend() 方法添加若干新元素

function appendText()

{

var txt1="<p>Text.</p>"; // 以 HTML 创建新元素

var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素

var txt3=document.createElement("p"); // 以 DOM 创建新元素

txt3.innerHTML="Text.";

$("p").append(txt1,txt2,txt3); // 追加新元素

}

【注意】

append实在当前元素内部最后边插入元素

after是在当前元素后面外插入元素

【【jQuery - 删除元素】】

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

$("#div1").empty();

$("p").remove(".italic");

--jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素：

$("p").remove(".italic");

【【jQuery - 获取并设置 CSS 类】】

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

您也可以在 addClass() 方法中规定多个类：

$("button").click(function(){

$("#div1").addClass("important blue");

});

不同的元素中删除指定的 class 属性：

$("button").click(function(){

$("h1,h2,p").removeClass("blue");

});

如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：

$("button").click(function(){

$("h1,h2,p").toggleClass("blue");

});

【【jQuery - css() 方法】】

css() 方法设置或返回被选元素的一个或多个样式属性。

$("p").css("background-color");

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

$("p").css("background-color","yellow");

如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

例如：

$("p").css({"background-color":"yellow","font-size":"200%"});//注意设置多个css属性要用{}括起来

【【jQuery - 尺寸】】

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

举例：

$("button").click(function(){

var txt="";

txt+="Outer width: " + $("#div1").outerWidth() + "</br>";

txt+="Outer height: " + $("#div1").outerHeight();

$("#div1").html(txt);

});

--设置指定的 <div> 元素的宽度和高度：

$("button").click(function(){

$("#div1").width(500).height(500);

});

【【jQuery 遍历】】

--parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。

下面的例子返回每个 <span> 元素的的直接父元素：

$(document).ready(function(){

$("span").parent();

});

--parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

$(document).ready(function(){

$("span").parents();

});

使用可选参数来过滤对祖先元素的搜索。

$(document).ready(function(){

$("span").parents("ul");

});

--parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

$(document).ready(function(){

$("span").parentsUntil("div");

});

【【jQuery 遍历 - 后代】】

用于向下遍历 DOM 树的 jQuery 方法：

children()

find()

children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。

$(document).ready(function(){

$("div").children().css({"color":"red","border":"solid red"});

});

下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：

$(document).ready(function(){

$("div").children("p.1");

});

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

$(document).ready(function(){

$("div").find("span");

});

【【jQuery 遍历 - 同胞】】

有许多有用的方法让我们在 DOM 树进行水平遍历：

siblings()

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

--jQuery siblings() 方法

siblings() 方法返回被选元素的所有同胞元素。

下面的例子返回 <h2> 的所有同胞元素：

$(document).ready(function(){

$("h2").siblings();

});

您也可以使用可选参数来过滤对同胞元素的搜索。

$(document).ready(function(){

$("h2").siblings("p");

});

--next() 方法返回被选元素的下一个同胞元素。

该方法只返回一个元素。

下面的例子返回 <h2> 的下一个同胞元素：

$(document).ready(function(){

$("h2").next();

});

--nextAll() 方法返回被选元素的所有跟随的同胞元素

$(document).ready(function(){

$("h2").nextAll();

});

--jQuery nextUntil() 方法

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：

$(document).ready(function(){

$("h2").nextUntil("h6");

});

--prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

【【jQuery 遍历 - 过滤】】

缩写搜索元素的范围

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

--jQuery last() 方法

last() 方法返回被选元素的最后一个元素。

下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素：

$(document).ready(function(){

$("div p").last();

});

--jQuery eq() 方法

eq() 方法返回被选元素中带有指定索引号的元素。

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：

$(document).ready(function(){

$("p").eq(1);

});

--filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

下面的例子返回带有类名 "intro" 的所有 <p> 元素：

$(document).ready(function(){

$("p").filter(".intro");

});

--not() 方法返回不匹配标准的所有元素。

提示：not() 方法与 filter() 相反。

下面的例子返回不带有类名 "intro" 的所有 <p> 元素：

$(document).ready(function(){

$("p").not(".intro");

});