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();