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>元素。
AI 代码解读
JQuery属性选择器
JQuery使用XPath表达式选择具有给定属性的元素。
$（“[href]”）选择具有href属性的所有元素。
$（[href=“#]”）选择href值等于“#”的所有元素。
$（[href！='35；']）选择href值不等于'35；'的所有元素。
$（[href$='.JPG']）选择href值以“.JPG”结尾的所有元素。
AI 代码解读
JQuery CSS选择器
jQuery CSS选择器可用于更改HTML元素的CSS属性。
以下示例将所有P元素的背景色更改为红色：
$("p").css("background-color","red");
AI 代码解读
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
$(selector).animate({params},speed,callback);
AI 代码解读
所需的params参数定义了构成动画的CSS属性。
可选速度参数指定效果的持续时间。它可以采用以下值：“慢”、“快”或毫秒。
可选回调参数是动画完成后要执行的函数的名称。
下面的示例演示了animate（）方法的简单应用。它将＜div＞元素向右移动250像素：
$("button").click(function(){
$("div").animate({left:'250px'});
});
AI 代码解读
默认情况下，所有HTML元素都有一个静态位置，不能移动。如果需要更改为，我们需要将元素的位置属性设置为相对、固定或绝对！
jQuery animate() - 操作多个属性
请注意，在动画生成期间可以同时使用多个属性：
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
AI 代码解读
我可以使用animate（）方法来操作所有CSS属性吗？
是的，差不多！但是，需要记住的一点是，在使用animate（）时，所有属性名称都必须使用camel符号。例如，必须使用paddingleft而不是paddingleaft，必须使用marginright而不是marginright，等等。
同时，颜色动画不包括在核心jQuery库中。
如果需要生成彩色动画，则需要从jQuery下载彩色动画插件生成彩色动画。
jQuery animate() - 使用相对值
还可以定义相对值（相对于元素的当前值）。需要在值之前添加+=或-=：
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
AI 代码解读
jQuery 停止动画jQuery stop() 方法
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
jQuery stop（）方法用于在动画或效果完成之前停止它们。
stop（）方法适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。
$(selector).stop(stopAll,goToEnd);
AI 代码解读
可选的stopall参数指定是否应清除动画队列。默认值为false，即仅停止活动动画，并且允许向后执行队列中的任何动画。
可选的gotoend参数指定是否立即完成当前动画。默认值为false。
因此，默认情况下，stop（）清除在选定元素上指定的当前动画。
下面的示例演示了不带参数的stop（）方法：
动画队列停止动画测试，仅停止当前正在进行的动画。停止当前动画后，队列中的下一个动画开始：
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
$("#panel").slideUp(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
AI 代码解读
