jquery的使用,jquery使用
js及jquery運行機制個人總結:當一個jsp程式運行時它是由上自下啟動並執行,當將一個觸發事件放在<body>標籤中時
這時需要注意的是所觸發的事件必須放在,事件來源(觸發事件的地方)之下。因為如果不放在下面程式自上而下的運行時
會將所觸發的事件提前運行,從而導致觸發事件來源時事件不起作用的情況。
例如類似案例如下:
script type="text/javascript">
$("#down").bind("click",function(){
var fal=$("#check").attr("checked");
if(fal){
return true;
}else{
alert("協議未選中!");
return false;
}
});
</script>
<div ><input type="checkbox" id="check" /><b>我已閱讀樂教協議</b><br/><a href="" id="down" onclick=""> 下一步</a></div>
從以上案例可以看出事件在事件來源之上,所以程式運行之後。當你再去觸發事件來源時,事件是不會調用的。
但是如果將事件放在事件來源下面則可以調用。
案例如下:
<div ><input type="checkbox" id="check" /><b>我已閱讀樂教協議</b><br/><a href="" id="down" onclick=""> 下一步</a></div>
script type="text/javascript">
$("#down").bind("click",function(){
var fal=$("#check").attr("checked");
if(fal){
return true;
}else{
alert("協議未選中!");
return false;
}
});
</script>
總結:從上面的案例可以看出對於jquery中有的事件寫在<head>中,為什麼無法調用的原因。
這就是為什麼寫在<head>標籤中jquery事件,必須寫在($(document).ready(function(){
// 在這裡寫你的代碼...
});)之中,其原因還是因為載入表單完畢後呼叫事件就類似於將事件放在事件來源之後。
------------------------------------------------
禁用所有的超連結:
$(function(){
$("a").bind("click",function(){return false;});
});
禁用指定的超連結:
$(function(){
$("#id名").bind("click",function(){return false;});
});
----------------------------------------------
禁用文字框和按鈕:$("#id名").attr("disabled",true);當為true時為禁用
擷取多選框的選中狀態:$("#id名").attr("checked");
--------------------------------------------
----------------------------------------------------------------------
失去焦點調用方法:
$("#id名").blur(function () {} );
注意:當使用失去焦點調用方法時,如果想擷取文字框的值必須將擷取值的方法,放在失去焦點方法內才能擷取
例如:成功擷取
<script type="text/javascript">
$("#bb").blur(function(){
var con=$("#bb").val();//jquery擷取文字框值的方法
alert(con.length);
});
</script>
-----------------------------------
不能成功擷取案例如下:
<script type="text/javascript">
var con=$("#bb").val();//jquery擷取文字框值的方法
$("#bb").blur(function(){
alert(con.length);
});
</script>
————————————————————————————————
注意:當使用jquery事件時,將<script type="text/javascript"></script>放在<head></head>和<body></body>中是有區別的
例如放在<head></head>中則需要使用jquery中的載入表單完觸發事件($(document).ready(function(){});)
如果放在<body>標籤中是不需要表單載入事件的,但必須放在觸發事件來源(觸發事件的地方)的下面;
在<head></head>標籤中使用案例如下:
<script type="text/javascript">
$(document).ready(function(){
$("#hh").blur(function(){
var con=$("#hh").val();
alert(con.length);
});
});
</script>
-------------------------
在<body></body>標籤中使用案例如下:
<script type="text/javascript">
$("#bb").blur(function(){
var con=$("#bb").val();
alert(con.length);
});
</script>
-----------------------------
---------------------------------------
擷取文字框的值:$("#id名").val();
擷取文字框的字串長度:擷取的值.length;
--------------------------------
載入完表單觸發的事件:(注意:在jquery中使用某些事件時必須先要載入表單才能觸發其事件)
$(document).ready(function(){
// 在這裡寫你的代碼...
});