原生JS取代一些JQuery方法的簡單實現

1.選取元素

// jquery

var els = $('.el');
// native
var els = document.queryselectorall('.el');
// shorthand
var $ = function (el)

queryselectorall方法返回的是nodelist物件，需要轉換為陣列。

mylist = array.prototype.slice.call(mynodelist)

2.建立元素

// jquery

var newel = $('');
// native
var newel = document.createelement('div');

3.新增事件

// jquery

$('.el').on('event', function() );
// native
.foreach.call(document.queryselectorall('.el'), function (el) , false);
});

4.get/set屬性

// jquery

$('.el').filter(':first').attr('key', 'value');
$('.el').filter(':first').attr('key');
// native
document.queryselector('.el').setattribute('key', 'value');
document.queryselector('.el').getattribute('key');

5.新增和移除樣式class

dom元素本身有乙個可讀寫的classname屬性，可以用來操作class。

html 5還提供乙個classlist物件，功能更強大（ie 9不支援）。

// jquery

$('.el').addclass('class');
$('.el').removeclass('class');
$('.el').toggleclass('class');
// native
document.queryselector('.el').classlist.add('class');
document.queryselector('.el').classlist.remove('class');
document.queryselector('.el').classlist.toggle('class');

6.追加元素

尾部追加元素：

// jquery

// native
頭部追加元素：
//jquery
$(『.el').prepend('
')//native
var parent = document.queryselector('.el');
parent.insertbefore("
",parent.childnodes[0])

7.轉殖元素

// jquery

var clonedel = $('.el').clone();
// native
var clonedel = document.queryselector('.el').clonenode(true);

8.移除元素

remove

// jquery
$('.el').remove();
// native
remove('.el');
function remove(el)

9.獲取父級元素

12.清空子元素

//jquery

$("#elementid").empty()
//native
var element = document.getelementbyid("elementid")
while(element.firstchild) element.removechild(element.firstchild);

13.檢查是否有子元素

//jquery

if (!$("#elementid").is(":empty")){}
//native
if (document.getelementbyid("elementid").haschildnodes()){}

14.$(document).ready

dom載入完成，會觸發domcontentloaded事件，等同於jquery的$(document).ready方法。

document.addeventlistener("domcontentloaded", function() );

15.資料儲存

jquery物件可以儲存資料。

$("body").data("foo", 52);

html 5有乙個dataset物件，也有類似的功能（ie 10不支援），不過只能儲存字串。

element.dataset.user = json.stringify(user);

element.dataset.score = score;

16.動畫

jquery的animate方法，用於生成動畫效果。

$foo.animate('slow',

jquery的動畫效果，很大部分基於dom。但是目前，css 3的動畫遠比dom強大，所以可以把動畫效果寫進css，然後通過操作dom元素的class，來展示動畫。

foo.classlist.add('animate')

如果需要對動畫使用**函式，css 3也定義了相應的事件。

el.addeventlistener("webkittransitionend", transitionended);

el.addeventlistener("transitionend", transitionended);

源：

取代PHP原生函式的一些擴充套件包

雖然程式設計師無時無刻都在造輪子，但造輪子也有效率之分，用好輪子才能造出好 composer require guzzlehttp guzzle你可以用guzzlehttp完全取代curl,file get content,fopen等函式。這個擴充套件包使用起來極為順手。我們在 量上看下對比。初始...

取代PHP原生函式的一些擴充套件包

雖然程式設計師無時無刻都在造輪子，但造輪子也有效率之分，用好輪子才能造出好 你可以用guzzlehttp完全取代curl,file get content,fopen等函式。這個擴充套件包使用起來極為順手。我們在 量上看下對比。初始化 curl curl init 設定抓取的url curl set...

JS原生的一些寫法

今天在寫頁面的時候，因為不想使用jquery了，所以想用原生js寫一下，發現原生的js都差不多忘記了，所以來補習一下 slice 如果接收的是負數，會將它字串的長度與對應的負數相加，接收的是起始位置和結束位置 不包括結束位置 substring 以兩個引數中較小乙個作為起始位置，較大的引數作為結束位...