jQuery遍历 - each() 方法

jQuery对象和DOM对象使用说明

Jquery css元素

默认情况下，jQuery使用$作为自身的快捷方式。

如果有别的js库的时候，可以调用jQuery.noConfict()

也可以再自定义一个jquery的快捷方式：

Var $j = jQuery.noConfict();

汉译：Confict：冲突，加上no就是no冲突

jQuery事件

（1）ready()：在文档加载后激活函数

当DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。 由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。

例子：$(document).ready(function(){

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

    $("p").slideToggle();

  });

});  slideToggle()：是jquery显示和隐藏的一个动画特效，无聊可以尝试

和下面方法一样：

$(function(){

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

    $("p").slideToggle();

  });

})

（2）unbind() ：方法用于移除被选元素的事件

语法：$(selector).unbind(event,function)

Event：可选。规定删除元素的一个或多个事件，由空格分隔多个事件值。如果只规定了该参数，则会删除绑定到指定事件的所有函数。读法：“一问特” 不一定对，我是这么读的

Function：可选。规定从元素的指定事件取消绑定的函数名。

例子：移除所有

元素上的 click 事件：

$("p").unbind("click");

如果不填参数，将删除p元素全部的事件处理  有最新版的为off（3）on()：方法在被选元素及子元素上添加一个或多个事件处理程序。

语法：$(selector).on(event,childSelector,data,function,map)Event：必需。规定要从被选元素移除的一个或多个事件或命名空间。

由空格分隔多个事件值。必须是有效的事件。读法：“一问特” 不一定对，我是这么读的

childSelector：可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的delegate()方法）。

data ：可选。规定传递到函数的额外数据。

Function：可选。规定当事件发生时运行的函数。

Map：规定事件映射({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。例子：向

元素添加 click 事件处理程序：$("p").on("click",function(){

alert("The paragraph was clicked.");

});使用on()代替了之前版本中的bind()、delegate()和live()（4）off()：方法用于移除被选元素的事件

语法：$(selector).off(event,selector,function(eventObj),map)event：必需。规定要从被选元素移除的一个或多个事件或命名空间。

由空格分隔多个事件值。必须是有效的事件。

Selector：可选。规定添加事件处理程序时最初传递给on()方法的选择器。

function(eventObj)：可选。规定当事件发生时运行的函数。

Map：规定事件映射({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

例子：移除所有

元素上的 click 事件：

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

$("p").off("click");

});如果不填参数，将删除p元素全部的事件处理  使用off()替代了之前版本的的unbind()、undelegate()和die()

（5）mouseover()：当鼠标指针位于元素上方时，会发生mouseover事件。

语法：$(selector).mouseover(function)

例子：当鼠标指针位于元素上方时时，改变元素的背景色： $("p").mouseover(function(){

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

 });（6）mouseout()：当鼠标指针从元素上移开时，发生mouseout事件。

语法：$(selector).mouseout(function)

例子：当鼠标从元素上移开时，改变元素的背景色： $("p").mouseout(function(){

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

 });

（7）mousemove()：当鼠标指针在指定的元素中移动时，就会发生mousemove事件。

语法：$(selector).mousemove()

例子：获得鼠标指针在页面中的位置： $(document).mousemove(function(e){

  $("span").text(e.pageX + ", " + e.pageY);

});//小e是window.event

（8）load()：当指定的元素（及子元素）加载完成时，会发生load()事件。语法：$(selector).load(function)例子：当图像加载时，改变div元素的文本： $("img").load(function(){

   $("div").text("Image loaded");

 });注：还存在一个名为load()的 jQuery Ajax 方法，和这个是两码事，根据不同的参数而选择执行哪个。

jQuery遍历

（1）children()

语法：.children(selector)

selector:字符串值，包含匹配元素的选择器表达式。（就是各种条件）

例子：$("div").children(".selected").css("color", "blue");

  找到类名为"selected"的所有 div 的子元素(不包含孙子元素)，并将其设置为蓝色;

如果.children()里参数为空，则将div的所有子元素设置为蓝色

例子：找到类名为"selected"的所有 div 的子元素，并将其设置为蓝色：

  $("div").children(".selected").css("color", "blue");children()方法只考虑子元素而不考虑其它后代元素

（2）find()：获得当前元素集合中每个元素的后代

语法：.find(selector)

例子：$("p").find("span").css('color','red');

搜索所有段落p中的后代 span 元素并将其颜色设置为红色

（3）next()：获得匹配元素集合中每个元素后面的同胞元素

语法：.next(selector)

例子：$(".one").next("div").css("background", "#bbffaa");

改变class为one的下一个同级div元素的背景色为#bbffaa，如果.next()里没有参数，则改变.one的下一个同级元素（4）prev()：获得匹配元素前面紧邻的的同胞元素

语法：.prev(selector)

例子：$(".one").prev("div").css("background", "#bbffaa");

改变class为one的前一个同级div元素的背景色为#bbffaa，如果.prev()里没有参数，则改变.pre的前一个同级元素

（5）nextAll()：获得匹配元素集合中每个元素的所有跟随的同胞元素

语法：.nextAll(selector)

例子：$("#two").nextAll("div").css("background", "#bbffaa");

改变id为two的元素后面所有同级div元素的背景色为#bbffaa，如果.nextAll()里无参，则改变全部

（6）siblings() ：获得匹配集合中每个元素的同胞

语法：.siblings(selector)

例子：$("p").siblings(".selected").css("background", "yellow");

查找全部p元素的所有类名为selected的同级元素将它们的背景色改为黄色

如果不写参数，就是将所有p的同级元素背景色改为黄色$(this).addClass(“current”)//给当前元素添加current样式    .next().show() //下一个元素显示      .parent().siblings().children(“a”).removeClass(“current”)//父元素的兄弟元素的子元素移除current样式

   .next().hide() //它们的下一个元素隐藏（7）parent()：获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。

语法：.parent(selector)只往上寻找一级父元素

例子：查找class为item-a的父元素修改它们的背景色：

$('.item-a').parent().css('background-color', 'red'); 

（8）filter()：方法返回符合一定条件的元素

语法：.filter(selector)

例子：$("div").css("background", "#c8ebcc").filter(".middle")

  .css("border-color", "red");

改变所有div的颜色，然后向类名为 "middle" 的类添加边框

（9）is()：根据选择器、元素或jQuery对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。

语法：.is(selector)

例子：if (.test.is(":hidden")) {}

如果class为test的元素有隐藏不可见的，执行if语句块里面的

jQuery属性操作

（1）Attr(attribute,value)：方法设置或返回被选元素的属性值

语法：$(selector).attr(attribute,value)

Attribute:规定属性的名称

Value :规定属性的值

参数是一个时，是查询属性的值，二个时，则是设置该属性例子：改变图像的width属性：$("button").click(function(){

  $("img").attr("width","180");

});一次设置多个属性：$(“p”).attr({“title”:“123”，“class”：“test”});（2）removeAttr()：方法从被选元素中移除属性。语法：$(selector).removeAttr(attribute)例子：从任何p元素中移除 id 属性：$("button").click(function(){

  $("p").removeAttr("id");

});

（3）addClass()：方法向被选元素添加一个或多个类。如果要移除样式，可以使用与它相反的removeClass()

语法：$(selector).addClass(class)

class：必需。规定一个或多个 class 名称。

例子：当点击按钮时，向第一个p元素添加一个类

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

$("p:first").addClass("类名a");

  });

执行之前：

执行之后：

.类名a{

font-size:120%;

color:red;

}

（3）removeClass()：方法向被选元素删除一个或多个类。

语法：$(selector).removeClass(class)

例子：移除所有

的 "intro" 类： $("button").click(function(){

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

 });

（4）hasClass()：方法检查被选元素是否包含指定的class。语法：$(selector).hasClass(class)例子：检查第一个

元素是否包含 "intro" 类： $("button").click(function(){

   alert($("p:first").hasClass("intro"));

 });jQuery CSS操作

（1）scrollTop()：方法返回或设置匹配元素的滚动条的垂直位置。

如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。

例子：将div的滚动条位置设置到上边距100px那里

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

    $("div").scrollTop(100);

 });

（2）offset()方法：方法返回或设置匹配元素相对于文档的偏移（位置）。

offset()方法返回或设置匹配元素相对于文档的偏移（位置）。

例子： 获取元素P的位置，在span1显示元素p的左边距，span2显示p的上边距

$(document).ready(function(){

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

    x=$("p").offset();

    $("#span1").text(x.left);

    $("#span2").text(x.top);

  });

});

将p的位置设置在上边距100及左边距100那里

x=$("p").offset({top:100,left:100});（单位是px，测试得知：如果加上px，会变的无效）

jQuery文档操作

（1）prepend()：方法在被选元素的开头（仍位于内部）插入指定内容。（创建节点）

还有prependTo()

Selector:选择器

Content:内容、目录

语法：$(selector).prepend(content) content必填

例子：在每个p元素的开头插入内容

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

    $("p").prepend("Hello world! ");

  });

效果：

Hello world!你好

新加的仍然在

标签里

（2）append()：方法在被选元素的结尾（仍然在内部）插入指定内容。还有appendTo()

语法：$(selector).append(content)

例子：在每个p元素的结尾插入内容

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

   $("p").append(" Hello world!");

 });效果：

你好Hello world!

新加的仍然在

标签里

（3）after()：方法在被选元素后插入指定的内容。

还有insertAfter()

语法：$(selector).after(content)

例子：在每个p元素的结尾插入内容

 $("p").after("Hello world!");

效果：

你好

标签里

还有insertBefore()

语法：$(selector).before(content)

例子：在每个p元素的前面插入内容

 $("p").before("Hello world!");

效果：Hello world!

你好

标签里

（5）remove()：方法移除被选元素，包括所有文本和子节点。（删除节点）

语法：$(selector).remove()

例子：移除所有

元素：

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

   $("p").remove();

 });

（6）detach()：detach()方法移除被选元素，包括所有文本和子节点。

这个方法会保留jQuery对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。（只移除了Dom对象里所选择的元素，并没有移除jquery对象里的）

语法：$(selector).detach()

例子：移除所有

元素：

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

   $("p").detach();

 });

（7）empty()：方法从被选元素移除所有内容，包括所有文本和子节点。

保留了元素节点（