jquery的核心函數:1、jQuery(),主要用於取得HTML DOM元素並將其封裝為jQuery物件;2、“jQuery.noConflict()”,用於讓渡變數“$”的jQuery控制權。
本教學操作環境:windows7系統、jquery1.10.2版本、Dell G3電腦。
jQuery 核心函數
#函數 | 描述 |
---|---|
jQuery() | 接受一個字串,其中包含了用於匹配元素集合的CSS 選擇器。 |
jQuery.noConflict() | 運行這個函數將變數 $ 的控制權讓渡給第一個實現它的那個函式庫。 |
jQuery()函數是jQuery函式庫的最核心函數,jQuery的一切都是基於此函數的。此函數主要用於取得HTML DOM元素並將其封裝為jQuery對象,以便於使用jQuery物件提供的其他屬性和方法對DOM元素進行操作。
jQuery()函數的功能非常強大,它可以將各種類型的參數智慧地封裝為jQuery物件。
jQuery 1.4 新增省略參數obj的用法:不傳入任何參數,將傳回空的jQuery物件
jQuery 1.0 新增該用法。
jQuery 1.4 新增該用法。
jQuery 1.0 新增該用法。
屬性 | |
---|---|
##selector | String類型 指定的選擇器字串,用於尋找對應的DOM元素。 |
context | 可選/Object類型 指定選擇器字串的尋找範圍,可以是DOM元素、DOM元素陣列、文件、 jQuery物件。如果省略該參數,預設為目前文件。 |
obj | 可選/Object類型 指定的對象,用於封裝為jQuery物件。可以是DOM元素、DOM元素數組、文檔、jQuery物件等。 |
html |
Object類型 指定的HTML標籤字串,例如"a6f776b766579c28d02706af09482172"、"01ffcd5d1a840d2341909ced6bafa76c94b3e26ee717c64999d7867364b1b4a3"、"d0659237eeb5c5f8cf72d25d81da40c994b3e26ee717c64999d7867364b1b4a3" (標籤中也可以嵌套標籤,只要符合html語法即可)。 |
ownerDocument | Document類型 指定DOM元素在哪個文件上暫時創建,預設為目前文件。 |
properties | Object類型 指定的對象,用於指定DOM元素的屬性、事件和方法。例如:{name:”username”, “click”:function(){}} |
#callback | Function類型 指定的函數,用於在DOM文檔載入完成後立即執行。 |
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: 'http://www.365mini.com/', 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("文档加载完毕!"); });jQuery.noConflict()noConflict() 方法讓渡變數$ 的jQuery 控制權。此方法釋放jQuery 對$ 變數的控制。
此方法也可用於為jQuery 變數規定新的自訂名稱。提示:當其他JavaScript 函式庫為其函數使用$ 時,該方法很有用。語法:
jQuery.noConflict(removeAll)
jQuery教學(影片)
以上是jquery的核心函數有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!