Jquery中对数组的操作代码
字体：[ ] 类型：转载 时间：
众所周知，Jquery是对JavaScript的一种高效的封装，所以Jquery要操作的数组即是JavaScript中的数组，在 JavaScript中我们使用for以及for-in进行数组的操作
而在Jquery中则使用$.map()、$.each()来操作数组： 首先是普通的数组（索引为整数的数组）：
代码如下: $.map(arr,fn); 对数组中的每个元素调用fn函数逐个进行处理，fn函数将处理返回最后得到的一个新的数组 var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1]; var newarr = $.map(arr, function(item) {return item*2 }); alert(newarr); $.each(array,fn)对数组array每个元素调用fn函数进行处理，没有返回值 var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1]; $.each(arr, function(key, value) { alert("key:" + key + "value:" + value); }); 还可以省略function的参数，这个时候this可以得到遍历的当前元素的值 var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1]; $.each(arr, function() { alert(this); });
然后是索引为字符串的 键值对数组，针对这类数组， 一般采用$.each(array,fn)来操作： var arr = { "jim": "11", "tom": "12", "lilei": "13" }; $.each(arr, function(key, value) { alert("姓名："+key+"年龄："+value); }); 当然也可以使用无参的的function进行遍历； 当这类数据从服务器端获取时可以如下进行： 服务器端：
代码如下: &%@ WebHandler Language="C#" Class="Handler" %& using S using System.W using System.Web.Script.S using System.Collections.G public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; Person p1 = new Person { Age = "22", Name = "tom" }; Person p2 = new Person { Age = "23", Name = "jim" }; Person p3 = new Person { Age = "24", Name = "lilei" }; IList&Person& persons = new List&Person& {p1,p2,p3}; JavaScriptSerializer js = new JavaScriptSerializer(); string s= js.Serialize(persons); context.Response.Write(s); } public class Person { public string Name { } public string Age { } } public bool IsReusable { get {
先实例化了三个person对象，然后放到一个集合中，最后把这个集合序列化成字符串流到客户端； 客户端： 客户端通过$.parseJSON（）将后台传递过来的字符串转化为js数组对象，接下来我们就使用操作普通数组的方式来操作这个得到的数组 第三种就是通过标签选择器获取的Jquery对象数组，
代码如下: &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& &html xmlns="http://www.w3.org/1999/xhtml"& &head& &title&&/title& &script src="../myjs/jquery-1.4.2.js" type="text/javascript"&&/script& &script type ="text/javascript" & $(function() { $("p").text("这是p标签"); }); &/script& &/head& &body& &p&&/p& &p&&/p& &p&&/p& &p&&/p& &p&&/p& &p&&/p& &/body& &/html&
在浏览器中运行的效果为： 在dom加载完成后为每一个p元素动态的添加了文本，首先$("p")获取p标签的集合，相当于Javascript中的 document.getElementByTagName只是这里得到的是Jquery对象的数组，这样就有了Jquery固有的隐式迭代的功能，后面的text("这是p标签")的操作就迭代到了每一个P标签上，我们也可以显示的调用each函数来显示的迭代获得的Jquery对象数组,下面的代码同样可以实现上面的效果:
代码如下: &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& &html xmlns="http://www.w3.org/1999/xhtml"& &head& &title&&/title& &script src="../myjs/jquery-1.4.2.js" type="text/javascript"&&/script& &script type ="text/javascript" & $(function() { $("p").each(function() { $(this).text("这是p标签"); }); }); &/script& &/head& &body& &p&&/p& &p&&/p& &p&&/p& &p&&/p& &p&&/p& &p&&/p& &/body& &/html&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具正文 Jquery中DOM操作方法
Jquery中DOM操作方法
发布时间： & 编辑：
本文介绍了jquery中有关dom元素的操作方法，包括查找dom元素节点、创建节点、插入节点等操作，有需要的朋友参考下。
append()&&& 向每个匹配的元素内部追加内容
appendTo()&&&&& 与上诉追加相反
Perpend()&&&&& 向每个匹配的元素内容前置内容&&&
perpendTo()&&& 与上诉前置内容相反
After()&&&&&&&&& 在每个匹配的元素之后插入内容
inserAfter()&&&&& 与上诉插入相反
Before()&&&&&&&&& 在每个匹配的元素之前插入内容
Insertbefore()&&&&& 与上诉插入相反
四、删除节点
复制代码 代码示例:
remove()&&&&& 从DOM中删除所有匹配的元素，其后面的子节点也将同时删除 ， 也可以设置其参数进行有选择性的删除
detach()&&&&& 跟remove()不同的是，所有绑定的事件、附加的数据都会保留下来
empty()&&&&& 并不是删除节点，而是清空节点。，也能清空所有后代的子节点。
五、复制节点
（通过鼠标拖动商品并将其放到购物车中）商品拖动就是用的复制节点
Clone() 复制节点后，被复制的新元素并不具有任何行为，如果需要新元素也具有复制功能，可以使用clone(true)
六、替换节点
复制代码 代码示例:
replacewith()&& 将所有匹配的元素都替换成指定的HTML或DOM元素
replaceaAll()&& 与上诉方法作用相同，只是颠倒了replaceWith()的操作。
七、包裹节点
wrapAll() \ wrap()
将所有匹配的元素用一个元素来包裹，wrap()方法是将所有的元素进行单独的包裹。
wrapInner()方法
将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。
1获取属性和设置属性
获取& attr(name);
设置单个属性值& atrr(name,value) ;
设置多个属性值& attri(name:value ,name:value) ;
2 删除属性
removeAttr(name)&
& 1获取样式和设置样式
可以使用attr()来获取样式和设置样式
& $(&p&).attr(&class&)&&&&
& $(&p&).attr(&class&,&hight&)&&&
& 2追加样式
addClass()
多次使用addClass()样式，不会覆盖其原先的样式。使用attr()方法会覆盖其原先的样式
& 3删除样式
removeClass(name) ,如果不带任何参数则就删除其所有的样式
& 4切换样式
Toggle()方法主要是控制行为上的重复切换。
toggleClass()方法控制样式上的重复切换
5，判断是否含有某个样式
hasClass()可以用来判断元素是否含有某个class，如有，则返回TRUE，否则为FALSE
$(&p&).hasClass(&another&)&& 等价于 $(&p&).is(&.another&);&
设置和获取HTML、文本 和值
html() 用来读取或者设置某个元素中的HTML内容，设置时只需在括号里写入值即可
text()& 用来读取或者设置某个元素中的TEXT内容，设置时只需在括号里写入值即可
val()& 此方法类似JavaScript中的value属性，用来设置和获取元素的值，无论元素是文本框，还是下拉列表还是单选框，都可以返回元素的值，如果元素是多选，则返回一个包含所有选择的值的数组& 设置时只需在括号里写入值即可
复制代码 代码示例:
children() 获得子元素
next()& 后面紧邻的同辈元素
prev()& 前面紧邻的同辈元素
siblings() 前后所有的同辈元素
closest()& 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素
parent(),parents(),closest()之间的区别
parent()&&& 获得集合中每个匹配元素的父级元素
Parents()&&& 获得集合中每个匹配元素的祖先元素
CSS-DOM操作
Css()方法获取元素的样式属性& 如 $(&p&).css(&color&);
也可以通过css()设置某个元素的单个样式 如$(&p&).css(&color&,&red&);
也可以同时设置多个样式属性 如$(&p&).css({&color&:&red& ,&fontSize&,&30px&});
设置透明度&&& $(&p&).css(&opacity&,&0.5&);
可以通过height()方法获取元素高度。 它的作用是取得匹配元素当前计算的高度值
Css()获取的高度跟样式有关，但是height()获取的高度跟样式设置无关的，是元素在页面中的实际高度
通过width()方法取得匹配元素的宽度值
1offset()方法 获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效
position()方法 获取元素相对于最近的一个position样式属性设置为relative或者absolute的父节点的相对偏移，其中返回的对象包含两个属性，即top和left
scrollTop()方法和scrollLeft()方法
获取元素的滚动条距顶端和距左端的距离。
另外，可以为这两个方法指定一个参数，控制参数的滚动条到指定位置。
Jquery事件绑定类型比普通的JavaScript事件绑定类型少了&on&.您可能感兴趣的文章：jQuery - 操作DOM元素的属性_百度文库DOM(Document Object Model—文档对象模型)：一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类　　核心-DOM: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML　　HTML-DOM：使用 JavaScript 和 DOM 为 HTML 文件编写脚本时,　有许多专属于 HTML-DOM 的属性，例如：divElement.innerHTML=“哈哈”　　CSS-DOM：针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属性，例如imgElement.style.visibiliby=“hidden”jQuery提供DOM操作的API　　each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象
&script type="text/javascript"&
//用JS语法创建一个一维数组，存入string类型的姓名，再迭代（迭代方式一）
var nameArray = new Array("哈哈", "呵呵", "嘻嘻");
for ( var i = <span style="background-color: #f5f5f5; color: #; i & nameArray. i++) {
document.write(nameArray[i] + "&br/&");
//用JSON语法创建一个一维数组，存入string类型的姓名，再迭代（迭代方式二）
var nameArray = [ "哈哈", "呵呵", "嘻嘻", "都都" ];//js对象
var $nameArray = $(nameArray);//jquery对象
$nameArray.each(function() {
//this表示数组中每一个元素，this属性js对象，this代表string类型
alert(this);
//用JSON语法创建一个一维数组，存入object类型的姓名和薪水，再迭代
var nameArray = [ {
name : "哈哈",
sal : <span style="background-color: #f5f5f5; color: #00
name : "嘿嘿",
sal : <span style="background-color: #f5f5f5; color: #00
name : "笨笨",
sal : <span style="background-color: #f5f5f5; color: #00
var $nameArray = $(nameArray);
$nameArray.each(function() {
//this代表object类型
alert(this.name + ":" + this.sal);
　　append(content) :向每个匹配的元素的内部的结尾处追加内容　　prepend(content):向每个匹配的元素的内部的开始处插入内容（父子关系）　　after(content) ：在每个匹配的元素之后插入内容，例如A.after(B)，即B在后　　before(content)：在每个匹配的元素之前插入内容 ，例如A.before(B)，即B在前（兄弟关系）
&li&第一项&/li&
&li&第二项&/li&
&li&第三项&/li&
&div&这是子元素，要插入到父元素内&/div&
&script type="text/javascript"&
//DIV标签插入到(&li&第三项&/li&)标签之后
$("ul").append($("div"));
//DIV标签插入到(&li&第一项&/li&)标签之前
$("ul").prepend($("div"));
//DIV标签插入到UL标签之后
$("ul").after($("div"));
//DIV标签插入到UL标签之前
$("ul").before($("div"));
　　attr(name)：获取属性值
　　attr(name,value)：给符合条件的标签添加key-value属性对
&td&&input type="text" name="username" value="张三" /&&/td&
&td&&input type="password" name="password" value="123456" /&&/td&
&script type="text/javascript"&
//取得form里第一个input元素的type属性
alert($("form input:first").attr("type"));
//设置form里最后个input元素的为只读文本框
//$(":password").attr("readonly","readonly")也可以
$("form input:last").attr("readonly", "readonly")
　　$("&div id='xxID'&HTML代码&/div&")：创建元素，属性，文本
　　remove()：删除自已及其后代节点
&ul id="a"&
&li&第一项&/li&
&li id="secondID"&第二项&/li&
&li&第三项&/li&
&script type="text/javascript"&
//创建div元素，添加"哈哈"文本，ID属性，并添加到文档中,即&body&&div id="2015"&哈哈&/div&&/body&
var divElement = document.createElement("div");
divElement.innerHTML = "哈哈哈";
divElement.setAttribute("id", "<span style="background-color: #f5f5f5; color: #15");
divElement.id = "<span style="background-color: #f5f5f5; color: #15";
document.body.appendChild(divElement);
//jquery方式
var $div = $("&div id='2015'&哈哈哈哈哈&/div&");
//$(document.body).append( $div );
$("body").append($div);
//删除ID为secondID的LI元素
$("#secondID").remove();
//删除所有LI元素
$("#a li").remove();
//删除UL元素及其子元素
$("#a").remove();
　　val()：获取value属性的值
　　val("")：设置value属性值，""为空串，相当于清空
　　text()：获取HTML或XML标签之间的值
　　text("")：设置HTML或XML标签之间的值为""空串
&select id="city"&
&option value="帝都"&北京&/option&
&script type="text/javascript"&
//取得&option value="帝都"&北京&/option&中的内容
alert( $("#city").text() );//北京
alert( $("#city option").text() );//北京
alert( $("#city").html() );//&option value="帝都"&北京&/option&
alert( $("#city option").val() );//帝都
//修改text和value
$("#city option").text("上海");
$("#city option").val("魔都");
alert( $("#city option").text() );//上海
alert( $("#city option").val() );//魔都
　　clone()：只复制样式，不复制行为
　　clone(true)：既复制样式，又复制行为　　replaceWith()：替代原来的节点
　　removeAttr()：删除已存在的属性
&input type="button" value="原按钮" /&
&div style="width:500height:23px" align="right"&双击会被替换成文本框,单击改变位置&/div&
&script type="text/javascript"&
//为原input元素动态添加单击事件，且复制原input元素，
var $old = $(":button");
$old.click(function() {
$("body").append($("&div id='2015'&哈哈哈哈哈&/div&"));
//复制原input元素，添加到原input元素后，与其同级
var $old = $(":button");
var $new = $(":button").clone();//无点击事件
$new.val("新按钮1");
$old.after($new);
//添加到原input元素后，与其同级，且和原按钮有一样的行为
var $new = $old.clone(true);//有点击事件
$new.val("新按钮2");
$old.after($new);
//双击&div&中的文本，用文本框替换文本
$("div").dblclick(
function() {
var $text = $("&input type='text' style='width:165height:23px'/&");
//文本框替代div标签
$(this).replaceWith($text);
//单击改变&div&中的文本
$("div").click(
function() {
$(this).removeAttr("align");
　　addClass()：增加已存在的样式
　　removeClass()：删除已存在的样式
　　hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式
　　toggleClass()：如果标签有样式就删除，否则增加样式
&style type="text/css"&
　　.myClass {
　　font-size: 30px;
　　color: red
&div&无样式&/div&
&div class="myClass"&有样式&/div&
&script type="text/javascript"&
//为无样式的DIV添加样式
$("div:first").addClass("myClass");
//为有样式的DIV删除样式
$("div:last").removeClass("myClass");
//切换样式，即有样式的变成无样式，无样式的变成有样式
$("div").toggleClass("myClass");
//最后一个DIV是否有样式
var flag = $("div:last").hasClass("myClass");
alert(flag ? "有样式" : "无样式");
　　offset()：获取对象的left和top坐标
　　offset({top:100,left:200})：将对象直接定位到指定的left和top坐标　　width()：获取对象的宽
　　width(300)：设置对象的宽
　　height()：获取对象的高
　　height(500)：设置对象的高
&img src="../images/zgl.jpg" /&
&script type="text/javascript"&
//获取图片的坐标
var offset = $("img").offset();
var x = offset.
var y = offset.
alert(x+":"+y);
//设置图片的坐标
$("img").offset({
top:<span style="background-color: #f5f5f5; color: #0,
left:<span style="background-color: #f5f5f5; color: #0
//获取图片的宽高
var w = $("img").width();
var h = $("img").height();
alert(w+":"+h);
//设置图片的宽高
$("img").width(<span style="background-color: #f5f5f5; color: #0);
$("img").height(<span style="background-color: #f5f5f5; color: #0);
　　children()：只查询子节点，不含后代节点（多个）
　　next()：下一个兄弟节点（一个）
　　prev()：上一个兄弟节点（一个）
　　siblings()：上下兄弟节点（多个）
&span&Span&/span&
&p&Hello&/p&
&span& Hello Again &b& Bold &/b& &/span&
&p&And Again&/p&
&span&And Span&/span&
&script type="text/javascript"&
//取得div元素的直接子元素内容，不含后代元素
alert($("div").children().size());//<span style="background-color: #f5f5f5; color: #
//取得div元素的下一个同级的兄弟元素内容
var $p = $("div").next();
alert($p.text());//And Again
//取得div元素的上一个同级的兄弟元素内容
alert($("div").prev().size());//<span style="background-color: #f5f5f5; color: #
//依次取得div元素的上下一个同级的所有兄弟元素的内容
var $all = $("div").siblings("p");
$all.each(function() {
alert($(this).html());//p1 Hello And Again
　　show()：显示对象
　　hide()：隐藏对象　　fadeIn()：淡入显示对象
　　fadeOut()：淡出隐藏对象
&img src="../images/zgl.jpg" /&
&script type="text/javascript"&
//图片隐蔽
$("img").hide(<span style="background-color: #f5f5f5; color: #00);
$("img").show(<span style="background-color: #f5f5f5; color: #00);
//淡出隐蔽图片
$("img").fadeOut(<span style="background-color: #f5f5f5; color: #00);
//淡入显示图片
$("img").fadeIn(<span style="background-color: #f5f5f5; color: #00);
　　slideUp()：向上滑动
　　slideDown()：向下滑动
　　slideToggle()：上下切换滑动，速度快点
&div id="div1"&
111111&br /& 111111&br /& 111111&br /&
&input id="but1" type="button" value="上移动" /&
&input id="but2" type="button" value="下移动" /&
&input id="but3" type="button" value="上下移动" /&
&script type="text/javascript"&
//向上下滑动
$("#but1").click(function() {
//div标标上移动
$("#div1").slideUp(<span style="background-color: #f5f5f5; color: #0);
//向上下滑动
$("#but2").click(function() {
//div标标下移动
$("#div1").slideDown(<span style="background-color: #f5f5f5; color: #0);
//向上下滑动
$("#but3").click(function() {
//div标标上下移动
$("#div1").slideToggle(<span style="background-color: #f5f5f5; color: #0);
阅读(...) 评论()本文讲的是jquery 将dom对像转换成数组对象，
jquery 将dom对像转换成数组对象
1、jQuery对象（this指向）其实就是一个键值对数据集合，一张普通的hashTabel。集合中，自定义键名可以是字母，也可以是整数，索引方式{name1: &value1&, nam
jquery 将dom对像转换成数组对象
1、jQuery对象（this指向）其实就是一个键值对数据集合，一张普通的hashTabel。集合中，自定义键名可以是字母，也可以是整数，索引方式{name1: "value1", name2: "value2"}[name2]与{0: "value1", 1: "value2"}[1]不存在任何差异，后者数据结构与数组（Array）没有任何关系，那来的”[document]“？
2、jQuery框架之所以在构造器jQuery.fn.init构造返回jQuery对象过程中筛选DOM到jQuery对象的属性中，存储DOM元素数据键名采用0、1、2......的形式，并且定义了一个length属性，完全是为了方便（兼容）方法jQuery.each操作DOM元素的需要。看看下面简洁模拟就会明白：
jQuery.each = function(object, callback, args) { //object可以为数组Array:[...]也可以是对象Object:{0: DOM1, 1: DOM2, 2: DOM3 ... length: 3+}
for (var i = 0; i & object. i ++) {
callback.call(object[i], i, arg)
return object
jQuery.each(this, function(i, arg) { //这里this就是jQuery对象，传入jQuery.each中遍历键名0、1、2....循环索引，就能很方便的获取每个DOM元素（DOM对象）进行操作处理。
Method .................
//操作1个(或批量操作)DOM元素，并返回jQuery对象（this）。
3、问题在于一些介绍jQuery对象的教程中，把键名为0、1、2 .....的并自定义了length属性的数据结构从jQuery对象中割裂开来称为“类数组”，臆造概念，画蛇添足，误人子弟于云里雾里
&script src="/jquery-1.6.2.js"&&/script&
alert(Object.prototype.toString.call($(document)) === '[object Array]'); // ？？？
alert($(document)[0]===document);
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索数组
jquery转换成dom对象、jquery转换dom对象、jquery对象转换成数组、jquery对象转换为数组、jquery 对象转换数组，以便于您获取更多的相关知识。
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
6款热门基础云产品6个月免费体验；2款产品1年体验;1款产品2年体验
开发者常用软件，超百款实用软件一站式提供
云栖社区()为您免费提供相关信息，包括
的信息，还有jquery转换成dom对象、jquery转换dom对象、jquery对象转换成数组、jquery对象转换为数组、jquery 对象转换数组等
，所有相关内容均不代表云栖社区的意见！}