系统学习 jQuery （二）工具

来源：互联网发布：全国省市区sqlserver 编辑：程序博客网时间：2024/06/05 15:08

jQuery 用的最多的功能应该是操作 DOM 和 AJAX 操作了，这让我们容易忽视它的其他功能，所以在了解这两部分功能之前先来看看 jQuery 提供的丰富的工具函数，在使用 jQuery 的项目中这些函数能提供很多便利。

$.support 获得浏览器是否支持某种

$.browser 根据 navigator.userAgent 来获得浏览器信息

$.each(arr, fn(i, n)) 十分方便，遍历一个数组或对象，以每一项为 this 调用 fn，传递该项的键 i 和该项的值 n

$.grep(arr, fn(n, i)) 过滤一个数组，对数组的每一项调用 fn，传递该项的值 n 和该项的键 i，fn 返回 true 该项保留，返回 false 该项去除（grep 返回过滤后的数组，原数组不会改变）

$.map(arr, fn(n)) 修改一个数组或对象，对数组或对象的每一项调用 fn，传递该项的值 n，fn 的返回值将替换原值（map 返回修改后的数组，原数组不会改变）

$.makeArray(obj) 将对象转变为数组

$.inArray(val, arr, [from]) 在数组中查找一个值，from 可指定从哪一项开始查找默认为 0

$.merge(first, second) 将第二个数组的值添加到第一个数组之后，会修改第一个数组

$.trim(str) 去除字符串前后的空格，很常用的功能

$.fn.jquery 获得 jQuery 的版本信息

$.noop 空函数，在需要传递一个空的回调函数时可以直接用它

$.contains(dom1, dom2) 判断文档元素 dom1 是否包含 dom2

$.proxy(fn, context) 创建一个 this 指向特定对象的函数，且在 jQuery 的时间机制下可以通过原函数来取消此函数的事件绑定

$.type(obj) 获得对象类型

$.when(deferred1, deferred2, ...) 将多个延迟对象合并为一个延迟对象，在需要等待多个 AJAX 加载完成再执行操作时可以使用次方法，若传递非 deferred 对象则被当作一个加载完成的 deferred 对象

参考 jQuery API http://jquery.cuishifeng.cn/jQuery.support.html

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="../lib/jquery-1.11.2/jquery.js"></script></head><body>    <p id="p1">1        <div id="div1"></div>    </p>    <p>2</p>    <p>3</p>    <script>        $(function() {            console.log($.support);            console.log($.browser); // 根据 navigator.userAgent 来获得浏览器信息。由于这些信息并不可靠，在 1.9 以后的版本中被弃用            var arr = [1, 2, 3];$.each(arr, function(i, n){console.log(this); console.log(i); console.log(n);});            var obj = {name: 'mcj'}            $.extend(obj, {age: 100}); console.log(obj);            $.when({name: 'name1'}, {name: 'name2'}).done(function(a1, a2) {                console.log(a1); console.log(a2);            });            var arr2 = $.grep(arr, function(n, i) {return n < 3}); //过滤数组，返回过滤后的数组，原数组不变            console.log(arr); console.log(arr2);            console.log(document.getElementsByTagName('p'));            console.log($.makeArray(document.getElementsByTagName('p')));            console.log($.makeArray({name: 'mcj', age: 100}));            var arr3 = $.map(arr, function(n) { // 不会改变原数组                if(n == 1) {                    return [1, 1, 1];                }else {                    return null;                }            });            console.log(arr3);            var arr4 = $.map({name: 'mcj', age: 100}, function(n) {                return {sex: 1};            });            console.log(arr4);            console.log($.inArray(1, arr));            var arr5 = $.merge([1, 2, 3], [1, 2, 3]);            console.log(arr5);            console.log($.unique(arr5));            console.log($('#id1', $.parseXML('<xml><node id="id1">hello</node></xml>')));            $.noop(); // 空函数，当需要一个空的回调函数时可以使用它            var obj = {                name: 'mcj',                age: 100,                sayHello: function() {                    console.log('hello i am' + this.name);                }            }            var f = $.proxy(obj.sayHello, obj); f();            console.log($.contains(document.getElementById('p1'), document.getElementById('div1')));            console.log($.type(123));            console.log($.trim('  aaa   '));            //$.error('test error');            console.log($.fn.jquery);            console.log($('#p1'));        })    </script></body></html>

阅读全文

1 0

系统学习 jQuery （二） 工具

系统学习 jQuery （二）工具