jquery 就对javascript的一个扩展封装就是让javascript更好用更简单人家怎么说的来着jquery就是要用更少的代码漂亮的完成更多的功能JavaScript 与JQuery 常用方法比较
加载DOM区别
JavaScript
windowonload
function first(){
alert(first);
}
function second(){
alert(second);
}
windowonload = first;
windowonload = second;
//只会执行第二个windowonload不过可以通过以下方法来进行改进
windowonload = function(){
first();
second();
}
Jquery
$(document)ready()
$(document)ready(){
function first(){
alert(first);
}
function second(){
alert(second);
}
$(document)ready(function(){
first();
}
$(document)ready(function(){
second();
}
//两条均会执行
}
获取ID
JavaScript
documentgetElementById(idName)
JQuery
$(#idName)
获取Class
JavaScript
JavaScript没有默认的获取class的方法
JQuery
$(className)
获取TagName
JavaScript
documentgetElementsByTagName(tagName)
JQuery
$(tagName)
创建对象并加入文档中
JavaScript
var para = documentcreateElement(p);
//创建一个p元素
documentbodyappendElement(para);
//将p元素追加为body的lastchild子节点如果想将新创建的p元素插入到已存在的某个元素之前可以使用insertBefore()方法
JQuery
JQuery提供了种将新元素插入到已有元素（内部）之前或者之后的方法append()appendTo()prepend()prependTo()
格式$( html );
eghtml代码
<p>World!</p>
$(p)append(<b>Hello!</b>);
//输出<p>World!<b>Hello!</b></p>
$(<b>Hello!</b>)appendTo(p); //输出同上
$(p)prepend(<b>Hello!</b>);
//输出<p><b>Hello!</b>World! </p>
$(<b>Hello!</b>)prependTo(p);
//输出同上
插入新元素
JavaScript
insertBefore() 语法格式
parentElementinsertBefore(newElementtargetElement)
eg 将一个img元素插入一个段落之前
html代码
<img src="imagejpg" id="imgs" />
<p>这是一段文字</p>
JavaScript代码
var imgs = documentgetElementById(imgs);
var para = documentgetElementsByTag(p);
paraparenetNodeinsertBefore(imgspara);
JQuery
JQuery提供了种将新元素插入到已有元素（外部）之前或者之后的方法after()insertAfter()before()insertBefore()
格式$( html );
eghtml代码
<p>World!</p>
JQuery代码
$(p)after(<b>Hello!</b>);
//输出<p>World! </p><b>Hello!</b>
$(<b>Hello!</b>) insertAfter (p);
//输出同上
$(p)before(<b>Hello!</b>);
//输出<b>Hello!</b><p>World! </p>
$(<b>Hello!</b>)insertBefore(p);
//输出同上
复制节点
JavaScript
reference = nodecloneNode(deep)
这个方法只有一个布尔型的参数它的可取值只能是true或者false该参数决定是否把被复制节点的子节点也一同复制到新建节点里去
JQuery
clone() //复制节点后被复制的新元素并不具有任何行为
clone(true) //复制节点内容及其绑定的事件
备注该方法通常与appendTo()prependTo()等方法结合使用
删除节点
JavaScript
reference = elementremoveChild(node)
removeChild()方法将一个给定元素里删除一个子节点
JQuery
remove();
remove()方法作用就是从DOM中删除所有匹配的元素remove()方法还可以与其他的过滤选择器结合使用非常方便
eg将ul li下的title不是"Hello"的li移除
$(ul li)remove(li[title!=Hello]);
empty();
empty()方法作用是清空节点
包裹节点
JavaScript
JavaScript暂无
JQuery
wrap() //将匹配元素用其他元素的结构化标记单独包裹起来
wrapAll() //将所有匹配的元素用一个元素包裹起来
wrapInner() //将匹配元素的子内容用其他结构化的标记包裹起来
属性操作设置属性节点查找属性节点
JavaScript
documentgetElementsByTagName(tagName)
JQuery
JQuery中设置和查找属性节点都是attr()
$(p)attr(title); //获取p元素的title属性
$(p)attr(titleMy title); //设置p元素的title属性
$(p)attr(title:My titleclass:myClass); //当需要添加多个属性时可以用"名值"对的形式中间用逗号隔开
替换节点
JavaScript
reference = elementreplaceChild(newChildoldChild)
该方法是将一个给定父元素里的一个子节点替换为另外一个节点
JQuery
replaceWith()replaceAll()
eg:
<p>hello</p>
想替换为
<h>Hi</h>
JQuery代码
$(p) replaceWith(<h>Hi</h>);
或者可以写成
$(<h>Hi</h>)replaceAll(p);
CSSDOM操作
JavaScript
格式elementstyleproperty
CSSDOM能够读取和设置style对象的属性其不足之处是无法通过它来提取外部CSS设置的样式信息而JQuery的css()方法是可以的
注意点CSS中的如"fontsize"这样有""的要使用首字母小写的驼峰式表示如fontSize
JQuery
格式$(selector)css()
css()方法获取元素的样式属性
此外JQuery还提供了height()和width()分别用来获取元素的高度和宽度（均不带单位）而css(height)css(width)返回高宽且带单位
