03-jQuery核心函数
jQuery()
jQuery()
是jQuery的核心函数这不难想象,难以想象的是在jQuery中jQuery()
de 众多用法,传入不同的参数到jQuery()
众多不一样的作用,但是尽管作用千差万别,返回的总是与jQuery对象相关的。
jQuery()
在通常的使用中写作$()
,所以也可以说jQuery的核心函数是$()
,因为$()
在书写上简便,所以在通常情况下使用$()
.
$(selector [, context ])
$()
可传入的参数很多,最基础的就是selector
选择器,这里的选择器是css
的选择器。
当然默认情况下选择器是从根节点开始搜索的,随后指定的context
的作用是设置选择器搜索的范围,可以是一一个DOM元素,文档或者作为上下文的jQuery对象,当你使用一个变量去承接这个函数的返回值时,你会发现,其返回的结果是一个jQuery对象,如果选择器找到多个元素,这个jQuery对象,将会包含所有元素,如果没有找到选择器指定的元素,将会返回一个,.length
为0的“空”jQuery对象。
<!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提供的方法方便快捷的操作。
<!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 )
在入口函数讲解,这里不做解释。