文档章节

Jquery字符串,数组(拷贝、删选、合并等),each循环,阻止冒泡,ajax出错,$.grep筛选,$.param序列化,$.when

深圳大道
 深圳大道
发布于 2016/12/29 15:37
字数 1538
阅读 14
收藏 0
<!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

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
阅读jQuery源代码带给我们的18个惊喜

相信大家都非常熟悉jQuery类库,绝对最受欢迎的JS框架,如果你也有兴趣阅读v源代码的话,或者你也会有同感。 以下便是阅读jQuery源代码后挖掘的18条令人惊奇的信息: 1. sizzle的大小 Sizzle...

gbin1
2014/08/05
635
1
jquery param()方法的使用

jQuery.param()函数用于将一个JS数组或对象序列化为字符串值,将jquery对象按照name/value 或者key/value序列化为URL参数,用&连接。以便用于URL查询字符串或AJAX请求。 语法 $.param(object...

学习也休闲
2015/08/27
815
0
Java程序员从笨鸟到菜鸟之(八十九)跟我学jquery(五)jquery中的ajax详解

Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数来帮助我们统...

长平狐
2012/11/12
346
0
编程学习读书笔记之jQuery函数应用学习心得(图)

编程学习读书笔记之jQuery函数应用学习心得(图) jQuery.extend() 函数 用于将一个或多个对象的内容合并到目标对象。 1.当提供两个或多个对象给.extend(),对象的所有属性都添加到目标对象(...

原创小博客
2018/07/23
14
0
前端学习(四)--jQuery

一、入门 1、jquery 就是一个js的框架; 2、好处就是能让我们的js代码写的更少; 3、基本使用:引入script,后面使用即可; 4、关于版本选择:1.* 版本的兼容性比较好,大公司用的多; 5、关...

stanwuc
2018/11/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PostgreSQL 11.3 locking

rudi
今天
5
0
Mybatis Plus sql注入器

一、继承AbstractMethod /** * @author beth * @data 2019-10-23 20:39 */public class DeleteAllMethod extends AbstractMethod { @Override public MappedStatement injectMap......

一个yuanbeth
今天
13
1
一次写shell脚本的经历记录——特殊字符惹的祸

本文首发于微信公众号“我的小碗汤”,扫码文末二维码即可关注,欢迎一起交流! redis在容器化的过程中,涉及到纵向扩pod实例cpu、内存以及redis实例的maxmemory值,statefulset管理的pod需要...

码农实战
今天
4
0
为什么阿里巴巴Java开发手册中不建议在循环体中使用+进行字符串拼接?

之前在阅读《阿里巴巴Java开发手册》时,发现有一条是关于循环体中字符串拼接的建议,具体内容如下: 那么我们首先来用例子来看看在循环体中用 + 或者用 StringBuilder 进行字符串拼接的效率...

武培轩
今天
9
0
队列-链式(c/c++实现)

队列是在线性表功能稍作修改形成的,在生活中排队是不能插队的吧,先排队先得到对待,慢来得排在最后面,这样来就形成了”先进先出“的队列。作用就是通过伟大的程序员来实现算法解决现实生活...

白客C
今天
87
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部