jquery和ajax的区别
jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单。
1、加载DOM区别
JavaScript:
//只会执行第二个window.onload;不过可以通过以下方法来进行改进:
window.οnlοad=function(){
...
...
}
Jquery:
$(document).ready()
//均会执行
2、获取ID
JavaScript:
document.getElementById("idName")
JQuery:
$("#idName")
3、获取Class
JavaScript:
JavaScript没有默认的获取class的方法
JQuery:
$(".className")
4、获取TagName
JavaScript:
document.getElementsByTagName("name")
JQuery:
$("name")
5、创建对象并加入文档中
JavaScript:
var param = document.createElement("p"); //创建一个p元素
//将p元素追加为body的lastchild子节点,如果想将新创建的p元素插入到已存在的某个元素之前,可以使用insertBefore()方法 document.body.appendElement(para);
JQuery:
JQuery提供了4种将新元素插入到已有元素(内部)之前或者之后的方法:append() / appendTo()、prepend() / prependTo()。
格式:$("").append("");
eg:html代码:
<p>World!</p>
$("p").append("<b>Hello!</b>"); //<p>World!<b>Hello!</b></p>
$("p").prepend("<b>Hello!</b>"); //输出:<p><b>Hello!</b>World! </p>
6、插入新元素
JavaScript:
parentElement.insertBefore(newElement,targetElement)
eg, 将一个img元素插入一个段落之前。
JQuery:
JQuery提供了4种将新元素插入到已有元素(外部)之前或者之后的方法:after()、insertAfter()、before()、insertBefore()。
格式:$("").after();
7、复制节点
JavaScript:
reference = node.cloneNode(deep)
这个方法只有一个布尔型的参数,它的可取值只能是true或者false。该参数决定是否把被复制节点的子节点也一同复制到新建节点里去。
JQuery:
clone() //复制节点后,被复制的新元素并不具有任何行为
clone(true) //复制节点内容及其绑定的事件
备注:该方法通常与appendTo()、prependTo()等方法结合使用。
8、删除节点
JavaScript:
reference = element.removeChild(node)
//删除一个子节点
JQuery:
remove(); //方法作用就是从DOM中删除所有匹配的元素
empty(); //方法作用是清空节点。
9、属性操作:设置属性节点、查找属性节点
JavaScript:
document.getElementsByTagName('tagName')
JQuery:
JQuery中设置和查找属性节点都是:attr() 。
$('p').attr('title'); //获取
$('p').attr('title','My title'); //设置 ,当需要添加多个属性时,中间用逗号隔开。
10、替换节点
JavaScript:
reference = element.replaceChild(newChild,oldChild)
该方法是将一个给定父元素里的一个子节点替换为另外一个节点。
JQuery:
replaceWith()、replaceAll()
等等,这里只是其中的一部分不同。