JQuery笔记流

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery 动画 - animate() 方法

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

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

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

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

默认地，所有 HTML 元素都有一个静态位置，且无法移动。

注意：如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

可操作多个属性：

比如：

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

队列化：

比如：

$("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() 方法

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

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

语法

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

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

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

jQuery 方法链接

jquery有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

例如：

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

jQuery 添加元素

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

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

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

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

jQuery 删除元素

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

2.jQuery empty() 方法删除被选元素的子元素。

过滤被删除的元素

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

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

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

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

jQuery操作css

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

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

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

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

比如下列是我们的css类

.important{font-weight:bold;font-size:xx-large;}.blue{color:blue;}

下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：

$("button").click(function(){  $("h1,h2,p").addClass("blue");  $("div").addClass("important");});

其他的同理。