1、元素获取
var ele = document .getElementById('idName' );
var eleArr = document .getElementsByClassName('className' );
var eleArr = document .getElementsByTagName('div' );
var ele = document .querySelector('#idName' );
var eleArr = document .querySelectorAll('.className' );
var ele = $('#idName' );
var ele = $('.className:eq(0)' );
var eleArr = $('tagName' );
2、class选择器操作
/**** **** **** **** ***原生js**** **** **** **** **** **** **/
//className 属性
ele.className = 'newClassName';
//classList操作
ele.classList.contains('className'); //受否有该类
ele.classList.add('newClassName1,newClassName2...'); //添加类
ele.classList.remove('oldClassName1,newClassName2...'); //删除类
ele.classList.toggle('className'); //如果元素中有该className,则删除并返回false,否则添加并返回true
/** **** **** **** **** * jQuery** **** **** **** **** **** **** /
ele.hasClass(className);
ele.addClass('newClassName1,newClassName2...');
ele.removeClass('newClassName1,newClassName2...');
ele.toggleClass('className');
3、元素节点操作
var newNode = ele.createElement('<div>创建</div>' );
ele.appendChild(newNode);
ele.insertBefore(newNode,targetNode);
ele.removeChild(ele.childNodes[i]);
ele.replaceChild(newNode, oldNode);
var copyNode = ele.cloneNode(deep);
var newNode = $('<div>创建</div>' );
ele.append(newNode);
newNode.appendTo(ele);
ele.prepend(newNode);
newNode.prependTo(ele);
ele.after(newNode);
newNode.insertAfter(ele);
ele.before(newNode);
newNode.insertBefore(ele);
ele.remove();
ele.detach();
ele.empty ();
ele.replaceWith(newNode);
newNode.replaceAll(ele);
ele.clone (deep);
4、元素节点遍历
var eleArr = ele.childNodes;
var eleArr = ele.children;
var firstEle = ele.firstChild;
var lastEle = ele.lastChild;
var parentEle = ele.parentNode;
var nextEle = ele.nextSibling;
var previousEle = ele.previousSibling;
var eleArr = ele.children();
var firstEle = ele.first();
var lastEle = ele.last();
var parentEle = ele.parent ();
var parentEleArr = ele.parents();
var parentEle = ele.offsetParent();
var parentEleArr = ele.parentsUntil(stop, filter);
var nextEle = ele.next();
var nextEleArr = ele.nextAll();
var previousEle = ele.prev();
var previousEle = ele.prevAll();
var siblingsArr = ele.siblings();
5、属性操作
var attrArr = ele.attributes;
var bool = ele.hasAttribute('attrName' );
var bool = ele.hasAttributes();
var attrValue = ele.getAttribute('attrName' );
ele.setAttribute('attrName' ,'attrValue' );
ele.removeAttribute('attrName' );
var attrValue = ele.attr('attrName' );
var propValue = ele.prop('propName' );
ele.attr('attrName' ,'attrValue' );
ele.prop('propName' ,'propValue' );
ele.removeAttr('attrName' );
6、事件
ele.addEventListener('click' ,func,false );
ele.removeEventListener('click' ,func,false );
ele.onclick = func;
ele.onclick = null ;
ele.attachEvent('onclick' ,func);
ele.detachEvent('onclick' ,func);
$("div:eq(0)" ).click(function () {
alert(1 );
});
$("div:eq(0)" ).click(function () {
alert(2 );
});
$("div:eq(1)" ).bind("click mouseenter" ,function () {
alert("bind绑定法" );
});
$("div:eq(1)" ).unbind("click" );
$("div:eq(2)" ).delegate("button" ,"click mouseleave" ,function () {
alert("delegate绑定法" );
});
$("div:eq(2)" ).undelegate();
$("div:eq(3)" ).on("click mouseleave" ,"button" ,{"name" :"mjm" ,"age" :24 },function (event ) {
alert("on绑定法" +event.data.name);
});
$("div:eq(3)" ).off();