免費(fèi)AI編程助手
JavaScript 工具庫(kù)
MDUI 內(nèi)置了一個(gè)輕量的 JavaScript 工具庫(kù)，它擁有和 jQuery 類(lèi)似的 api 和 jQuery 風(fēng)格的鏈?zhǔn)秸{(diào)用，但體積僅為 jQuery 的八分之一。
你可以通過(guò) mdui.JQ 來(lái)調(diào)用該庫(kù)，但最好把 mdui.JQ 存儲(chǔ)到一個(gè)簡(jiǎn)短的變量中以方便調(diào)用，為了避免和其他庫(kù)沖突，推薦使用 $$。
var $$ = mdui.JQ;在后面的文檔中，都使用 $$ 來(lái)表示 mdui.JQ。
$$()
該方法有多種用法：
可以傳入一個(gè) CSS 選擇器作為參數(shù)，返回包含匹配元素的 JQ 對(duì)象。該方法是通過(guò) querySelectorAll 實(shí)現(xiàn)的。
$$('.mdui-table')可以傳入 DOM 元素、DOM 元素?cái)?shù)組、NodeList、JQ 對(duì)象，返回包含指定元素的 JQ 對(duì)象。
$$(document)可以傳入 HTML 字符串，返回包含根據(jù) HTML 創(chuàng)建的 DOM 的 JQ 對(duì)象。
$$('<div id="wrapper"><span id="inner"></span></div>')可以傳入一個(gè)函數(shù)，在 DOM 加載完畢后會(huì)調(diào)用該函數(shù)。
$$(function () { console.log('DOM Loaded') })$$.extend()
如果只傳入一個(gè)對(duì)象，該對(duì)象中的屬性將合并到 JQ 對(duì)象中，相當(dāng)于在 JQ 的命名空間下添加新的功能。
$$.extend({customFunc: function () {} }) // 然后就可以這樣調(diào)用自定義方法了 $$.customFunc()
如果傳入了兩個(gè)或更多個(gè)對(duì)象，所有對(duì)象的屬性都添加到第一個(gè)對(duì)象，并返回合并后的對(duì)象。
var object = $$.extend({ key1: val1 }, { key2: val2 }, { key3: val3 } ); // 此時(shí)第一個(gè)對(duì)象和返回值都是 { key1: val1, key2: val2, key3: val3 }
$$.fn.extend()
在 JQ 的原型鏈上擴(kuò)展方法。
$$.fn.extend({customFunc: function () {} }) // 然后就可以這樣使用擴(kuò)展的方法了 $$(document).customFunc()
$$.param()
將數(shù)組或?qū)ο笮蛄谢?/p>
$$.param({width:1680, height:1050})// width=1680&height=1050 $$.param({foo: {one: 1,two: 2 } })// foo[one]=1&foo[two]=2 $$.param({ids:[1,2,3] })// ids[]=1&ids[]=2&ids[]=3
$$.each()
遍歷數(shù)組或?qū)ο?/p>
$$.each(['a', 'b', 'c'], function (i, value) {console.log(i + ':' + value); }) // 結(jié)果： // 0:a // 1:b // 2:c
$$.each({'name': 'mdui', 'lang': 'zh'}, function (i, value) {console.log(i + ':' + value); }) // 結(jié)果 // name:mdui // lang:zh
$$.merge()
合并兩個(gè)數(shù)組，合并的結(jié)果會(huì)替換第一個(gè)數(shù)組的內(nèi)容，并返回合并的結(jié)果。
var first = ['a', 'b', 'c']; var second = ['c', 'd', 'e']; var result = $$.merge(first, second);console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e'] console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e']
$$.unique()
刪除數(shù)組中的重復(fù)元素?？梢允?nbsp;DOM 元素?cái)?shù)組、字符串?dāng)?shù)組、數(shù)字?jǐn)?shù)組。返回去重后的數(shù)組。
var result = $$.unique([1,2,12,3,2,1,2,1,1,1,1]);console.log(result); // [1, 2, 12, 3]
$$.map()
遍歷數(shù)組或?qū)ο螅ㄟ^(guò)函數(shù)返回一個(gè)新的數(shù)組或?qū)ο?，null 和 undefined 將被過(guò)濾掉。
var result = $$.map(['a', 'b', 'c'], function (value, key) {return i + value; }); console.log(result); // ['0a', '1b', '2c']
$$.contains()
判斷父節(jié)點(diǎn)是否包含子節(jié)點(diǎn)，返回布爾值。
$$.contains(document, document.body); // true$$.contains(document.body, document); // false
.is()
根據(jù) CSS 選擇器、DOM 元素、或 JQ 對(duì)象來(lái)檢測(cè)匹配的元素集合，至少有一個(gè)元素匹配則返回 true，否則返回 false。
$$('.box').is('.box'); // true$$('.box').is('.boxss'); // false$$('.box').is($$('.box')[0]); // true
.length
返回 JQ 對(duì)象中元素的數(shù)量。
$$('body').length; // 1.each()
遍歷一個(gè) JQ 對(duì)象，為每一個(gè)匹配元素執(zhí)行一個(gè)函數(shù)。如果函數(shù)返回 false，則結(jié)束遍歷。
函數(shù)的第一個(gè)參數(shù)為元素的索引號(hào)，第二個(gè)參數(shù)為當(dāng)前元素。函數(shù)的 this 關(guān)鍵字指向當(dāng)前元素。
$$('img').each(function(i, element) {this.src = 'test' + i + '.jpg'; });
.map()
遍歷一個(gè) JQ 對(duì)象，為對(duì)象的每個(gè)元素都調(diào)用一個(gè)函數(shù)，生成一個(gè)包含函數(shù)返回值的新的 JQ 對(duì)象。null 和 undefined 會(huì)被過(guò)濾掉。
函數(shù)的第一個(gè)參數(shù)為元素的索引號(hào)，第二個(gè)參數(shù)為當(dāng)前元素。函數(shù)的 this 關(guān)鍵字指向當(dāng)前元素。
var result = $$('input.checked').map(function (i, element) {return $$(this).val();}); // result 為匹配元素的值組成的 JQ 對(duì)象
.eq()
返回 JQ 對(duì)象中指定索引號(hào)的元素的 JQ 對(duì)象。
$$('div').eq(0); // 返回第一個(gè)元素的 JQ 對(duì)象$$('div').eq(-1); // 返回最后一個(gè)元素的 JQ 對(duì)象$$('div').eq(-2); // 返回倒數(shù)第二個(gè)元素的 JQ 對(duì)象
.first()
返回 JQ 對(duì)象中第一個(gè)元素的 JQ 對(duì)象。
$$('div').first(); // 返回第一個(gè) div 的 JQ 對(duì)象.last()
返回 JQ 對(duì)象中最后一個(gè)元素的 JQ 對(duì)象。
$$('div').last(); // 返回最后一個(gè) div 的 JQ 對(duì)象.get()
返回 JQ 對(duì)象中指定索引號(hào)的 DOM 元素。若沒(méi)有指定索引號(hào)，則返回 JQ 對(duì)象中所有 DOM 元素組成的數(shù)組。
$$('div').get(); // 返回所有 div 元素組成的數(shù)組$$('div').get(0); // 返回第一個(gè) div 元素$$('div').get(-1); // 返回最后一個(gè) div 元素
.index()
如果沒(méi)有傳入?yún)?shù)，則返回 JQ 對(duì)象中第一個(gè)元素相對(duì)于同輩元素的索引值。
如果傳入了一個(gè) CSS 選擇器作為參數(shù)，則返回 JQ 對(duì)象中第一個(gè)元素相對(duì)與 CSS 選擇器匹配元素的索引值。
如果傳入了一個(gè) DOM 元素，則返回該 DOM 元素在 JQ 對(duì)象中的索引值。
<div id="child">
<div id="child1"></div>
<div id="child2"></div>
<div id="child3"></div>
<div id="child4"></div>
</div>$$('#child3').index(); // 2$$('#child3').index('#child div'); // 2$$('#child div').index($$('#child3').get(0); // 2
.slice()
返回一個(gè) JQ 對(duì)象的子集。
子集為從 start 開(kāi)始的元素。如果傳入了 end 參數(shù)，則提取從 start 到不包含 end 位置的元素。
$$('div').slice(3); // 返回對(duì)象中第三個(gè)（包含第三個(gè)）之后的所有元素$$('div').slice(3, 5); // 返回對(duì)象中第三個(gè)到第五個(gè)（包含第三個(gè)，不包含第五個(gè)）之間的元素
.filter()
從 JQ 對(duì)象中篩選出與指定表達(dá)式匹配的元素的 JQ 對(duì)象。參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、函數(shù)。
參數(shù)為函數(shù)時(shí)，函數(shù)的第一個(gè)參數(shù)為當(dāng)前元素在 JQ 對(duì)象中的索引號(hào)，第二個(gè)參數(shù)為當(dāng)前元素，this 關(guān)鍵字指向當(dāng)前元素。函數(shù)返回 true 時(shí)，該元素會(huì)被保留，返回 false 時(shí)，該元素會(huì)被去除。
// 篩選出所有含 .box 類(lèi)的 div 元素的 JQ 對(duì)象 $$('div').filter('.box');// 篩選出所有已選中選項(xiàng)的 JQ 對(duì)象 $$('#select option').filter(function (idx, element) {return element.selected; });
.not()
從 JQ 對(duì)象中篩選出與指定表達(dá)式不匹配的元素的 JQ 對(duì)象。參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、函數(shù)。
參數(shù)為函數(shù)時(shí)，函數(shù)的第一個(gè)參數(shù)為當(dāng)前元素在 JQ 對(duì)象中的索引號(hào)，第二個(gè)參數(shù)為當(dāng)前元素，this 關(guān)鍵字指向當(dāng)前元素。函數(shù)返回 true 時(shí)，該元素會(huì)被去除，返回 false 時(shí)，該元素會(huì)被保留。
// 篩選出所有不含 .box 類(lèi)的 div 元素的 JQ 對(duì)象 $$('div').filter('.box');// 篩選出所有未選中選項(xiàng)的 JQ 對(duì)象 $$('#select option').filter(function (idx, element) {return element.selected; });
.hasClass()
判斷 JQ 對(duì)象中的第一個(gè)元素是否含有指定 CSS 類(lèi)。
$$('div').hasClass('item').addClass()
為元素添加 CSS 類(lèi)，多個(gè)類(lèi)名之間可以用空格分隔。
$$('div').addClass('item')$$('div').addClass('item1 item2').removeClass()
移除元素上的 CSS 類(lèi)，多個(gè)類(lèi)名之間可以用空格分隔。
$$('div').removeClass('item')$$('div').removeClass('item1 item2').toggleClass()
元素上的 CSS 類(lèi)，有則刪除，無(wú)則添加。多個(gè)類(lèi)名之間可以用空格分隔。
$$('div').toggleClass('item')$$('div').toggleClass('item1 item2').prop()
獲取或設(shè)置選中元素的屬性值。
// 獲取第一個(gè)元素的屬性值 $$('input[type="checkbox"]').prop('checked');// 設(shè)置所有選中元素的屬性值 $$('input[type="checkbox"]').prop('checked', true);// 同時(shí)設(shè)置元素的多個(gè)屬性值 $$('input').prop({checked: false, disabled: true })
.removeProp()
刪除選中元素指定的屬性值。
$$('input').removeProp('disabled').attr()
獲取或設(shè)置選中元素的屬性值。
// 獲取第一個(gè)元素的屬性值 $$('div').attr('username');// 設(shè)置所有選中元素的屬性值 $$('div').attr('username', 'mdui');// 同時(shí)設(shè)置元素的多個(gè)屬性值 $$('div').prop({username: 'mdui', lastname: 'test' })
.removeAttr()
刪除選中元素的指定屬性值。
$$('div').removeAttr('username').val()
獲取或設(shè)置選中元素的值。
// 獲取選中的第一個(gè)元素的值 $$('#input').val()// 設(shè)置選中元素的值 $$('#input').val('input value')
.text()
獲取或設(shè)置選中元素的文本內(nèi)容。
// 獲取選中的第一個(gè)元素的文本內(nèi)容 $$('#box').text()// 設(shè)置選中元素的文本內(nèi)容 $$('#box').text('text content')
.html()
獲取或設(shè)置選中元素的 HTML 內(nèi)容。
// 獲取選中的第一個(gè)元素的 HTML 內(nèi)容 $$('#box').html()// 設(shè)置選中元素的 HTML $$('#box').html('html content')
$$.data()
在 DOM 元素上讀取或存儲(chǔ)數(shù)據(jù)。
var dom = document.getElementById('box'); // 在 DOM 元素上存儲(chǔ)一個(gè)字符串 $$.data(dom, 'key', 'value');// 在 DOM 上存儲(chǔ)一個(gè)對(duì)象 $$.data(dom, 'obj', {test: 'test'});// 在 DOM 上同時(shí)存儲(chǔ)多個(gè)數(shù)據(jù) $$.data(dom, {key1: 'value1', key2: { test: 'test' } }); // 獲取 DOM 上存儲(chǔ)的所有數(shù)據(jù) $$.data(dom);
$$.removeData()
刪除 DOM 上存儲(chǔ)的數(shù)據(jù)。
// 刪除 DOM 上存儲(chǔ)的鍵名為 key 的數(shù)據(jù)
$$.removeData(dom, 'key');.data()
在當(dāng)前 JQ 對(duì)象的元素上存儲(chǔ)數(shù)據(jù)。
// 在 .box 元素上存儲(chǔ)一個(gè)字符串 $$('.box').data('key', 'value');// 在 .box 元素上存儲(chǔ)一個(gè)對(duì)象 $$('.box').data('obj', {test: 'test' }); // 在 .box 元素上同時(shí)存儲(chǔ)多個(gè)數(shù)據(jù) $$('.box').data({key1: 'value1', key2: { test: 'test' } }); // 獲取 .box 上存儲(chǔ)的所有數(shù)據(jù) $$('.box').data();
.removeData()
刪除 JQ 對(duì)象的元素上存儲(chǔ)的數(shù)據(jù)。
// 刪除 .box 元素上存儲(chǔ)的鍵名為 key 的數(shù)據(jù)
$$('.box').removeData('key');.css()
獲取 JQ 對(duì)象中的第一個(gè)元素的樣式值，或者設(shè)置每一個(gè)元素的樣式。
// 獲取元素樣式值 $$('#box').css('color')// 設(shè)置元素的樣式值 $$('#box').css('color', 'red')// 同時(shí)設(shè)置多個(gè)樣式值 $$('#box').css({'color': 'red', 'background-color': 'white' })
.width()
如果沒(méi)有傳入?yún)?shù)，則獲取 JQ 對(duì)象中第一個(gè)元素的寬度。
如果傳入了參數(shù)，則設(shè)置 JQ 對(duì)象中所有元素的寬度，如果參數(shù)是個(gè)數(shù)字或數(shù)字字符串，會(huì)自動(dòng)添加 px 作為單位。
該方法獲取的值默認(rèn)不包含內(nèi)邊距和外邊距，當(dāng) box-sizing:border-box 時(shí)，會(huì)包含內(nèi)邊距。
$$('.box').width();$$('.box').width(10);$$('.box').width('20%')
.height()
如果沒(méi)有傳入?yún)?shù)，則獲取 JQ 對(duì)象中第一個(gè)元素的高度。
如果傳入了參數(shù)，則設(shè)置 JQ 對(duì)象中所有元素的高度，如果參數(shù)是個(gè)數(shù)字或數(shù)字字符串，會(huì)自動(dòng)添加 px 作為單位。
該方法獲取的值默認(rèn)不包含內(nèi)邊距和外邊距，當(dāng) box-sizing:border-box 時(shí)，會(huì)包含內(nèi)邊距。
$$('.box').height();$$('.box').height(10);$$('.box').height('20%');
.innerWidth()
獲取元素的寬度，包含內(nèi)邊距。
$$('.box').innerWidth();.innerHeight()
獲取元素的高度，包含內(nèi)邊距。
$$('.box').innerHeight();.hide()
隱藏 JQ 對(duì)象中的所有元素。
$$('.box').hide();.show()
恢復(fù) JQ 對(duì)象中的所有元素的顯示狀態(tài)。
$$('.box').show();.toggle()
切換 JQ 對(duì)象中所有元素的顯示狀態(tài)。
$$('.box').toggle();.offset()
獲取元素相對(duì)于 document 的偏移，以及元素的寬度和高度。
$$('.box').offset();// { // top: 20, // left: 30, // width: 200, // height: 100 // }
.offsetParent()
返回 JQ 對(duì)象中第一個(gè)元素的用于定位的父元素的 JQ 對(duì)象。即父元素中第一個(gè) position 為 relative 或 absolute 的元素。
$$('.box').offsetParent().position()
獲取元素相對(duì)于父元素的偏移，以及寬度和高度。
$$('.box').position();// { // top: 20, // left: 30, // width: 100, // height: 200 // }
.find()
根據(jù) CSS 選擇器找到指定的后代節(jié)點(diǎn)的集合。
// 找到 #box 的后代節(jié)點(diǎn)中，包含 .box 的節(jié)點(diǎn)集合
$$('#box').find('.box').children()
獲取匹配元素的直接子元素，可以使用 CSS 選擇器作為參數(shù)進(jìn)行過(guò)濾。
參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList。
// 找到 #box 的所有直接子元素 $$('#box').children()// 找到 #box 的所有直接子元素中，包含 .box 的元素集合 $$('#box').children('.box')
.has()
對(duì)匹配元素的子元素，按傳入的參數(shù)進(jìn)行過(guò)濾，返回過(guò)濾后的元素的 JQ 對(duì)象。
傳入的參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList。
// 給含有 ul 的 li 加上背景色
$$('li').has('ul').css('background-color', 'red');.parent()
返回匹配的直接父元素的 JQ 對(duì)象。
如果沒(méi)有傳入?yún)?shù)，則直接返回直接父元素的 JQ 對(duì)象。如果傳入了參數(shù)，僅返回和參數(shù)匹配的直接父元素的 JQ 對(duì)象。
參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList。
// 返回 .box 元素的直接父元素 $$('.box').parent();// 返回 .box 元素的直接父元素中含有 .parent 類(lèi)的元素 $$('.box').parent('.parent');
.parents()
返回匹配的所有祖先元素的 JQ 對(duì)象。
傳入的參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList。
// 返回 span 元素的所有祖先元素 $$('span').parents();// 返回 span 元素的所有是 p 元素的祖先元素 $$('span').parents('p');
.parentsUntil()
查找當(dāng)前元素的所有父輩元素，直到遇到匹配的那個(gè)元素為止。
返回的 JQ 對(duì)象里包含了下面所有找到的父輩元素，但不包含參數(shù)匹配到的元素。
// 查找 .item 元素的所有父輩元素，直到遇到 .parent 元素
$$('.item').parentsUntil('.parent');.prev()
獲取當(dāng)前元素的前一個(gè)同輩元素的 JQ 對(duì)象?？梢允褂脜?shù)進(jìn)行過(guò)濾。
參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList。
// 返回 .box 元素的前一個(gè)元素 $$('.box').prev();// 獲取 .box 元素的前一個(gè) div 元素 $$('.box').prev('div');
.prevAll()
獲取當(dāng)前元素前面的所有同輩元素的 JQ 對(duì)象?？梢允褂脜?shù)進(jìn)行過(guò)濾。
參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList。
// 返回 .box 元素前面的所有同輩元素
$$('.box').prevAll();
// 返回 .box 元素前面的所有含 .selected 的同輩元素
$$('.box').prevAll('.selected');.prevUntil()
獲取當(dāng)前元素前面所有的同輩元素，直到遇到匹配元素，不包含匹配元素。
參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList。
// 返回 .box 元素前所有的同輩元素，直到遇到 .until 元素
$$('.box').prevUntil('.until');.next()
獲取當(dāng)前元素的后一個(gè)同輩元素的 JQ 對(duì)象。可以使用參數(shù)進(jìn)行過(guò)濾。
參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList。
// 返回 .box 元素的后一個(gè)元素 $$('.box').next();// 獲取 .box 元素的后一個(gè) div 元素 $$('.box').next('div');
.nextAll()
獲取當(dāng)前元素后面的所有同輩元素的 JQ 對(duì)象?？梢允褂脜?shù)進(jìn)行過(guò)濾。
參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList。
// 返回 .box 元素后面的所有同輩元素 $$('.box').nextAll();// 返回 .box 元素后面的所有含 .selected 的同輩元素 $$('.box').nextAll('.selected');
.nextUntil()
獲取當(dāng)前元素后面所有的同輩元素，直到遇到匹配元素，不包含匹配元素。
參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList。
// 返回 .box 元素后所有的同輩元素，直到遇到 .until 元素
$$('.box').nextUntil('.until');.closest()
從當(dāng)前元素向上逐級(jí)匹配，返回最先匹配到的元素。
參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList。
// 獲取 .box 元素的父元素中最近的 .parent 元素
$$('.box').closest('.parent');.siblings()
獲取當(dāng)前元素的所有同輩元素。可以使用參數(shù)進(jìn)行過(guò)濾。
參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList。
// 獲取 .box 元素的所有同輩元素
$$('.box').siblings();
// 獲取 .box 元素的所有同輩元素中含 .selected 的元素
$$('.box').siblings('.selected');.add()
添加元素到當(dāng)前 JQ 對(duì)象中。
參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList。
// 把含 .selected 的元素添加到當(dāng)前 JQ 對(duì)象中
$$('.box').add('.selected');.empty()
從 DOM 中移除選中元素的所有子節(jié)點(diǎn)。
$$('.box').empty();.remove()
從 DOM 中移除所有選中的元素。
$$('.box').remove();.prepend()
在選中元素內(nèi)部的前面插入指定內(nèi)容。
傳入的參數(shù)可以是 字符串、HTML、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList。
// HTML 代碼 <p>I would like to say: </p> // js 代碼 $$('p').prepend('<b>Hello</b>');// 結(jié)果 [ <p><b>Hello</b>I would like to say: </p> ]
.prependTo()
把選中元素添加到另一個(gè)指定元素的內(nèi)部的前面。
傳入的參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList。
// HTML 代碼
<p>I would like to say: </p>
// js 代碼
$$('<p>Hello</p>').prependTo('p');
// 結(jié)果
[ <p><p>Hello</p>I would like to say: </p> ].append()
在選中元素內(nèi)部的后面插入指定內(nèi)容。
傳入的參數(shù)可以是 字符串、HTML、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList。
// HTML 代碼 <p>I would like to say: </p> // js 代碼 $$('p').append('<b>Hello</b>');// 結(jié)果 [ <p>I would like to say: <b>Hello</b></p> ]
.appendTo()
把選中元素插入到另一個(gè)指定元素的內(nèi)部的后面。
傳入的參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList。
// HTML 代碼 <p>I would like to say: </p> // js 代碼 $$('<p>Hello</p>').appendTo('p')// 結(jié)果 [ <p>I would like to say: <p>Hello</p></p> ]
.after()
在選中元素的后面插入內(nèi)容。
傳入的參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList、HTML 字符串
// HTML 代碼 <p>I would like to say: </p> // js 代碼 $$('p').after('<b>Hello</b>')// 結(jié)果 [ <p>I would like to say: </p><b>Hello</b> ]
.insertAfter()
把選中元素插入到指定元素的后面。
傳入的參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList、HTML 字符串
// HTML 代碼
<p>I would like to say: </p>
// js 代碼
$$('<b>Hello</b>').insertAfter('p');
// 結(jié)果
[ <p>I would like to say: </p><b>Hello</b> ].before()
在選中元素前面插入內(nèi)容。
傳入的參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList、HTML 字符串
// HTML <p>I would like to say: </p> // js 代碼 $$('p').before('<b>Hello</b>');// 結(jié)果 [ <b>Hello</b><p>I would like to say: </p> ]
.insertBefore()
把選中元素插入到指定元素前面。
傳入的參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList、HTML 字符串
// HTML <p>I would like to say: </p> // js 代碼 $$('p').insertBefore('<b>Hello</b>');// 結(jié)果 [ <p>I would like to say: </p><b>Hello</b> ]
.replaceWith()
用新元素替換選中元素。
傳入的參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList、HTML 字符串
$$('.box').replaceWith('<p>Hello</p>');// 用 <p>Hello</p> 替換所有的 .box 元素
.replaceAll()
用選中元素替換指定元素。
傳入的參數(shù)可以是 CSS 選擇器、JQ 對(duì)象、DOM 元素、DOM 元素?cái)?shù)組、NodeList
$$('.new').replaceAll('.box');// 用 .new 元素替換所有 .box 元素
.clone()
通過(guò)深度克隆來(lái)復(fù)制集合中的所有元素。
通過(guò)原生 cloneNode 方法深度克隆來(lái)復(fù)制集合中的所有元素。此方法不會(huì)有數(shù)據(jù)和事件處理程序復(fù)制到新的元素。這點(diǎn)和jquery中利用一個(gè)參數(shù)來(lái)確定是否復(fù)制數(shù)據(jù)和事件處理不相同。
$$('body').append($$("#box").clone()).serializeArray()
把表單元素的值組合成由 name 和 value 的鍵值對(duì)組成的數(shù)組。
$$('form').serializeArray();// [{"name":"golang","value":"456"},{"name":"name","value":"mdui"},{"name":"password","value":""}]
.serialize()
將表單元素?cái)?shù)組或者對(duì)象序列化。
$$('form').serialize();
// golang=456&name=mdui&password=.on()
為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)。
// 綁定點(diǎn)擊事件 $$('.box').on('click', function (e) {console.log('點(diǎn)擊了 .box 元素'); }); // 綁定多個(gè)事件 $$('.box').on('click focus', function (e) {console.log('click 和 focus 事件都會(huì)觸發(fā)該函數(shù)'); }); // 事件委托 $$(document).on('click', '.box', function (e) {console.log('點(diǎn)擊 .box 時(shí)會(huì)觸發(fā)該函數(shù)'); }); // 同時(shí)綁定多個(gè)事件和事件處理函數(shù) $$('.box').on({'click': function (e) { console.log('觸發(fā)了 click 事件'); }, 'focus': function (e) { console.log('觸發(fā)了 focus 事件'); } }); // 傳入事件參數(shù) $$('.box').on('click', {key1: 'value1', key2: 'value2'}, function (e) {console.log('點(diǎn)擊了 .box 元素，并為事件處理函數(shù)傳入了參數(shù)'); });
.one()
為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)。但事件只會(huì)觸發(fā)一次。
該方法的用法和 .on() 相同，所以不再舉例了。
.off()
從每個(gè)匹配的元素中解除綁定的事件。
// 解除綁定的指定事件 $$('.box').off('click');// 同時(shí)解除多個(gè)綁定的事件 $$('.box').off('click focus');// 解除綁定的指定事件處理函數(shù) $$('.box').off('click', callback); // 解除通過(guò)事件委托綁定的事件 $$(document).off('click', '.box');// 解除通過(guò)事件委托綁定的指定事件處理函數(shù) $$(document).off('click', '.box', callback);
.trigger()
觸發(fā)指定的事件
// 觸發(fā)指定的事件
$$('.box').trigger('click');
// 觸發(fā)事件時(shí)傳入?yún)?shù)
$$('.box').trigger('click', {key1: 'value1', key2: 'value2'});.ready()
DOM 加載完畢，DOMContentLoaded 事件觸發(fā)時(shí)觸發(fā)。
$$(document).ready(function () {console.log('當(dāng)前頁(yè)面 DOM 已加載完畢'); }); // 它還有另一種寫(xiě)法，和 .ready() 方法效果一樣 $$(function () {console.log('當(dāng)前頁(yè)面 DOM 已加載完畢'); });
.reflow()
重繪當(dāng)前元素。
$$('.box').reflow();.transition()
設(shè)置當(dāng)前元素的 transition-duration 屬性。
$$('.box').transition();.transitionEnd()
在當(dāng)前元素上添加 transitionend 事件回調(diào)。
$$('.box').transitionEnd(function () {
console.log('.box 元素的 transitionend 事件已觸發(fā)');
}).transform()
設(shè)置當(dāng)前元素的 transform 屬性。
$$('.box').transform('rotate(90deg)').transformOrigin()
設(shè)置當(dāng)前元素的 transform-origin 屬性。
$$('.box').transformOrigin('top center')$$.showOverlay()
顯示遮罩層?？梢詡魅胍粋€(gè)整數(shù)參數(shù)，表示遮罩層的 z-index 樣式，默認(rèn)為 2000.
$$.showOverlay();$$.hideOverlay()
隱藏遮罩層。
如果調(diào)用了多次 $$.showOverlay() 來(lái)顯示遮罩層，則也需要調(diào)用相同次數(shù)的 $$.hideOverlay() 才能隱藏遮罩層?？梢酝ㄟ^(guò)傳入?yún)?shù) true 來(lái)強(qiáng)制隱藏遮罩層。
$$.hideOverlay();$$.lockScreen()
鎖定屏幕。
$$.lockScreen();$$.unlockScreen()
解鎖屏幕。
如果調(diào)用了多次 $$.lockScreen() 來(lái)顯示遮罩層，則也需要調(diào)用相同次數(shù)的 $$.unlockScreen() 才能隱藏遮罩層?？梢酝ㄟ^(guò)傳入?yún)?shù) true 來(lái)強(qiáng)制隱藏遮罩層。
$$.unlockScreen();$$.throttle()
函數(shù)節(jié)流。
第一個(gè)參數(shù)是執(zhí)行的函數(shù)，第二個(gè)參數(shù)是延遲時(shí)間。
$$.throttle(function () {
console.log('這個(gè)函數(shù)最多 100ms 執(zhí)行一次');
}, 100)$$.guid()
生成一個(gè)全局唯一的 ID。
$$.guid();
更多建議：