jQuery 常用方法(一)
1.動態新增元素:
$("#parentid").append("<img id='oImg' class='z-index' src='imgURL'>");//父元素#parentid新增子元素#oImg
2.給新增的元素新增響應事件:
$(selector).delegate(childSelector,event,data,function):
引數介紹:
childSelector 必需。規定要附加事件處理程式的一個或多個子元素。
event 必需。規定附加到元素的一個或多個事件。由空格分隔多個事件值。必須是有效的事件。
data 可選。規定傳遞到函式的額外資料。
function 必需。規定當事件發生時執行的函式。
舉例:
$("#parentid").delegate("#oImg","click",function(){ ...... });
3.響應事件:jQuery版本1.7以後學習jQuery
$("#id").on('event_name',function(){.......});//event_name 可以檢視標籤支援的事件表
4.CheckBox:
判斷選擇:
方法一:
if ($("#checkbox-id").get(0).checked) {
// do something
}
方法二:
if($('#checkbox-id').is(':checked')) {
// do something
}
方法三:
if ($('#checkbox-id').attr('checked')) {
// do something
}
5.動態處理頁面:
$.ajax({
type:'GET',//提交方法
data:{...},//資料,json格式
url:'',//伺服器具體處理函式,絕對地址
success:function(data){//伺服器成功返回的json資料
varobj = eval("("+data+")");//解析json資料,為啥加(),為了避免將資料當成一個語句塊。
//不過使用它容易產生系統安全問題。不過也得看瀏覽器設定。還有一種方法使用Function物件完成
//舉例:var json='{"name":"CJ","age":18}'; data =(new Function("","return "+json))();
//不過如果設定了type為json,則返回的資料就是json物件。
}
});
具體詳情檢視:點選開啟連結
6.jquery對select標籤的操作:
根據text值來設定option:
方法一:
- var street = 'value';
$('#streetid option:contains('+ street+')').each(function(){//contains方法判斷子串匹配
if($(this).text()== street){
$(this).attr('selected',true);
}
});
- 方法二:
$('#test option').filter(function(){return $(this).text()=="value";}).attr("selected",true);
- $("#mySelect").change(function(){//code...}); //select選中項改變時觸發
- // 獲取select值
- var text=$("#mySelect").find("option:selected").text(); //獲取Select選中項的Text
- var value=$("#mySelect").val(); //獲取Select選中項的Value
- var value=$("#mySelect option:selected").attr("value"); //獲取Select選中項的Value
- var index=$("#mySelect").get(0).selectedIndex; //獲取Select選中項的索引值,從0開始
- var index=$("#mySelect option:selected").index(); //獲取Select選中項的索引值,從0開始
- var maxIndex=$("#mySelect option:last").index();//獲取Select最大索引值,從0開始
- $("#mySelect").prepend("<option value='value'>text</option>"); //Select第一項前插入一項
- // 設定select值
- //根據索引設定選中項
- $("#mySelect").get(0).selectedIndex=index;//index為索引值
- //根據value設定選中項
- $("#mySelect").attr("value","newValue");
- $("#mySelect").val("newValue");
- $("#mySelect").get(0).value = value;
- //根據text設定對應的項為選中項
- var count=$("#mySelect option").length;
- for(var i=0;i<count;i++)
- {
- if($("#mySelect").get(0).options[i].text == text)
- {
- $("#mySelect").get(0).options[i].selected = true;
- break;
- }
- }
- // 清空select
- $("#mySelect").empty();