jquery和javascript的区别(常用方法比较)

2015年5月25日09:20:00 发表评论 已收录

jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单,为了说明区别,下面与大家分享下JavaScript 与JQuery 常用方法比较

  1. 加载DOM区别
  • JavaScript: window.onload
function first(){ 
  alert('first'); 
} 
function second(){ 
  alert('second'); 
} 
window.onload = first; 
window.onload = second; 
//只会执行第二个window.onload;不过可以通过以下方法来进行改进: 
window.onload = function(){ 
  first(); 
  second(); 
}
  • Jquery: $(document).ready() / $(function(){})
$(document).ready(function () {
            function first(){
                alert('first');
            }
            function second(){
                alert('second');
            }
            $(document).ready(function(){
                first();
            })
            $(document).ready(function(){
                second();
            })
            //两条均会执行
        })

2、获取ID

JavaScript: document.getElementById('idName')

 

JQuery: $('#idName')

3、获取Class

JavaScript: JavaScript没有默认的获取class的方法

 

JQuery: $('.className')

4、获取TagName

JavaScript: document.getElementsByTagName('tagName')

 

JQuery: $('tagName')

5、创建对象并加入文档中

JavaScript:
var para = document.createElement('p');    //创建一个p元素
document.body.appendElement(para);  //将p元素追加为body的lastchild子节点,

JQuery:提供了4种将新元素插入到已有元素(内部)之前或者之后的方法:

append()appendTo()prepend()prependTo()

JavaScript: 
var para = document.createElement('p'); 
//创建一个p元素 
document.body.appendElement(para); 
//将p元素追加为body的lastchild子节点,如果想将新创建的p元素插入到已存在的某个元素之前,可以使用insertBefore()方法
JQuery: 
JQuery提供了4种将新元素插入到已有元素(内部)之前或者之后的方法:
append()、appendTo()、prepend()、prependTo()。 
格式:$( html ); eg,
html代码: <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'); 
//输出:同上

6、插入新元素

JavaScript: parentElement.insertBefore(newElement,targetElement)

 

JQuery提供了4种将新元素插入到已有元素(外部)之前或者之后的方法:
after()insertAfter()before()insertBefore()
JavaScript: 
insertBefore() 语法格式: 
parentElement.insertBefore(newElement,targetElement) 
eg, 将一个img元素插入一个段落之前。 

html代码: 
<img src="image.jpg" alt="jquery和javascript的区别(常用方法比较)" id="imgs" /> 
<p>这是一段文字</p> 

JavaScript代码: 
var imgs = document.getElementById('imgs'); 
var para = document.getElementsByTag('p'); 
para.parenetNode.insertBefore(imgs,para);
JQuery: 
JQuery提供了4种将新元素插入到已有元素(外部)之前或者之后的方法:
after()、insertAfter()、before()、insertBefore()。 
格式:$( html ); 
eg,html代码: 
<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'); 
//输出:同上

7、复制节点

JavaScript: 
reference = node.cloneNode(deep) 
这个方法只有一个布尔型的参数,它的可取值只能是true或者false。
该参数决定是否把被复制节点的子节点也一同复制到新建节点里去。
JQuery: 
clone() //复制节点后,被复制的新元素并不具有任何行为 
clone(true) //复制节点内容及其绑定的事件 
备注:该方法通常与appendTo()、prependTo()等方法结合使用。

8、删除节点

JavaScript: 
reference = element.removeChild(node) 
removeChild()方法将一个给定元素里删除一个子节点
JQuery: 
remove(); 
remove()方法作用就是从DOM中删除所有匹配的元素,remove()方法还可以与其他的过滤选择器结合使用,非常方便。 
eg,将ul li下的title不是"Hello"的li移除: 
$('ul li').remove(li[title!='Hello']); 
empty(); 
empty()方法作用是清空节点。

9、包裹节点

JavaScript: 
JavaScript暂无
JQuery: 
wrap() //将匹配元素用其他元素的结构化标记单独包裹起来 
wrapAll() //将所有匹配的元素用一个元素包裹起来 
wrapInner() //将匹配元素的子内容用其他结构化的标记包裹起来

10、属性操作:设置属性节点、查找属性节点

JavaScript: 
document.getElementsByTagName('tagName')
JQuery: 
JQuery中设置和查找属性节点都是:attr() 。 
$('p').attr('title'); //获取p元素的title属性; 
$('p').attr('title','My title'); //设置p元素的title属性 
$('p').attr('title':'My title','class':'myClass'); //当需要添加多个属性时,
可以用"名:值"对的形式,中间用逗号隔开。

11、替换节点

JavaScript: 
reference = element.replaceChild(newChild,oldChild) 
该方法是将一个给定父元素里的一个子节点替换为另外一个节点。
JQuery: 
replaceWith()、replaceAll() 
eg: 
<p>hello</p> 
想替换为: 
<h2>Hi</h2> 

JQuery代码: 
$('p') .replaceWith('<h2>Hi</h2>'); 
或者可以写成: 
$('<h2>Hi</h2>').replaceAll('p');

12、CSS-DOM操作

JavaScript: 
格式:element.style.property 
CSS-DOM能够读取和设置style对象的属性,其不足之处是无法通过它来提取外部CSS设置的样式信息,而JQuery的.css()方法是可以的。 
注意点:CSS中的如"font-size"这样有"-"的,要使用首字母小写的驼峰式表示,如fontSize。
JQuery: 
格式:$(selector).css() 
css()方法获取元素的样式属性 
此外,JQuery还提供了height()和width()分别用来获取元素的高度和宽度(均不带单位),
而css(height)、css(width)返回高宽,且带单位。

jQuery代码具体的写法和原生的Javascript写法在执行常见操作时的区别如下:

1 定位元素

Javascript  document.getElementById("abc")

 

jQuery     $("#abc") 通过id定位              $(".abc") 通过class定位             $("div") 通过标签定位

需要注意的是JS返回的结果是这个元素,jQuery返回的结果是一个JS的对象。以下例子中假设已经定位了元素abc。

2 改变元素的内容

JS      abc.innerHTML = "test";

 

jQuery     abc.html("test");

3 显示隐藏元素

JS         abc.style.display = "none";          abc.style.display = "block";

 

jQuery          abc.hide();             abc.show();       abc.toggle();

//在显示和隐藏之间切换(2012.4.21更新)

4 获得焦点

JS和jQuery是一样的,都是abc.focus();

 

5 为表单赋值 

JS      abc.value = "test";

 

jQuery     abc.val("test");

6 获得表单的值

JS       alert(abc.value);

 

jQuery     alert(abc.val());

7 设置元素不可用

JS     abc.disabled = true;

jQuery    abc.attr("disabled", true);

8 修改元素样式

JS                    abc.style.fontSize=size;

jQuery             abc.css('font-size', 20);

JS                   abc.className="test";

JQuery           abc.removeClass();         abc.addClass("test");

 

9 Ajax

JS自己创建对象,自己处理浏览器兼容等乱七八糟的问题,略去不表

jQuery
$.get("abc.php?a=1&b=2", recall);
postvalue = "a=b&c=d&abc=123";
$.post("abc.php", postvalue, recall);
function recall(result) {
alert(result);
//如果返回的是json,则如下处理
//result = eval('(' + result + ')');
//alert(result);
}

10 判断复选框是否选中

jQuery

if(abc.attr("checked") == "checked")

 

注意:网上说的.attr("checked") == true实际上不能用,上面这个测试过能用

weinxin
我的微信
爱生活、爱学习的小伙伴可以通过扫一扫二维码添加我的个人微信一起交流!
青青子衿

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: