jquery 常用方法总结

jQuery顶级对象 缩写$    window.jQuery   window.$  
第一部分，找对象  
其本选择器  
    $("#id")  
    $(".class")  
    $("input")  
    复合选择器 $("#id,.class,input")  
层次选择器  
    $("div p") 包含选择器 div中所有的p 子元素 子子元素..  
    $("div > p")  子后代选择器 div中直接子后代  
    $("div + p")第一个兄弟p  
简单选择器  
    :first 选取第一个元素   $("div:first")   
    :last 选取最后一个元素  
    :not(选择器) 选取不满足“选择器”条件的元素$("div:not(#id)")  
    :even、:odd，选取索引是奇数、偶数的元素  
    :eq(索引序号)、:gt(索引序号)大于、:lt(索引序号)小于  
表单对像选择器  
    $(":input")匹配所有 input, textarea, select 和 button 元素  
    $(":text")匹配所有 匹配所有的单行文本框  
    $(":checkbox")匹配所有复选框  
    etc.....查看帮助  
表单对象属性选择器  
    $(":checkbox:checked")  
    $("select option:selected") 这个比较特别不不可以使用:  
    $("input:disabled")  
    $("input:enabled")  
内容选择器  
    $("div:contains('John')") 匹配包含给定文本的元素  
属性过滤选择器  
    $("div[id]")选取有id属性  
    $("div[title=test]")选取title属性为test的元素  
    $("div[title!=test]")选取title属性不为test的元素  
兄弟节点，子节点  
    .siblings()所有兄弟节点。没有自己  
    .next()下一个兄弟节点  
    .nextall()查找当前元素之后所有的同辈元素。  
    .nextAll("div")  
    .prev()之前的一个节点  
    .prevAll()  
    .end返回上一次jQ对像被破坏之前的状态  
    $("#d4").nextAll().css("background-color", "red").end().css("background-color", "black");  
    这时的end()返回的是$("#d4")对像  
    andself 我和我之后的节点  
    $("#d4").nextAll().andSelf().css("background-color", "red"); 我和我之后的兄弟节点变红  
    $("#d4").nextAll().andSelf().end().css("background-color", "red"); 我之后的兄弟节点变红  
 
第二部分，改变对像  
设置样式  
    css()  设置行内样式  设置标签的style属性  
    css({ "width": width, "height": height,"top":0,"left":0 }); 可以采用json格式  
    addClass("myclass")(不影响其他样式)    class="c1 c2"  
    removeClass("myclass")移除样式  
    toggleClass("myclass")如果存在样式则去掉样式，如果没有样式则添加样式 .例子，做开关灯的时候  
    hasClass("myclass")判断是否存在样式  
设置属性  
    attr("class","c1")   对class属性赋值  设置标签的所有属性  
设置内容或值  
    html()  text()  val()  
移动，创建，增加，删除dom对像  
    var $link = $("<a href='http://www.baidu.com'>百度</a>");动态创建jquery对象，只是在内存中  
    加到对像内  
    .append($link);向后追加  
    appendTo将一个元素移动到另一个元素的最后面  
    prepend向前追加  
    prependTo将一个元素移动到另一个元素的最前面  
 
    加到对像外  
    after 在结束标签之前添加元素  
    before在开始标签前添加元素  
 
    remove()  删除当前节点  
    empty() 清空当前节点之间的内容，节点保留  
 
第三部分，事件,方法  
    $(funtion(){}); 当面页加载完成时调用,只加载一次.一般写jq都写在里面  
    .each(funtion(){}) 每个对像都要执行的函数  
    .map(funtion(){})将一个数组中的元素转换到另一个数组中。.map([1,2,3]funtion(n){return n+1;}  
    .click(funtion(){})  
    .mouseover(funtion(){})   
    .mouseout(funtion(){})  
    .resize(funtion(){})  
    阻止事件冒泡  关于哪些事件冒泡，我没有记，反正，出问题了，你就用下面这个就OK，没必要记住  
    $("#d1").click(function(e){ e.stopPropagation();})  
    取消后续内容  
    e.preventDefault(); 这个我不知道，是什么意思，平时好像也没有用到  
      
    绑定事件 $("#id").bind("click":function(){},"mouseover": function () {  })  
    解除绑定 $("#id").unbind("click")  
    让事件只执行一次 $("#id").one("click",function(){})  //评分控件  
    合成事件hover  toggle  
    hover(enterfn,leavefn)  当鼠标放上时执行enterfn，当鼠标离开时执行leavefn  
    toggle(fn1,fn2) 当鼠标第一次点击时执行fn1，第二次点击执行fn2，以后依次执行  
 
    *事件参数  
    pageX、pageY  
    target 获得触发事件的元素 个人觉得没什么用，就相当于this  
    altKey、shiftKey、ctrlKey  
    keyCode 键盘码、 获取按下的是哪个键 $(document).keydown(funtion(e){alert(e.keyCode)});  
    altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which  
 
    其它常用的方法  
      
    focus();blur();得到焦点。失去焦点   [搜索文本框效果]  
      
    获取对像的宽度和高度  
    var width = $(对像).width();  
    var height = $(对像).height();  
 
第四部分,动画    复杂动画可以解决其它动画实现的效果，所以个人觉得，只须记住复杂动画就可以了  
    show()、hide()  
    toggle()  切换显示隐藏  
    slideDown、slideUp、 fadeOut、fadeIn  
      
    animate 复杂动画  $("img").animate({ "bottom": 0, "right": 0 }, 2000).animate({ "opacity": 0 }, 4000);  
    $("#d1").animate({ "left": 300, "top": 300 }, 5000).animate({ "width": 300, "height": 300, "opacity": 1 }, 3000, function () {  
 
                });  
    $("#d1").animate({ "left": "-=80" }, 1000);  
 
第五部分，自定义插件  
    $.extend({ "xhc1": function (x, y) {  
        return x > y ? x : y;  
    }  
    });  
    $.fn.extend({ "xhc1": function (x, y) {  
        alert(x > y ? x : y);  
 
    }  
    });  
    $(function () {  
        alert($.xhc1(6, 3));  对应第一种  
        $(":button").xhc1(6, 3); 对应第二种  
    });  
 
 
      
 
 
第六部分。调用插件  
cookie插件  
    <script src="jquery.cookie.js" type="text/javascript"></script>  
    var tim = $.cookie("tim");  
    $.cookie("tim", new Date(), { expires: 30 });  
 
验证表单插件  
    <script src="../../js/jquery.validate.js" type="text/javascript"></script>  
    具体看查JQValidate.txt  
 
提交表单插件  
    <script src="../../js/MyAjaxForm.js" type="text/javascript"></script>  
    $("#from1").ajaxSubmit({  
                            success: function (str) {  
                                if (str == "ok") {  
                                    if (confirm("增加成功，是否继续")) {  
                                        $(json.add.form).resetForm();  
                                        var id = $(".cpb").attr("title").replace("第", "").replace("页", "");  
                                        pagejson(json, id);  
                                    }  
                                    else {  
                                        var id = $(".cpb").attr("title").replace("第", "").replace("页", "");  
                                        $(json.add.divid).dialog('close');  
                                        pagejson(json, id);  
 
                                    }  
                                }  
 
                            },  
                            error: function (error) {  
                                alert(error);  
                            },  
                            url: json.add.addurl,  
                            type: "post"  
                        });  
时间插件  
    <script src="../../js/datapattern.js" type="text/javascript"></script>  
    (eval(data.replace(/\/Date(\d+)\//gi, "new Date($1)"))).pattern("yyyy-MM-dd")  
 
easyui插件  
    <link href="../../Content/themes/default/easyui.css" rel="stylesheet" type="text/css" />  
    <link href="../../Content/themes/icon.css" rel="stylesheet" type="text/css" />  
    <script src="../../js/jquery.easyui.min.js" type="text/javascript"></script>  
    <script src="../../js/easyui-lang-zh_CN.js" type="text/javascript"></script>  
    $(json.add.divid).dialog({  
            title: json.add.addTitle,  
            width: json.add.W,  
            height: json.add.H,  
            maximizable: true,  
            resizable: true,  
            modal: true,  
            border: false,  
            resizeable: true,  
            collapsible: true,  
            buttons: [{  
                text: '确定',  
                iconCls: 'icon-ok',  
                handler: function () {  
                    //验证表单  
                    if (frmflag.form()) {  
                        $(json.add.form).ajaxSubmit({  
                            success: function (str) {  
                                if (str == "ok") {  
                                    if (confirm("增加成功，是否继续")) {  
                                        $(json.add.form).resetForm();  
                                        var id = $(".cpb").attr("title").replace("第", "").replace("页", "");  
                                        pagejson(json, id);  
                                    }  
                                    else {  
                                        var id = $(".cpb").attr("title").replace("第", "").replace("页", "");  
                                        $(json.add.divid).dialog('close');  
                                        pagejson(json, id);  
 
                                    }  
                                }  
 
                            },  
                            error: function (error) {  
                                alert(error);  
                            },  
                            url: json.add.addurl,  
                            type: "post"  
                        });  
 
                    };  
                }  
            }, {  
                text: '关闭',  
                handler: function () {  
                    $(json.add.divid).dialog('close');  
                }  
            }]  
        });  
问题  
$(who).when(what)
 
$(*).get(0)  
 
    得到一个jq对像集合后，最好用 for 不要用forin  
    append和appendTo  
    appendTo的真正用途是。将一个现存的元素移动到一个元素中。  
    <p>I would like to say: </p><div id="foo"></div>   
    $("p").appendTo("#foo");  
    <div id="foo"><p>I would like to say: </p></div>   
    如果将一个元素追加进去的话，用append就可以了，虽然appendTo也可以。  
    ：的有简单选择器和表单选择器和表单对像选择器 还有一个内容选择器，$("div:contains('John')")   
    这里有一个特别的表单元素。select 不可以用: 只有他的option 里的属性才支持:  $("select option:selected") 

标签： seo 搜索

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。