CodePlayer

jQuery()函数是jQuery库的最核心函数，jQuery的一切都是基于此函数的。该函数主要用于获取HTML DOM元素并将其封装为jQuery对象，以便于使用jQuery对象提供的其他属性和方法对DOM元素进行操作。

jQuery()函数的功能非常强大，它可以将各种类型的参数智能地封装为jQuery对象。

语法

jQuery()函数的功能非常强大，因此用法也比较复杂，其主要用法如下：

用法一：

jQuery( selector, [ context ] )

将选择器字符串selector所对应的HTML DOM元素封装为jQuery对象。可选参数context用于指定查找DOM元素的范围。

用法二：

// jQuery 1.4 新增省略参数obj的用法：不传入任何参数，将返回空的jQuery对象
jQuery( [ obj ] )

将指定对象obj封装为jQuery对象。这个对象可以是一个DOM元素(Element)，也可以是一个DOM元素数组，也可以是一个jQuery对象(对其进行克隆)，或者其他对象。你也可以省略该参数，从而返回一个空的jQuery对象。

用法三：

jQuery( html, [ ownerDocument ] )

根据HTML标签字符串html动态地创建临时DOM元素，并将其封装为jQuery对象。可选参数ownerDocument用于指定临时DOM元素在哪个文档中创建(如果存在多个文档的话，例如框架页面)。

用法四：jQuery 1.4 新增该用法。

// v1.4 新增
jQuery( html, properties )

根据HTML标签字符串html和包含其附加属性、事件以及方法的properties对象，动态地创建临时DOM元素，并将其封装为jQuery对象。

用法五：

jQuery( callback )

在当前文档载入完成后，执行指定的函数callback。该用法是ready()函数如下用法的简写：jQuery(document).ready(callback)。

参数

请根据前面语法部分所定义的参数名称查找对应的参数。

返回值

jQuery()函数的返回值是jQuery类型，返回一个jQuery对象。

示例&说明

由于jQuery()函数较为复杂，此处将使用较大的篇幅对上述用法进行一一介绍。

用法一

// 选择当前文档中所有的p标签DOM元素
$("p");

// 选择id属性为username的DOM元素
$("#username");

// 选择所有包含test样式的DOM元素，(例如：class="test")
$(".test");

// 选择所有p标签中带test样式的DOM元素
$("p .test");

运行代码

用法二

var dom = document.getElementById("username");
// 将DOM元素封装为jQuery对象
$(dom);

var doms = document.getElementsByName("book_id");
// 将DOM元素数组封装为jQuery对象
$(doms);

// 将body元素封装为jQuery对象
$(document.body);

运行代码

用法三

// 创建一个空的span标签的临时DOM元素，并将其封装为jQuery对象
// 以下三种方式的效果一致
$('<span/>');
$('<span></span>');
$('<span>'); // 但不推荐使用这种方式

// 创建一个p标签，内部包含带有test样式的span标签
$('<p><span class="test"></span></p>');

// 创建一个表格
var html = '<table>';
html += '<tr>';
html += '<td>单元格1</td>';
html += '<td>单元格2</td>';
html += '</tr>';
html += '<tr>';
html += '<td>单元格3</td>';
html += '<td>单元格1</td>';
html += '</tr>';
html += '</table>';
$(html);

运行代码

用法四

// 创建一个临时的链接jQuery对象
var tempLink = $('<a/>', {
	id: 'goback',
	title: 'CodePlayer',
	html: 'CodePlayer', // 表示链接的锚文本，也就是innerHTML的值
	href: 'https://codeplayer.vip/',
	click: function(){
		// 统计点击次数		
	}
});
// 追加到body标签内容的末尾
tempLink.appendTo("body");


$('<input/>', {
	type: 'checkbox',
	val: 'def', // 表示表单元素的value属性值或textarea的输入内容
	click: function(){
		alert("点击了复选框");
	}
}).appendTo("body");

运行代码

用法五

$(function(){
	// 本文档页面载入完成后自动执行
	alert("文档加载完毕!");
});

// 这相当于ready()函数如下用法的简写

$(document).ready(function(){
	// 本文档页面载入完成后自动执行
	alert("文档加载完毕!");
});

运行代码