jquery ajax html 移动端,移动端原生js代替jq(zepto)

在移动端兼容性一般问题都不大，基本兼容-webkit-即可，那不妨我们用原生js来完成zepto的一些工作吧,以下代码不一定全部兼容各种移动端手机，只是小试牛刀而已。

dom查找

1、$(el).parent()

2、$(el).prev()

3、$(el).next()

4、$(el).last()

5、$(el).first()

6、$(el).siblings()

7、$(el).find(selector)

8、$(el).each(function(i, el){});

//js

1、el.parentNode

2、el.previousElementSibling

3、el.nextElementSibling

4、el.lastElementChild

5、el.children[0]

6、Array.prototype.filter.call(el.parentNode.children, function(child){

return child !== el;

});

7、el.querySelectorAll(selector)

8、var elements = document.querySelectorAll(selector);

Array.prototype.forEach.call(elements, function(el, i){});

获取dom属性

1、$(el).html()

2、$(el).val()

3、$(el).attr()

4、$(el).css('border-width', '20px')

//js

1、el.innerHTML

2、el.value

3、el.getAttribute()

4、el.style.borderWidth = '20px'

获取dom各种高度

获取宽度也是一样逻辑

1、$(el).offset().top

2、$(el).scrollTop

3、$(el).Height()

//js

1、var rect = el.getBoundingClientRect()

rect.top + document.body.scrollTop

2、el.getBoundingClientRect().top

3、el.clientHeight

class操作

1、$(el).addClass('class')

2、$(el).removeClass('class')

3、$(el).toggleClass('class')

4、$(el).hasClass('class')

//js

1、el.classList.add('class')

2、el.classList.remove('class')

3、el.classList.toggle('class')

4、function hasClass(el,className){

if(el.classList){

return el.classList.contains(className);

}else{

return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);

}

}

dom结构操作

1、$(el).remove()

2、$(el).clone()

3、$(parent).append()

//js

1、el.parentNode.removeChild(el)

2、el.cloneNode(true)

3、parent.appendChild(el)

ajax

$.ajax({

type: 'GET',

url: '/my/url',

success: function(resp) {

},

error: function() {

}

});

//js

var request = new XMLHttpRequest();

request.open('GET', '/my/url', true);

request.onreadystatechange= function() {

if (this.status >= 200 && this.status < 400) {

// Success!

var resp = this.response;

} else {

// We reached our target server, but it returned an error

}

};

request.onerror = function() {

// There was a connection error of some sort

};

request.send();