jquery 02筛选选择器-表单属性jquery dom

一、筛选选择器-表单属性

: enabled -->有效 : disabled -->禁用: checked --->选中的(radio和checkbox): selected--->选中的(select)

二、jquery dom

1、创建节点$("<p>hello</p>")-->doucument.createElement("<p>hello</p>")2、添加内部插入append(content|fn) :向每个匹配的元素内部追加内容。appendTo(content) ：把所有匹配的元素追加到另一个指定的元素元素集合中。prependTo(content) 外部插入after(content|fn)  :后面 before(content|fn) :前面insertAfter(content) insertBefore(content) 删除empty() 清空，本身元素在remove([expr]) ；删除所有

开发案例

代码实现:$("#add").click(function() {      var aa=$("#sel1").val();     if(aa==null){//值为空         alert("请先选择一项！！")     }else{         $("#sel2").append("<option>"+aa+"</option>");//不为空进行添加         $("option:selected").remove();//删除且连根         //$("option:selected").empty();//清空     }    })    $("#addall").click(function() {        //alert($("#sel1").html());//弹出其html内容    $("#sel2").append($("#sel1").html());    //$("#sel1").remove(); 此时不能用remove,因为其是连根删除    $("#sel1").empty();//只是清空其里面内容    })    $("#remove").click(function() {         var aa=$("#sel2").val();         if(aa==null){//值为空             alert("请先选择一项！！")         }else{             $("#sel1").append("<option>"+aa+"</option>");//不为空进行添加             $("option:selected").remove();//删除且连根             //$("option:selected").empty();//清空         }    })    $("#removeall").click(function() {        $("#sel1").append($("#sel2").html());        $("#sel2").empty();//只是清空其里面内容    })二、重点掌握  全选\反选、全不选\ 删除所选 案例$(function(){$("#selall").click(function(){//全选按钮    var aa=$(":checkbox[name='cm']");    for(i=0;i<aa.length;i++){        aa[i].checked=true;//把对应的选择设为true        //aa[i].attr("checked",true)    }})$("#selno").click(function(){//全不选按钮    var aa=$(":checkbox[name='cm']");    for(i=0;i<aa.length;i++){        aa[i].checked=false;//把对应的选择设为false    }})$("#selreverse").click(function(){//反选    var aa=$(":checkbox[name='cm']");    for(i=0;i<aa.length;i++){        aa[i].checked=!aa[i].checked;//把原来的checked取反    }})$("#sel").click(function(){//点中用户编号复选 框 的id -->sel    var aa=$(":checkbox[name='cm']");    /*   功能是实现反选    for(i=0;i<aa.length;i++){        aa[i].checked=!aa[i].checked;//把原来的checked取反    }*/    if($("#sel").attr("checked")){//功能：实现当前复选框 选中则其下的复选框都选中        for(i=0;i<aa.length;i++){            aa[i].checked=true;        }    }else{//实现当前复选框 不选则其下的复选框都不选        for(i=0;i<aa.length;i++){            aa[i].checked=false;        }    }})$("#delall").click(function(){//批量删除    var aa=$(":checkbox[name='cm']");    var del=""; //给个初值    for(i=0;i<aa.length;i++){        if(aa[i].checked){//弹出选中的复选框的值            del+=","+aa[i].value; //del最后样式为:  ,1,3,5        }    }    if(del==""){//说明上面的if语句没有执行,即del值没有变化        alert("请至少选择要删除的1项！！！");    }else{        if(confirm("确认删除后面的选项吗?"+del.substring(1))){            location="DelManyServlet?sid="+del.substring(1);        }    }})$("#delone").click(function(){//删除1个    var aa=$(":checkbox[name='cm']");    var del="",a=0; //给个初值    for(i=0;i<aa.length;i++){        if(aa[i].checked){//弹出选中的复选框的值            del+=","+aa[i].value; //del最后样式为:  ,1,3,5            a++;        }    }    if(del==""){//说明上面的if语句没有执行,即del值没有变化        alert("请至少选择要删除的1项！！！");    }else if(a>1){        alert("1次只能选择1项删除！！！");    }else{        if(confirm("确认删除后面的选项吗?"+del.substring(1))){            location="DelServlet?id="+del.substring(1);        }    }})$("#updateone").click(function(){//修改    var aa=$(":checkbox[name='cm']");    var del="",a=0; //给个初值    for(i=0;i<aa.length;i++){        if(aa[i].checked){//弹出选中的复选框的值            del+=","+aa[i].value; //del最后样式为:  ,1,3,5            a++;        }    }    if(del==""){//说明上面的if语句没有执行,即del值没有变化        alert("请至少选择要修改的1项！！！");    }else if(a>1){        alert("1次只能选择1项修改！！！");    }else{        if(confirm("确认修改后面的选项吗?"+del.substring(1))){            location="ToUpdateServlet?id="+del.substring(1);        }    }})})