当前位置: 代码迷 >> Web前端 >> jquery札记(常用技术)
  详细解决方案

jquery札记(常用技术)

热度:79   发布时间:2012-10-27 10:42:26.0
jquery笔记(常用技术)
1.选择器     
    (1)通配符:     
    $("input[id^='code']");//id属性以code开始的所有input标签     
    $("input[id$='code']");//id属性以code结束的所有input标签     
    $("input[id*='code']");//id属性包含code的所有input标签     
    (2)根据索引选择     
    $("tbody tr:even"); //选择索引为偶数的所有tr标签     
    $("tbody tr:odd");  //选择索引为奇数的所有tr标签     
    (3)获得jqueryObj下一级节点的input个数     
    jqueryObj.children("input").length;     
    (4)获得class为main的标签的子节点下所有<a>标签     
    $(".main > a");      
    (5)选择紧邻标签     
    jqueryObj.next("div");//获取jqueryObj标签的后面紧邻的一个div,nextAll获取所有     
    (6)根据索引选择     
    $("div").eq(0);//获取第一个div标签     
2.筛选器     
    (1)not     
    $("#code input:not([id^='code'])");//id为code标签内不包含id以code开始的所有input标签     
3.其他     
    (1)创建一个文本框     
    var inputObj = $("<input type='text'/>");     
    (2)取得文本框内容     
    jqueryObj.html();//html     
    jqueryObj.text();//纯文本     
    (3)取得标签属性值     
    jqueryObj.val();//取得标签value值     
    jqueryObj.attr("属性名如:name");//取得标签属性值     
    (4)向dom节点添加对象     
    inputObj.appendTo(jqueryObj); //将新创建的对象追加到jqueryObj里     
    inputObj.trigger("focus").trigger("select");//使文本框插入之后被选中  
    (5)改变CSS样式  
    inputObj.css({zIndex:3}); //给样式赋值  
    inputObj.css("zIndex");  
    (6)延迟     
    var timeoutId = setTimeout(function(){  },300);//延迟300毫秒,再执行函数     
    clearTimeout(timeoutId);//解除延迟,使未执行的函数不再执行     
    (7)定时间隔时间  
    var timerId = setInterval(function(){  },300);//每间隔300毫秒,再执行函数    
    clearInterval(timerId);//解除定时,使未执行的函数不再执行   
    (8)动画  
    inputObj.animate{"top":3,"left":3},300,function(){  });  
4.事件     
    //处理文本框上的键盘操作     
    jqueryObj.keyup(function(event){     
        var keyCode = event.which;//获取当前按下键盘的键值,回车键为13     
    }     
    mouseover(fn),mouseout(fn)//鼠标移进,移出      
5.效果     
    show(),toggle(),slideDown(),slideUp(),slideToggle(),fadeIn(),fadeOut(),fadeTo()     
6.工具函数     
    $('#someField').val($.trim($('#someField').val()));//消除空格,语法:$.trim(value)     
7.常用函数封装     
    (function($){     
        $.extend({     
            //操作多个多选框     
            controlAllCheckBox:function(tableId,isSelectAll){     
                if(tableId==undefined){     
                    throw new Error("tableId 不能为空");                 
                }     
                else{     
                    if(isSelectAll==undefined){     
                        throw new Error("isSelectAll 不能为空");                 
                    }     
                    else{     
                        if(isSelectAll==true){     
                            $("#"+tableId+" :checkbox").each(function(){     
                                $(this).attr('checked','true');     
                            })     
                        }     
                        else{     
                            $("#"+tableId+" :checkbox").each(function(){     
                                $(this).attr('checked','');     
                            })     
                        }     
                    }     
                }     
            },     
            //取得选中的checkbox中的id     
            getCheckedIds:function(tableId){     
                var checkboxs = $("#"+tableId+" :checkbox:checked");     
                if(checkboxs.size()==0){     
                    throw new Error("没有选中记录");               
                }     
                else {     
                    var ids = "";     
                    checkboxs.each(function(){     
                        if(ids==''){     
                            ids+=$(this).attr('id');     
                        }     
                        else{     
                            ids+=","+$(this).attr('id');     
                        }     
                    })     
                    return ids;     
                }     
            }     
        })     
    })(jQuery);  
  相关解决方案