为什么要使用jquery?

为什么要使用jquery?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

什么是jQuery?

jQuery是一套JavaScript的库,它简化了使用JavaScript进行网页特效开发的一些复杂性,提供了对常见任务的自动化和复杂任务的简化。使用jQuery不仅能够将原本需要很多JavaScript代码才能实现的功能缩减为几行代码,而且提供了足够高速的性能。

JQuery的优势

相对于传统的Javascript和DOM来说,JQuery的优势:

1、轻量级

JQuery非常小,压缩包只有18KB左右.

2、强大的选择器

JQuery不仅支持CSS里的所有选择器,还有JQuery独有的选择器.

3、出色的DOM操作封装.

JQuery封装了大量常用的DOM操作.

4、兼容性好

JQuery能够在不同浏览器中兼容,同时还修复了一些浏览器之间的差异.

5、链式编程

即对发生在同一个JQuery对象上的一组动作,可以直接连写而无需重复获取对象,使得JQuery的代码无比优雅.

6、隐式迭代

当用JQuery找到带有".class"类的全部元素,然后隐藏它们时,无需循环遍历每个返回的元素.

7、行为与结构分离

8、丰富的插件支持

9、开源

任何人都可以自由使用并提出自己的意见

JQuery的核心理念是:写得少,做得多(write less,do more)。

为什么要使用jquery?

因为jQuery是轻量级的框架,大小不到30kb,它有强大的选择器,出色的DOM操作的封装,有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠),

完善的ajax(它的ajax封装的非常的好,不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题。)出色的浏览器的兼容性。 而且支持链式操作,隐式迭代。行为层和结构层的分离,还支持丰富的插件,jQuery的文档也非常的丰富。

利用jquery等库的选择器可以不再依赖于特定的ID或类名,而且可以减少很多代码,以下实例说明:

效果:点击article标签里面的nav标签里面的a链接,弹出框“点击了连接”

js写法:

function linksnum(){
var article=document.getElementsByTagName("article");
for(var a=0;a<article.length;a++){
var nav=article[a].getElementsByTagName("nav");
for(var n=0;n<nav.length;n++){
var links=nav[n].getElementsByTagName("a");
for(var l=0;l<links.length;l++){
links[l].onclick=function(){alert("点击了连接");return false;}
}
}
}
}
window.onload=linksnum;

jquery写法:

<script src="jquery.js"></script>
<script>
$(function(){
$('article nav a').click(function(){
alert("点击了连接");return false;
})
})
</script>

把上面的两种写法分别替换下面的js部分,都可以实现同样的效果,但是代码长度却差别很大,当然,如果是那么简单的功能,通常都不会特意引用一个jquery库来写,那样得不偿失

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>利用jquery等库的选择器可以不再依赖于特定的ID或类名,而且可以减少很多代码</title>
</head>
<script>
//js代码区
</script>
<body>

<article>
<nav><a href="1">我是连接一</a><a href="2">我是连接二</a></nav>
</article>
<article class="article">
<nav><a href="#">我是连接三</a><a href="#">我是连接四</a></nav>
</article>

</body>

</html>

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是为什么要使用jquery?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏