$('#el') | el.querySelector("div")
| div.querySelectorAll('.el')
//兄弟元素
$('#el').parent() | el.parentNode
$('#el').prev() | el.previousElementSibling
$('#el').next() | el.nextElementSibling
$('#el').last() | el.lastElementChild
$('#el').first() | el.children[0]
$('.el').append(div) | el.appendChild(document.createElement('div'))
$('.el').clone() | el.cloneNode(true)
$('.el').remove() | el.parentNode.removeChild(el)
//获取文本
$('#el').html() | el.innerHTML
$('#el').val() | el.value
$('#el').text() | el.textContent
$('#el').replaceWith(string) | el.outerHTML = string
//创建元素
var newEl = $('') | var newEl = document.createElement('div')
//Set/get属性
$('#el').attr('key', 'value') | el.setAttribute('key', 'value')
$('#el').attr('key') | el.getAttribute('key')
$('#el').addClass('class') | el.classList.add('class')
$('#el').removeClass('class') | el.classList.remove('class')
$('#el').toggleClass('class') | el.classList.toggle('class')
$('#el').css('border-width', '20px') | el.style.borderWidth = '20px'
//合并 Object
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。
//数组过滤操作
list.filter(x => x>=5)
list.slice(s,end+1) | list.slice(-list.length)
list.findIndex(x => x==4) | list.indexOf(4)
// get
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function (data) {
}
xhr.send();
// post
var xhr = new XMLHttpRequest()
xhr.open('POST', url);
xhr.onreadystatechange = function (data) {
}
xhr.send({data: data});
jq到原生js转换
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 键盘事件 键盘按下事件 onkeydown 键盘抬起事件 onkeyup ...
- 对象,即Object, 有自己的属性和方法,原生的对象我们可以直接使用它的一些属性和方法,但是jQuery中的对象...
- 一. Tab选项卡有多种,点击切换,滑过切换,延时切换,自动切换 - 基于JS HTML结构 CSS 点击切换 和...