$('#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转换
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
相关阅读更多精彩内容
- 键盘事件 键盘按下事件 onkeydown 键盘抬起事件 onkeyup ...
- 对象,即Object, 有自己的属性和方法,原生的对象我们可以直接使用它的一些属性和方法,但是jQuery中的对象...
- 一. Tab选项卡有多种,点击切换,滑过切换,延时切换,自动切换 - 基于JS HTML结构 CSS 点击切换 和...