少点jq多点js

Document Ready 事件

document.addEventListener("DOMContentLoaded", function() {
      // do something...
}, false)

查找、选择页面元素

// 按ID查找
document.getElementById("elDiv")

//按class名搜索 (返回带有指定名称的对象集合)
document.getElementsByClassName("item")

//按标记名搜索 (返回带有指定标签名的对象的集合)
document.getElementsByTagName("li")

// 按子元素搜索:
document.getElementById("elDiv").getElementsByClassName("item")

//返回文档中匹配指定的CSS选择器的第一元素 (存储了所有匹配的元素)
document.querySelector("#elDiv")

var firstClass = document.querySelector('.some-class')
var firstId    = document.querySelector('#some-id')
var firstData  = document.querySelector('[data-example]')

//返回文档中匹配的CSS选择器的所有元素节点列表 (存储了所有匹配的元素)
document.querySelectorAll(".box")
document.querySelectorAll("ul > li")

var allClasses = document.querySelectorAll('.some-class')
var allData    = document.querySelectorAll('[data-example]')

Html、 Text、 Vaule、 Style

//Html
element.innerHTML = string

//Text
element.innerText = string
element.textContent = string //IE9+

//Vaule
element.vaule = string

//Style
element.style.borderWidth = '20px'

添加和删除样式名

// 第一种（兼容各大浏览器）
//添加样式
element.className = "box" //会替换之前元素的样式
element.className += " box" //不替换替换之前元素的样式(记得空格)

 // 删除样式名, takes two params: element and classname
function removeClass(el, cls) {
  var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
  el.className = el.className.replace(reg, " ").replace(/(^\s*)|(\s*$)/g,"");
}
removeClass(el,cls)

// 第二种 (IE10+)
element.classList.add("box")
element.classList.remove("box")

反转样式

element.classList.toggle("box")

创建元素

document.createElement(el)

element.addEventListener('click', function (){
    let div = document.createElement("div") 
    div.innerHTML = '<p>我是新创建的p元素</p>'
    el.appendChild(cEl)
},false)

// jQuery 实现
$('.el').on('event', function() {

});

// 原生JavaScript实现
[].forEach.call(document.querySelectorAll('.el'), function (el) {
  el.addEventListener('event', function() {

  }, false);
});

元素的实际宽度高度

element.offsetHeight //高度
element.offsetWidth  //宽度

显示隐藏

element.style.display  = ''     //show
element.style.display  = 'none' //hide

Remove、 After、 Before、 Children

//Remove
element.parentNode.removeChild(element)

//After
element.insertAdjacentHTML('afterend', htmlString) 

//Before
element.insertAdjacentHTML('beforebegin', htmlString) 

//Children
elemnt.children

复制、克隆元素 Clone

elemnt.cloneNode(true)

Parent、 Next、Prev

//Parent
element.parentNode

//Next
element.previousElementSibling

//Prev
element.nextElementSibling

删除元素

// jQuery 实现
$('.el').remove();

// 原生JavaScript实现
remove('.el');

function remove(el) {
  var toRemove = document.querySelector(el);

  toRemove.parentNode.removeChild(toRemove);
}

Trim

string.replace(/^\s+|\s+$/g, '') //IE8+
string.trim() //IE9+

事件绑定移除

//IE8+
//绑定
function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function(){
      handler.call(el);
    });
  }
}

addEventListener(el, eventName, handler)
//移除
function removeEventListener(el, eventName, handler) {
  if (el.removeEventListener)
    el.removeEventListener(eventName, handler);
  else
    el.detachEvent('on' + eventName, handler);
}

removeEventListener(el, eventName, handler);


//IE9+
element.addEventListener(eventName,callback,false) //绑定
element.removeEventListener(eventName,callback,false) //移除

搜索特殊元素

//文档的根节点
document.documentElement  ===  $("html")

//文档的head元素
document.head === $("head")

//文档的body元素
document.body === $("body")

//文档的标题
document.title

参考文献