Maison > Article > interface Web > Comment jquery parcourt-il et obtient-il la collection de listes en arrière-plan ?
Comment jquery parcourt-il et obtient-il la collection de listes en arrière-plan ?
- 伊谢尔伦original
- 2017-06-17 09:53:146332parcourir
Dans le projet, jquery obtient la liste en arrière-plan. Comment la parcourt-il ?
Dans des circonstances normales, la liste d'arrière-plan doit être convertie en chaîne json et renvoyée à la fonction de rappel ajax . La chaîne json peut être directement manipulée dans la fonction de rappel.
Par exemple :
$.post("test.php", { name: "John", time: "2pm" },function(data){
//可以在这儿循环，比如：
var listNow=data.listHouTai;//取list。listHouTai是你后台定义的json名称
for ( var i = 0; i < listNow.length; i++) {
var id = vos[i].Id;//可以取list中第一个对象的id值，其他的类推
｝
});Vous pouvez avoir une classe d'opérations de tableau personnalisée jQuery fichier externe js, la condition préalable est d'introduire la bibliothèque de classes jQuery. Le code de la classe d'encapsulation est le suivant :
(function ($) {
$.List = function () {
var _list = new Array();
//外部为数组赋值
this.GetDataSource = function (arr) {
if (IsArrayType(arr)) {
_list = arr;
} else {
alert("指定元素非数组类型，赋值失败！");
}
};
//添加一个元素
this.Add = function (arg) {
if (arg) {
_list.push(arg);
} else {
alert("参数错误，添加元素失败！");
}
return _list;
};
//删除指定索引的元素
this.RemoveAt = function (index) {
if (IsArrayIndex(index) && index < _list.length) {
var i;
var arr = new Array();
for (i = 0; i < _list.length; i++) {
if (i != index) {
arr.push(_list[i]);
}
}
_list = arr;
return _list;
}
else {
alert("未获取到设置对象的实例，删除元素失败！");
}
};
//按照指定的分割符显示出所有元素
this.Split = function (arg) {
arg = arg || ",";
var i, res;
res = "";
if (_list.length > 0) {
for (i = 0; i < _list.length; i++) {
res += _list[i].toString() + arg;
}
return res.substr(0, (res.length - arg.toString().length));
} else {
return "";
}
};
//外部调用直接返回当前数组实力
this.ToArray = function () {
return _list;
};
//设置指定索引处的值为指定值
this.Update = function (index, value) {
if (IsArrayIndex(index) && index < _list.length) {
_list[index] = value;
}
return _list;
};
//清空所有元素
this.RemoveAll = function () {
_list.splice(0, _list.length);
return _list;
};
//根据传入的值获取第一次出现在数组中的下标
this.IndexOf = function (value) {
if (value) {
var i;
for (i = 0; i < _list.length; i++) {
if (_list[i] == value) {
return i;
}
}
}
return -1;
};
//获取数组长度
this.Size = function () {
return _list.length;
};
//移除数组中重复的项
this.RemoveRepeat = function () {
_list.sort();
var rs = [];
var cr = false;
for (var i = 0; i < _list.length; i++) {
if (!cr)
cr = _list[i];
else if (cr == _list[i])
rs[rs.length] = i;
else
cr = _list[i];
}
for (var i = rs.length - 1; i >= 0; i--)
this.RemoveAt(rs[i]);
return _list;
};
//对数字数组元素排序，参数：0升序1降序
this.SortNumber = function (f) {
if (!f) f = 0;
if (f == 1) return _list.sort(function (a, b) { return b - a; });
return _list.sort(function (a, b) { return a - b; });
};
//私有方法
//判断正确的数组下标
function IsArrayIndex(index) {
var reg = /^\d+$/;
if (reg.test(index))
return true;
else
return false;
}
//判断当前对象是否为数组对象
function IsArrayType(arr) {
if (typeof arr == 'object' && typeof arr.length == 'number')
return true;
else
return false;
}
}; //结束List的构造方法
})(jquery);Deux fichiers js doivent être introduits lors de l'appel de la page :
<script src="js/jquery-1.8.3.min.js" type="text/JavaScript"></script>
<script src="js/jquery.array.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var myList = new $.List();
myList.Add(1);
myList.Add("1906-07-08");
myList.Add("hellow world");
myList.RemoveAt(0);
myList.Update(0, "11111111");
//alert("数组被修改内容后的结果：" + myList.Split("|"));
myList.RemoveAll();
var arr = myList.ToArray();
//alert("数组全部被删除后结果：" + arr);
//alert("数组1当前长度：" + myList.Size());
var myList2 = new $.List();
myList2.Add(3);
myList2.Add(1);
myList2.Add(45);
myList2.Add(21);
myList2.Add(-9);
myList2.Add(1);
alert("第二个实例数组结果：" + myList2.ToArray());
myList2.RemoveRepeat();
alert("去重后第二个实例数组结果：" + myList2.ToArray());
alert("去重后第二个实例数组长度：" + myList2.Size());
myList2.SortNumber(1);
alert("排序后的数组：" + myList2.ToArray());
var arr3 = ["aaa", "bbb", "ccc", "ddd", "eee"];
var arr4;
myList2.GetDataSource(arr3);
alert("重新赋值后结果："+myList2.ToArray());
});
</script>Syntaxe des objets JSON format de données (lorsque le serveur Le format de données de l'objet renvoyé par le rappel est le format de données JSON. Les exigences de format de JSON doivent être respectées. L'objet de rappel doit être converti à l'aide de la fonction eval (sinon, l'objet ne sera pas obtenu). Ceci L'article ne présentera pas en détail les problèmes de données du rappel côté serveur. Nous le ferons directement)
1.jqueryParcourir l'objet
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML > <HEAD > <TITLE > New Document < /TITLE>
<script language="javascript" type="text/javascript " src="jquery.min.js "></script>
<script type="text / javascript ">
$(function(){
var tbody = "";
//------------遍历对象 .each的使用-------------
var obj =[{"name ":"项海军","password ":"123456 "}];
$("#result ").html("------------遍历对象.each的使用-------------");
alert(obj);//是个object元素
//下面使用each进行遍历
$.each(obj,function(n,value) {
alert(n+' '+value);
var trs = "";
trs += " < tr > <td > " + value.name +" < /td> <td>" + value.password +"</td > </tr>";
tbody += trs;
});
$("#project").append(tbody);
});
</script > </HEAD>
<BODY>
<div id="result" style="font-size:16px;color:red;"></div > <table cellpadding = 5 cellspacing = 1 width = 620 id = "project"border = "1" > <tr > <th > 用户名 < /th>
<th>密码</th > </tr>
</table > </BODY>
</HTML >2.jQuery< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML > <HEAD > <TITLE > New Document < /TITLE>
<script language="javascript" type="text/javascript " src="jquery.min.js "></script>
<script type="text / javascript ">
$(function(){
var tbody = "";
//------------遍历数组 .each的使用-------------
var anArray = ['one','two','three'];
$("#result ").html("------------遍历数组.each的使用-------------");
$.each(anArray,function(n,value) {
alert(n+' '+value);
var trs = "";
trs += " < tr > <td > " +value+" < /td></tr > ";
tbody += trs;
});
$("#project ").append(tbody);
});
</script>
</HEAD>
<BODY>
------------此部分同1中的body部分--------------------
</BODY>
</HTML>
3.jQuery 遍历List集合（其实与遍历一个对象没有太大区别，只是格式上的问题）
<!DOCTYPE HTML PUBLIC " - //W3C//DTD HTML 4.0 Transitional//EN">
< HTML > <HEAD > <TITLE > New Document < /TITLE>
<script language="javascript" type="text/javascript " src="jquery.min.js "></script>
<script type="text / javascript ">
$(function(){
var tbody = "";
//------------遍历List集合 .each的使用-------------
var obj =[{"name ":"项海军","password ":"123456 "},{"name ":"科比","password ":"333333 "}];
$("#result ").html("遍历List集合.each的使用");
alert(obj);//是个object元素
//下面使用each进行遍历
$.each(obj,function(n,value) {
alert(n+' '+value);
var trs = "";
trs += " < tr > <td > " +value.name+" < /td> <td>" + value.password +"</td > </tr>";
tbody += trs;
});
$("#project").append(tbody);
});
</script > </HEAD>
<BODY>
------------此部分同1中的body部分--------------------
</BODY >
</HTML> Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée des paramètres de taille de police et des plug-ins jqueryArticle suivant：Explication détaillée des paramètres de taille de police et des plug-ins jquery
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript