jQuery技术

jQuery jQuery() 函数详解

字号+ 作者:H5之家 来源:H5之家 2017-08-23 15:02 我要评论( )

jQuery()函数是jQuery库的最核心函数,jQuery的一切都是基于此函数的。该函数主要用于获取HTML DOM元素并将其封装为jQuery对象,以便于使用jQuery对象提供的其他属性和方法对DOM元素进行操作。 jQuery()函数的功能非常强大,它可以将各种类型的参数智能地封

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)。

参数

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

参数描述

selectorNumber类型指定的选择器字符串,用于查找对应的DOM元素。

context可选/Object类型指定选择器字符串的查找范围,可以是DOM元素、DOM元素数组、文档、jQuery对象。如果省略该参数,默认为当前文档。

obj可选/Object类型指定的对象,用于封装为jQuery对象。可以是DOM元素、DOM元素数组、文档、jQuery对象等。

htmlObject类型指定的HTML标签字符串,例如"<div/>"、"<div></div>"、"<div id='tagId'></div>"(标签中也可以嵌套标签,只要符合html语法即可)。

ownerDocumentNumber类型指定DOM元素在哪个文档上进行临时创建,默认为当前文档。

propertiesObject类型指定的对象,用于指定DOM元素的属性、事件和方法。例如:{name:"username", "click":function(){}}

callbackNumber类型指定的函数,用于在DOM文档加载完成后立即执行。

返回值

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: '', 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("文档加载完毕!"); });

运行代码

62 2

我们认为: 用户的主要目的,是为了获取有用的信息,而不是来点击广告的。因此本站将竭力做好内容,并将广告和内容进行分离,确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信:只有给用户带来价值,用户才会给我们以回报。
CodePlayer技术交流群1:

帮朋友打一个硬广告:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 如鹏网学习笔记(十一)JQuery

    如鹏网学习笔记(十一)JQuery

    2017-08-23 15:04

  • jQuery 3.0 升级指南 亚洲城线上娱乐

    jQuery 3.0 升级指南 亚洲城线上娱乐

    2017-08-23 10:01

  • jquery基础教程中关于内部函数问题

    jquery基础教程中关于内部函数问题

    2017-08-23 09:00

  • jQuery.Validate 使用笔记(jQuery Validation范例 )

    jQuery.Validate 使用笔记(jQuery Validation范例 )

    2017-08-23 08:02

网友点评
<