首頁 > 開發者 > 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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
