【JQuery学习总结2 】Jquery字符串, 数组（拷贝、删选、合并等）, each循环，阻止冒泡，ajax出错，$.grep筛选，$.param序列化
来源：互联网 发布：实名认证数据网 编辑：程序博客网 时间：2024/06/01 14:44
Jquery字符串，数组（拷贝、删选、合并等），each循环，阻止冒泡，ajax出错，$.grep筛选，$.param序列化，$.when
<!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>Jquery测试</title> <script src="~/Js/jquery-3.1.1.min.js"></script> <style> #content { width: 140px; border: 1px solid blue; } #msg { width: 100px; height: 100px; margin: 20px; border: 1px solid red; } </style> <script type="text/javascript"> //字符串替换 var myStr = "I,love,you,Do,you,love,me?"; var replacedStr = myStr.replace(/love/g, "hate"); //全局替换 console.info(replacedStr) //"I,hate,you,Do,you,hate,me" //字符串连接 concat方法可以接收任意多个参数 var str1 = "I,love,you!"; var str2 = "Do,you,love,me?"; var str = str1.concat(str2,"张三");//"I,love,you!Do,you,love,me?张三" console.info(str) //字符串大小写 var lowCaseStr = myStr.toLowerCase();//"i,love,you,do,you,love,me"; var upCaseStr = myStr.toUpperCase();//"I,LOVE,YOU,DO,YOU,LOVE,ME" console.info(lowCaseStr) console.info(upCaseStr) //Join //var myList = new Array("jpg", "bmp", "gif", "ico", "png"); var myList = ["jpg", "bmp", "gif", "ico", "png"]; var portableList = myList.join("|"); console.info(portableList) //each循环一 var arr = ["one", "two", "three", "four"]; //数组删除 delete arr[0]; //只是被删除的元素变成了 undefined 其他的元素的键值还是不变。 $.each(arr, function (i) { console.info(arr[i]); }); //each循环二 var arr2 = [ { id: 100, name: "张三", age: 21, sex: "男" }, { id: 101, name: "李强", age: 22, sex: "男" }, { id: 102, name: "王琳", age: 20, sex: "女" }, { id: 103, name: "赵倩", age: 19, sex: "女" } ]; $.each(arr2, function (i, item) { //i序号 item当前元素 console.info(item.id + "-" + item.name + "-" + item.age + "-" + item.sex); }); $.each(arr2, function (i, item) { if (item.id == 100) { //修改某条记录 item.name = "胡星"; item.age = "29"; item.sex = "男"; } console.info(item.id + "-" + item.name + "-" + item.age + "-" + item.sex); }); $(function () { //取消后续执行内容 阻止点击链接跳转 var obj = document.getElementById("myhref"); obj.onclick = function (event) { event = event || window.event; if (event.preventDefault) { //非IE下 event.preventDefault(); } else { event.returnValue = false; } }; //ajax出错调试 $.ajax({ url: "www.baidu.com/xxx.php", type: "post", datatype: "json", data: { "cat": "tom", "mouse": "jack" }, success: function (data) { console.log(data); }, error: function (jqXHR, textStatus, errorThrown) { /* 而jqXHR对象如下， 1.readyState :当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。 2.status ：返回的HTTP状态码，比如常见的404,500等错误代码。 3.statusText ：对应状态码的错误信息，比如404错误信息是not found,500是Internal Server Error。 4.responseText ：服务器响应返回的文本信息 textStatus和errorThrown都是字符串类型，分别是返回的状态和服务器的错误信息。 */ console.log(jqXHR); console.log(textStatus); console.log(errorThrown); } }); //阻止冒泡事件（冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。） // 为内层div绑定click事件 $("#msg").click(function () { alert("我是小div"); event.stopPropagation(); // 阻止事件冒泡 只弹出 "我是小div" }); // 为外层div元素绑定click事件 $("#content").click(function () { alert("我是大div"); //点击会弹出 "我是大div" 然后弹出 "我是body" }); // 为body元素绑定click事件 $("body").click(function () { alert("我是body"); }); //筛选符合条件的元素，返回一个新数组 var arr = [2, 5, 34, 22, 8]; var arr1 = $.grep(arr, function (value, index) { return index <= 2 && value < 10; }) console.log(arr1.join(",")); //输出2,5 //去左右空格 var str = " 你在他乡还好吗？ "; console.log("11" + str + "11"); console.log("11" + $.trim(str) + "11"); //如果数组中存在被搜索元素，则返回被搜索元素的索引 var aa = [1, 2, 3, 4, 5]; console.log($.inArray(4, aa)); //弹出 3 //$.makeArray()将数组或类数组对象的属性复制到一个新的数组(真的是数组)中 var arr1 = $.makeArray(arr); console.log("新数组" + arr1.join(",")); //该函数接受两个数组或类数组对象，将第二个参数附加到第一个参数上面， //返回第一个参数，第一个数组会修改，第二个不会。 var arr3 = $.merge(arr, aa); console.log("合并后的数组" + arr3.join(",")) }); //$.param() 序列化成url字符串 $(function () { var man = { Name: "张飞", Age: 23 }; var str = $.param(man); console.log(str); //Name=%E5%BC%A0%E9%A3%9E&Age=23 var str1 = decodeURI(str); console.log(str1); //Name=张飞&Age=23 //$.parseJSON() 该函数会解析JSON格式的字符串，并返回解析结果(对象)。 类似于JSON.parse() var man = { name: "张三", age: 23 }; var str = JSON.stringify(man); //stringify用于从一个对象解析出字符串 console.log(str); //{"name":"张三","age":23} var man1 = $.parseJSON(str); //parseJSON 用于从一个字符串中解析出json 对象 var man2 = JSON.parse(str); //parse 用于从一个字符串中解析出json 对象 console.log("$.parseJSON " + man1.name + man1.age); //张三23 console.log("JSON.parse " + man2.name + man2.age); //张三23 //删除元素数组中的重复元素 var arr = [1, 2, 3, 4, 4, 5, 5, 6]; $.unique(arr); console.log(arr.join()); //返回 1,2,3,4,5,6 //$.extend() 合并对象中的元素 后面覆盖前面的 var result = $.extend({}, { name: "Tom", age: 21 }, { name: "Jerry", sex: "Boy" }); console.log(result.name); //输出 Jerry 后面的会覆盖前面的，result始终只是一个对象 //$.map() 改变函数内的数据，接受一个数组或类数组对象作为参数 var arr1 = [2, 5, 34, 22, 8]; var bbb = $.map(arr1, function (value, index) { if (value > 5 && index < 3) { //值大于5 下标小于3 return value - 10; } }) console.log(arr1.join()); //2,5,34,22,8 可以看到原数组不改变 console.log(bbb.join()); //24 新数组只获得了操作之后的结果 /* $.when 提供一种方法来执行一个或多个对象的回调函数，延迟对象通常表示异步事件。 when()函数常常和done()函数、fail()函数、then()函数联合使用： done(Function func) - 当deferreds中的处理都完成的时候执行Function回调函数 fail(Function func) - 当deferreds中有一个处理失败的时候执行Function回调函数 then(Function func1,Function func2)- 结合了done和fail函数， 当都成功执行func1，当有一个失败执行func2 */ var whenResult = $.when($.ajax("page1.php"), $.ajax("page2.php")); whenResult.done(function (a1, a2) { //函数内容略 //a1和a2俩参数是when函数中两个ajax请求的相关jqXHR对象 //var jqXHR = a1[2]; /* arguments are [ "success", statusText, jqXHR ] */ }); whenResult.fail(function () { console.log("失败了") //函数内容略 }) //whenResult.then(successFunc, failureFunc); }) /* $.isArray(obj) 检测参数是否是数组 $.isFunction(obj) 检测参数是否是一个函数 $.isEmptyObject(obj) 检测参数是否是一个空对象 $.isPlainObject(obj) 检测参数是否是一个纯粹对象，即对象是否通过{}或new Object()关键字创建。 $.contains(container,contained) 检测一个DOM节点是否包含另一个DOM节点。是则返回true否则表示false。 alert($.contains($("#div1")[0],$("#p1")[0])); //返回true，注意参数是DOM对象，并非jQuery对象 */ </script> </head> <body> <a id="myhref" href="http://www.baidu.com">去百度</a> <div id="content"> 外层div <div id="msg"> 内层div </div> </div> </body> </html> --------------------------------------------------------------
来源：http://blog.csdn.net/smartsmile2012/article/details/53765000
0 0
- 【JQuery学习总结2 】Jquery字符串, 数组（拷贝、删选、合并等）, each循环，阻止冒泡，ajax出错，$.grep筛选，$.param序列化
- Jquery字符串，数组（拷贝、删选、合并等），each循环，阻止冒泡，ajax出错，$.grep筛选，$.param序列化，$.when
- $.grep ,$.map,jquery筛选数组之grep、each、inArray、map的用法及遍历json对象
- jquery筛选数组之grep、each、inArray、map的用法及遍历json对象
- jquery筛选数组之grep、each、inArray、map的用法及遍历json对象
- jquery筛选数组之grep、each、inArray、map的用法及遍历json对象
- jquery筛选数组之grep、each、inArray、map的用法及遍历json对象 [转]
- jquery筛选数组之grep、each、inArray、map的用法及遍历json对象
- jquery筛选数组之grep、each、inArray、map的用法及遍历json对象
- jquery筛选数组之grep、each、inArray、map的用法及遍历json对象
- ajax回调json数组对象，jquery中$.each()循环解析
- JQuery 操作数组 each、map、grep
- JQuery 操作数组 each、map、grep、filter
- JQuery 操作数组 each、map、grep
- jquery中的数组过滤筛选-$.grep()
- jquery中的数组过滤筛选-$.grep()
- jquery中的数组过滤筛选-$.grep()
- jquery中的数组过滤筛选-$.grep()
- 如何做个依赖库让别人依赖使用
- 杀人放火金腰带，修桥补路无尸骸：成功的真相
- Oracle查询树型关系（start with connect by prior）
- openstack(m版)官网创建云主机过程
- HomeBrew安装
- 【JQuery学习总结2 】Jquery字符串, 数组（拷贝、删选、合并等）, each循环，阻止冒泡，ajax出错，$.grep筛选，$.param序列化
- java面试
- Day006:Linked List Cycle II
- openwrt创建子端口
- c#mvc redirecttoaction 和redirect的区别
- ABIX.v6.69.01.Bilanguage.WinAll-LAXiTY\
- mysql-常用分析工具
- java设计模式--工厂方法模式
- java将阿拉伯数字转换为中文数字
