首页 > 代码库 > jQuery 核心02

jQuery 核心02

2024-11-01 16:51:39   205人阅读

jQuery.merge( first,second )

  • $.merge合并两个数组，会将second数组添加到frist数组中，second数组保持不变，frist数组输出内容被改变。
  • 如果不想改变first数组输出结果，可采用$.merge( [],first )，空数组与first数组合并拥有first的内容，first数组保持原有状态。

不进行$.merge( [],first )操作：

var first = [‘a‘,‘b‘,‘c‘];
var second = [‘d‘,‘e‘,‘f‘];
var newArray =$.merge( first, second);
console.log(newArray);        //    ["a", "b", "c", "d", "e", "f"]

var first = [‘a‘,‘b‘,‘c‘];
var second = [‘d‘,‘e‘,‘f‘];
var newArray =$.merge( first, second);
console.log(first);              //      ["a", "b", "c", "d", "e", "f"]

var first = [‘a‘,‘b‘,‘c‘];
var second = [‘d‘,‘e‘,‘f‘];
var newArray =$.merge( first, second);
console.log(second);           // ["d", "e", "f"]

进行$.merge( [],first )操作：

var first = [‘a‘,‘b‘,‘c‘];
var second = [‘d‘,‘e‘,‘f‘];
var newArray =$.merge( $.merge([],first), second);
console.log(newArray);           // ["a", "b", "c", "d", "e", "f"]

var first = [‘a‘,‘b‘,‘c‘];
var second = [‘d‘,‘e‘,‘f‘];
var k =$.merge( $.merge([],first), second);
console.log(first);                  //  ["a", "b", "c"]

var first = [‘a‘,‘b‘,‘c‘];
var second = [‘d‘,‘e‘,‘f‘];
var k =$.merge( $.merge([],first), second);
console.log(second);                 //  ["d", "e", "f"]

相信通过上面的代码已经对 $.merge( first,second ) 和 $.merge( [],first ) 有了直观的认识，剩下的就是实践。

jQuery.noop()

  • 此方法不接受任何参数。
  • 没有返回值（也可视作返回undefined）。
  • 函数的源代码：noop: function() {}
var result = $.map( [1, 2, 3], $.noop );
console.log(result);       // []

var arr = $.map([1, 2, 3 , 4], function(a) {
        return a + a;
});
console.log(arr);          // [2, 4, 6, 8]

通过上例对 $.noop 理解相信已经了然于胸。

jQuery.now()

  • 这个方法不接受任何参数。
  • $.now() 方法是表达式 ( new Date ).getTime() 返回值的一个简写。

jQuery.parseHTML( data[,context ][,keepScripts] )

使用原生方法将字符串转换为一个DOM节点的集合，然后插入到文档。

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

<head>
    <meta charset="utf-8">
    <title>jQuery.extend demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
    <div id="log">
        <h3>Content:</h3>
    </div>
    <script>
    var $log = $("#log"),
        str = "hello, <b>my name is</b> jQuery.",
        parse = $.parseHTML(str),
        nodeNames = [];

    $log.append(parse);

    $.each(parse, function(i, el) {
        nodeNames[i] = "<li>" + el.nodeName + "</li>";
    });

    $log.append("<h3>Node Names:</h3>");
    $("<ol></ol>")
        .append(nodeNames.join(""))
        .appendTo($log);
    </script>
</body>

</html>

el.nodeName 获取节点名，放入数组，采用join() 方法把数组中所有元素放到字符串，然后插入DOM 

jQuery.parseJSON( json )

  • 接受一个标准格式的JSON字符串，并返回解析后的JavaScript值。
  • 从jQuery3.0开始，以不推荐使用，推荐 JSON.parse() 方法。

JSON.parse( text[,reviver] ):

JSON.parse(‘{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}‘, function (k, v) {
    console.log(k); // 输出当前的属性名，从而得知遍历顺序是从内向外的，
                  // 最后一个属性名会是个空字符串。                  1,2,4,6,5,3,空
    return v;      // 返回原始属性值，相当于没有传递 reviver 参数。    Object {1: 1, 2: 2, 3: Object}
});

jQuery.parseXML()

  • 使用原生解析函数浏览器创建一个有效的XML文档。
  • 函数的返回值为XMLDocument类型，返回解析后的XML文档对象。

jQuery.proxy()

  • $.proxy 方法接受一个已有的函数，并返回一个带特定上下文的新的函数。
  • 该方法通常用于向上下文指向不同对象的元素添加事件。
  • 如果您绑定从 $.proxy 返回的函数，jQuery 仍然可以通过传递的原先的函数取消绑定正确的函数。
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>jQuery.extend demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
    <button>执行 test 函数</button>
    <p></p>
    <script>
        $(document).ready(function(){
          var objPerson = {
            name: "John Doe",
            age: 32,
            test: function(){
              $("p").after("Name: " + this.name + "<br> Age: " + this.age);
            }
          };
          $("button").click($.proxy(objPerson,"test"));
        });
    </script>
</body>

</html>

jQuery.trim()

  • 去掉字符串起始和结尾的空格。
  • 如果这些空白字符在字符串中间时，它们将被保留，不会被移除。
$.trim("    hello, how are you?    ");     // "hello, how are you?"

 

学习一门语言也如王国维所讲的‘人生三境界’。对于 jQuery 的学习需要深入更深入。因为相较于原生JS它是另一种优秀，也许开始接触是因为那几行代码就可以出现的丰富交互效果，后来接触数据同样激动，最后愿所有学习者都可以触类旁通

jQuery 核心02


联系
我们