03-jQuery核心函数

jQuery()

jQuery()是jQuery的核心函数这不难想象,难以想象的是在jQuery中jQuery()de 众多用法,传入不同的参数到jQuery() 众多不一样的作用,但是尽管作用千差万别,返回的总是与jQuery对象相关的。

jQuery()在通常的使用中写作$(),所以也可以说jQuery的核心函数是$(),因为$()在书写上简便,所以在通常情况下使用$().

$(selector [, context ])

$()可传入的参数很多,最基础的就是selector选择器,这里的选择器是css的选择器。

当然默认情况下选择器是从根节点开始搜索的,随后指定的context的作用是设置选择器搜索的范围,可以是一一个DOM元素,文档或者作为上下文的jQuery对象,当你使用一个变量去承接这个函数的返回值时,你会发现,其返回的结果是一个jQuery对象,如果选择器找到多个元素,这个jQuery对象,将会包含所有元素,如果没有找到选择器指定的元素,将会返回一个,.length为0的“空”jQuery对象。

image-20200617024624603

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入口函数</title>
    <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
</head>

<body>
    <div id="box">
        box
        <div class="box2">box2</div>
    </div>
</body>
<script>
    $(function() {
        // 默认搜索起点
        var box = $("#box");
        console.log(box);
        // 设置搜索起点
        var box2 = $(".box2", "#box");
        console.log(box2);
        // 无效选择器
        var box3 = $("#box3");
        console.log(box3);
    });
</script>
</html>

$( element ) && $( elementArray )

我们可以说使用$(element)$(elementArray),将一个或者DOM元素或者我们用其他一些方式已找到的元素转换为jQuery对象,从而使用jQuery提供的方法方便快捷的操作。

image-20200617025216025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入口函数</title>
    <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
</head>

<body>
    <div id="box">
        box
        <div class="box2">box2</div>
    </div>
</body>
<script>
    $(function() {
        var box = $("#box");
        console.log(box);
        box.click(function() {
            // this 传入本身(jQuery对象)为 $() 参数
            console.log($(this));
        })
    });
</script>
</html>

$( object ) (没有看懂)

Working With Plain Objects(使用普通的对象)

目前,只支持包裹在jQuery中的普通的JavaScript对象是:.data(),.prop(),.bind(), .unbind(), .trigger().triggerHandler()。使用.data()(或者任何返回.data()的方法),在一个普通的对象会产生一个新的属性的名为jQuery{randomNumber}(如jQuery123456789)。

// define a plain object
var foo = {foo: "bar", hello: "world"};

// Pass it to the jQuery function
var $foo = $( foo );

// test accessing property values
var test1 = $foo.prop( "foo" ); // bar

// test setting property values
$foo.prop( "foo", "foobar" );
var test2 = $foo.prop( "foo" ); // foobar

// test using .data() as summarized above
$foo.data( "keyName", "someValue");
console.log( $foo ); // will now contain a jQuery{randomNumber} property

// test binding an event name and triggering
$foo.bind( "eventName", function () {
  console.log("eventName was called");
});

$foo.trigger( "eventName" ); // logs "eventName was called"

如果.trigger( "eventName" )被使用,它会在这个对象上搜寻一个“eventName的”属性,并且尝试任何附加在jQuery上的处理器执行完成后执行。它不检查该属性是否是一个函数。为了避免这种情况,.triggerHandler( "eventName" )应代替使用。

$foo.triggerHandler( "eventName" ); // also logs "eventName was called"

$( jQuery object )

当一个jQuery对象作为一个参数传递给$()方法时,新的变量承接到$()的结果是被克隆的jQuery对象。这个新的jQuery对象将引用被克隆jQuery对像包含DOM元素。

$()

在jQuery 1.4中,如果你传递给jQuery()方法一个空参数,一个空的jQuery设置将被返回(.length属性为0)。 在以前的jQuery版本中,一个包含整个文档节点的集合将被返回。

$( html [, ownerDocument ] )(没有看懂)

$()传入一个字符串,jQuery会首先检查他看上去是不是向HTML字符串,如果不是就会把它解释为选择器,解释上下文。

$( html, attributes )

在jQuery中,可以通过向$()内传入HTML的代码片段,就会将传入的代码片段形成DOM元素追加到返回的jQuery对象中,也就是向$()传入HTML代码,同意会返回jQuery对象,这个对象包含传入的HTML代码形成的DOM元素。

$()形成HTML代码的DOM元素是通过.innerHTML机制,所以有一些标签会被浏览器过滤(如:<html>, <title>, <head>),这也就导致了被插入的元素可能不是,传入的字符串。

只有传入完整的代码片段,可以包含其他标签,但是代码要包含结束标签,因为只有这也才可以完好的兼容。

在jQuery 1.4 开始,第二个参数可是传入一个简单对象,这个对象是元素的属性集合,但是如果传入第二个参数,第一个参数讲,不能包含任何属性.

$( callback )

入口函数讲解,这里不做解释。

posted @ 2020-06-17 17:57  一生亦木  阅读(27)  评论(0编辑  收藏  举报