JS 原生JS和jQuery中的方法整理

一、属性操作

// JavaScript：
　　Dom.hasAttribute('attrName');        //是否有指定属性
　　Dom.hasAttributes();                //是否有属性
　　Dom.getAttribute('key')            //获取属性
　　Dom.setAttribute('key','value')   //设置属性
　　Dom.removeAttribute('attrName'); //移除属性

// jQuery：
//在设置disabled、selected、checked等这些Boolean类型自带属性时，我们需要用prop()方法；其他字符串类型自带属性时，我们使用attr()方法即可;DOM节点可见的自定义属性我们也使用attr()方法。
　　1.$("#box").attr( 'key' )                           //取得第一个匹配的属性值，比如$("img").attr("src") 　　
　　2.$("#box").attr( 'key', 'value' )                 //某一个元素设置属性 
　　3.$("#box").attr( {key1:'value1', key2:'value'} ) //为某个元素一次性设置多个属性 
　　4.$("#box").attr( 'key', function )              //为所有匹配的元素设置一个计算的属性值。 
　　5.$("#box").removeAttr( 'key' )                 //移除某一个属性 
　　6.$("#box").prop("key");                       // 也可以使用prop()方法获取属性

二、元素节点操作

var boxDom = document.elementById('box');
var newNode = '<p>这是需要追加的元素<p>'；
var textNode = '这是需要添加的文本内容'；

1.创建新节点
// javaScript
var newNode =document.createElement('<div>创建</div>');

// jQuery
var newNode = $('<div>创建</div>');               

2. 在所选元素内添加，如果元素内之前有别的内容会被覆盖掉；此方法可以添加元素也可以添加文本
//javaScript
boxDom.innerHTML(newNode)

//jQuery
$('#box').html(newNode)

3.在所选元素内的开头添加
// javaScript
boxDom.insertBefore(newNode,boxDom.childNodes[0])

// jQuery
$('#box').prepend(newNode)

4.在所选元素内的结尾添加
// javaScript
boxDom.appendChild(newNode)

// jQuery
$('#box').append(newNode)

5.在所选元素之前添加
// javaScript
boxDom.insertBefore(newNode)

// jQuery
$('#box').before(newNode)

6.在所选元素之后添加
// jQuery
$('#box').after(newNode)

7.删除节点
// javaScript
boxDom.removeChild(newDom.childNodes[i]) //删除box第i+1个子节点

// jQuery
$('#box').remove();  //移除box及其所有文本、子孙节点、数据和事件
$('#box').detach(); //移除box及其所有文本、子孙节点，但是保留数据和事件
$('#box').empty(); //清除box所有的内容和子孙元素，但是box节点本身和其属性事件等还在

8.替换节点
// javaScript
boxDom.replaceChild(newNode, oldNode); //替换box中的子节点

// jQuery
$('#box').replaceWith(newNode);       //替换box为新的内容(可以是html元素，dom元素，jQuery元素)
newNode.replaceAll($('#box'));       //替换box为新的html元素

9.克隆节点
// javaScript
var copyNode = boxDom.cloneNode(deep);//deep为true时，深拷贝（包括其子孙节点），为false时只复制本身节点

// jQuery
var copyNode = $('#box').clone(deep); //deep为true时，深拷贝（包括其事件处理函数），为false时只复制本身，默认false

10.创建新的文本节点
// javaScript
var newText = document.createTextNode('holl javascript')

11.在所选元素中添加文本内容 
// javaScript
Dom.innerText(newNode)
Dom.textContent(newNode)  //注意：textContent 谷歌,火狐支持,IE8不支持；兼容性考虑，不建议使用

// jQuery
$('#box').text(newNode)

三、元素节点遍历

 

四、事件

1、页面加载事件

一般一个页面响应加载的基本顺序是：域名解析 -> 加载html -> 加载js和css -> 加载图片等其他信息

JavaScript 页面加载事件 onload 与 load

　　属性：页面加载完成时执行（包括图片、css等资源）；一个页面只能有一个 onload 事件，重复使用后面的会覆盖之前的onload。

// JavaScript
window.onload = function() {…)}

// jQuery
$(document).load(function() {…}); //该方法在jQuery1.8废弃了，不推荐使用！！！

jQuery 页面加载事件 ready()

　属性：网页中的DOM结构加载完毕时执行；一个页面中可以有多个ready()，重复使用不会对其他的ready()有影响。

$(document).ready(function() {…}) == $(function() {…})

 

2、普通事件 绑定与解绑

//JavaScript
//事件绑定及解绑
ele.addEventListener('click',function(){},false);
ele.removeEventListener('click',function(){},false);
ele.onclick = function(){};
ele.attachEvent('onclick',function(){}); //ie8以下
ele.detachEvent('onclick',function(){}); //ie8以下

//jQuery

 

 

持续更新…