JQuery学习总结

web前端

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!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>

赏

×

纯属好玩

扫码支持
扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

文章目录
,