首页 >web前端 >前端问答 >jquery的核心函数有哪些

jquery的核心函数有哪些

青灯夜游
青灯夜游原创
2021-11-15 16:24:122757浏览

jquery的核心函数:1、jQuery(),主要用于获取HTML DOM元素并将其封装为jQuery对象;2、“jQuery.noConflict()”,用于让渡变量“$”的jQuery控制权。

jquery的核心函数有哪些

本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

jQuery 核心函数

函数 描述
jQuery() 接受一个字符串,其中包含了用于匹配元素集合的 CSS 选择器。
jQuery.noConflict() 运行这个函数将变量 $ 的控制权让渡给第一个实现它的那个库。

函数说明

jQuery():

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

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

语法

  • jQuery( selector, [ context ])
    将选择器字符串selector所对应的HTML DOM元素封装为jQuery对象。可选参数context用于指定查找DOM元素的范围。
  • jQuery( [ obj ])
    将指定对象obj封装为jQuery对象。这个对象可以是一个DOM元素(Element),也可以是一个DOM元素数组,也可以是一个jQuery对象(对其进行克隆),或者其他对象。你也可以省略该参数,从而返回一个空的jQuery对象。

jQuery 1.4 新增省略参数obj的用法:不传入任何参数,将返回空的jQuery对象

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

jQuery 1.0 新增该用法。

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

jQuery 1.4 新增该用法。

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

jQuery 1.0 新增该用法。

参数

属性 说明
selector
属性 说明
selector String类型 指定的选择器字符串,用于查找对应的DOM元素。
context 可选/Object类型 指定选择器字符串的查找范围,可以是DOM元素、DOM元素数组、文档、jQuery对象。如果省略该参数,默认为当前文档。
obj 可选/Object类型 指定的对象,用于封装为jQuery对象。可以是DOM元素、DOM元素数组、文档、jQuery对象等。
html Object类型 指定的HTML标签字符串,例如"a6f776b766579c28d02706af09482172"、"e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3"、"9a4b06dcac8449df108f039ca54939d094b3e26ee717c64999d7867364b1b4a3"(标签中也可以嵌套标签,只要符合html语法即可)。
ownerDocument Document类型 指定DOM元素在哪个文档上进行临时创建,默认为当前文档。
properties Object类型 指定的对象,用于指定DOM元素的属性、事件和方法。例如:{name:”username”, “click”:function(){}}
callback Function类型 指定的函数,用于在DOM文档加载完成后立即执行。
String类型 指定的选择器字符串,用于查找对应的DOM元素。
context 可选/Object类型 指定选择器字符串的查找范围,可以是DOM元素、DOM元素数组、文档、jQuery对象。如果省略该参数,默认为当前文档。
obj 可选/Object类型 指定的对象,用于封装为jQuery对象。可以是DOM元素、DOM元素数组、文档、jQuery对象等。
html Object类型 指定的HTML标签字符串,例如"a6f776b766579c28d02706af09482172"、"e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3"、"d0659237eeb5c5f8cf72d25d81da40c994b3e26ee717c64999d7867364b1b4a3"(标签中也可以嵌套标签,只要符合html语法即可)。
ownerDocument Document类型 指定DOM元素在哪个文档上进行临时创建,默认为当前文档。
properties Object类型 指定的对象,用于指定DOM元素的属性、事件和方法。例如:{name:”username”, “click”:function(){}}
callback Function类型 指定的函数,用于在DOM文档加载完成后立即执行。

返回值

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

示例&说明:

  • jQuery( selector, [ context ])示例代码:
// 选择当前文档中所有的p标签DOM元素
$("p");

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

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

// 选择所有p标签中带test样式的DOM元素
$("p .test");
  • jQuery( [ obj ] 示例代码:
var dom = document.getElementById("username");
// 将DOM元素封装为jQuery对象
$(dom);

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

// 将body元素封装为jQuery对象
$(document.body);
  • jQuery( html, [ ownerDocument ])示例代码:
// 创建一个空的span标签的临时DOM元素,并将其封装为jQuery对象
// 以下三种方式的效果一致
$(&#39;<span/>&#39;);
$(&#39;<span></span>&#39;);
$(&#39;<span>&#39;); // 但不推荐使用这种方式

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

// 创建一个表格
var html = &#39;<table>&#39;;
html += &#39;<tr>&#39;;
html += &#39;<td>单元格1</td>&#39;;
html += &#39;<td>单元格2</td>&#39;;
html += &#39;</tr>&#39;;
html += &#39;<tr>&#39;;
html += &#39;<td>单元格3</td>&#39;;
html += &#39;<td>单元格1</td>&#39;;
html += &#39;</tr>&#39;;
html += &#39;</table>&#39;;
$(html);
  • jQuery(html, properties )示例代码:
// 创建一个临时的链接jQuery对象
var tempLink = $(&#39;<a/>&#39;, {
    id: &#39;goback&#39;,
    title: &#39;CodePlayer&#39;,
    html: &#39;CodePlayer&#39;, // 表示链接的锚文本,也就是innerHTML的值
    href: &#39;http://www.365mini.com/&#39;,
    click: function(){
        // 统计点击次数       
    }
});
// 追加到body标签内容的末尾
tempLink.appendTo("body");


$(&#39;<input/>&#39;, {
    type: &#39;checkbox&#39;,
    val: &#39;def&#39;, // 表示表单元素的value属性值或textarea的输入内容
    click: function(){
        alert("点击了复选框");
    }
}).appendTo("body");
  • jQuery( callback )示例代码:
$(function(){
    // 本文档页面载入完成后自动执行
    alert("文档加载完毕!");
});

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

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

jQuery.noConflict()

noConflict() 方法让渡变量 $ 的 jQuery 控制权。

该方法释放 jQuery 对 $ 变量的控制。

该方法也可用于为 jQuery 变量规定新的自定义名称。

提示:在其他 JavaScript 库为其函数使用 $ 时,该方法很有用。

语法:jQuery.noConflict(removeAll)

  • removeAll    布尔值。指示是否允许彻底将 jQuery 变量还原。    

相关视频教程推荐:jQuery教程(视频)

以上是jquery的核心函数有哪些的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn