JQuery 选择器

前面我展示了一些如何选择 HTML 元素的示例。关键是要了解 jQuery 选择器如何准确地选择要应用效果的元素。jQuery 元素选择器和属性选择器允许按标记名、属性名或内容选择 HTML 元素。选择器允许操作 HTML 元素组或单个元素。在 HTML DOM 术语中：

选择器允许您操作 DOM 元素组或单个 DOM 节点。

JQuery 元素选择器

JQuery 使用 CSS 选择器选择 HTML 元素。

$（“P”）选择＜P＞元素。$（“p.intro”）选择class=“intro”的所有<p>元素。$（“P#demo”）选择id=“demo”的所有<P>元素。

JQuery 属性选择器

JQuery 使用 XPath 表达式选择具有给定属性的元素。

$（“[href]”）选择具有href属性的所有元素。$（[href=“#]”）选择href值等于“#”的所有元素。$（[href！='35；']）选择href值不等于'35；'的所有元素。$（[href$='.JPG']）选择href值以“.JPG”结尾的所有元素。

JQuery CSS 选择器

jQuery CSS 选择器可用于更改 HTML 元素的 CSS 属性。以下示例将所有 P 元素的背景色更改为红色：

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

jQuery 动画 - animate() 方法

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

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

所需的 params 参数定义了构成动画的 CSS 属性。可选速度参数指定效果的持续时间。它可以采用以下值：“慢”、“快”或毫秒。可选回调参数是动画完成后要执行的函数的名称。下面的示例演示了 animate（）方法的简单应用。它将＜div＞元素向右移动 250 像素：

$("button").click(function(){  $("div").animate({left:'250px'});});

默认情况下，所有 HTML 元素都有一个静态位置，不能移动。如果需要更改为，我们需要将元素的位置属性设置为相对、固定或绝对！

jQuery animate() - 操作多个属性

请注意，在动画生成期间可以同时使用多个属性：

$("button").click(function(){  $("div").animate({    left:'250px',    opacity:'0.5',    height:'150px',    width:'150px'  });});

我可以使用 animate（）方法来操作所有 CSS 属性吗？

是的，差不多！但是，需要记住的一点是，在使用 animate（）时，所有属性名称都必须使用 camel 符号。例如，必须使用 paddingleft 而不是 paddingleaft，必须使用 marginright 而不是 marginright，等等。同时，颜色动画不包括在核心 jQuery 库中。如果需要生成彩色动画，则需要从 jQuery 下载彩色动画插件生成彩色动画。

jQuery animate() - 使用相对值

还可以定义相对值（相对于元素的当前值）。需要在值之前添加+=或-=：

$("button").click(function(){  $("div").animate({    left:'250px',    height:'+=150px',    width:'+=150px'  });});

jQuery 停止动画 jQuery stop() 方法

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。jQuery stop（）方法用于在动画或效果完成之前停止它们。stop（）方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd);

可选的 stopall 参数指定是否应清除动画队列。默认值为 false，即仅停止活动动画，并且允许向后执行队列中的任何动画。可选的 gotoend 参数指定是否立即完成当前动画。默认值为 false。因此，默认情况下，stop（）清除在选定元素上指定的当前动画。下面的示例演示了不带参数的 stop（）方法：

动画队列停止动画测试，仅停止当前正在进行的动画。停止当前动画后，队列中的下一个动画开始：

$(document).ready(function(){  $("#flip").click(function(){    $("#panel").slideDown(5000);    $("#panel").slideUp(5000);  });  $("#stop").click(function(){    $("#panel").stop();  });});