好久都沒有接觸Jquery了。以前學過一段時間Jquery，這些天又溫習了起來。Jquery的語句很美。用Js幾行甚至要十幾行才能做到，用Jquery一行到幾行就可以做到了。雖然他犧牲了一點時間效率，但就對於簡單的網頁腳本處理或者簡ajax處理，犧牲的這一丁點效率真是不足為掛。
但Jquery還是有一些問題得用Js來解決的。說說我這些天遇到的這個問題：在Jquery里append一個button按扭后，無法用Jquery對這個按扭進行監聽。
下面是具體的代碼，發現alert("test監聽到木有");這句沒有起到作用。
<head>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//加載按扭
$("#loadBtn").click(function () {
$("#comUL").append("這是一個按扭");
$("#comUL").append("<input type='button' id='btn1' value='按扭' />");
});
//對加載的按扭進行監聽
$("#btn1").click(function () {
alert("test監聽到木有");
});
});
</script>
</head>
<body>
<ul id="comUL">
</ul>
<input type="button" id="loadBtn" value="加載按扭" />
那么怎么用js實現給這個按扭加一個方法呢？
其實很簡單，這句$("#comUL").append("<input type='button' id='btn1' value='按扭' />");里面再加一個onclick，給onclick里加一個方法。具體代碼如下：
<head>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//加載按扭
$("#loadBtn").click(function () {
$("#comUL").append("這是一個按扭");
$("#comUL").append("<input type='button' id='btn1' value='按扭' onclick='test()' />");
});
});
function test() {
alert("test");
}
</script>
</head>
<body>
<ul id="comUL">
</ul>
<input type="button" id="loadBtn" value="加載按扭" />
</body>
可是我們實際應用中，可能需要獲取按扭里面的屬性值，例如獲取id的屬性值，那怎么做？可以在onclick屬性的方法里把this只傳遞過去，像這樣onclick='test(this)' 具體代碼如下：
</head>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//加載按扭
$("#loadBtn").click(function () {
$("#comUL").append("這是一個按扭");
$("#comUL").append("<input type='button' id='btn1' value='按扭' onclick='test(this)' />");
});
});
function test(e) {
alert(e.id);
}
</script>
</head>
<body>
<ul id="comUL">
</ul>
<input type="button" id="loadBtn" value="加載按扭" />
<body>
可是我們實際上有時候覺的需要在test方法里使用jquery來操作比較方便，那么怎么做？這時我們可以把onclick屬性方法里傳遞過來的this進行封裝成jquery的this，就可以實現了用Jquery的操作。具體代碼如下：
</head>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//加載按扭
$("#loadBtn").click(function () {
$("#comUL").append("這是一個按扭");
$("#comUL").append("<input type='button' id='btn1' value='按扭' onclick='test(this)' />");
});
});
function test(e) {
alert($(e).attr('id'));
$(e).hide();
}
</script>
</head>
<body>
<ul id="comUL">
</ul>
<input type="button" id="loadBtn" value="加載按扭" />
</body>
好了，這個小問題就解決了！但我卻折騰好一會。