使用Jquery提高Javascript开发效率

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>


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值