Jquery的理念是Write less,do more。通过Jquery可以有效的提高JavaScript的开发效率, 通过jquey可以有效的将html代码和javascript代码隔离。
以一个简单的例子开始,点击某个链接,然后弹出某个对话框。
<a id="showMeLink" href="#" >CLICK ME</a>
普通的javascript写法,在链接中添加oncilck属性,即
<a id="showMeLink" href="#" onClick="showMe()">CLICK ME</a>
function showMe(){
alert("i am here");
}
Jquery中的写法<a id="showMeLink" href="#" href="#">CLICK ME</a>
<script type="text/javascript">
$("#showMeLink").click(function (){
alert("i am here");
});
</script>
没错通过Jquery将javascript的点击时间从链接的html代码中分离了。
下面从Jquery的选择器开始说起,
在普通javascript中,在页面中某个DOM对象的获的,
可以通过id
var obj=document.getElementById("id");
也可以通过name获得对象集合
var objs=getElementsByTagName("name")
Jquery提供了更加多元化的dom对象获得方式,而且这些方法更加简洁:
var obj=$("#id");
即可获得该id对应的对象。
var objs=$(".className");
即可获得class为className的对象集合。
是不是很简单,Jquery封装了这些方法,同时提供了支持CSS1~CSS3的选择器。包括:以下这些选择器。
实例<html> <head> <script type="text/javascript" src="jquery-1.5.2.min.js"></script> </head> <body> <div id="divHere" style="display:block"> i am here,hi </div> <a id="showDiv2" href="#" >hide</a> <a id="showDiv3" href="#" >show</a> <script type="text/javascript"> $("#showDiv2").click(function(){ if($("#showDiv2").is(":hidden")){ $("#divHere").show(); }else{ $("#divHere").hide(); } }); $("#showDiv3").click(function(){ $("#divHere").slideToggle('slow'); }); var value=document.getElementById("showDiv2"); </script> </body> </html>