jQuery 核心01 / 憋错料

jQuery.contains( container,contained )

检查一个DOM元素是否为另一个元素的后代。只要是后代$.contains()就返回 true ，负责返回 false 。

$.contains( document.documentElement, document.body ); // true
$.contains( document.body, document.documentElement ); // false

jQuery.each( collection,callback(indexInArray,ValueOfElement))

通过长度属性来迭代数字索引，从0到length-1。

$.each()不同于$(element).each() 。$.each()用于迭代任何集合，无论是“名/值”对象或数组；$(element).each()专门用来遍历jQuery对象。

// 迭代一个数组，并同时访问迭代元素及它的索引
$.each( [‘a‘,‘b‘,‘c‘], function(i, l){
   alert( "Index #" + i + ": " + l );
});

// 迭代一个对象，并同时访问它的键和值
$.each( { name: "John", lang: "JS" }, function(k, v){
   alert( "Key: " + k + ", Value: " + v );
});

jQuery.extend( target[,object1 ][,objectN])

将两个或更多对象内容合并成为一个对象。

// 这样的合并方式object1将被修改
var object = $.extend(object1, object2);

// 这样的操作不影响object1
var object = $.extend({}, object1, object2);

jQuery.fn.extend( object )

将一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.fn.extend demo</title>
  <style>
label { display: block; margin: .5em; }
     </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

   <label><input type="checkbox" name="foo"> Foo</label>
   <label><input type="checkbox" name="bar"> Bar</label>

<script>
   jQuery.fn.extend({
      check: function() {
        return this.each(function() { this.checked = true; });   // 选中状态
      },
      uncheck: function() {
        return this.each(function() { this.checked = false; });  // 没有选中
      }
   });

   $( "input[type=‘checkbox‘]" ).check();
</script>
</body>
</html>

jQuery.globalEval( code )

在全局上下文执行JavaScript代码。

此方法不同于JavaScript evel() ，因为他在全局上下文执行。（这对加载外部动态脚本很重要）

var name = "全局变量";

$(function () {

　　function test(){

　　　　var name = "局部变量";

　　　　alert(name); // 局部变量

　　　　eval( "alert(name);" ); // 局部变量

　　　　$.globalEval( "alert(name);" ); // 全局变量

　　}

　　test();

})

jQuery.grep( array,function( elementOfArray,indexInArray )[,invert] )

$.grep() 函数使用指定的函数过滤数组中的元素，并返回过滤后的数组；原始数组不受影响。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div></div>
  <p></p>
  <span></span>
<script>
var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
$("div").text(arr.join(", "));      // 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1

arr = jQuery.grep(arr, function(n, i){
  return (n != 5 && i > 4);
});
$("p").text(arr.join(", "));         //1, 9, 4, 7, 3, 8, 6, 9, 1

arr = jQuery.grep(arr, function (a) { return a != 9; });
$("span").text(arr.join(", "));      // 1, 4, 7, 3, 8, 6, 1

</script>

</body>
</html>

jQuery.inArray( value,array[,fromIdex] )

在数组中查找指定值并返回它的索引（如果没有找到，返回 -1）。

value：要查找的值。

array：数组。

fromIndex：数组索引值，表示在哪里开始查找，默认值为0，查找整个数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <style>
    div {
        color: blue;
    }

    span {
        color: red;
    }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
    <div>"John" found at <span></span></div>
    <div>4 found at <span></span></div>
    <div>"Karl" not found, so <span></span></div>
    <div>"Pete" is in the array, but not at or after index 2, so <span></span></div>
    <script>
    var arr = [4, "Pete", 8, "John"];
    var $spans = $("span");
    $spans.eq(0).text(jQuery.inArray("John", arr));      // "John" found at 3
    $spans.eq(1).text(jQuery.inArray(4, arr));           // 4 found at 0
    $spans.eq(2).text(jQuery.inArray("Karl", arr));      //"Karl" 没有找到 -1
    $spans.eq(3).text(jQuery.inArray("Pete", arr, 2));   //"Pete"在数组里，但索引2不是它 -1
    </script>
</body>
</html>

jQuery.isArray( obj )

用来检测一个对象是否是一个JavaScript数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
    <p>[]是数组吗? <b></b></p>     // 页面显示： []是数组吗? true
    <script>
    $("b").append("" + $.isArray([]));
    </script>
</body>
</html>

jQuery.isEmptyObject( obj )

检查一个对象是否为空（不包含任何属性）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<script>
$(function () {
   function fun( html ){
      document.body.innerHTML += "<p>" + html;
   }
   fun($.isEmptyObject({}));                // true
   fun($.isEmptyObject({ foo: "bar" }));    // false
})
</script>
</body>
</html>

jQuery.isFunction( obj )

确定参数是否为函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
  div { color:blue; margin:2px; font-size:14px; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div>jQuery.isFunction(objs[0]) = <span></span></div>  // true
    <div>jQuery.isFunction(objs[1]) = <span></span></div>  // false
    <div>jQuery.isFunction(objs[2]) = <span></span></div>  // false
    <div>jQuery.isFunction(objs[3]) = <span></span></div>  // true
    <div>jQuery.isFunction(objs[4]) = <span></span></div>  // false
    <script>
    function stub() {}
    var objs = [
        function() {}, {
            x: 15,
            y: 20
        },
        null,
        stub,
        "function"
    ];

    jQuery.each(objs, function(i) {
        var isFunc = jQuery.isFunction(objs[i]);
        $("span").eq(i).text(isFunc);
    });
    </script>
</body>

</html>

jQuery.isNumeric( value )

确定它的参数是否是一个数字，如果是返回 true，否则返回 false。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
    <script>
    $(function() {
        function fun(html) {
            document.body.innerHTML += "<br>" + html;
        }
        // true
        fun($.isNumeric("-10"));
        fun($.isNumeric("0"));
        fun($.isNumeric(0xFF));
        fun($.isNumeric("0xFF"));
        fun($.isNumeric("8e5"));
        fun($.isNumeric("3.1415"));
        fun($.isNumeric(+10));
        fun($.isNumeric(0144));
        //false
        fun($.isNumeric("-0x42"));
        fun($.isNumeric("7.2acdgs"));
        fun($.isNumeric(""));
        fun($.isNumeric({}));
        fun($.isNumeric(NaN));
        fun($.isNumeric(null));
        fun($.isNumeric(true));
        fun($.isNumeric(Infinity));
        fun($.isNumeric(undefined));
    })
    </script>
</body>

</html>

jQuery.isPlainObject( obj )

测试一个对象是否为一个纯碎的对象。

jQuery.isPlainObject({})     // true
jQuery.isPlainObject("test") // false

jQuery.isWindow( obj )

确定参数是否为一个window对象。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>我是一个窗口对象吗? <b></b></p>    //我是一个窗口对象吗? true
    <script>
        $("b").append( "" + $.isWindow(window) );
    </script>
</body>
</html>

jQuery.isXMLDoc( obj )

检查一个DOM节点是否在XML文档中。

jQuery.isXMLDoc(document)        // false
jQuery.isXMLDoc(document.body)   // false

jQuery.makeArray( obj )

转化一个类似数组的对象成为一个真正的数组。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
   <style>
   div {
      color: red;
   }
   </style>
</head>

<body>
   <div>First</div>
   <div>Second</div>
   <div>Third</div>
   <div>Fourth</div>
   <script>
   var elems = document.getElementsByTagName("div");
   var arr = jQuery.makeArray(elems);
   arr.reverse();   console.log(arr.reverse());   // [div, div, div, div]
   $(arr).appendTo(document.body);
   </script>
</body>

</html>

jQuery.map( array,callback( elementOfArray,indexInArray ) )

将一个数组中的所有元素转化到另一个数组中。

array：数组。

callback(elementOfArray, indexInArray)：第一个参数是数组元素，第二个参数是该元素的索引。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
    <div></div>
    <p></p>
    <span></span>
    <script>
    var arr = ["a", "b", "c", "d", "e"];
    $("div").text(arr.join(", "));      // a, b, c, d, e

    arr = jQuery.map(arr, function(n, i) {
        return (n.toUpperCase() + i);
    });
    $("p").text(arr.join(", "));       // A0, B1, C2, D3, E4

    arr = jQuery.map(arr, function(a) {
        return a + a;
    });
    $("span").text(arr.join(", "));   //A0A0, B1B1, C2C2, D3D3, E4E4
    </script>
</body>

</html>

时间： 2024-08-10 15:01:28

jQuery 核心01

jQuery 核心01的相关文章

jQuery核心之 $

jQuery核心之DOM操作的常用方法

jQuery 核心

Jquery核心函数

jQuery核心之那些有效的方法

jQuery核心之jQuery Object及其相关的常用方法

jQuery 核心 - noConflict() 方法

JQuery 核心函数基础研究与提高

jquery核心功能分析