1、带特效的显示隐藏
2、通过透明度显示和隐藏
3、上下折叠显示隐藏
4、停止动画
5、自定义动画
jQuery.noConflict(jqueryPropertyToo)
1、判断浏览器兼容性
2、移除字符串两侧的空白字符
var str = ' hello world '
var newStr = $.trim(str)
3、遍历属性和集合
$.each(arr, function (index, value) {
if (index === 1) {
return true; //类似于continue
}
})
4、过滤数组
var arr = [1, 3, 6, 13, 38, 9, 8, 24, 15];
var arr2 = $.grep(arr, function (value, index) { //这里传参是值、索引
return value > 10;
})
5、转换数组
var arr = [1, 2, 3, 4, 5];
var arr2 = $.map(arr, function (value, index) {
return value + 1;
//return null; 返回null空数组
// return ''; 返回空格数组
})
6、更多数组操作方法
console.log($.inArray(2, [1, 2, 3, 4, 5]));
var arrayLikeObject = {
0: 'a',
1: 'b',
2: 'c',
length: 3
}
console.log($.makeArray(arrayLikeObject));
var arr1 = [0, 1, 2]
var arr2 = [3, 4, 5]
$.merge(arr1, arr2);
7、对象操作
var target = { a: 1, b: 2, c: 3 };
var source1 = { c: 4, d: 5, e: 6 };
var source2 = { c: 7, e: 8, f: 9 };
$.extend(target, source1, source2) //将1、2合并到target
var mergedObj = $.extend({}, source1, source2) //将1、2合并为新对象
var target = { a: 1, b: 2 };
var source1 = { b: { b1: 2.1, b2: 2.2 }, c: 3 };
var source2 = { b: { b3: 2.3, b4: 2.4 }, d: 4 };
console.log($.extend(target, source1, source2)); //b: { b1: 2.1, b2: 2.2 }被覆盖
console.log($.extend(true, target, source1, source2)); //deep设置为true 合并b
7、其他工具方法
1、AJAX 带来了什么
2、AJAX 本质
3、创建一个 AJAX 请求
第一步 创建 XMLHTTPRequest 对象
第二步 绑定 onreadystatechange 事件
第三步 通过回调处理业务逻辑
Demo
<body>
<button id="btn">获取数据</button>
<pre id="store"></pre>
<script>
var btn = document.getElementById('btn'),
store = document.getElementById('store')
btn.addEventListener('click', ajax)
function ajax () {
var src = './data.json'
var xhr = new XMLHttpRequest() //第一步 创建对象
xhr.open('GET', src) //发送请求
xhr.onreadystatechange = loadData //绑定 onreadystatechange 事件
xhr.responseType = 'json'
xhr.send()
function loadData () {
if (xhr.readyState === 4 && xhr.status === 200) { //结合状态码判定是否请求成功
store.innerHTML = JSON.stringify(xhr.response, null, 2)
}
}
}
</script>
</body>
4、XHR对象方法
- abort 方法舍弃一个请求
readyState 会被置 0 但不触发 readystatechange 事件
请求还是会送到服务器,仅仅是客户端“视而不见”
- setRequestHeader 方法
设置请求头,同字段多次设置时,值会合并到一个字段中
必须在 open 与 send 方法执行顺序中间调用
默认的 Accept 字段值为 “
5、XHR2.0的CORS跨域方案
- 请求 Method 必须为 HEAD、GET、POST 之一
- 请求头中的字段不超过 Accept,Accept-Language
- Content-Language,Last-Event-ID,Content-Type
- Content-Type 只限于三个值 application/x-www-formurlencoded、multipart/form-data、text/plain
6、服务端响应头字段设置
1、全局配置
$.ajaxSetup 方法可以设置全局配置
2、全局回调
1、数据格式
2、数据格式的优势
3、数据格式限制
4、JS 中如何使用 JSON 数据
5、其他语言中如何使用 JSON 数据
1、Json对象
2、JSON.parse 方法
3、JSON.stringify 方法
除特别注明外,本站所有文章均为慕白博客原创,转载请注明出处来自https://cloud.tencent.com/developer/article/1176204